*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* =========================================================
   44OS ICON SYSTEM
   SVG masks driven by currentColor. Each icon: apply .os-icon
   plus a modifier class that points --os-icon-url at the file.
   The icon's color follows the parent's text color, so it
   theme-adapts automatically. Size via width/height or
   size modifiers.
   ========================================================= */
.os-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--os-icon-url);
          mask-image: var(--os-icon-url);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Private Team workspace -------------------------------------------------- */
.team-page {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 32px clamp(20px, 4vw, 54px) 96px;
}

.admin-status-stack { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.team-hub-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}
.team-hub-grid-admin {
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.team-hub-card {
  display: flex;
  min-height: 250px;
  padding: 28px;
  flex-direction: column;
  color: #fff;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease;
}
.team-hub-card:hover,
.team-hub-card:focus-visible { transform: translateY(-2px); border-color: rgba(96,165,250,.6); }
.team-hub-card > span { color: #60a5fa; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.team-hub-card h2 { margin: 18px 0 10px; font-size: 28px; }
.team-hub-card p { margin: 0; color: rgba(255,255,255,.62); line-height: 1.55; }
.team-hub-card strong { margin-top: auto; padding-top: 26px; font-size: 14px; }

.team-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px,1.5fr) minmax(160px,1fr) minmax(160px,1fr) auto;
  align-items: end;
  gap: 14px;
  margin: 28px 0 30px;
  padding: 18px;
}
.team-filter-bar-compact { grid-template-columns: minmax(220px,1.5fr) minmax(160px,1fr) auto; }
.team-filter-bar label { display: grid; gap: 7px; min-width: 0; }
.team-filter-bar label > span { color: rgba(255,255,255,.62); font-size: 13px; font-weight: 650; }

.team-directory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.team-creator-card {
  display: grid;
  grid-template-columns: 88px minmax(0,1fr);
  gap: 18px;
  padding: 20px;
  color: #fff;
  text-decoration: none;
}
.team-creator-card:hover,
.team-creator-card:focus-visible { border-color: rgba(96,165,250,.6); }
.team-creator-card img,
.team-directory-avatar { width: 88px; height: 88px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; object-fit: cover; }
.team-directory-avatar { display: grid; place-items: center; background: rgba(96,165,250,.12); font-size: 28px; font-weight: 700; }
.team-creator-card h2 { margin: 2px 0 5px; font-size: 20px; }
.team-creator-card p { margin: 0 0 10px; color: rgba(255,255,255,.56); font-size: 14px; }
.team-creator-card small { display: -webkit-box; margin: 0 0 12px; overflow: hidden; color: rgba(255,255,255,.7); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.team-creator-card strong { color: #60a5fa; font-size: 12px; }

.team-release-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px 18px; }
.team-release-card { min-width: 0; color: #fff; text-decoration: none; }
.team-release-art { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.04); }
.team-release-art img { width: 100%; height: 100%; object-fit: cover; }
.team-release-art-empty { display: grid; width: 100%; height: 100%; place-items: center; }
.team-release-art-empty { color: rgba(255,255,255,.35); font-size: 32px; font-weight: 800; }
.team-release-card:hover .team-release-art,
.team-release-card:focus-visible .team-release-art { border-color: rgba(96,165,250,.6); }
.team-release-card h2 { margin: 13px 3px 3px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.team-release-card p { margin: 0 3px 5px; overflow: hidden; color: rgba(255,255,255,.58); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.team-release-card small { margin: 0 3px; color: rgba(255,255,255,.42); font-size: 12px; }

.team-brand-surface {
  --brand-paper: #f5f5f0;
  --brand-ink: #1a1a1a;
  width: 100%;
  min-height: 0;
  margin: 24px 0 80px;
  overflow: clip;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  background: var(--brand-paper);
  color: var(--brand-ink);
  box-shadow: 0 30px 80px rgba(0,0,0,.26);
  font-family: 'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif;
}
.team-brand-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(26,26,26,.12);
}
.team-brand-download {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 19px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-ink);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 680;
  cursor: pointer;
}
.team-brand-download:disabled { cursor: wait; opacity: .65; }
.team-brand-download:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
.team-brand-kit-message { margin: 0; padding: 12px 32px; border-bottom: 1px solid rgba(26,26,26,.1); background: rgba(96,165,250,.1); font-size: 13px; }
.team-brand-layout { display: block; padding: 64px clamp(28px,6vw,84px) 100px; }
.team-brand-document { width: 100%; min-width: 0; }
.team-brand-document h1 { max-width: none; margin: 0 0 18px; font-size: clamp(48px,7vw,82px); font-weight: 730; letter-spacing: -.045em; line-height: .98; }
.team-brand-document h1 + p { max-width: none; margin-bottom: 48px; padding-bottom: 30px; border-bottom: 1px solid rgba(26,26,26,.14); color: rgba(26,26,26,.52); font-size: 14px; }
.team-brand-document h2 { margin: 90px 0 22px; padding-top: 10px; font-size: clamp(32px,4vw,48px); font-weight: 700; letter-spacing: -.035em; line-height: 1.03; scroll-margin-top: 28px; }
.team-brand-document h3 { margin: 42px 0 14px; font-size: 22px; letter-spacing: -.02em; }
.team-brand-document p,
.team-brand-document li { max-width: 980px; font-size: 17px; line-height: 1.65; }
.team-brand-document p { margin: 0 0 22px; }
.team-brand-document ul { margin: 0 0 26px; padding-left: 22px; }
.team-brand-document li { margin: 8px 0; padding-left: 4px; }
.team-brand-document code { padding: .12em .35em; border-radius: 5px; background: rgba(26,26,26,.07); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .9em; }
.team-brand-logo-showcase { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; width: min(980px,100%); margin: 8px 0 34px; }
.team-brand-logo-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(26,26,26,.14); border-radius: 20px; }
.team-brand-logo-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; padding: clamp(42px,8vw,92px); object-fit: contain; }
.team-brand-logo-card-dark { border-color: #000; background: #000; color: #fff; }
.team-brand-logo-card-light { background: #fff; color: #000; }
.team-brand-logo-card figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px 18px; border-top: 1px solid rgba(128,128,128,.25); font-size: 13px; }
.team-brand-logo-card figcaption span { opacity: .58; text-align: right; }
.team-brand-dev-reference {
  width: min(1120px,100%);
  margin: 8px 0 42px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  background: #0f1110;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  color: #f4f3ee;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.team-brand-dev-reference > header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.team-brand-dev-reference > header span { font-size: 13px; font-weight: 760; }
.team-brand-dev-reference > header strong { color: rgba(255,255,255,.48); font-size: 11px; font-weight: 600; }
.team-brand-dev-section { padding: 24px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.team-brand-dev-reference .team-brand-dev-section h3 { margin: 0 0 18px; color: #f4f3ee; font-size: 13px; font-weight: 650; letter-spacing: 0; }
.team-brand-dev-reference code { padding: 0; background: transparent; color: rgba(255,255,255,.46); font: 400 10px/13px ui-monospace,SFMono-Regular,Menlo,monospace; }
.team-brand-dev-accents { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.team-brand-dev-accents > div { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 2px 10px; align-items: center; min-width: 0; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.03); }
.team-brand-dev-accents i { grid-row: 1 / 3; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.team-brand-dev-accents strong { min-width: 0; font-size: 12px; }
.team-brand-dev-materials { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.team-brand-dev-material { display: grid; min-width: 0; gap: 11px; }
.team-brand-dev-material > span { display: block; width: 100%; height: 108px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; }
.team-brand-dev-material > div { display: grid; gap: 3px; padding: 0 2px; }
.team-brand-dev-material strong { font-size: 13px; }
.team-brand-dev-material small { color: rgba(255,255,255,.48); font-size: 10px; line-height: 13px; }
.team-brand-dev-material-environment > span { background: #07080d; }
.team-brand-dev-material-shell > span { background: rgba(28,30,27,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.team-brand-dev-material-glass > span { background: rgba(255,255,255,.03); box-shadow: none; }
.team-brand-dev-material-paper > span { background: #1c1e1b; box-shadow: 0 20px 54px rgba(0,0,0,.38); }
.team-brand-dev-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-bottom: 1px solid rgba(255,255,255,.1); }
.team-brand-dev-columns .team-brand-dev-section { border-bottom: 0; }
.team-brand-dev-columns .team-brand-dev-section + .team-brand-dev-section { border-left: 1px solid rgba(255,255,255,.1); }
.team-brand-dev-radii { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.team-brand-dev-radii span { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(96,165,250,.7); background: rgba(96,165,250,.12); color: rgba(255,255,255,.72); font-size: 10px; }
.team-brand-dev-radii .team-brand-dev-radius-pill { width: 70px; border-radius: 999px; }
.team-brand-dev-elevation { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.team-brand-dev-elevation > div { display: grid; min-height: 92px; align-content: end; gap: 3px; padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: #1c1e1b; }
.team-brand-dev-elevation .team-brand-dev-raised { box-shadow: 0 20px 54px rgba(0,0,0,.76); transform: translateY(-2px); }
.team-brand-dev-elevation strong { font-size: 12px; }
.team-brand-dev-elevation small { color: rgba(255,255,255,.46); font-size: 10px; }
.team-brand-dev-type { border-bottom: 0; }
.team-brand-dev-type > div { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 18px; align-items: baseline; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1); }
.team-brand-dev-type > div > span { color: rgba(255,255,255,.46); font-size: 10px; }
.team-brand-dev-type > div > strong { color: #f4f3ee; }
.team-brand-dev-type-page { font: 700 26px/32px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.team-brand-dev-type-section { font: 700 22px/26px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.team-brand-dev-type-card { font: 600 13px/16px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.team-brand-dev-type-body { font: 400 13px/18px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.team-brand-dev-type-meta { font: 400 10px/13px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.team-brand-loading { min-height: 60vh; padding-top: 100px; }
.team-brand-error { width: min(720px,calc(100% - 40px)); margin: 60px auto; padding: 22px; border: 1px solid rgba(255,100,100,.4); border-radius: 18px; color: #fff; }

@media (max-width: 980px) {
  .team-hub-grid { grid-template-columns: 1fr; }
  .team-hub-card { min-height: 190px; }
  .team-filter-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .team-directory-grid { grid-template-columns: 1fr; }
  .team-release-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .team-page { padding: 18px 16px 96px; }
  .team-filter-bar { grid-template-columns: 1fr; }
  .team-filter-bar .os-button { width: 100%; }
  .team-release-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 12px; }
  .team-release-card h2 { font-size: 14px; }
  .team-creator-card { grid-template-columns: 62px minmax(0,1fr); gap: 14px; padding: 16px; }
  .team-creator-card img,
  .team-directory-avatar { width: 62px; height: 62px; }
  .team-brand-surface { width: 100%; margin: 0 0 70px; border-right: 0; border-left: 0; border-radius: 0; }
  .team-brand-top { align-items: stretch; padding: 16px; }
  .team-brand-download { width: 100%; }
  .team-brand-kit-message { padding: 12px 18px; }
  .team-brand-layout { display: block; padding: 38px 22px 76px; }
  .team-brand-document h1 { font-size: 44px; }
  .team-brand-document h1 + p { margin-bottom: 36px; padding-bottom: 24px; }
  .team-brand-document h2 { margin-top: 68px; font-size: 34px; }
  .team-brand-document p,
  .team-brand-document li { font-size: 16px; }
  .team-brand-logo-showcase { grid-template-columns: 1fr; gap: 12px; }
  .team-brand-logo-card img { padding: 54px; }
  .team-brand-dev-reference { border-radius: 20px; }
  .team-brand-dev-accents,
  .team-brand-dev-materials { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .team-brand-dev-columns { grid-template-columns: 1fr; }
  .team-brand-dev-columns .team-brand-dev-section + .team-brand-dev-section { border-top: 1px solid rgba(255,255,255,.1); border-left: 0; }
  .team-brand-dev-type > div { grid-template-columns: 82px minmax(0,1fr); gap: 8px 12px; }
  .team-brand-dev-type > div code { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .team-hub-card { transition: none; }
}

/* Admin Control Center. Main administration remains a single-column
   workspace; only compact summary cards use a responsive grid. */
.admin-page { width: 100%; max-width: 1240px; margin: 0 auto; padding-bottom: 72px; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.admin-stat-card { min-height: 116px; padding: 18px; }
.admin-stat-card > * { display: block; }
.admin-stat-label { color: var(--os-color-ink-secondary); font-size: 12px; font-weight: 650; }
.admin-stat-card strong { margin-top: 12px; color: var(--os-color-ink); font-size: 28px; letter-spacing: -.03em; }
.admin-stat-detail { margin-top: 3px; color: var(--os-color-ink-secondary); font-size: 12px; }
.admin-stat-card-attention { border-color: color-mix(in srgb, #d5a84d 48%, var(--os-color-hairline)); }
.admin-hub-row { text-decoration: none; }
.admin-hub-row-meta { display: inline-flex; align-items: center; gap: 13px; color: var(--os-color-ink-secondary); font-size: 13px; }
.admin-hub-row-meta span { color: var(--os-color-accent); font-size: 22px; }
.admin-system-status-list { padding: 6px 20px; }
.admin-system-status-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--os-color-hairline); }
.admin-system-status-row:last-child { border-bottom: 0; }
.admin-system-status-row > span:first-child { display: grid; gap: 3px; }
.admin-system-status-row strong { color: var(--os-color-ink); font-size: 13px; }
.admin-system-status-row small { color: var(--os-color-ink-secondary); font-size: 11px; }

.admin-filter-bar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, 210px) auto; align-items: end; gap: 12px; margin-bottom: 20px; padding: 16px; }
.admin-filter-bar-content { grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(130px, 180px)) auto; }
.admin-filter-bar label { display: grid; gap: 6px; min-width: 0; }
.admin-filter-bar label > span { color: var(--os-color-ink-secondary); font-size: 11px; font-weight: 650; }
.admin-record-list { overflow: hidden; padding: 0 18px; }
.admin-record-heading, .admin-record-row { display: grid; align-items: center; gap: 16px; }
.admin-record-heading { min-height: 38px; border-bottom: 1px solid var(--os-color-hairline); color: var(--os-color-ink-secondary); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.admin-record-row { min-height: 76px; border-bottom: 1px solid var(--os-color-hairline); color: var(--os-color-ink-secondary); font-size: 12px; text-decoration: none; transition: background-color .15s ease; }
.admin-record-row:last-child { border-bottom: 0; }
.admin-record-row:focus-visible { outline: 2px solid var(--os-color-accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .admin-record-row:hover { background: color-mix(in srgb, var(--os-color-accent) 6%, transparent); } }
.admin-people-grid { grid-template-columns: minmax(280px, 1.5fr) minmax(100px, .5fr) minmax(125px, .55fr) minmax(70px, .25fr); }
.admin-content-grid { grid-template-columns: minmax(230px, 1.25fr) minmax(150px, .75fr) minmax(105px, .45fr) minmax(105px, .45fr) minmax(125px, .55fr); }
.admin-person-cell, .admin-content-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-person-cell > span:last-child, .admin-content-cell > span:last-child, .admin-row-secondary { display: grid; gap: 4px; min-width: 0; }
.admin-person-cell strong, .admin-content-cell strong { overflow: hidden; color: var(--os-color-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.admin-person-cell small, .admin-content-cell small, .admin-row-secondary small { overflow: hidden; color: var(--os-color-ink-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-avatar { display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid var(--os-color-hairline); border-radius: 50%; object-fit: cover; }
.admin-avatar-empty { background: color-mix(in srgb, var(--os-color-accent) 12%, var(--os-color-surface)); color: var(--os-color-accent); font-size: 15px; font-weight: 700; }
.admin-content-art, .admin-detail-art { display: block; flex: 0 0 auto; border: 1px solid var(--os-color-hairline); border-radius: 8px; background-position: center; background-size: cover; }
.admin-content-art { width: 44px; height: 44px; }
.admin-content-art-empty { background: color-mix(in srgb, var(--os-color-ink-secondary) 8%, var(--os-color-surface)); }
.admin-row-count { display: inline-flex; align-items: center; justify-content: space-between; gap: 9px; }
.admin-row-count > span { color: var(--os-color-accent); font-size: 21px; }
.admin-row-count > .admin-row-missing-date { color: var(--os-color-ink-secondary); font-size: 11px; }
.admin-record-status { display: inline-flex; width: fit-content; align-items: center; border: 1px solid var(--os-color-hairline); border-radius: 999px; padding: 5px 8px; color: var(--os-color-ink-secondary); background: color-mix(in srgb, var(--os-color-surface) 80%, transparent); font-size: 10px; font-weight: 700; line-height: 1; text-transform: capitalize; white-space: nowrap; }
.admin-record-status-success { border-color: color-mix(in srgb, #5fbd85 42%, var(--os-color-hairline)); color: #75c997; }
.admin-record-status-warning { border-color: color-mix(in srgb, #d5a84d 48%, var(--os-color-hairline)); color: #dfb968; }
.admin-record-status-danger { border-color: color-mix(in srgb, #d78668 48%, var(--os-color-hairline)); color: #e09a80; }
.admin-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 18px; }
.admin-pager > :last-child { justify-self: end; }
.admin-pager > span { color: var(--os-color-ink-secondary); font-size: 12px; }

.admin-back-row { margin-bottom: 12px; }
.admin-back-row a { color: var(--os-color-ink-secondary); font-size: 12px; text-decoration: none; }
.admin-detail-card, .admin-review-card, .admin-copy-card { padding: 22px; }
.admin-person-hero, .admin-content-hero { display: flex; align-items: center; gap: 16px; }
.admin-person-hero > div, .admin-content-hero > div { flex: 1 1 auto; min-width: 0; }
.admin-person-hero h2, .admin-content-hero h2 { margin: 0; color: var(--os-color-ink); font-size: 21px; }
.admin-person-hero p, .admin-content-hero p { margin: 5px 0 0; color: var(--os-color-ink-secondary); font-size: 12px; }
.admin-detail-art { width: 96px; height: 96px; border-radius: 12px; }
.admin-detail-eyebrow { display: block; margin-bottom: 5px; color: var(--os-color-ink-secondary); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.admin-inline-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.admin-fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; margin: 24px 0; }
.admin-fact-grid div { display: grid; gap: 5px; min-width: 0; }
.admin-fact-grid dt { color: var(--os-color-ink-secondary); font-size: 10px; font-weight: 650; }
.admin-fact-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--os-color-ink); font-size: 12px; }
.admin-fact-grid a { color: var(--os-color-accent); }
.admin-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 17px; border-top: 1px solid var(--os-color-hairline); }
.admin-detail-note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--os-color-hairline); color: var(--os-color-ink-secondary); font-size: 12px; line-height: 1.5; }
.admin-review-description { margin: 0 0 18px; color: var(--os-color-ink-secondary); font-size: 13px; line-height: 1.6; }
.admin-health-list, .admin-history-list { padding: 4px 20px; }
.admin-health-row, .admin-history-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--os-color-hairline); }
.admin-health-row:last-child, .admin-history-row:last-child { border-bottom: 0; }
.admin-health-row strong { color: var(--os-color-ink); font-size: 12px; text-transform: capitalize; }
.admin-health-row span { color: var(--os-color-ink-secondary); font-size: 12px; text-align: right; }
.admin-history-row > div { display: grid; gap: 4px; }
.admin-history-row strong { color: var(--os-color-ink); font-size: 12px; text-transform: capitalize; }
.admin-history-row p { margin: 0; color: var(--os-color-ink-secondary); font-size: 12px; line-height: 1.45; }
.admin-history-row > span, .admin-history-row > time { display: grid; gap: 3px; color: var(--os-color-ink-secondary); font-size: 11px; text-align: right; }
.admin-history-row time { color: var(--os-color-ink-secondary); font-size: 11px; }
.admin-copy-card { display: grid; gap: 18px; }
.admin-copy-card p { margin: 0; color: var(--os-color-ink-secondary); font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.admin-copy-card p strong { display: block; margin-bottom: 5px; color: var(--os-color-ink); font-size: 11px; }
.admin-detail-groups { display: grid; gap: 12px; }
.admin-detail-group { padding: 18px 20px; }
.admin-detail-group h3 { margin: 0 0 8px; color: var(--os-color-ink); font-size: 14px; }
.admin-detail-group > p { color: var(--os-color-ink-secondary); font-size: 12px; }
.admin-detail-group-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--os-color-hairline); }
.admin-detail-group-row:last-child { border-bottom: 0; }
.admin-detail-group-row strong { color: var(--os-color-ink); font-size: 12px; }
.admin-detail-group-row span { color: var(--os-color-ink-secondary); font-size: 11px; text-align: right; }
.admin-detail-group-row > div { display: grid; gap: 3px; min-width: 0; }
.admin-detail-group-row > div span { text-align: left; }

.admin-log-list { display: grid; gap: 10px; }
.admin-log-entry { padding: 17px 18px; }
.admin-log-entry header, .admin-log-entry footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-log-entry header > span { display: flex; align-items: center; gap: 9px; }
.admin-log-entry header strong { color: var(--os-color-ink); font-size: 13px; }
.admin-log-entry time, .admin-log-entry footer { color: var(--os-color-ink-secondary); font-size: 10px; }
.admin-log-entry code { display: block; margin-top: 12px; color: var(--os-color-accent); font-size: 12px; overflow-wrap: anywhere; }
.admin-log-entry p { margin: 10px 0; color: var(--os-color-ink-secondary); font-size: 12px; line-height: 1.5; }
.admin-log-entry footer { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--os-color-hairline); }
.admin-log-entry footer button { border: 0; background: transparent; color: var(--os-color-accent); cursor: pointer; font: inherit; }

.admin-dialog-layer { position: fixed; z-index: 2300; inset: 0; display: grid; place-items: center; padding: 20px; }
.admin-dialog-scrim { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0,0,0,.64); }
.admin-dialog { position: relative; width: min(100%, 520px); padding: 22px; border: 1px solid var(--os-paper-border); background: var(--os-paper-bg); box-shadow: var(--os-shadow-4); }
.admin-dialog h2 { margin: 0; color: var(--os-color-ink); font-size: 20px; }
.admin-dialog > p { margin: 8px 0 20px; color: var(--os-color-ink-secondary); font-size: 13px; line-height: 1.55; }
.admin-dialog-field { display: grid; gap: 7px; margin-top: 13px; }
.admin-dialog-field span { color: var(--os-color-ink-secondary); font-size: 11px; font-weight: 650; }
.admin-dialog-field textarea, .admin-dialog-field input { width: 100%; border: 1px solid var(--os-color-hairline); border-radius: 9px; padding: 11px 12px; outline: none; background: var(--os-color-surface); color: var(--os-color-ink); font: inherit; }
.admin-dialog-field textarea { min-height: 100px; resize: vertical; }
.admin-dialog-field textarea:focus, .admin-dialog-field input:focus { border-color: var(--os-color-accent); }
.admin-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }

@media (max-width: 900px) {
  .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-content-grid { grid-template-columns: minmax(220px, 1.2fr) minmax(135px, .7fr) minmax(95px, .45fr) minmax(95px, .45fr); }
  .admin-content-grid > :nth-child(5) { display: none; }
  .admin-filter-bar-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-filter-bar-content > button { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 700px) {
  .admin-filter-bar,
.admin-filter-bar-content { grid-template-columns: 1fr; }
  .admin-filter-bar-content > button { grid-column: auto; }
  .admin-record-heading { display: none; }
  .admin-record-list { padding: 0 14px; }
  .admin-record-row { position: relative; display: flex; min-height: 0; align-items: flex-start; flex-wrap: wrap; padding: 14px 25px 14px 0; gap: 9px 12px; }
  .admin-person-cell, .admin-content-cell { width: 100%; }
  .admin-record-row > .admin-record-status { margin-left: 56px; }
  .admin-record-row > .admin-record-status + .admin-record-status { margin-left: 0; }
  .admin-row-secondary { width: calc(100% - 56px); margin-left: 56px; }
  .admin-row-count { width: auto; margin-left: 56px; }
  .admin-row-count > span { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
  .admin-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .admin-page { padding-bottom: 48px; }
  .admin-stat-grid { gap: 8px; }
  .admin-stat-card { min-height: 102px; padding: 14px; }
  .admin-stat-card strong { margin-top: 9px; font-size: 23px; }
  .admin-system-status-list { padding: 4px 14px; }
  .admin-system-status-row { align-items: flex-start; }
  .admin-person-hero, .admin-content-hero { align-items: flex-start; flex-wrap: wrap; }
  .admin-person-hero > .admin-record-status { margin-left: auto; }
  .admin-detail-art { width: 76px; height: 76px; }
  .admin-fact-grid { grid-template-columns: 1fr; margin: 20px 0; }
  .admin-detail-card, .admin-review-card, .admin-copy-card { padding: 17px; }
  .admin-health-row, .admin-history-row { display: grid; gap: 7px; }
  .admin-health-row span, .admin-history-row > span, .admin-history-row > time { text-align: left; }
  .admin-log-entry header, .admin-log-entry footer { align-items: flex-start; flex-direction: column; }
  .admin-dialog-layer { align-items: end; padding: 10px; }
  .admin-dialog { max-height: 90vh; overflow: auto; padding: 18px; }
}

/* M17 Unity/WebGL launch surface. Route-local markers let immersive routes
   reshape the server-rendered shell without putting the shell behind hydration. */
.interactive-launch-page {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: flex;
  min-height: 0;
}

.interactive-launch-surface {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: #080a09;
  color: #f4f3ee;
}

.interactive-launch-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #080a09;
}

.interactive-launch-close {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(8,10,9,.76);
  color: #f4f3ee;
  font-size: 27px;
  line-height: 1;
  text-decoration: none;
  backdrop-filter: blur(14px);
}

@media (hover: hover) and (pointer: fine) {

.interactive-launch-close:hover { background: rgba(255,255,255,.16); } }
.interactive-launch-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.interactive-launch-state,
.interactive-launch-overlay {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--os-space-4);
  padding: var(--os-space-7);
  text-align: center;
}

.interactive-launch-overlay {
  position: absolute;
  inset: 0;
  background: #080a09;
}

.interactive-launch-state p,
.interactive-launch-overlay p { max-width: 42rem; margin: 0; }
.interactive-launch-state h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: 1.05; }
.interactive-launch-state ul { max-width: 38rem; margin: 0; padding-left: 1.25rem; text-align: left; }

.interactive-launch-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,.24);
  border-top-color: #f4f3ee;
  border-radius: 50%;
  animation: interactive-launch-spin .8s linear infinite;
}

@keyframes interactive-launch-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .interactive-launch-spinner { animation: none; border-top-color: rgba(255,255,255,.24); }
}

@media (max-width: 768px) {

  .dashboard-form-actions-left,
  .dashboard-form-actions-right {
    grid-template-columns: 1fr 1fr;
  }

  .interactive-launch-state { padding: calc(var(--os-space-7) + env(safe-area-inset-top)) var(--os-space-5) calc(var(--os-space-7) + env(safe-area-inset-bottom)); }
}

/* Review-only Beat Store surfaces use the existing dashboard and Item system. */
.beat-studio-page .dashboard-form { gap: var(--os-section-gap); }
.beat-studio-page .dashboard-field-wide { grid-column: 1 / -1; }
.beat-tier-row { align-items: center; grid-template-columns: minmax(0, 1fr) minmax(140px, 220px); }
.beat-tier-row .dashboard-check-row span { display: grid; gap: 3px; }
.beat-tier-row small { color: var(--os-color-ink-secondary); font-weight: 500; }
.beat-license-list { display: grid; }
.beat-license-offer { display: grid; min-width: 0; min-height: 104px; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 20px var(--os-row-pad-x); }
.beat-license-offer + .beat-license-offer { border-top: 1px solid var(--os-color-hairline); }
.beat-license-copy { display: grid; min-width: 0; gap: 5px; }
.beat-license-copy > strong { color: var(--os-color-ink); font-size: 16px; line-height: 21px; }
.beat-license-copy > span { color: var(--os-color-ink-secondary); font-size: 14px; line-height: 20px; }
.beat-license-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.beat-license-price { min-width: 82px; color: var(--os-color-ink); font-size: 18px; line-height: 24px; text-align: right; }
.beat-library-license > summary { cursor: pointer; list-style: none; }
.beat-library-license > summary::-webkit-details-marker { display: none; }
.beat-library-license-body { display: grid; gap: 12px; padding: 16px var(--os-row-pad-x); border-top: 1px solid var(--os-color-hairline); }
.beat-library-license-body p, .beat-sample-disclosure { white-space: pre-wrap; }
.store-beat-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.information-dialog-overlay { position: fixed; z-index: 510; inset: 0; display: grid; place-items: center; padding: 20px; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body:is(.theme-dark, .theme-light) .information-dialog-overlay > .ui44-dialog-scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); cursor: default; }
.information-dialog { position: relative; z-index: 1; display: grid; width: min(580px, 100%); max-height: min(720px, calc(100dvh - 40px)); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
body:is(.theme-dark, .theme-light) .information-dialog.ui44-dialog-surface.ui44-panel { background: var(--os-paper-bg); box-shadow: var(--44ui-elevation-raised); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.information-dialog-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--os-color-hairline); }
.information-dialog-header h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--os-color-ink); font-size: 21px; line-height: 27px; }
.information-dialog-close { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; padding: 0; border: 1px solid var(--os-color-hairline); border-radius: 50%; background: var(--os-material-control); color: var(--os-color-ink); font: 300 25px/1 var(--os-font-app); cursor: pointer; }
.information-dialog-close:hover { background: var(--44ui-interactive-hover); }
.information-dialog-body { display: grid; gap: 16px; padding: 20px; overflow-y: auto; color: var(--os-color-ink-secondary); font-size: 15px; line-height: 22px; }
.information-dialog-body p { margin: 0; }
.information-dialog-meta strong { color: var(--os-color-ink); }
.information-dialog-terms { white-space: pre-wrap; color: var(--os-color-ink); }

@media (max-width: 700px) {
  .beat-tier-row { grid-template-columns: 1fr; align-items: stretch; }
  .beat-license-offer { grid-template-columns: 1fr; gap: 14px; }
  .beat-license-actions { justify-content: flex-start; flex-wrap: wrap; }
  .beat-license-price { width: 100%; text-align: left; }
}

/* iOS Safari zooms focused text controls rendered below 16px. Keeping mobile
   entry surfaces at 16px prevents repeated visual-viewport zoom without
   disabling the user's normal pinch-to-zoom accessibility. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  [contenteditable="true"] {
    font-size: 16px !important;
  }
}

.os-icon-sm { width: 18px; height: 18px; }
.legal-page { max-width: 980px; margin-inline: auto; }
.legal-document { display: grid; gap: 28px; padding: clamp(24px, 5vw, 52px); }
.legal-document section { display: grid; gap: 10px; }
.legal-document p { line-height: 1.75; color: var(--os-color-ink-secondary); }
.legal-links { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 20px; border-top: 1px solid var(--os-border-divider); }

.analytics-consent {
  position: fixed;
  z-index: 2400;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(calc(var(--os-mobile-dock-height, 0px) + 20px), calc(env(safe-area-inset-bottom) + 20px));
  display: grid;
  width: min(440px, calc(100vw - 40px));
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--os-color-hairline);
  border-radius: 18px;
  background: var(--os-color-surface-elevated, var(--os-color-surface));
  box-shadow: var(--os-shadow-panel);
  color: var(--os-color-ink);
}

.analytics-consent-copy { display: grid; gap: 7px; }
.analytics-consent-copy p, .analytics-preferences-status { margin: 0; color: var(--os-color-ink-secondary); font-size: 13px; line-height: 1.5; }
.analytics-consent-copy a { width: fit-content; color: var(--os-color-accent); font-size: 12px; }
.analytics-consent-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.analytics-preferences { display: grid; gap: 12px; padding: 14px 0 4px; }

@media (max-width: 720px) {
  .analytics-consent {
    right: 12px;
    bottom: calc(var(--os-mobile-dock-height, 72px) + env(safe-area-inset-bottom) + 12px);
    width: calc(100vw - 24px);
    padding: 16px;
  }
  .analytics-consent-actions > .os-button { flex: 1 1 140px; }
}
.legal-links a, .login-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Sidebar section icons */
.os-icon-store       { --os-icon-url: url('/icons/sidebar/HOME.svg'); --os-icon-filled-url: url('/icons/sidebar/HOME_filled.svg'); }
.os-icon-community   { --os-icon-url: url('/icons/sidebar/COMMUNITY.svg'); --os-icon-filled-url: url('/icons/sidebar/COMMUNITY_filled.svg'); }
.os-icon-library     { --os-icon-url: url('/icons/sidebar/COLLECTION.svg'); --os-icon-filled-url: url('/icons/sidebar/COLLECTION_filled.svg'); }
.os-icon-dashboard   { --os-icon-url: url('/icons/sidebar/DASHBOARD.svg'); }
.os-icon-settings    { --os-icon-url: url('/icons/sidebar/SETTINGS.svg'); }
.os-icon-music       { --os-icon-url: url('/icons/legacy/music.svg'); }
.os-icon-books       { --os-icon-url: url('/icons/legacy/books.svg'); }
.os-icon-assets      { --os-icon-url: url('/icons/legacy/assets.svg'); }
.os-icon-shop        { --os-icon-url: url('/icons/sidebar/STORE.svg'); }
.os-icon-merch       { --os-icon-url: url('/icons/legacy/apparel.svg'); }
.os-icon-questions   { --os-icon-url: url('/icons/legacy/questions.svg'); }
.os-icon-collaboration { --os-icon-url: url('/icons/legacy/collaboration.svg'); }
/* Inline masks for apps without an SVG file yet — same stroke language as the file icons */
.os-icon-home { --os-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5'/%3E%3C/svg%3E"); }
.os-icon-games { --os-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 7h7.6a4 4 0 0 1 3.8 2.8l1.6 5.1a2.5 2.5 0 0 1-4.1 2.5l-1.5-1.3H8.4l-1.5 1.3a2.5 2.5 0 0 1-4.1-2.5l1.6-5.1A4 4 0 0 1 8.2 7Z'/%3E%3Cpath d='M7 10v4M5 12h4M16.5 10.8h.01M18.5 13h.01'/%3E%3C/svg%3E"); }
.os-icon-inbox { --os-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
.os-icon-orders { --os-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l1 13H4L5 8Z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E"); }
.os-icon-studio-disc { --os-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='2.25'/%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 1 8.5 8.5M3.5 12A8.5 8.5 0 0 1 12 3.5' opacity='.55'/%3E%3C/svg%3E"); }
.os-icon-radio-classic { --os-icon-url: url('/icons/sidebar/RADIO.svg'); --os-icon-filled-url: url('/icons/sidebar/RADIO_filled.svg'); }
.os-icon-friends { --os-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8.5' r='3.2'/%3E%3Cpath d='M2.8 20c0-3.4 2.6-5.8 5.7-5.8s5.7 2.4 5.7 5.8'/%3E%3Ccircle cx='16.5' cy='7.5' r='2.6'/%3E%3Cpath d='M15.4 13.5c3.1.2 5.8 2.4 5.8 5.5'/%3E%3C/svg%3E"); }
.os-icon-account { --os-icon-url: url('/icons/top%20bar/USER.svg'); }
.os-icon-support { --os-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.4 9.2a2.7 2.7 0 1 1 4.3 2.2c-.8.6-1.5 1.1-1.5 2.2'/%3E%3Cpath d='M12.1 17.1h.01'/%3E%3C/svg%3E"); }

/* Topbar icons */
.os-icon-search        { --os-icon-url: url('/icons/top%20bar/SEARCH.svg'); }
.os-icon-notifications { --os-icon-url: url('/icons/top%20bar/NOTIFICATIONS.svg'); }
.os-icon-user          { --os-icon-url: url('/icons/top%20bar/USER.svg'); }

/* Sidebar and mobile-navigation icons swap to their filled companion without changing size or color. */
.mobile-dock-item .os-icon-search {
  --os-icon-url: url('/icons/sidebar/SEARCH.svg');
  --os-icon-filled-url: url('/icons/sidebar/SEARCH_filled.svg');
}

.sidebar-item-active > .os-icon,
.mobile-dock-item-active > .os-icon {
  -webkit-mask-image: var(--os-icon-filled-url, var(--os-icon-url));
          mask-image: var(--os-icon-filled-url, var(--os-icon-url));
}

.sidebar-item-active > .os-icon-library,
.mobile-dock-item-active > .os-icon-library {
  -webkit-mask-size: 91%;
          mask-size: 91%;
}

/* Logo — CSS mask so it adopts theme color (white on dark, black on light) */
.os-logo-44 {
  display: inline-block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url('/icons/logo/44-BLACK.svg');
          mask-image: url('/icons/logo/44-BLACK.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

a,
a:link,
a:visited,
a:active { text-decoration: none; color: inherit; }

@media (hover: hover) and (pointer: fine) {

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

:root {
  --os-color-success: #236b2d;
  --os-color-warning: #8a5a00;
}

html,
body {
  min-height: 100%;
}

body {
  background: var(--os-color-canvas);
  color: var(--os-color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
}

/* =========================================================
   44OS APP ENVIRONMENT
   Background first. Everything else floats above this.
   ========================================================= */

.app-environment {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--os-color-app-environment);
}

/* Ambient background: three-point theme wash restored from the earlier 44OS theme system. */
.app-environment-image {
  position: absolute;
  inset: -4%;
  background:
    radial-gradient(circle at 18% 12%, var(--theme-orb-a, color-mix(in srgb, var(--os-color-accent) 42%, transparent)), transparent 36%),
    radial-gradient(circle at 80% 16%, var(--theme-orb-b, color-mix(in srgb, var(--os-color-accent) 22%, transparent)), transparent 34%),
    radial-gradient(circle at 52% 82%, var(--theme-orb-c, color-mix(in srgb, var(--os-color-accent) 26%, transparent)), transparent 44%),
    var(--os-color-app-environment);
  filter: saturate(1.08);
  transform: scale(1.04);
}

/* Slightly stronger glow on dark, softer wash on light. */
body.theme-light .app-environment-image { opacity: 0.6; }

.app-environment-veil {
  display: none;
}

.app-environment-noise {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image:
    linear-gradient(rgba(255,255,255,.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.42) 1px, transparent 1px);
  background-size: 3px 3px;
  mask-image: radial-gradient(circle at center, black, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 76%);
}

/* ── Viewport frame — edge-to-edge on the accepted web/native shell ── */
.app-frame {
  position: relative;
  z-index: 1;
  height: 100vh;
  padding: var(--os-app-frame-inset);
  box-sizing: border-box;
  display: flex;
}

/* ── App window — one unified glass surface ── */
.app-shell {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border-radius: 0;
  background: var(--os-shell-bg);
  border: 0;
  box-shadow: none;
  backdrop-filter: blur(44px) saturate(1.72);
  -webkit-backdrop-filter: blur(44px) saturate(1.72);
}

/* ── Sidebar — integrated into the window, no own glass ── */
.app-sidebar {
  width: var(--os-sidebar-user-width, var(--os-sidebar-width));
  flex-shrink: 0;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  user-select: none;
  background: var(--os-sidebar-tint);
  border-right: 1px solid var(--os-color-hairline);
}

/* Sidebar geometry: one 14px rail inset on both sides. The logo's leading
   edge sits on the item icons' axis (14px rail + 14px item pad = 28px);
   the clock pill's trailing edge sits on the item highlights' trailing
   edge (14px). Clock pill height = tab pill height (40px). */
.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 28px;
  height: var(--os-topbar-height);
  flex-shrink: 0;
  border-bottom: 1px solid transparent;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar-clock {
  font-family: var(--os-font-app);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--os-color-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  height: var(--os-topbar-pill-height);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.sidebar-divider {
  height: 1px;
  background: var(--os-color-hairline, rgba(255,255,255,0.08));
  margin: 12px 20px;
  flex-shrink: 0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 18px;
  flex: 1;
}

.sidebar-spacer { flex: 1; min-height: 20px; }

/* Main section buttons — Apple sidebar style, bigger, more breathing room */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--os-color-ink-secondary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 540;
  letter-spacing: 0;
  text-transform: none;
  transition: background 130ms ease, color 130ms ease;
}

.sidebar-item[draggable="true"] {
  cursor: grab;
}

.sidebar-item[draggable="true"]:active {
  cursor: grabbing;
}

@media (hover: hover) and (pointer: fine) {

.sidebar-item:hover {
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  color: var(--os-color-ink);
} }

.sidebar-item-active {
  background: color-mix(in srgb, var(--os-color-ink) 18%, transparent);
  color: var(--os-color-ink);
  font-weight: 620;
}

.sidebar-item-active .sidebar-item-icon {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {

.sidebar-item:hover .sidebar-item-icon {
  opacity: 1;
} }

/* Mask-icon variant used by NAV rows */
.sidebar-item > .os-icon {
  width: 26px;
  height: 26px;
  opacity: 0.75;
  transition: opacity 130ms ease;
}
.sidebar-item-active > .os-icon { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.sidebar-item:hover > .os-icon { opacity: 1; } }

.sidebar-pin-art {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
}

.sidebar-pin-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sidebar-account-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--os-color-ink) 14%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
}

.sidebar-account-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-account-avatar .os-icon {
  width: 20px;
  height: 20px;
  opacity: .78;
}

.sidebar-pin-art .os-icon {
  opacity: 0.75;
  transition: opacity 130ms ease;
}

.sidebar-item-active .sidebar-pin-art .os-icon {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {

.sidebar-item:hover .sidebar-pin-art .os-icon {
  opacity: 1;
} }

.sidebar-item-label {
  line-height: 1.1;
}

/* ── Compact Sidebar — icon-only mode (Settings Appearance) ── */
.app-sidebar-compact {
  width: var(--os-sidebar-compact-width);
}

.sidebar-resize-handle {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  display: none;
  cursor: col-resize;
  touch-action: none;
  outline: none;
}

.sidebar-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: var(--os-color-ink);
  opacity: 0;
  transition: opacity 130ms ease;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .sidebar-resize-handle { display: block; }
  .sidebar-resize-handle:hover::after,
  .sidebar-resize-handle:focus-visible::after,
  body.sidebar-resizing .sidebar-resize-handle::after { opacity: 0.28; }
  body.sidebar-resizing,
  body.sidebar-resizing * { cursor: col-resize !important; }
}

.app-sidebar-compact .sidebar-item-label,
.app-sidebar-compact .sidebar-clock,
.app-sidebar-compact .sidebar-section-label {
  display: none;
}

.app-sidebar-compact .sidebar-top {
  justify-content: center;
  padding: 0;
}

.app-sidebar-compact .sidebar-nav {
  padding: 12px 8px 18px;
  align-items: center;
}

.app-sidebar-compact .sidebar-item {
  width: 56px;
  height: 52px;
  min-height: 52px;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-radius: 10px;
}

.app-sidebar-compact .sidebar-divider {
  width: 36px;
  margin: 12px auto;
}

.app-sidebar-compact .sidebar-pin-art {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.app-sidebar-compact .sidebar-account-avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

/* ── Sidebar accordion ── */
.sidebar-section {
  display: flex;
  flex-direction: column;
}

.sidebar-app-group {
  width: 100%;
}

.sidebar-item[aria-expanded="true"] .sidebar-disclosure {
  transform: rotate(90deg);
}

.app-sidebar-compact .sidebar-disclosure,
.app-sidebar-compact .sidebar-children {
  display: none;
}

.sidebar-nav-mobile,
.os-mobile-logo {
  display: none;
}

.sidebar-section-label {
  padding: 10px 14px 5px;
  color: var(--os-color-ink-muted);
  font-family: var(--os-font-app);
  font-size: 11px;
  font-weight: 740;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* ── App main — content side of the window ── */
.app-main {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-main-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scroll-padding-top: var(--os-space-8);
}

/* Books retain the desktop navigation rail and replace only its content pane;
   interactive builds replace the entire rounded app window. */
.app-shell:has(.reader-route) .os-topbar,
.app-shell:has(.reader-route) .music-player-bar,
.app-shell:has(.interactive-launch-page) .app-sidebar,
.app-shell:has(.interactive-launch-page) .os-topbar,
.app-shell:has(.interactive-launch-page) .music-player-bar {
  display: none !important;
}

.app-shell:has(.reader-route) .app-main-content,
.app-shell:has(.interactive-launch-page) .app-main-content {
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body.music-player-active .app-shell:has(.reader-route) .app-main-content,
body.music-player-active .app-shell:has(.interactive-launch-page) .app-main-content {
  padding-bottom: 0;
  scroll-padding-bottom: 0;
}

.app-shell:has(.interactive-launch-page) .app-main {
  width: 100%;
  height: 100%;
}

.music-player-bar {
  --music-progress: 0%;
  flex-shrink: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 54px minmax(160px, 1fr) auto minmax(180px, 330px) minmax(120px, 180px) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  border-top: 1px solid var(--os-color-hairline);
  background: color-mix(in srgb, var(--os-shell-bg) 91%, rgba(255,255,255,0.08));
  backdrop-filter: blur(28px) saturate(1.35);
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
}

.music-player-bar-radio {
  grid-template-columns: 54px minmax(220px, 1fr) auto minmax(120px, 180px) auto;
}

.music-player-open-target {
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.music-player-art {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  border: 1px solid var(--os-color-hairline);
}

.music-player-art img,
.music-player-sheet-art img,
.music-player-queue-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.music-player-art-fallback {
  width: 100%;
  height: 100%;
  display: block;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--os-color-accent) 82%, white) 0 18%, transparent 19%),
    linear-gradient(135deg, color-mix(in srgb, var(--os-color-accent) 45%, black), rgba(0, 0, 0, 0.88));
}

.music-player-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  background: transparent;
}

.music-player-title,
.music-player-subtitle,
.music-player-sheet-copy a {
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {

.music-player-title:hover,
.music-player-subtitle:hover,
.music-player-sheet-copy a:hover {
  color: var(--os-color-ink);
} }

.music-player-sheet-art > a {
  width: 100%;
  height: 100%;
  display: block;
}

.music-player-title,
.music-player-subtitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.music-player-title {
  color: var(--os-color-ink);
  font-size: 14px;
  font-weight: 720;
}

.music-player-subtitle {
  color: var(--os-color-ink-secondary);
  font-size: 12px;
  font-weight: 560;
}

.music-player-controls,
.music-player-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.music-player-close-mobile {
  display: none;
}

.music-player-actions {
  justify-content: flex-end;
}

.music-player-button {
  min-width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--os-color-hairline);
  background: color-mix(in srgb, var(--os-color-ink) 7%, transparent);
  color: var(--os-color-ink-secondary);
  font-family: var(--os-font-app);
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0;
  cursor: pointer;
  padding: 0 12px;
}

.music-player-button-icon {
  padding: 0;
}

@media (hover: hover) and (pointer: fine) {

.music-player-button:hover {
  background: color-mix(in srgb, var(--os-color-ink) 13%, transparent);
  color: var(--os-color-ink);
} }

.music-player-button:disabled,
.music-player-sheet-button:disabled {
  opacity: 0.34;
  cursor: default;
}

.music-player-button-primary {
  min-width: 44px;
  background: var(--os-button-primary-bg);
  color: var(--os-button-primary-text);
  border-color: transparent;
}

@media (hover: hover) and (pointer: fine) {

.music-player-button-primary:hover {
  background: color-mix(in srgb, var(--os-button-primary-bg) 86%, white);
  color: var(--os-button-primary-text);
} }

.music-player-progress {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(90px, 1fr) 38px;
  align-items: center;
  gap: 9px;
  color: var(--os-color-ink-muted);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.music-player-progress input,
.music-player-volume input,
.music-player-sheet-progress input {
  width: 100%;
  accent-color: var(--os-color-ink);
}

.music-player-volume {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr);
  align-items: center;
  gap: 8px;
}

.music-player-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
}

.music-player-icon-play::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 3px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}

.music-player-icon-stop::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 1px;
  background: currentColor;
}

.music-player-icon-pause::before,
.music-player-icon-pause::after {
  content: '';
  position: absolute;
  top: 3px;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: currentColor;
}

.music-player-icon-pause::before { left: 4px; }
.music-player-icon-pause::after { right: 4px; }

.music-player-icon-next::before,
.music-player-icon-previous::before {
  content: '';
  position: absolute;
  top: 3px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.music-player-icon-next::before {
  left: 4px;
  border-left: 9px solid currentColor;
  filter: drop-shadow(6px 0 0 currentColor);
}

.music-player-icon-previous::before {
  right: 4px;
  border-right: 9px solid currentColor;
  filter: drop-shadow(-6px 0 0 currentColor);
}

.music-player-icon-shuffle {
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3h5v5'/%3E%3Cpath d='M4 20 21 3'/%3E%3Cpath d='M21 16v5h-5'/%3E%3Cpath d='M15 15l6 6'/%3E%3Cpath d='M4 4l5 5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3h5v5'/%3E%3Cpath d='M4 20 21 3'/%3E%3Cpath d='M21 16v5h-5'/%3E%3Cpath d='M15 15l6 6'/%3E%3Cpath d='M4 4l5 5'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.music-player-icon-queue::before,
.music-player-icon-queue::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 3px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
}

.music-player-icon-queue::before {
  top: 3px;
}

.music-player-icon-queue::after {
  top: 3px;
  left: 1px;
  width: 2px;
  right: auto;
}

.music-player-icon-volume::before,
.music-player-icon-muted::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 7px;
  height: 7px;
  background: currentColor;
  clip-path: polygon(0 25%, 45% 25%, 100% 0, 100% 100%, 45% 75%, 0 75%);
}

.music-player-icon-volume::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 4px;
  width: 7px;
  height: 10px;
  border: 2px solid currentColor;
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.music-player-icon-muted::after,
.music-player-icon-remove::before,
.music-player-icon-remove::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 2px;
  width: 2px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
}

.music-player-icon-muted::after,
.music-player-icon-remove::after {
  transform: rotate(-45deg);
}

.music-player-icon-chevron::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.music-player-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: end center;
  pointer-events: none;
}

.music-player-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: auto;
}

.music-player-sheet {
  --music-progress: 0%;
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 44px));
  max-height: min(760px, calc(100dvh - 56px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0 24px;
  padding: 14px 18px 18px;
  border: 1px solid var(--os-color-hairline);
  border-radius: 26px 26px 0 0;
  background: var(--os-paper-bg);
  color: var(--os-color-ink);
  box-shadow: var(--os-shadow-modal);
  pointer-events: auto;
  overflow: hidden;
}

.music-player-sheet-header {
  grid-column: 1 / -1;
  min-height: 44px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
}

.music-player-sheet-minimize,
.music-player-sheet-header-spacer {
  width: 44px;
  height: 44px;
}

.music-player-sheet-minimize {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--os-color-ink-secondary);
  cursor: pointer;
}

.music-player-sheet-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 18px;
  align-content: start;
}

.music-player-sheet-art {
  width: min(340px, 46vh);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  border: 1px solid var(--os-color-hairline);
  box-shadow: var(--os-shadow-3);
}

.music-player-sheet-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  text-align: center;
}

.music-player-sheet-copy h2,
.music-player-sheet-copy p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.music-player-sheet-copy h2 {
  font-size: 24px;
  line-height: 1.08;
  font-weight: 780;
}

.music-player-sheet-copy p {
  color: var(--os-color-ink-secondary);
  font-size: 15px;
  font-weight: 560;
}

.music-player-sheet-progress {
  display: grid;
  gap: 7px;
}

.music-player-sheet-times {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--os-color-ink-muted);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.music-player-sheet-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.music-player-sheet-button {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--os-color-ink) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  color: var(--os-color-ink);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.music-player-sheet-button-primary {
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  color: var(--os-color-ink);
}

.music-player-sheet-button-utility {
  border-color: transparent;
  background: transparent;
  color: var(--os-color-ink-secondary);
}

@media (hover: hover) and (pointer: fine) {

.music-player-sheet-button-utility:hover {
  color: var(--os-color-ink);
  background: transparent;
  border-color: transparent;
} }

.music-player-sheet-button-active {
  color: var(--os-color-ink);
  background: color-mix(in srgb, var(--os-color-ink) 14%, transparent);
  border-color: color-mix(in srgb, var(--os-color-ink) 16%, transparent);
}

.music-player-sheet-button-utility.music-player-sheet-button-active {
  color: var(--os-color-accent);
  background: transparent;
  border-color: transparent;
}

.music-player-sheet-button-primary.music-player-sheet-button-active {
  background: color-mix(in srgb, var(--os-color-ink) 14%, transparent);
  color: var(--os-color-ink);
}

.music-player-queue {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  border-left: 1px solid var(--os-color-hairline);
  padding-left: 22px;
}

.music-player-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--os-color-ink-muted);
  font-size: 12px;
  font-weight: 720;
}

.music-player-queue-head span:first-child {
  color: var(--os-color-ink);
  font-size: 14px;
  font-weight: 780;
}

.music-player-queue-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 4px;
  padding-right: 2px;
}

.music-player-queue-row {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  color: var(--os-color-ink-secondary);
}

.music-player-queue-play {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 7px 8px;
}

.music-player-queue-art {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 7px;
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
}

.music-player-queue-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.music-player-queue-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-player-queue-copy span:first-child {
  color: var(--os-color-ink);
  font-size: 13px;
  font-weight: 720;
}

.music-player-queue-copy span:last-child {
  color: var(--os-color-ink-muted);
  font-size: 12px;
  font-weight: 560;
}

.music-player-queue-remove {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--os-color-ink-muted);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {

.music-player-queue-remove:hover {
  color: var(--os-color-danger);
  background: color-mix(in srgb, var(--os-color-danger) 12%, transparent);
} }

.view-track-play:disabled {
  opacity: 0.32;
  cursor: default;
}

@media (max-width: 900px) {
  .music-player-bar {
    grid-template-columns: 46px minmax(0, 1fr) auto auto;
    min-height: 76px;
  }

  .music-player-bar-radio {
    grid-template-columns: 46px minmax(0, 1fr) auto auto;
  }

  .music-player-art {
    width: 46px;
    height: 46px;
  }

  .music-player-progress {
    display: none;
  }

  .music-player-volume {
    display: none;
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  :root {
    --os-mobile-content-tail: 24px;
    --os-mobile-shell-bottom: calc(
      var(--os-mobile-dock-height) + env(safe-area-inset-bottom)
    );
  }

  .app-frame {
    padding: 0;
    height: 100dvh;
  }
  .app-shell {
    flex-direction: column-reverse;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .app-sidebar {
    width: 100%;
    height: var(--os-mobile-shell-bottom);
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-top: 0;
    padding-bottom: 0;
    background: transparent;
    scrollbar-width: none;
  }

  body.music-player-active .app-main-content {
    padding-bottom: calc(
      var(--os-mobile-player-height) + var(--os-mobile-content-tail)
    );
    scroll-padding-bottom: calc(
      var(--os-mobile-player-height) + var(--os-mobile-content-tail)
    );
  }
  .app-sidebar::-webkit-scrollbar {
    display: none;
  }
  .sidebar-top,
  .sidebar-spacer,
  .sidebar-section-label {
    display: none;
  }
  .sidebar-nav {
    width: max-content;
    min-width: 100%;
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
  }
  .sidebar-section {
    flex-direction: row;
    gap: 6px;
  }
  .sidebar-divider {
    width: 1px;
    height: 34px;
    margin: 0 6px;
  }
  .sidebar-item,
  .app-sidebar-compact .sidebar-item {
    width: 58px;
    height: 58px;
    min-height: 58px;
    padding: 0;
    justify-content: center;
    border-radius: 16px;
    gap: 0;
    flex: 0 0 auto;
  }
  .sidebar-item-label,
  .app-sidebar-compact .sidebar-item-label {
    display: none;
  }
  .sidebar-pin-art,
  .app-sidebar-compact .sidebar-pin-art {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  .app-main {
    height: calc(100dvh - var(--os-mobile-shell-bottom));
    min-height: 0;
  }
  .app-main-content {
    scroll-padding-bottom: var(--os-mobile-content-tail);
  }
}

/* ── Content Tab Bar — floating pill ── */

/* ── Auth Avatar ── */

/* ── user-menu-item icon support ── */

/* Theme presets */

body.accent-amber,
.theme-amber {
  --theme-orb-a: rgba(255, 154, 78, 0.42);
  --theme-orb-b: rgba(255, 102, 73, 0.2);
  --theme-orb-c: rgba(115, 65, 34, 0.36);
}

body.accent-violet,
.theme-graphite {
  --theme-orb-a: rgba(181, 108, 255, 0.38);
  --theme-orb-b: rgba(218, 112, 255, 0.18);
  --theme-orb-c: rgba(112, 48, 190, 0.3);
}

body.accent-ocean,
.theme-blue {
  --theme-orb-a: rgba(70, 150, 255, 0.32);
  --theme-orb-b: rgba(90, 220, 255, 0.14);
  --theme-orb-c: rgba(60, 90, 180, 0.24);
}

body.accent-sage,
.theme-green {
  --theme-orb-a: rgba(120, 255, 150, 0.24);
  --theme-orb-b: rgba(180, 255, 90, 0.12);
  --theme-orb-c: rgba(40, 120, 80, 0.22);
}

/* ── scrollbar ── */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ── type scale ── */

/* ── glass material helpers ── */

/* ── divider ── */

/* ── tag / badge / eyebrow chip ── */

/* ── buttons ── */

/* ── icon button (40×40 circle) ── */

/* ── cards ── */

/* ── System Panel — now flat, sits on shell, tabs go to topbar via context ── */

/* ── App tile — Home quick launch (renders from the app registry) ── */

.os-app-tile .os-icon {
  opacity: 0.85;
}

/* ── Hub Section Head (used across Store, Services, Resources, Community) ──
   Spacing to the section content comes from the parent .app-section grid
   (--os-section-head-gap) — no own margin, so it can never double-stack. */
.hub-section-head {
  justify-content: space-between;
}

.hub-section-copy {
  min-width: 0;
  gap: var(--os-space-1);
}

.hub-section-head-described .hub-section-copy {
  max-width: 760px;
}

.hub-section-title {
  font-family: var(--os-font-app);
  font-size: var(--os-type-panel-title-size);
  line-height: var(--os-type-panel-title-line);
  font-weight: var(--os-type-panel-title-weight);
  color: var(--os-color-ink);
}

/* ── Browse page title (replaces browse-hero panel) ── */

/* ── Category/Browse Hero (shorter than hub hero) ── */

.page-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 40px;
}

.panel-scroll {
  flex: 1;
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- PRODUCT CARDS ---------- */

/* bottom metadata bar */

/* ---------- SHARED NON-PRODUCT CARD TEXT ---------- */

/* Small helper: an input+label group used in dashboard forms */
.dashboard-field .os-input-field,
.dashboard-field .os-input-textarea { width: 100%; }

/* ── progress bar ── */

/* ── nav ── */

/* 44OS adaptive glass controls — Glass A material. */

.achievement-toast {
  position: fixed;
  top: 104px;
  right: clamp(18px, 3vw, 42px);
  z-index: 120;
  width: min(420px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--os-glass-panel-border);
  border-radius: var(--os-radius-5);
  background: var(--os-glass-panel-bg);
  box-shadow: var(--os-glass-shadow), var(--os-glass-highlight);
  backdrop-filter: blur(var(--os-glass-blur-strong)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--os-glass-blur-strong)) saturate(1.6);
  color: var(--os-color-ink);
  animation: achievement-toast-in 420ms cubic-bezier(.16,1,.3,1) both;
}

.achievement-toast-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--os-state-owned-border);
  background: var(--os-state-owned-bg);
  color: var(--os-color-ink);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
}

.achievement-toast-copy {
  min-width: 0;
}

.achievement-toast-eyebrow {
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--os-color-accent);
}

.achievement-toast-copy strong {
  display: block;
  color: var(--os-color-ink);
  font-size: 15px;
  line-height: 1.15;
  font-weight: 780;
}

.achievement-toast-copy p {
  margin-top: 4px;
  color: var(--os-color-ink-secondary);
  font-size: 12px;
  line-height: 1.4;
}

@keyframes achievement-toast-in {
  from {
    opacity: 0;
    transform: translate3d(18px, -8px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* =========================================================
   44OS TYPOGRAPHY SYSTEM
   Fresh foundation layer. Use these classes going forward.
   ========================================================= */

:root {

  --os-type-eyebrow-size: 11px;
  --os-type-eyebrow-line: 1.2;
  --os-type-eyebrow-weight: 800;
  --os-type-eyebrow-track: 0.14em;

  --os-type-pill-size: 11px;
  --os-type-pill-line: 1.2;
  --os-type-pill-weight: 760;
  --os-type-pill-track: 0.06em;
}

.os-type-display,
.os-type-page-title,
.os-type-panel-title,
.os-type-card-title,
.os-type-body,
.os-type-body-small,
.os-type-meta,
.os-type-eyebrow,
.os-type-pill {
  font-family: var(--os-font-app);
}

.os-type-display {
  font-size: var(--os-type-display-size);
  line-height: var(--os-type-display-line);
  font-weight: var(--os-type-display-weight);
  letter-spacing: var(--os-type-display-track);
}

.os-type-page-title {
  font-size: var(--os-type-page-title-size);
  line-height: var(--os-type-page-title-line);
  font-weight: var(--os-type-page-title-weight);
  letter-spacing: var(--os-type-page-title-track);
}

.os-type-panel-title {
  font-size: var(--os-type-panel-title-size);
  line-height: var(--os-type-panel-title-line);
  font-weight: var(--os-type-panel-title-weight);
  letter-spacing: var(--os-type-panel-title-track);
}

.os-type-card-title {
  font-size: var(--os-type-card-title-size);
  line-height: var(--os-type-card-title-line);
  font-weight: var(--os-type-card-title-weight);
  letter-spacing: var(--os-type-card-title-track);
}

.os-type-field-title {
  font-size: var(--os-type-field-title-size);
  line-height: var(--os-type-field-title-line);
  font-weight: var(--os-type-field-title-weight);
  letter-spacing: var(--os-type-field-title-track);
  color: var(--os-color-ink);
}

.os-type-body {
  font-size: var(--os-type-body-size);
  line-height: var(--os-type-body-line);
  font-weight: var(--os-type-body-weight);
  letter-spacing: var(--os-type-body-track);
}

.os-type-body-small {
  font-size: var(--os-type-body-small-size);
  line-height: var(--os-type-body-small-line);
  font-weight: var(--os-type-body-small-weight);
  letter-spacing: var(--os-type-body-small-track);
}

.os-type-meta {
  font-size: var(--os-type-meta-size);
  line-height: var(--os-type-meta-line);
  font-weight: var(--os-type-meta-weight);
  letter-spacing: var(--os-type-meta-track);
}

.os-type-eyebrow {
  font-size: var(--os-type-eyebrow-size);
  line-height: var(--os-type-eyebrow-line);
  font-weight: var(--os-type-eyebrow-weight);
  letter-spacing: var(--os-type-eyebrow-track);
  text-transform: uppercase;
}

.os-type-pill {
  font-size: var(--os-type-pill-size);
  line-height: var(--os-type-pill-line);
  font-weight: var(--os-type-pill-weight);
  letter-spacing: var(--os-type-pill-track);
  text-transform: uppercase;
}

/* 44OS COLOR SYSTEM */

:root {
  --os-app-frame-inset: 0px;
  --os-color-canvas: #f7f7f4;
  --os-color-ink: #151515;
  --os-color-ink-secondary: rgba(0, 0, 0, 0.58);
  --os-color-ink-muted: rgba(0, 0, 0, 0.42);
  --os-color-hairline: rgba(0, 0, 0, 0.10);

  --os-color-app-environment: #eef0ea;

  --os-color-paper: #ffffff;

  --os-color-accent: #7cff4f;

  --os-color-owned: #7cff4f;
  --os-color-danger: #ff5a5f;

  /* ── Semantic border + radius aliases ── */
  --os-color-border: var(--os-glass-panel-border);
  --os-radius-card: var(--os-radius-4);

  /* ── App window (shell) material — light mode, translucent glass ── */
  --os-shell-bg: rgba(255, 255, 255, 0.50);
  --os-shell-border: rgba(255, 255, 255, 0.72);
  --os-shell-shadow:
    0 58px 140px rgba(0, 0, 0, 0.18),
    0 18px 34px rgba(0, 0, 0, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  --os-sidebar-tint: rgba(255, 255, 255, 0.18);
}

/* 44OS SPACING SYSTEM */

:root {
  --os-space-1: 4px;
  --os-space-2: 8px;
  --os-space-3: 12px;
  --os-space-4: 16px;
  --os-space-5: 20px;
  --os-space-6: 24px;
  --os-space-7: 32px;
  --os-space-8: 40px;
  --os-space-10: 64px;

  --os-page-pad: 24px;
  /* ── Section rhythm — one system, every app ──
     Sections within a page sit --os-section-gap apart.
     A section title sits --os-section-head-gap above its content.
     List rows pad --os-row-pad-y / --os-row-pad-x. */
  /* App header block: title sits 40px under the tab bar, 32px above the hairline. */
  --os-content-max: 1440px;
  --os-content-readable: 1180px;
  --os-detail-inset: clamp(64px, 6.5vw, 112px);
  --os-safe-area-top: env(safe-area-inset-top, 0px);
  --os-topbar-content-height: 60px;
  --os-topbar-control-size: 44px;
  --os-topbar-pill-height: 40px;
  --os-topbar-edge-inset: 8px;
  /* The tab bar's leading edge sits on the workspace gutter line, so tabs,
     page titles, and body copy all align to one vertical axis — including
     on wide viewports where the content column is centered. */
  --os-topbar-left-inset: calc(max((100% - var(--os-content-max)) / 2, 0px) + var(--os-content-inset));
  --os-topbar-right-inset: calc(max((100% - var(--os-content-max)) / 2, 0px) + var(--os-content-inset));

  --os-sidebar-width: 280px;
  --os-sidebar-compact-width: 76px;
  --os-topbar-height: calc(var(--os-topbar-content-height) + var(--os-safe-area-top));
}

/* Deterministic notch geometry for local/automated acceptance. Production
   receives the native env() value; tests may set this attribute on <html>. */
html[data-safe-area-test='notch'] {
  --os-safe-area-top: 47px;
}

/* 44OS RADIUS SYSTEM */

:root {
  --os-radius-3: 14px;
  --os-radius-4: 18px;
  --os-radius-5: 22px;
  --os-radius-6: 26px;
  --os-radius-7: 34px;

  --os-radius-pill: 999px;
  --os-radius-avatar: 999px;
}

/* 44OS SHADOW SYSTEM */

:root {
  --os-shadow-1: 0 4px 12px rgba(0, 0, 0, 0.04);
  --os-shadow-2: 0 8px 22px rgba(0, 0, 0, 0.06);
  --os-shadow-3: 0 14px 34px rgba(0, 0, 0, 0.08);
  --os-shadow-4: 0 22px 54px rgba(0, 0, 0, 0.10);

  --os-shadow-paper: 0 14px 34px rgba(0, 0, 0, 0.06);
  --os-shadow-card: 0 12px 28px rgba(0, 0, 0, 0.055);
  --os-shadow-panel: 0 28px 76px rgba(0, 0, 0, 0.16);
  --os-shadow-modal: 0 44px 120px rgba(0, 0, 0, 0.24);

  --os-shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.58);
  --os-shadow-inset-recessed: inset 0 1px 2px rgba(0, 0, 0, 0.10);
}

/* 44OS MATERIAL SYSTEM — GLASS
   Two-tier system:
   Glass A (panel)  — ambient, transparent, strongly picks up theme color. Used on cards, category tiles, hero panels, most surfaces.
   Glass B (sidebar) — moderately opaque, still lets theme through. Used on sidebars, docked panels, left rails in system windows.
*/

:root {
  --os-glass-blur-soft: 16px;
  --os-glass-blur-strong: 44px;

  /* Glass A — ambient panel */
  --os-glass-panel-bg: rgba(255, 255, 255, 0.52);
  --os-glass-panel-border: rgba(255, 255, 255, 0.64);

  /* Glass B — sidebar / docked panel */

  --os-glass-control-bg: rgba(255, 255, 255, 0.18);
  --os-glass-control-border: rgba(255, 255, 255, 0.30);

  --os-glass-recessed-bg: rgba(0, 0, 0, 0.08);

  --os-glass-highlight:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);

  --os-glass-shadow: var(--os-shadow-panel);
}

/* Glass A — ambient primary surface. Picks up theme color strongly. */

/* Glass B — sidebar / docked panel. More opaque, still theme-tinted. */

/* 44OS MATERIAL SYSTEM — CARD PAPER
   Single source of truth for card material color. Cards float
   above the glass shell so they read as clickable. Adjust these
   tokens to retint every card across the app. */
:root {
  --os-card-bg: #ede4d1;
  --os-card-border: rgba(0, 0, 0, 0.06);
}

/* 44OS MATERIAL SYSTEM — PAPER */

:root {
  --os-paper-bg: #ffffff;
  --os-paper-bg-soft: #f6f4ee;

  --os-paper-border: rgba(0, 0, 0, 0.08);
  --os-paper-border-strong: rgba(0, 0, 0, 0.12);

  --os-paper-highlight:
    inset 0 1px 0 rgba(255, 255, 255, 0.72);

  --os-paper-shadow: var(--os-shadow-paper);
}

/* 44OS MATERIAL SYSTEM — CHROME */

/* 44OS MATERIAL SYSTEM — INPUTS */

:root {
  --os-input-bg: rgba(255, 255, 255, 0.58);
  --os-input-bg-hover: rgba(255, 255, 255, 0.72);
  --os-input-bg-focus: rgba(255, 255, 255, 0.84);

  --os-input-border: rgba(0, 0, 0, 0.08);
  --os-input-border-hover: rgba(0, 0, 0, 0.12);
  --os-input-border-focus: rgba(0, 0, 0, 0.18);

  --os-input-text: var(--os-color-ink);
  --os-input-placeholder: var(--os-color-ink-muted);

  --os-input-height: 44px;
  --os-input-large-height: 56px;

  --os-input-radius: var(--os-radius-3);

  --os-input-shadow: var(--os-shadow-inset-recessed);
  --os-input-focus-shadow:
    var(--os-shadow-inset-recessed),
    0 0 0 3px rgba(124, 255, 79, 0.12);
}

.os-input-field {
  width: 100%;
  min-height: var(--os-input-height);
  padding: 0 var(--os-space-4);
  border-radius: var(--os-input-radius);
  background: var(--os-input-bg);
  border: 1px solid var(--os-input-border);
  box-shadow: var(--os-input-shadow);
  color: var(--os-input-text);
  font-family: var(--os-font-app);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {

.os-input-field:hover {
  background: var(--os-input-bg-hover);
  border-color: var(--os-input-border-hover);
} }

.os-input-field:focus {
  background: var(--os-input-bg-focus);
  border-color: var(--os-input-border-focus);
  box-shadow: var(--os-input-focus-shadow);
}

.os-input-field::placeholder {
  color: var(--os-input-placeholder);
}

.os-input-field:disabled,
.os-input-field[readonly],
.os-input-textarea:disabled,
.os-input-textarea[readonly] {
  color: var(--os-color-ink-secondary);
  background: color-mix(in srgb, var(--os-color-ink) 4%, var(--os-input-bg));
  cursor: default;
}

select.os-input-field {
  padding-right: 40px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2360646c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

select.os-input-field::-ms-expand { display: none; }

.os-input-large {
  min-height: var(--os-input-large-height);
  padding: 0 var(--os-space-5);
  border-radius: var(--os-radius-4);
}

.os-input-textarea:focus,
.os-input-textarea:focus-visible {
  border-color: var(--os-input-border-focus);
  box-shadow: var(--os-input-focus-shadow);
}

.os-input-textarea {
  width: 100%;
  min-height: 132px;
  padding: var(--os-space-4);
  border-radius: var(--os-radius-4);
  background: var(--os-input-bg);
  border: 1px solid var(--os-input-border);
  box-shadow: var(--os-input-shadow);
  color: var(--os-input-text);
  font-family: var(--os-font-app);
  resize: vertical;
  outline: none;
}

/* 44OS COMPONENT SYSTEM — BUTTONS */

:root {
  --os-button-height: 44px;
  --os-button-compact-height: 36px;
  --os-button-large-height: 52px;

  --os-button-pad-x: var(--os-space-5);
  --os-button-compact-pad-x: var(--os-space-4);
  --os-button-large-pad-x: var(--os-space-6);

  --os-button-primary-bg: var(--os-paper-bg);
  --os-button-primary-text: var(--os-color-ink);
  --os-button-primary-border: var(--os-paper-border);

  --os-button-secondary-bg: var(--os-paper-bg);
  --os-button-secondary-text: var(--os-color-ink);
  --os-button-secondary-border: var(--os-paper-border);

  --os-button-ghost-bg: rgba(255, 255, 255, 0.18);
  --os-button-ghost-text: var(--os-color-ink);
  --os-button-ghost-border: rgba(0, 0, 0, 0.08);

  --os-button-hover-bg: var(--os-color-ink);
  --os-button-hover-text: var(--os-color-canvas);
  --os-button-hover-border: rgba(0, 0, 0, 0.16);

  --os-button-danger-bg: #d9363e;
  --os-button-danger-text: #ffffff;
  --os-button-danger-border: rgba(130, 0, 12, 0.22);
  --os-button-danger-hover-bg: #b9232d;

  --os-button-disabled-bg: rgba(0, 0, 0, 0.06);
  --os-button-disabled-text: rgba(0, 0, 0, 0.32);
  --os-button-disabled-border: rgba(0, 0, 0, 0.06);

  --os-button-shadow: var(--os-shadow-2);
  --os-button-shadow-hover: var(--os-shadow-3);
}

.os-button {
  min-height: var(--os-button-height);
  padding: 0 var(--os-button-pad-x);
  border-radius: var(--os-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--os-space-2);
  font-family: var(--os-font-app);
  font-size: var(--os-type-button-size);
  line-height: var(--os-type-button-line);
  font-weight: var(--os-type-button-weight);
  letter-spacing: var(--os-type-button-track);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}

.os-button.os-button-primary,
.os-button.os-button-primary:link,
.os-button.os-button-primary:visited {
  background: var(--os-button-primary-bg);
  color: var(--os-button-primary-text);
  border-color: var(--os-button-primary-border);
  box-shadow: var(--os-button-shadow);
}

.os-button.os-button-primary * {
  color: inherit;
}

.os-button.os-button-primary svg {
  color: inherit;
  stroke: currentColor;
}

@media (hover: hover) and (pointer: fine) {

.os-button.os-button-primary:hover {
  background: var(--os-button-hover-bg);
  color: var(--os-button-hover-text);
  border-color: var(--os-button-hover-border);
  box-shadow: var(--os-button-shadow-hover);
} }

.os-button.os-button-secondary,
.os-button.os-button-secondary:link,
.os-button.os-button-secondary:visited {
  background: var(--os-button-secondary-bg);
  color: var(--os-button-secondary-text);
  border-color: var(--os-button-secondary-border);
  box-shadow: var(--os-shadow-paper), var(--os-paper-highlight);
}

@media (hover: hover) and (pointer: fine) {

.os-button.os-button-secondary:hover {
  background: var(--os-button-hover-bg);
  color: var(--os-button-hover-text);
  border-color: var(--os-button-hover-border);
  box-shadow: var(--os-button-shadow-hover);
} }

.os-button.os-button-ghost,
.os-button.os-button-ghost:link,
.os-button.os-button-ghost:visited {
  background: var(--os-button-ghost-bg);
  color: var(--os-button-ghost-text);
  border-color: var(--os-button-ghost-border);
  box-shadow: var(--os-shadow-1);
  backdrop-filter: blur(var(--os-glass-blur-soft, 16px)) saturate(1.1);
  -webkit-backdrop-filter: blur(var(--os-glass-blur-soft, 16px)) saturate(1.1);
}

@media (hover: hover) and (pointer: fine) {

.os-button.os-button-ghost:hover {
  background: var(--os-button-hover-bg);
  color: var(--os-button-hover-text);
  border-color: var(--os-button-hover-border);
  box-shadow: var(--os-button-shadow-hover);
} }

.os-button.os-button-glass,
.os-button.os-button-glass:link,
.os-button.os-button-glass:visited {
  background: var(--os-glass-control-bg);
  color: var(--os-color-ink);
  border-color: var(--os-glass-control-border);
  box-shadow: var(--os-shadow-2), var(--os-glass-highlight);
  backdrop-filter: blur(var(--os-glass-blur-soft)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--os-glass-blur-soft)) saturate(1.25);
}

@media (hover: hover) and (pointer: fine) {

.os-button.os-button-glass:hover {
  background: var(--os-glass-control-bg);
  color: var(--os-color-ink);
  border-color: var(--os-glass-control-border);
  box-shadow: var(--os-shadow-2), var(--os-glass-highlight);
  backdrop-filter: blur(var(--os-glass-blur-soft)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--os-glass-blur-soft)) saturate(1.25);
} }

.os-button.os-button-danger,
.os-button.os-button-danger:link,
.os-button.os-button-danger:visited {
  background: var(--os-button-danger-bg);
  color: var(--os-button-danger-text);
  border-color: var(--os-button-danger-border);
  box-shadow: var(--os-shadow-2);
}

@media (hover: hover) and (pointer: fine) {

.os-button.os-button-danger:hover {
  background: var(--os-button-danger-hover-bg);
  color: var(--os-button-danger-text);
  border-color: var(--os-button-danger-border);
  box-shadow: var(--os-button-shadow-hover);
} }

.os-button.os-button-disabled,
.os-button:disabled {
  background: var(--os-button-disabled-bg);
  color: var(--os-button-disabled-text);
  border-color: var(--os-button-disabled-border);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.os-button-compact {
  min-height: var(--os-button-compact-height);
  padding: 0 var(--os-button-compact-pad-x);
}

.os-button-large {
  min-height: var(--os-button-large-height);
  padding: 0 var(--os-button-large-pad-x);
}

/* 44OS COMPONENT SYSTEM — PILLS + BADGES */

:root {
  --os-pill-height: 28px;
  --os-pill-pad-x: var(--os-space-3);

  --os-pill-bg: rgba(255, 255, 255, 0.42);
  --os-pill-border: rgba(0, 0, 0, 0.08);
  --os-pill-text: var(--os-color-ink-secondary);

  --os-state-owned-bg: rgba(124, 255, 79, 0.16);
  --os-state-owned-border: rgba(124, 255, 79, 0.32);
  --os-state-owned-text: #2f7d22;
}

.os-pill {
  min-height: var(--os-pill-height);
  padding: 0 var(--os-pill-pad-x);
  border-radius: var(--os-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--os-space-2);
  background: var(--os-pill-bg);
  border: 1px solid var(--os-pill-border);
  color: var(--os-pill-text);
  font-family: var(--os-font-app);
  font-size: var(--os-type-pill-size);
  line-height: var(--os-type-pill-line);
  font-weight: var(--os-type-pill-weight);
  letter-spacing: var(--os-type-pill-track);
  text-transform: uppercase;
  white-space: nowrap;
}

.os-status-owned {
  background: var(--os-state-owned-bg);
  border-color: var(--os-state-owned-border);
  color: var(--os-state-owned-text);
}

/* 44OS CARD SYSTEM — PRODUCT CARD */

/* Artwork card */

/* Paper info card */

/* Shared poster image layer */

/* Color poster card */

/* Gradient poster card */

/* 44OS LAYOUT SYSTEM — PANELS */

:root {

  --os-paper-panel-max-width: 760px;
}

.os-paper-panel {
  width: min(var(--os-paper-panel-max-width), calc(100vw - (var(--os-page-pad) * 2)));
  max-height: calc(100vh - 112px);
  padding: var(--os-space-8);
  border-radius: var(--os-radius-7);
  background: var(--os-paper-bg);
  border: 1px solid var(--os-paper-border);
  box-shadow: var(--os-shadow-modal), var(--os-paper-highlight);
  color: var(--os-color-ink);
  overflow-y: auto;
}

/* 44OS CARD SYSTEM — CATEGORY CARD */

body.theme-dark .os-category-icon img {
  filter: brightness(0) invert(1);
  opacity: 0.76;
}

/* =========================================================
   44OS APP COMPONENTS
   Shared, fully-tokenized building blocks used across every
   live page. No hardcoded colors — all values come from os-
   tokens so a single theme/accent switch flips everything.
   ========================================================= */

/* ── Layout: sections, grids, shelves ── */
.app-section {
  display: grid;
  gap: var(--os-section-head-gap);
}

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

@media (max-width: 1080px) {
  .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.library-item-groups {
  display: grid;
  gap: var(--os-space-8);
  min-width: 0;
}

.library-item-group {
  display: grid;
  gap: var(--os-section-head-gap);
  min-width: 0;
}

.library-group-title {
  margin: 0;
}

.library-opening {
  display: grid;
  min-width: 0;
  gap: 18px;
}

/* ── Card (Glass A material, grid- and shelf-friendly) ── */

/* =========================================================
   44OS PRODUCT TILE
   Artwork-first — no card wrapper. The artwork is the affordance,
   title + creator sit directly on the page background below.
   Two aspect variants: square (1:1) for music/games/assets,
   portrait (2:3) for books/apparel/merch.
   ========================================================= */
.product-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.product-tile-art {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--os-color-ink) 6%, transparent);
  transform-origin: center;
  transition: box-shadow 160ms ease, filter 160ms ease;
}

.product-tile-art-square     { aspect-ratio: 1 / 1; }
.product-tile-art-portrait   { aspect-ratio: 3 / 4; }
.product-tile-art-book       { aspect-ratio: 2 / 3; }
.product-tile-art-landscape  { aspect-ratio: 3 / 2; }
.product-tile-art-wide       { aspect-ratio: 16 / 10; }

.product-tile-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (hover: hover) and (pointer: fine) {

.product-tile:hover .product-tile-art {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  filter: saturate(1.04) contrast(1.015);
} }

.product-tile-info {
  padding: 14px 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.product-tile-title {
  font-size: 15px;
  font-weight: 620;
  color: var(--os-color-ink);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-tile-subtitle {
  font-size: 13px;
  font-weight: 520;
  color: var(--os-color-ink-secondary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.theme-dark .product-tile-art {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
@media (hover: hover) and (pointer: fine) {
body.theme-dark .product-tile:hover .product-tile-art {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
} }

/* ── Detail layout (content + inspector rail) ── */

/* ── Empty / placeholder panel ── */

/* Plain text empty state — no card. Used when a page has no content yet. */
.app-empty-text {
  padding: 48px 0;
  color: var(--os-color-ink-secondary);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.5;
  text-align: center;
  width: 100%;
  max-width: min(100%, 980px);
  margin: 0 auto;
}

/* ── Tag/meta chips row ── */

/* ── View section heading — title alone separates sections, no hairline ── */
.view-section-title {
  font-family: var(--os-font-app);
  font-size: var(--os-type-panel-title-size);
  line-height: var(--os-type-panel-title-line);
  font-weight: var(--os-type-panel-title-weight);
  color: var(--os-color-ink);
  margin: 0 0 var(--os-space-7);
}

/* ── Tracklist rows — flat, sit on shell, no cards ── */
.view-tracklist {
  display: grid;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--os-paper-border);
  background: var(--os-paper-bg);
  box-shadow: var(--os-paper-shadow);
}

.view-track-row {
  display: grid;
  align-items: center;
  border-top: 1px solid var(--os-color-hairline);
  border-radius: 0;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.view-track-row:first-child { border-top: 0; }
@media (hover: hover) and (pointer: fine) {
.view-track-row:hover {
  background: color-mix(in srgb, var(--os-color-ink) 5%, transparent);
} }
.view-track-row-selected,
.view-track-row:has(.view-track-leading-current) {
  background: color-mix(in srgb, var(--os-color-ink) 7%, transparent);
}

.view-track-leading {
  position: relative;
  display: grid;
  place-items: center;
}

.view-track-number {
  position: relative;
  z-index: 1;
  font-family: var(--os-font-app);
  font-size: 12px;
  font-weight: 680;
  color: var(--os-color-ink);
  font-variant-numeric: tabular-nums;
  transition: opacity 120ms ease;
}

.view-track-play {
  position: absolute;
  inset: 3px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--os-color-ink) 15%, transparent);
  background: color-mix(in srgb, var(--os-color-ink) 6%, transparent);
  color: var(--os-color-ink-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 11px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
}
.view-track-row-selected .view-track-play,
.view-track-row:focus-within .view-track-play,
.view-track-leading-current .view-track-play {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
.view-track-row:hover .view-track-play {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
} }
.view-track-row-selected .view-track-number,
.view-track-row:focus-within .view-track-number,
.view-track-leading-current .view-track-number {
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
.view-track-row:hover .view-track-number {
  opacity: 0;
} }
@media (hover: hover) and (pointer: fine) {
.view-track-play:hover {
  background: color-mix(in srgb, var(--os-color-ink) 14%, transparent);
  color: var(--os-color-ink);
} }
.view-track-icon {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
}
.view-track-icon-play::before {
  content: '';
  position: absolute;
  inset: 1px 2px;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.view-track-icon-pause::before,
.view-track-icon-pause::after {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 1px;
  background: currentColor;
}
.view-track-icon-pause::before { left: 3px; }
.view-track-icon-pause::after { right: 3px; }

.view-track-icon-equalizer {
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) left bottom / 3px 42% no-repeat,
    linear-gradient(currentColor, currentColor) center bottom / 3px 82% no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 3px 60% no-repeat;
}

.view-track-icon-equalizer-playing {
  animation: view-track-equalizer 760ms steps(4, end) infinite;
}

@keyframes view-track-equalizer {
  0% {
    background-size: 3px 38%, 3px 88%, 3px 56%;
  }
  25% {
    background-size: 3px 82%, 3px 48%, 3px 92%;
  }
  50% {
    background-size: 3px 58%, 3px 94%, 3px 40%;
  }
  75% {
    background-size: 3px 92%, 3px 62%, 3px 76%;
  }
  100% {
    background-size: 3px 44%, 3px 84%, 3px 58%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-track-icon-equalizer-playing {
    animation: none;
  }
}

.view-track-leading.view-track-leading-current > .view-track-play {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--os-color-ink);
}

.view-track-leading.view-track-leading-current > .view-track-number {
  opacity: 0;
  visibility: hidden;
}

.view-track-leading-current .view-track-icon {
  width: 14px;
  height: 14px;
}

.view-track-leading-current .view-track-icon-pause::before,
.view-track-leading-current .view-track-icon-pause::after {
  top: 2px;
  bottom: 2px;
  width: 3px;
}

.view-track-leading-current .view-track-icon-pause::before { left: 2px; }
.view-track-leading-current .view-track-icon-pause::after { right: 2px; }

.view-track-title {
  font-size: 14px;
  font-weight: 650;
  color: var(--os-color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.view-track-title-active {
  color: var(--os-color-accent);
}

.view-track-duration {
  font-family: var(--os-font-app);
  font-size: 12px;
  font-weight: 620;
}

/* ── Achievement rows — flat, hairline separators, pill on right ── */

.library-empty-text {
  color: var(--os-color-ink-muted);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.5;
}
.library-empty-text {
  margin: 0;
  max-width: 720px;
}
.library-achievement-list {
  overflow: hidden;
  margin-bottom: var(--os-space-4);
}
.library-achievement-row {
  grid-template-columns: 56px minmax(0, 1fr);
}
.library-achievement-icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--os-color-hairline);
  background: color-mix(in srgb, var(--os-color-ink) 5%, var(--os-paper-bg));
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--os-color-ink);
  font-size: 11px;
  font-weight: 760;
}

.achievement-icon-mask {
  width: 64%;
  height: 64%;
  display: block;
  background: currentColor;
  -webkit-mask: var(--achievement-icon-url) center / contain no-repeat;
  mask: var(--achievement-icon-url) center / contain no-repeat;
}
.achievement-icon-fallback {
  position: relative;
  color: currentColor;
}
.project-status-pill.library-achievement-status-unlocked {
  color: var(--os-color-success);
  border-color: color-mix(in srgb, var(--os-color-success) 34%, var(--os-paper-border));
  background: color-mix(in srgb, var(--os-color-success) 14%, var(--os-paper-bg));
}
.project-status-pill.library-achievement-status-locked {
  color: var(--os-color-ink-secondary);
  border-color: var(--os-color-hairline);
  background: color-mix(in srgb, var(--os-color-ink) 5%, var(--os-paper-bg));
}

.library-achievement-row:not(.library-achievement-row-unlocked) .library-achievement-icon {
  opacity: 0.48;
  color: var(--os-color-ink-muted);
}

/* ── 44OS Home concept: hidden prototype route at /studio/44os-home ── */

body.theme-dark .os-home-hero {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--os-color-accent) 16%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

body.theme-dark .os-home-now {
  border-color: var(--os-card-border);
  background: color-mix(in srgb, var(--os-card-bg) 88%, transparent);
}

body.theme-dark .os-home-panel {
  border-color: var(--os-card-border);
  background: var(--os-card-bg);
  box-shadow: var(--os-card-shadow);
}

/* ── Page stack (vertical rhythm for hub pages) ── */
.app-page {
  display: grid;
  gap: var(--os-section-gap);
  width: 100%;
}

/* =========================================================
   44OS VIEW SYSTEM
   Flat, text-on-glass layout for content and detail pages.
   No nested glass panels — sections separated by hairlines.
   ========================================================= */

/* ── Universal top bar — sits above scrollable content, no glass ── */
.os-topbar {
  position: relative;
  z-index: 20;
  box-sizing: border-box;
  height: var(--os-topbar-height);
  padding: var(--os-safe-area-top) var(--os-topbar-right-inset) 0 var(--os-topbar-left-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-shrink: 0;
}

.os-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.os-topbar-left::-webkit-scrollbar {
  display: none;
}

.os-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.os-topbar-tab {
  min-height: var(--os-topbar-pill-height);
  min-width: 70px;
  padding: 0 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--os-color-ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  color: color-mix(in srgb, var(--os-color-ink) 74%, var(--os-color-ink-secondary));
  font-family: var(--os-font-app);
  font-size: 14px;
  font-weight: 680;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {

.os-topbar-tab:hover {
  background: color-mix(in srgb, var(--os-color-ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--os-color-ink) 14%, transparent);
  color: var(--os-color-ink);
} }

.os-topbar-tab-active {
  background: color-mix(in srgb, var(--os-color-ink) 18%, transparent);
  border-color: color-mix(in srgb, var(--os-color-ink) 20%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 36%, transparent);
  color: var(--os-color-ink);
  font-weight: 760;
}

.os-topbar-tab-section {
  position: relative;
  min-width: max-content;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--os-color-ink-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .os-topbar-tab-section:hover {
    border-color: transparent;
    background: transparent;
    color: var(--os-color-ink);
  }
}

.os-topbar-tab-section.os-topbar-tab-active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--os-color-accent);
}

.os-topbar-tab-section.os-topbar-tab-active::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.os-topbar-back {
  width: var(--os-topbar-control-size);
  height: var(--os-topbar-control-size);
  min-width: var(--os-topbar-control-size);
  min-height: var(--os-topbar-control-size);
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  border: none;
  color: var(--os-color-ink);
  font-family: var(--os-font-app);
  font-size: 14px;
  font-weight: 680;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 120ms ease, color 120ms ease;
}

@media (hover: hover) and (pointer: fine) {

.os-topbar-back:hover {
  background: color-mix(in srgb, var(--os-color-ink) 10%, transparent);
  color: var(--os-color-ink);
} }

.os-topbar-icon-button {
  width: var(--os-topbar-control-size);
  height: var(--os-topbar-control-size);
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--os-color-ink);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

@media (hover: hover) and (pointer: fine) {

.os-topbar-icon-button:hover {
  background: color-mix(in srgb, var(--os-color-ink) 10%, transparent);
  color: var(--os-color-ink);
} }

.os-topbar-icon-button-active {
  background: color-mix(in srgb, var(--os-color-ink) 14%, transparent);
  color: var(--os-color-ink);
}

/* Click-to-expand topbar search */
.os-topbar-search {
  display: inline-flex;
  align-items: center;
}

.os-topbar-search-mobile {
  display: none;
}

.os-topbar-back-mobile-only {
  display: none;
}

.os-topbar-search-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--os-topbar-control-size);
  padding: 0 12px 0 12px;
  border-radius: 999px;
  background: var(--os-color-surface);
  border: 1px solid var(--os-color-hairline);
  width: min(260px, 32vw);
  box-shadow: none;
  animation: os-topbar-search-in 160ms ease;
}

@keyframes os-topbar-search-in {
  from { width: 44px; opacity: 0.6; }
  to   { width: min(260px, 32vw); opacity: 1; }
}

.os-topbar-search-icon {
  display: inline-flex;
  color: var(--os-color-ink-muted);
  flex: 0 0 auto;
}

.os-topbar-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--os-color-ink);
  padding: 0;
  height: 100%;
}

.os-topbar-search-input::placeholder {
  color: var(--os-color-ink-muted);
}

.os-topbar-search-clear {
  appearance: none;
  border: 0;
  background: color-mix(in srgb, var(--os-color-ink) 10%, transparent);
  color: var(--os-color-ink-muted);
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {

.os-topbar-search-clear:hover {
  background: color-mix(in srgb, var(--os-color-ink) 16%, transparent);
  color: var(--os-color-ink);
} }

.page-header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.page-search-control {
  width: min(260px, 28vw);
  height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--os-color-hairline);
  border-radius: 999px;
  background: color-mix(in srgb, var(--os-color-ink) 5%, transparent);
  color: var(--os-color-ink-muted);
}

.page-search-control input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--os-color-ink);
  font: inherit;
  font-size: 14px;
}

.page-filter-menu {
  position: relative;
}

.page-compose-button {
  display: none;
}

.page-filter-menu > summary {
  list-style: none;
}

.page-filter-menu > summary::-webkit-details-marker {
  display: none;
}

.page-filter-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--os-color-hairline);
  border-radius: 50%;
  background: color-mix(in srgb, var(--os-color-ink) 7%, transparent);
  color: var(--os-color-ink);
  cursor: pointer;
}

.page-filter-icon {
  width: 19px;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.page-filter-icon i {
  height: 1.5px;
  display: block;
  border-radius: 2px;
  background: currentColor;
}

.page-filter-icon i:nth-child(1) { width: 19px; }
.page-filter-icon i:nth-child(2) { width: 14px; }
.page-filter-icon i:nth-child(3) { width: 9px; }

.page-filter-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  width: 170px;
  padding: 6px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--os-paper-border);
  border-radius: 8px;
  background: var(--os-paper-bg);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
}

.page-filter-popover:has(.store-filter-group) {
  width: min(260px, calc(100vw - 32px));
  padding: 10px;
  gap: 10px;
}

.store-filter-group {
  display: grid;
  gap: 5px;
}

.store-filter-label {
  color: var(--os-color-ink-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-filter-group .os-input-field {
  width: 100%;
  min-height: 36px;
}


.page-filter-option {
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--os-color-ink-secondary);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.page-filter-option-active {
  background: color-mix(in srgb, var(--os-color-ink) 10%, transparent);
  color: var(--os-color-ink);
}

@media (hover: hover) and (pointer: fine) {

.page-filter-option:hover {
  background: color-mix(in srgb, var(--os-color-ink) 10%, transparent);
  color: var(--os-color-ink);
} }

.os-topbar-avatar {
  width: var(--os-topbar-control-size);
  height: var(--os-topbar-control-size);
  border-radius: 50%;
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--os-color-ink) 12%, transparent);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--os-color-ink);
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  border-width: 1px;
  border-style: solid;
}

.os-topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.os-topbar-login-avatar {
  display: none;
}

/* Notification bell red dot */
.os-topbar-icon-wrapper { position: relative; display: inline-flex; }

.os-topbar-notification-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ff3b30;
  color: #fff;
  border: 2px solid var(--os-shell-bg);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;
}

.web-push-prompt {
  position: fixed;
  z-index: 1200;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 74px));
  width: min(390px, calc(100vw - 36px));
  padding: 18px;
  display: grid;
  gap: 16px;
  border: 1px solid color-mix(in srgb, var(--os-accent) 32%, var(--os-color-border));
  background: var(--os-paper-bg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .34);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:is(.theme-dark, .theme-light) .web-push-prompt.ui44-paper-menu {
  width: min(410px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  padding: 22px;
}

.web-push-prompt-copy,
.web-push-prompt-actions { display: grid; gap: 8px; }

.web-push-prompt-actions { grid-template-columns: 1fr auto; }

@media (max-width: 620px) {
  body:is(.theme-dark, .theme-light) .web-push-prompt.ui44-paper-menu {
    right: max(14px, env(safe-area-inset-right));
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    padding: 18px;
  }

  .web-push-prompt-actions { grid-template-columns: 1fr; }
}

.os-topbar-cart-button {
  position: relative;
  width: auto;
  min-width: var(--os-topbar-control-size);
  padding: 0 11px;
  grid-auto-flow: column;
  gap: 7px;
  border-radius: var(--os-radius-pill);
}

.os-topbar-cart-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--os-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--os-color-ink);
  color: var(--os-color-canvas);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
}

/* ── Popover — used for user menu + notifications ── */
/* Paper material: solid, opaque, readable above the app shell. */
.os-popover {
  position: absolute;
  top: 58px;
  right: 0;
  min-width: 236px;
  padding: 10px;
  border-radius: 18px;
  background: var(--os-paper-bg);
  border: 1px solid var(--os-paper-border);
  box-shadow: var(--os-shadow-4);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.os-popover-wide { min-width: 340px; }

.os-popover-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--os-color-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 120ms ease, color 120ms ease;
}

@media (hover: hover) and (pointer: fine) {

.os-popover-item:hover {
  background: color-mix(in srgb, var(--os-color-ink) 10%, transparent);
  color: var(--os-color-ink);
} }

.os-popover-divider {
  height: 1px;
  background: var(--os-color-hairline);
  margin: 4px 4px;
}

/* 44OS context menu — the shared right-click surface. Same popover
   language, but positioned at the cursor and above everything. */
.os-context-menu {
  position: fixed;
  top: auto;
  right: auto;
  min-width: 208px;
  z-index: 200;
}

.os-copy-toast {
  position: fixed;
  top: 92px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  min-width: 240px;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 205;
}

.os-popover-item-danger { color: var(--os-color-danger); }

@media (hover: hover) and (pointer: fine) {

.os-popover-item-danger:hover {
  background: color-mix(in srgb, var(--os-color-danger) 12%, transparent);
  color: var(--os-color-danger);
} }

.os-popover-item:disabled {
  opacity: 0.45;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {

.os-popover-item:disabled:hover {
  background: none;
  color: var(--os-color-ink);
} }

/* Notification list inside popover */
.os-notification-list {
  max-height: 380px;
  overflow-y: auto;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.os-notification-item {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}

@media (hover: hover) and (pointer: fine) {

.os-notification-item:hover {
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
} }

.os-notification-title {
  font-size: 13.5px;
  font-weight: 620;
  color: var(--os-color-ink);
  margin-bottom: 3px;
}

.os-notification-body {
  font-size: 12px;
  font-weight: 520;
  color: var(--os-color-ink-secondary);
  line-height: 1.4;
}

.os-notification-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--os-color-ink-muted);
  font-size: 13px;
}

.os-popover-header {
  padding: 12px 14px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.os-popover-text-button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--os-color-ink-secondary);
  cursor: pointer;
  font-family: var(--os-font-app);
  font-size: 12px;
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {

.os-popover-text-button:hover {
  color: var(--os-color-ink);
} }

.os-notification-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: start;
  border-radius: 12px;
}

@media (hover: hover) and (pointer: fine) {

.os-notification-row:hover {
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
} }

@media (hover: hover) and (pointer: fine) {

.os-notification-row .os-notification-item:hover {
  background: transparent;
} }

.os-notification-remove {
  width: 24px;
  height: 24px;
  margin-top: 8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--os-color-ink-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {

.os-notification-remove:hover {
  background: color-mix(in srgb, var(--os-color-ink) 10%, transparent);
  color: var(--os-color-ink);
} }

.os-popover-heading {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--os-color-ink);
}

.os-popover-footer-link {
  display: block;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 620;
  color: var(--os-color-ink-secondary);
  text-decoration: none;
  border-top: 1px solid var(--os-color-hairline);
  margin-top: 4px;
  transition: color 120ms ease;
}

@media (hover: hover) and (pointer: fine) {

.os-popover-footer-link:hover { color: var(--os-color-ink); } }

/* Shared route wrapper; the global Topbar owns page-level vertical framing. */

/* Hub layout — for Store, Community, Resources, Services */
.view-hub {
  width: 100%;
  max-width: var(--os-content-max);
  margin: 0 auto;
  padding: 0 var(--os-content-inset) var(--os-space-10);
  display: grid;
  gap: var(--os-section-gap);
}

/* Full-width page container (no max width, edge-to-edge) */

/* Content wrapper for detail pages */

/* Management workspace container — same header line and section rhythm
   as .app-page. */
.dashboard-page {
  width: 100%;
  display: grid;
  gap: var(--os-section-gap);
}

/* Shared header for all hub and dashboard pages (via HubHero and inline usage).
   Flex row so pages can put a right-aligned action button next to the title. */
/* Canonical app header — every app's first screen opens with this block:
   app title upper-left, one-line description under it. Spacing is fixed
   system-wide; do not override per page. */
.app-header,
.dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--os-space-6);
  padding: var(--os-app-header-pad-top) 0 var(--os-app-header-pad-bottom);
  border-bottom: 1px solid var(--os-color-hairline);
  color: var(--os-color-ink);
}

.app-header .page-header-tools {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: min(360px, 48vw);
}

.app-header .page-search-control {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}

.app-header .library-filter-control {
  width: min(240px, 24vw);
  max-width: 240px;
  flex: 0 1 240px;
}

.community-app-page .page-header-tools {
  flex: 0 1 auto;
  min-width: 0;
}

.community-app-page .page-search-control {
  flex: 0 1 320px;
  width: min(320px, 28vw);
}

.app-header-copy,
.dashboard-header-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.app-header-copy p,
.dashboard-header-copy p {
  max-width: 760px;
  color: var(--os-color-ink-secondary);
}

.dashboard-section {
  display: grid;
  gap: 16px;
}

.dashboard-list-surface {
  border-radius: 28px;
  border: 1px solid var(--os-paper-border);
  background: var(--os-paper-bg);
  box-shadow: var(--os-paper-shadow);
  overflow: hidden;
}

.dashboard-list-row {
  padding: var(--os-row-pad-y) var(--os-row-pad-x);
  display: grid;
  gap: var(--os-space-5);
  align-items: center;
}

.cart-row {
  grid-template-columns: minmax(0, 1fr) auto 32px;
}

.cart-row-item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.cart-row-art {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  flex-shrink: 0;
}

.cart-row-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-row-price {
  font-weight: 720;
  color: var(--os-color-ink);
  min-width: 90px;
  text-align: right;
}

.cart-row-remove-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--os-color-hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--os-color-ink-secondary);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

@media (hover: hover) and (pointer: fine) {

.cart-row-remove-button:hover {
  border-color: var(--os-color-ink-muted);
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  color: var(--os-color-ink);
} }

.cart-row-remove-button:focus-visible {
  outline: 2px solid var(--os-color-ink);
  outline-offset: 2px;
}

.cart-summary {
  display: grid;
  gap: var(--os-space-3);
  padding: var(--os-space-6);
  border-radius: var(--os-radius-6);
  background: var(--os-paper-bg);
  border: 1px solid var(--os-paper-border);
  box-shadow: var(--os-shadow-paper), var(--os-paper-highlight);
}

.cart-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cart-summary-note {
  border-top: 1px solid var(--os-color-hairline);
  padding-top: 12px;
}

.cart-summary-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

@media (max-width: 780px) {
  .cart-row {
    grid-template-columns: minmax(0, 1fr) auto 32px;
    gap: 10px;
    padding: 18px;
    align-items: center;
  }
  .cart-row-item {
    gap: 10px;
  }
  .cart-row-art {
    width: 46px;
    height: 46px;
    border-radius: 10px;
  }
  .cart-row-item .dashboard-row-title {
    font-size: 15px;
  }
  .cart-row-item .dashboard-row-subtitle {
    font-size: 12px;
  }
  .cart-row-price {
    min-width: 0;
    font-size: 14px;
    text-align: right;
  }
  .cart-summary {
    gap: 16px;
    padding: 20px;
  }
  .cart-summary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
  }
  .cart-summary-actions .os-button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 12px;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }
}

/* M15 native books and sample packs */
.sample-pack-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--os-space-5);
}

.sample-pack-heading .view-section-title { margin: 0; }
.sample-preview-list { border-top: 1px solid var(--os-color-border); }
.sample-download-action {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--os-color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--os-color-ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.sample-track-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.sample-download-action:focus-visible { outline: 2px solid var(--os-color-accent); outline-offset: 3px; }

.native-reader {
  --reader-bg: var(--os-color-canvas);
  --reader-toolbar: var(--os-color-paper);
  --reader-ink: var(--os-color-ink);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--reader-bg);
  color: var(--reader-ink);
}

.reader-route {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}
.native-reader-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: var(--os-topbar-height);
  padding: 8px 20px;
  background: var(--reader-toolbar);
  border-bottom: 1px solid color-mix(in srgb, var(--reader-ink) 16%, transparent);
}
.native-reader-close { position: absolute; top: 8px; left: 16px; display: grid; place-items: center; width: 44px; height: 44px; appearance: none; cursor: pointer; border: 1px solid color-mix(in srgb, var(--reader-ink) 24%, transparent); border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 26px; line-height: 1; text-decoration: none; }
.native-reader-title { display: flex; align-items: center; min-width: 0; min-height: 44px; padding-left: 52px; }
.native-reader-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.native-reader-controls,
.native-reader-page-actions { display: flex; align-items: center; gap: 8px; }
.native-reader-page-count { display: block; color: color-mix(in srgb, var(--reader-ink) 72%, transparent); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.native-reader-bookmarks { position: relative; display: flex; }
.native-reader-bookmark-active { color: var(--os-color-accent) !important; }
.native-reader-bookmark-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 6px;
  width: 210px;
  max-height: min(320px, 55dvh);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-ink) 20%, transparent);
  border-radius: 14px;
  background: var(--reader-toolbar);
  box-shadow: 0 16px 40px rgb(0 0 0 / 24%);
}
.native-reader-bookmark-menu > strong { padding: 4px 6px 8px; }
.native-reader-bookmark-menu > span { padding: 8px 6px; color: color-mix(in srgb, var(--reader-ink) 64%, transparent); font-size: 13px; }
.native-reader-bookmark-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 6px; }
.native-reader-bookmark-row button { width: auto; min-width: 36px; height: 36px; border-radius: 9px; text-align: left; padding: 0 10px; }
.native-reader-bookmark-row button:last-child { padding: 0; text-align: center; }
.native-reader-controls button {
  min-width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--reader-ink) 24%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
}
.native-reader-controls button { border-radius: 50%; cursor: pointer; font-size: 22px; }
.native-reader-offline { padding: 8px 20px; background: #7d4b13; color: #fff; text-align: center; }
.native-reader-stage { overflow: auto; display: grid; place-items: start center; padding: 16px; outline: none; touch-action: pan-x pan-y pinch-zoom; }
.native-reader-stage canvas { display: block; background: #fff; box-shadow: 0 14px 42px rgb(0 0 0 / 32%); }
.native-reader-state { display: grid; place-items: center; align-content: center; gap: 20px; min-height: 100%; padding: 32px; text-align: center; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 780px) {
  .sample-pack-heading { flex-direction: column; }
  .sample-pack-heading .os-button { width: 100%; }
  .sample-download-action { width: 36px; height: 36px; }
  .native-reader-toolbar { grid-template-columns: 1fr; min-height: 60px; gap: 0; padding: 8px 12px; }
  .native-reader-close { top: 8px; left: 10px; }
  .native-reader-title { display: none; }
  .native-reader-controls { justify-content: space-between; min-height: 44px; padding-left: 54px; }
  .native-reader-page-actions { gap: 6px; }
  .native-reader-page-actions button { min-width: 36px; width: 36px; height: 36px; }
  .native-reader-bookmark-menu { position: fixed; top: 66px; right: 10px; width: min(260px, calc(100vw - 20px)); }
  .native-reader-stage { padding: 0; }
}

@media (max-width: 768px) {
  .app-shell:has(.reader-route) .app-sidebar,
  .app-shell:has(.interactive-launch-page) .app-sidebar {
    display: none !important;
  }
  .app-shell:has(.reader-route) .app-main,
  .app-shell:has(.interactive-launch-page) .app-main {
    height: 100dvh;
  }
  .app-shell:has(.reader-route) .app-main-content,
  .app-shell:has(.interactive-launch-page) .app-main-content {
    min-height: 100dvh;
  }
  .native-reader { height: 100dvh; }
}

@media (max-height: 520px) and (max-width: 900px) {
  .app-frame:has(.reader-route) { padding: 0; }
  .app-shell:has(.reader-route) { border: 0; border-radius: 0; }
  .app-shell:has(.reader-route) .app-sidebar { display: none !important; }
  .app-shell:has(.reader-route) .app-main,
  .app-shell:has(.reader-route) .app-main-content { height: 100dvh; min-height: 100dvh; }
  .native-reader { height: 100dvh; }
  .native-reader-toolbar { grid-template-columns: 1fr; min-height: 60px; gap: 0; padding: 8px 12px; }
  .native-reader-close { top: 8px; left: 10px; }
  .native-reader-title { display: none; }
  .native-reader-controls { justify-content: space-between; min-height: 44px; padding-left: 54px; }
  .native-reader-page-actions { gap: 6px; }
  .native-reader-page-actions button { min-width: 36px; width: 36px; height: 36px; }
  .native-reader-bookmark-menu { position: fixed; top: 66px; right: 10px; width: min(260px, calc(100vw - 20px)); }
  .native-reader-stage { padding: 0; }
}

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--os-space-7);
  align-items: start;
}

.checkout-summary {
  padding: 22px 24px;
  display: grid;
  gap: 16px;
  position: sticky;
  top: 24px;
}

.checkout-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout-summary-items {
  display: grid;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid var(--os-color-hairline);
}

.checkout-summary-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-top: 12px;
}

.checkout-summary-row + .checkout-summary-row {
  border-top: 1px solid var(--os-color-hairline);
}

.checkout-summary-art {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
}

.checkout-summary-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.checkout-summary-title {
  font-weight: 720;
  font-size: 15px;
  color: var(--os-color-ink);
  line-height: 1.2;
}

.checkout-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--os-color-hairline);
}

@media (max-width: 980px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
  .checkout-summary {
    position: static;
  }
}

/* ── Service project workspace ── */

.project-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--os-radius-pill);
  background: var(--os-paper-bg);
  border: 1px solid var(--os-paper-border);
  box-shadow: var(--os-shadow-paper), var(--os-paper-highlight);
  color: var(--os-color-ink);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
}

.project-status-pill[data-status="accepted"],
.project-status-pill[data-status="in_progress"] {
  color: var(--os-color-accent);
}

.project-status-pill[data-status="declined"],
.project-status-pill[data-status="canceled"] {
  color: var(--os-color-danger);
}

.project-status-pill[data-status="completed"] {
  color: var(--os-color-owned);
}

.dashboard-list-row + .dashboard-list-row {
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.dashboard-row-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.studio-item-row {
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
}

/* Studio release rows always reserve column two for the release copy and
   column three for an optional issue badge. This prevents an empty actions
   cell from shifting the title/status block to the right edge. */
.studio-item-row > .dashboard-row-copy {
  grid-column: 2;
  justify-self: stretch;
  text-align: left;
}

.studio-item-row > .dashboard-row-actions {
  grid-column: 3;
}

.studio-item-row-no-actions {
  grid-template-columns: 96px minmax(0, 1fr);
}

.studio-item-artwork {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--os-glass-recessed-bg);
}

.studio-item-artwork-empty {
  border: 1px solid var(--os-color-hairline);
}

.studio-feature-panel,
.studio-track-panel {
  overflow: hidden;
  padding: 0 20px;
}

.studio-feature-panel > .studio-video-embed-fields,
.studio-feature-panel > .external-links-editor {
  padding: 20px;
}

.dashboard-row-title {
  font-size: 18px;
  font-weight: 720;
  line-height: 1.15;
}

.dashboard-row-subtitle,
.dashboard-row-meta {
  font-size: 13px;
  color: var(--os-color-ink-muted);
}

.dashboard-row-meta {
  font-size: 14px;
  color: var(--os-color-ink-secondary);
}

.dashboard-row-actions {
  justify-self: end;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.dashboard-status-pill {
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--os-color-ink-secondary);
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  border: 1px solid rgba(17, 24, 39, 0.08);
}

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

.dashboard-metric-card {
  padding: var(--os-space-6);
  display: grid;
  gap: var(--os-space-2);
  min-height: 148px;
}

.dashboard-metric-card.glass-panel {
  border-radius: var(--os-radius-5);
  background: var(--os-paper-bg);
  border-color: var(--os-paper-border);
  box-shadow: var(--os-shadow-card), var(--os-paper-highlight);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dashboard-overview-card-inner {
  min-height: 100%;
  display: grid;
  align-content: space-between;
  gap: var(--os-space-2);
}

.dashboard-overview-card .dashboard-overview-card-inner,
.dashboard-metric-card .dashboard-overview-card-inner {
  place-content: center;
  justify-items: center;
  text-align: center;
}

.dashboard-overview-card .os-type-page-title,
.dashboard-metric-card .os-type-page-title {
  line-height: 1;
}

.dashboard-overview-card .os-type-meta,
.dashboard-metric-card .os-type-meta {
  color: var(--os-color-ink-secondary);
  text-transform: uppercase;
}

.dashboard-overview-card .os-type-body-small,
.dashboard-metric-card .os-type-body-small {
  color: var(--os-color-ink-secondary);
  margin: 0;
  min-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.studio-catalog-sections {
  display: grid;
  gap: var(--os-section-gap);
}

.studio-create-popover {
  width: 200px;
}

.studio-create-popover .page-filter-option {
  display: flex;
  align-items: center;
  width: 100%;
}

.studio-create-button > span {
  display: block;
  color: currentColor;
  font-size: 27px;
  font-weight: 360;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 140ms ease;
}

.page-filter-menu-open > .studio-create-button > span {
  transform: rotate(45deg);
}

.studio-events-empty {
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: var(--os-row-pad-y) var(--os-row-pad-x);
}

@media (max-width: 1080px) {
  .dashboard-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .dashboard-overview-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-empty {
  color: var(--os-color-ink-secondary);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.5;
  padding: 24px 26px;
}

.dashboard-editor {
  width: 100%;
  display: grid;
  gap: var(--os-space-7);
}

.dashboard-form {
  display: grid;
}

.dashboard-form-grid {
  display: grid;
  gap: 22px;
}

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

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

.dashboard-field {
  display: grid;
  gap: 8px;
}

.dashboard-field-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 640;
  color: var(--os-color-ink-muted);
}

.dashboard-price-input {
  position: relative;
  display: block;
}

.dashboard-price-input > .dashboard-price-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--os-color-ink-muted);
  font-weight: 700;
  pointer-events: none;
  z-index: 1;
}

.dashboard-price-input > .dashboard-price-value {
  padding-inline-start: 48px !important;
}

.dashboard-form-section {
  display: grid;
}

.dashboard-form-step {
  display: grid;
  border-radius: 24px;
  border: 1px solid var(--os-paper-border);
  background: var(--os-paper-bg);
  box-shadow: var(--os-paper-shadow);
}

.dashboard-track-editor-list {
  display: grid;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--os-paper-border);
  background: var(--os-paper-bg);
  box-shadow: var(--os-paper-shadow);
}

.dashboard-track-editor-row {
  padding: 18px;
  border-top: 1px solid var(--os-color-hairline);
}

.dashboard-track-editor-row:first-child {
  border-top: 0;
}

.dashboard-track-editor-copy {
  display: grid;
  gap: 16px;
}

/* Studio release editor: Tracks and Achievements sit directly on the themed
   workspace. Other Studio form sections intentionally retain their panels. */
.studio-tracks-section .dashboard-track-editor-list {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.studio-tracks-section .dashboard-track-editor-row {
  padding: 22px 0;
  border-top: 1px solid var(--os-color-hairline);
}

.studio-tracks-section .dashboard-track-editor-row:last-child {
  border-bottom: 1px solid var(--os-color-hairline);
}

.studio-tracks-section,
.studio-achievements-section {
  margin-top: 34px;
}

.studio-tracks-section .dashboard-track-editor-copy {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  align-items: end;
  gap: 24px;
}

.studio-achievements-content {
  display: grid;
  gap: 20px;
}

.studio-achievements-section .dashboard-form-note {
  margin: 0;
}

.dashboard-achievement-picker {
  display: grid;
  border-top: 1px solid var(--os-color-hairline);
}

.dashboard-achievement-choice-row {
  min-height: 92px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--os-color-hairline);
  cursor: pointer;
}

.dashboard-achievement-choice-row .dashboard-achievement-toggle {
  justify-self: end;
  padding-left: 12px;
}

.dashboard-achievement-choice-row .dashboard-achievement-toggle input {
  width: 20px;
  height: 20px;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--os-color-ink) 36%, transparent);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}

.dashboard-achievement-choice-row .dashboard-achievement-toggle input:checked {
  border-color: #fff;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-9' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
}

.dashboard-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.dashboard-form-actions-left,
.dashboard-form-actions-right {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-form-actions-right {
  margin-left: auto;
}

.dashboard-form-note {
  color: var(--os-color-ink-secondary);
  font-size: 14px;
}

.dashboard-status {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
  font-weight: 650;
}

.dashboard-status-error {
  background: rgba(255, 59, 48, 0.08);
  border-color: rgba(255, 59, 48, 0.22);
  color: #b42318;
}

.dashboard-status-success {
  background: rgba(105, 219, 124, 0.12);
  border-color: rgba(105, 219, 124, 0.26);
  color: #236b2d;
}

.radio-setup-card {
  padding: var(--os-space-6);
  display: grid;
  gap: var(--os-space-4);
}

.radio-page {
  width: 100%;
  display: grid;
  gap: var(--os-space-5);
}

.radio-hero {
  min-height: min(640px, calc(100dvh - var(--os-topbar-height) - 46px));
  border-radius: 0;
}

.radio-hero-copy {
  align-items: center;
  text-align: center;
}

.radio-hero-eyebrow {
  justify-content: center;
}

.radio-hero-kicker {
  display: none;
}

.radio-hero-title {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(28px, 2.35vw, 34px);
  line-height: 1.06;
}

.radio-hero-artist {
  justify-content: center;
  margin: 0 auto;
}

.radio-hero-actions {
  justify-content: center;
  margin-top: 20px;
}

.radio-hero-cover-empty {
  display: grid;
  place-items: center;
}

.radio-setup-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.radio-setup-copy {
  display: grid;
  gap: var(--os-space-2);
}

.radio-setup-copy p {
  margin: 0;
  color: var(--os-color-ink-secondary);
}

.radio-now-title-link {
  color: inherit;
  text-decoration: none;
}

.radio-playlist-index {
  color: var(--os-color-ink-muted);
  font-weight: 700;
  text-align: center;
}

@media (max-width: 980px) {
  .radio-setup-card {
    grid-template-columns: 1fr;
  }
}

.os-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 32px;
}

.os-modal {
  width: min(100%, 520px);
  border-radius: 24px;
  background: #f7f5ef;
  border: 1px solid rgba(28, 33, 41, 0.10);
  box-shadow: var(--os-shadow-modal), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  color: var(--os-color-ink);
  overflow: hidden;
}

.os-modal-body {
  display: grid;
  gap: 12px;
  padding: 26px 26px 22px;
}

.os-modal-title {
  font-size: 28px;
  font-weight: 760;
  letter-spacing: 0;
}

.os-modal-copy {
  color: var(--os-color-ink-secondary);
  font-size: 16px;
  line-height: 1.5;
}

.os-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 26px 26px;
  border-top: 1px solid rgba(28, 33, 41, 0.08);
  background: rgba(0, 0, 0, 0.015);
}

/* Detail page — single column. No rail. */
.view-detail-single {
  display: flex;
  flex-direction: column;
}

/* ── Album-style detail header — Apple Music inspired ──
   Blurred cover fills the background, sharp cover thumbnail on left,
   title / creator / meta on the right. Sits in a rounded region. */
.view-album-header {
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 38vw, 520px);
  padding: clamp(56px, 5.8vw, 96px) var(--os-detail-inset);
  display: grid;
  grid-template-columns: clamp(240px, 23vw, 368px) minmax(0, 1fr);
  gap: clamp(42px, 4.6vw, 70px);
  align-items: center;
  justify-content: start;
  color: #fff;
  isolation: isolate;
  background-image: var(--release-artwork);
  background-size: cover;
  background-position: center;
}

.view-album-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--os-glass-recessed-bg);
  background-image: var(--release-artwork);
  background-size: cover;
  background-position: center;
  filter: blur(52px) saturate(1.35);
  transform: scale(1.18);
}

.view-album-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 28% 50%, rgba(0,0,0,0.08), rgba(0,0,0,0.44) 48%, rgba(0,0,0,0.72) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.22) 38%, rgba(0,0,0,0.62) 100%);
}

.view-album-header-fallback {
  background-color: var(--os-glass-recessed-bg);
  filter: none;
}

.view-album-cover {
  width: clamp(240px, 23vw, 368px);
  height: clamp(240px, 23vw, 368px);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.24);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.view-album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.view-album-cover-book {
  width: clamp(220px, 19vw, 300px);
  height: auto;
  aspect-ratio: 2 / 3;
}

.view-album-cover-book img {
  object-fit: contain;
  background: rgba(255, 255, 255, 0.08);
}

.view-album-cover-physical {
  aspect-ratio: 3 / 4;
  height: auto;
}

.view-album-cover-physical img {
  object-fit: contain;
  background: rgba(255, 255, 255, 0.12);
}

.view-album-cover-asset {
  aspect-ratio: 1 / 1;
  height: auto;
}

.view-album-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 780px;
  min-width: 0;
  padding: 20px 0;
}

.view-album-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.view-album-meta-token {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.view-album-title {
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.04;
  color: #fff;
  margin: 6px 0 4px;
}

.view-description {
  color: var(--os-color-ink-secondary);
  max-width: 720px;
}

.library-detail-header .view-album-cover {
  width: clamp(220px, 20vw, 320px);
  height: clamp(220px, 20vw, 320px);
}
.library-detail-header .view-album-copy {
  gap: var(--os-space-3);
  padding: var(--os-space-4) 0;
}
.library-detail-header .view-album-title {
  max-width: 980px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 40px;
  line-height: 1.08;
  margin: 0;
}
.library-detail-header .view-album-actions {
  margin-top: var(--os-space-2);
}

.view-content-empty {
  margin: 0;
  color: var(--os-color-ink-secondary);
  max-width: 720px;
}

.view-album-meta-sep {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.view-album-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.library-creator-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--os-space-3);
  width: fit-content;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 15px;
  font-weight: 680;
  transition: color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
.library-creator-chip:hover {
  color: #fff;
} }
.library-creator-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  font-size: 12px;
  font-weight: 760;
}
.library-creator-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Force album header buttons to stand out on the dark hero */
.view-album-actions .os-button-primary {
  background: #fff;
  color: #111;
  border-color: transparent;
}
.view-album-actions .os-button-secondary {
  background: var(--os-paper-bg);
  color: var(--os-color-ink);
  border-color: var(--os-paper-border);
  box-shadow: var(--os-shadow-paper), var(--os-paper-highlight);
}
@media (hover: hover) and (pointer: fine) {
.view-album-actions .os-button-secondary:hover {
  background: var(--os-color-ink);
  color: var(--os-paper-bg);
} }

@media (max-width: 780px) {
  .view-album-header {
    grid-template-columns: 1fr;
    padding: 40px 28px;
    min-height: 0;
  }
  .view-album-cover {
    width: 200px;
    height: 200px;
  }
  .view-album-title {
    font-size: 40px;
  }
}

/* Action bar — inline price + CTA on detail pages */

/* Detail page — content main + sticky rail */

/* Full-bleed hero artwork */

/* Gradient overlay for text on hero images */

/* Accent gradient fallback when no image */

/* Content section — no background, no hairline. Title separates sections. */
.view-section {
  padding: 40px 40px 0;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}

.view-section:last-child { padding-bottom: 60px; }
.view-section:first-child { padding-top: 32px; }
.view-section > .hub-section-head {
  margin-bottom: var(--os-space-7);
}

.library-detail-page .view-section {
  max-width: none;
  margin: 0;
  padding-left: var(--os-detail-inset);
  padding-right: var(--os-detail-inset);
}

/* Rail utility blocks */

@media (max-width: 860px) {
  .view-hub { padding: 0 20px 60px; }
  .view-section { padding: 24px 20px; }
  .library-detail-page .view-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Section rails dock into the Topbar without changing their visual grammar. */
body:is(.theme-dark, .theme-light) .os-topbar .os-topbar-tab.os-topbar-tab-section {
  position: relative;
  min-width: max-content;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--os-color-ink-secondary);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light) .os-topbar .os-topbar-tab.os-topbar-tab-section:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--os-color-ink);
  }
}

body:is(.theme-dark, .theme-light) .os-topbar .os-topbar-tab.os-topbar-tab-section.os-topbar-tab-active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--os-color-accent);
}

body:is(.theme-dark, .theme-light) .os-topbar .os-topbar-tab.os-topbar-tab-section.os-topbar-tab-active::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

/* Mobile docked rails replace the chrome and remain horizontally reachable. */
@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .store-app-page .app-header .ui44-type-page-title {
    max-width: 100%;
    font-size: clamp(24px, 8vw, 32px);
    line-height: 1.1;
    white-space: nowrap;
  }

  body:is(.theme-dark, .theme-light) .os-topbar.os-topbar-has-section-tabs .os-mobile-brand-logo,
  body:is(.theme-dark, .theme-light) .os-topbar.os-topbar-has-section-tabs .os-topbar-right {
    display: none;
  }

  body:is(.theme-dark, .theme-light) .os-topbar.os-topbar-has-section-tabs .os-topbar-left {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--os-content-inset);
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
}

/* Permanent page navigation uses the original rail treatment, never pills. */
.os-topbar .os-topbar-tab.os-topbar-tab-section {
  position: relative;
  min-width: max-content;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--os-color-ink-secondary);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .os-topbar .os-topbar-tab.os-topbar-tab-section:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--os-color-ink);
  }
}

.os-topbar .os-topbar-tab.os-topbar-tab-section.os-topbar-tab-active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--os-color-accent);
}

.os-topbar .os-topbar-tab.os-topbar-tab-section.os-topbar-tab-active::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

body:is(.theme-dark, .theme-light) .os-topbar .os-topbar-tab.os-topbar-tab-section.os-topbar-tab-section-first {
  padding-left: 0;
}

body:is(.theme-dark, .theme-light) .os-topbar .os-topbar-tab.os-topbar-tab-section.os-topbar-tab-section-first.os-topbar-tab-active::after {
  left: 0;
}

/* Discover uses one editorial lead and predictable horizontal collections.
   The restrained depth and large image treatment also carry cleanly into the
   desktop shell without introducing a second navigation system. */
.discover-feature {
  position: relative;
  display: flex;
  min-height: clamp(340px, 36vw, 510px);
  align-items: flex-end;
  overflow: hidden;
  border: 0;
  border-radius: clamp(20px, 2vw, 30px);
  background-color: color-mix(in srgb, var(--os-color-accent) 20%, var(--os-color-bg));
  background-position: center;
  background-size: cover;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .16);
}

.discover-feature-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 8, 12, .86) 0%, rgba(4, 8, 12, .72) 24%, rgba(4, 8, 12, .46) 48%, rgba(4, 8, 12, .2) 72%, rgba(4, 8, 12, .06) 100%), linear-gradient(0deg, rgba(4, 8, 12, .52) 0%, rgba(4, 8, 12, .18) 44%, transparent 72%);
}

.discover-feature-copy {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(620px, 72%);
  gap: 12px;
  padding: clamp(26px, 4vw, 56px);
}

.discover-feature-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.discover-feature-copy > strong {
  font-size: clamp(32px, 5vw, 68px);
  font-weight: 760;
  letter-spacing: -.045em;
  line-height: .96;
}

.discover-feature-copy > span:not(.discover-feature-eyebrow, .discover-feature-link) {
  max-width: 520px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.45;
}

.discover-feature-link {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 750;
}

body:is(.theme-dark, .theme-light) .discover-feature .discover-feature-copy,
body:is(.theme-dark, .theme-light) .discover-feature .discover-feature-eyebrow,
body:is(.theme-dark, .theme-light) .discover-feature .discover-feature-copy > strong,
body:is(.theme-dark, .theme-light) .discover-feature .discover-feature-link {
  color: #fff;
}

.discover-feature:focus-visible,
.discover-creator-card:focus-visible {
  outline: 2px solid var(--os-color-accent);
  outline-offset: 3px;
}

.discover-creator-shelf {
  display: grid;
  width: 100%;
  padding-bottom: 6px;
  grid-auto-flow: column;
  grid-auto-columns: clamp(210px, calc((100% - 54px) / 4), 320px);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.discover-creator-shelf::-webkit-scrollbar { display: none; }

.discover-creator-card {
  display: block;
  min-width: 0;
  color: var(--os-color-ink);
  text-decoration: none;
}

.discover-creator-main {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-items: center;
  gap: 12px;
}

.discover-creator-main img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.discover-creator-main strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-home-editor {
  display: grid;
  gap: 20px;
  padding: clamp(18px, 2vw, 28px);
}

.admin-home-preview {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.admin-home-preview img,
.admin-home-preview-empty {
  width: 112px;
  height: 112px;
  border-radius: 18px;
  object-fit: cover;
}

.admin-home-preview-empty {
  display: grid;
  place-items: center;
  background: var(--os-color-accent);
  color: #fff;
  font-size: 28px;
  font-weight: 800;
}

.admin-home-preview h2 { margin: 0 0 6px; }
.admin-home-preview p { margin: 0; color: var(--os-color-ink-secondary); }

@media (max-width: 768px) {
  .discover-feature {
    min-height: 360px;
    border-radius: 20px;
  }

  .discover-feature-shade {
    background: linear-gradient(0deg, rgba(4, 8, 12, .9) 0%, rgba(4, 8, 12, .52) 58%, rgba(4, 8, 12, .04) 100%);
  }

  .discover-feature-copy {
    width: 100%;
    padding: 24px;
  }

  .discover-creator-shelf {
    width: calc(100% + (2 * var(--os-content-inset)));
    margin-inline: calc(-1 * var(--os-content-inset));
    padding: 0 var(--os-content-inset) 4px;
    grid-auto-columns: calc((100% - 18px) / 2);
    gap: 18px;
    scroll-padding-inline: var(--os-content-inset);
  }
}

@media (max-width: 420px) {
  .discover-creator-shelf {
    grid-auto-columns: calc((100% - 14px) / 2);
    gap: 14px;
  }
}

/* ── Generic glass info panel (detail pages, sections) ── */

/* Alias: os-panel-surface = app-panel (used by system pages, login) */

/* ── Thread row — community post list item ── */

/* ── 44 Social surfaces ── */
/* Social surfaces keep a readable column but align to the workspace's
   leading axis like every other app (no self-centering). */
.social-shell {
  width: min(100%, var(--os-content-readable));
  max-width: var(--os-content-readable);
  margin: 0;
  padding-top: 0;
  display: grid;
  gap: var(--os-section-gap);
}

.social-shell-wide {
  width: min(100%, var(--os-content-readable));
  max-width: var(--os-content-readable);
}

.social-thread-page {
  padding-top: clamp(22px, 3vw, 46px);
}

.community-app-page {
  width: min(100%, var(--os-content-readable));
  max-width: var(--os-content-readable);
}

/* Same vertical rhythm as the canonical app header (.dashboard-header). */
.social-header {
  display: grid;
  gap: 18px;
  padding: var(--os-app-header-pad-top) 0 var(--os-app-header-pad-bottom);
  border-bottom: 1px solid var(--os-color-hairline);
}

.social-title-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.social-feed {
  display: grid;
}

.social-feed-post {
  display: grid;
  margin: 0 -20px;
  padding: 0 20px;
  transition: background 120ms ease;
}

.social-feed-list .social-feed-post:first-of-type {
  border-radius: 26px 26px 0 0;
}

.social-feed-list .social-feed-post:last-of-type {
  border-radius: 0 0 26px 26px;
}

@media (hover: hover) and (pointer: fine) {

.social-feed-list .social-feed-post:hover {
  background: color-mix(in srgb, var(--os-color-ink) 4%, transparent);
} }

.social-reply-drawer-row .social-avatar {
  width: 38px;
  height: 38px;
  font-size: 13px;
}

.social-reply-drawer-row .social-actions {
  margin-top: 2px;
}

/* Thread reply list — sits in a paper list surface with padded rows */
.social-feed-list {
  padding: 0 20px;
}

.social-feed-panel {
  overflow: hidden;
}

.social-feed-list .social-row {
  padding: 18px 0;
  min-height: 0;
}

.social-feed-list > :last-child .social-row:last-child,
.social-feed-list > .social-row:last-child {
  border-bottom: 0;
}

.social-feed-list > .social-composer-inline-surface:last-child {
  border-bottom: 0;
}

.social-row {
  position: relative;
  display: grid;
  padding: 20px 0 22px;
  min-height: 108px;
  border-bottom: 1px solid var(--os-color-hairline);
  color: inherit;
  text-decoration: none;
}

.social-row-interactive {
  cursor: pointer;
}

.social-row-main {
  padding-bottom: 2px;
}

.social-row-main-clickable {
  border-radius: 18px;
}

.social-row-main-clickable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--os-color-accent) 42%, white);
  outline-offset: 4px;
}

.social-row-main .social-row-body {
  margin-bottom: 2px;
}

.social-row-main .social-actions {
  margin-top: auto;
  min-height: 28px;
}

.social-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--os-radius-avatar);
  overflow: hidden;
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  color: var(--os-color-ink);
  display: grid;
  place-items: center;
  font-weight: 760;
  flex: 0 0 auto;
}

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

.social-avatar-large {
  width: clamp(96px, 12vw, 132px);
  height: clamp(96px, 12vw, 132px);
  font-size: 34px;
}

.social-row-main {
  display: grid;
  min-width: 0;
}

.social-row-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--os-color-ink-muted);
}

.social-author-name {
  color: var(--os-color-ink);
  font-weight: 720;
}

.social-handle,
.social-time {
  color: var(--os-color-ink-muted);
  font-weight: 560;
}

.social-dot::before {
  content: '·';
  color: var(--os-color-ink-muted);
}

.social-row-title {
  margin: 0;
  color: var(--os-color-ink);
  font-size: 17px;
  font-weight: 720;
  line-height: 1.25;
  letter-spacing: 0;
}

.social-row-title-lg {
  font-size: 26px;
  line-height: 1.15;
  font-weight: 760;
}

.social-row-body {
  margin: 0;
  color: var(--os-color-ink-secondary);
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: 15px;
}

.social-rich-link {
  color: var(--os-color-ink);
  font-weight: 760;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {

.social-rich-link:hover {
  color: var(--os-color-ink);
} }

.social-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: var(--os-color-ink-muted);
}

.social-action {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 620;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 140ms ease, background 140ms ease;
}

@media (hover: hover) and (pointer: fine) {

.social-action:hover:not(:disabled) {
  color: var(--os-color-ink);
  background: color-mix(in srgb, var(--os-color-ink) 5%, transparent);
} }

.social-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.social-mention-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--os-color-hairline);
  border-radius: 18px;
  overflow: hidden;
  background: var(--os-paper-bg);
}

.social-mention-option {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--os-color-hairline);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.social-mention-option:first-child {
  border-top: 0;
}

@media (hover: hover) and (pointer: fine) {

.social-mention-option:hover {
  background: color-mix(in srgb, var(--os-color-ink) 4%, transparent);
} }

.social-mention-option .social-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.social-mention-copy {
  display: grid;
  min-width: 0;
}

.social-mention-name {
  color: var(--os-color-ink);
  font-size: 14px;
  font-weight: 680;
}

.social-mention-handle {
  color: var(--os-color-ink-muted);
  font-size: 12px;
  font-weight: 620;
}

.social-action-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {

.social-action-like:hover:not(:disabled) {
  color: var(--os-color-ink);
  background: transparent;
} }

.social-action-like[data-liked="true"] {
  color: var(--os-color-ink);
}

.social-action-like[data-liked="true"] .social-action-icon {
  fill: currentColor;
  stroke: currentColor;
}

.social-action-count {
  font-variant-numeric: tabular-nums;
}

.social-action-danger {
  color: var(--os-color-ink-muted);
  margin-left: auto;
}

@media (hover: hover) and (pointer: fine) {

.social-action-danger:hover:not(:disabled) {
  color: #e0245e;
  background: color-mix(in srgb, #e0245e 8%, transparent);
} }

.social-profile-actions .os-button {
  min-width: 108px;
  justify-content: center;
}

.social-thread-hero .social-row-title-lg {
  margin: 4px 0 2px;
}

.profile-edit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  padding: 6px 4px 0;
  margin-top: 12px;
  border-top: 1px solid var(--os-color-hairline);
  padding-top: 22px;
}

.profile-edit-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.profile-edit-field-full {
  grid-column: 1 / -1;
}

.profile-edit-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-color-ink-muted);
  font-weight: 620;
}

.profile-edit-input {
  border: 1px solid var(--os-color-hairline);
  border-radius: 12px;
  background: var(--os-color-surface);
  color: var(--os-color-ink);
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 140ms ease;
}

.profile-edit-input:focus {
  border-color: var(--os-color-ink-muted);
}

.profile-edit-username-control {
  min-width: 0;
  min-height: var(--os-input-height, 48px);
  display: flex;
  align-items: center;
  border: 1px solid var(--os-input-border);
  border-radius: var(--os-input-radius);
  background: var(--os-input-bg);
  box-shadow: var(--os-input-shadow);
  color: var(--os-color-ink);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.profile-edit-username-control:focus-within {
  border-color: var(--os-input-border-focus);
  box-shadow: var(--os-input-focus-shadow);
}

.profile-edit-username-prefix {
  flex: 0 0 auto;
  padding-left: 14px;
  color: var(--os-color-ink-secondary);
  font: inherit;
  font-size: 16px;
}

.profile-edit-username-input {
  min-width: 0;
  width: 100%;
  padding: 12px 14px 12px 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
}

.profile-edit-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

/* Attach-to chip + typeahead used on New Post page */

/* Item-page community section */

.item-community-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.item-community-composer {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--os-color-hairline);
  border-radius: 14px;
  background: var(--os-color-surface);
  margin-bottom: 8px;
}

.item-community-surface {
  overflow: hidden;
}

.item-domain-surface {
  overflow: hidden;
}

body.theme-dark .dashboard-list-surface,
body.theme-dark .social-feed-panel,
body.theme-dark .item-community-surface,
body.theme-dark .item-domain-surface {
  border: 1px solid var(--os-paper-border);
  background: var(--os-paper-bg);
  box-shadow: var(--os-paper-shadow);
}

body.theme-dark .dashboard-list-row + .dashboard-list-row {
  border-top-color: var(--os-color-hairline);
}

body.theme-dark .dashboard-status-dot {
  box-shadow: 0 0 0 3px rgba(15, 17, 16, 0.92);
}

.item-community-composer-surface {
  margin-bottom: 0;
  padding: 22px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.item-community-composer-body {
  border: 0;
  background: transparent;
  color: var(--os-color-ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  padding: 4px 2px;
  resize: vertical;
  outline: none;
  min-height: 60px;
}

.item-community-composer-body::placeholder {
  color: var(--os-color-ink-muted);
}

.item-community-composer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.product-review-list-surface {
  overflow: hidden;
}

.product-review-row,
.product-update-row {
  display: grid;
  gap: 12px;
  padding: var(--os-row-pad-y) var(--os-row-pad-x);
  border-top: 1px solid var(--os-color-hairline);
}

.product-review-row:first-child,
.product-update-row:first-child {
  border-top: 0;
}

.product-domain-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.product-review-copy {
  display: grid;
  gap: 8px;
}

.product-review-author {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: var(--os-color-ink-muted);
  font-size: 13px;
  font-weight: 640;
  text-decoration: none;
  transition: color 120ms ease;
}

@media (hover: hover) and (pointer: fine) {

.product-review-author:hover {
  color: var(--os-color-ink);
} }

.product-review-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  border: 1px solid var(--os-color-hairline);
  color: var(--os-color-ink-secondary);
  font-size: 10px;
  font-weight: 760;
}

.product-review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-domain-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
  color: var(--os-color-ink-muted);
  font-size: 13px;
  font-weight: 620;
  text-decoration: none;
}

.product-domain-meta a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {

.product-domain-meta a:hover {
  color: var(--os-color-ink);
} }

.product-domain-body {
  max-width: 760px;
  margin: 0;
  color: var(--os-color-ink-secondary);
}

@media (max-width: 720px) {
  .profile-edit-fields {
    grid-template-columns: 1fr;
  }
}

.social-note {
  color: var(--os-color-ink-secondary);
}

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

.profile-avatar-edit-wrap {
  position: relative;
  display: inline-flex;
}

.social-profile-head {
  display: grid;
  gap: 24px;
  padding-bottom: 4px;
}

.social-profile-page {
  position: relative;
}

.social-profile-owner-tools {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  display: flex;
  justify-content: flex-end;
}

.social-profile-edit-action {
  border: 1px solid color-mix(in srgb, var(--os-color-ink) 12%, transparent);
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  box-shadow: var(--os-shadow-paper), var(--os-paper-highlight);
}

@media (max-width: 768px) {
  .social-profile-owner-tools {
    top: 12px;
    right: 0;
  }
}

.social-profile-main {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 0;
  padding: 22px 4px 0;
}

.social-profile-identity {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  min-width: 0;
}

.social-profile-avatar-button {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  cursor: context-menu;
  border-radius: 999px;
}

.social-profile-identity .social-avatar-large {
  box-shadow: 0 0 0 4px var(--os-color-surface), 0 12px 32px rgba(0, 0, 0, 0.14);
}

.social-profile-text {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.social-profile-text .app-detail-eyebrow,
.social-profile-text .os-type-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--os-color-ink-muted);
  margin: 0 0 2px;
}

.social-profile-name {
  margin: 0;
  color: var(--os-color-ink);
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: 0;
  font-weight: 780;
}

.social-profile-text .social-handle {
  font-size: 15px;
  color: var(--os-color-ink-muted);
}

.social-profile-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-top: 8px;
}

.social-profile-bio {
  max-width: 620px;
  margin: 0;
  color: var(--os-color-ink-secondary);
  font-size: 15px;
  line-height: 1.55;
}

.social-profile-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  overflow-x: auto;
  border-bottom: 1px solid var(--os-color-hairline);
  margin-top: 8px;
  padding: 0 4px;
}

.social-profile-tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 14px 16px;
  margin-bottom: -1px;
  font: inherit;
  font-size: 14px;
  font-weight: 620;
  color: var(--os-color-ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {

.social-profile-tabs button:hover {
  color: var(--os-color-ink);
} }

.social-profile-tabs button[aria-selected="true"] {
  color: var(--os-color-ink);
  border-bottom-color: var(--os-color-ink);
  background: color-mix(in srgb, var(--os-color-ink) 10%, transparent);
}

.social-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}

.social-artifact-card {
  display: grid;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.social-artifact-cover {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--os-color-ink) 6%, transparent);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

.social-artifact-cover-portrait {
  aspect-ratio: 3 / 4;
}

.social-artifact-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.social-artifact-info {
  display: grid;
  gap: 4px;
}

.social-inbox {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  min-height: min(680px, calc(100dvh - 280px));
}

.social-inbox-list {
  border-right: 1px solid var(--os-color-hairline);
  padding: var(--os-space-3);
}

.social-inbox-thread {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
}

.social-message-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.social-message-list::before {
  content: '';
  margin-top: auto;
}

.social-message {
  max-width: min(560px, 82%);
  align-self: flex-start;
  border-radius: 18px 18px 18px 5px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--os-color-ink) 9%, transparent);
  color: var(--os-color-ink);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.social-message-own {
  align-self: flex-end;
  border-radius: 18px 18px 5px 18px;
  background: var(--os-color-accent);
  color: var(--os-color-accent-contrast, #fff);
}

.social-message-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 14px 18px;
  border-top: 1px solid var(--os-color-hairline);
}

.social-inbox-unread {
  background: color-mix(in srgb, var(--os-color-accent) 12%, transparent);
}

.social-compose-mobile-header {
  min-height: 58px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--os-color-hairline);
}

.social-compose-mobile-header h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.social-inbox-row-aside {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--os-color-ink-secondary);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.social-inbox-chevron {
  font-size: 24px;
  line-height: 1;
}

.social-compose-panel {
  display: grid;
  gap: var(--os-space-5);
  padding: var(--os-space-6);
}

.social-compose-results {
  grid-row: 3;
  display: grid;
  gap: var(--os-space-2);
}

.social-compose-result {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  border-radius: var(--os-radius-card);
}

@media (hover: hover) and (pointer: fine) {

.social-compose-result:hover {
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
} }

@media (max-width: 860px) {
  .social-shell { max-width: none; padding-top: 0; }
  .social-thread-page { padding-top: 18px; }
  .social-title-row { align-items: flex-start; }
  .social-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .social-avatar { width: 40px; height: 40px; }
  .social-avatar-large { width: 92px; height: 92px; }
  .social-profile-main { margin-top: 0; padding-top: 18px; }
  .social-profile-identity { align-items: flex-start; flex-direction: column; }
  .social-inbox {
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(100dvh - var(--os-topbar-height) - var(--os-mobile-dock-height) - 190px);
  }
  .social-messages-thread-open .social-header {
    display: none;
  }
  .social-messages-thread-open .social-inbox,
  .social-messages-thread-open .social-inbox-thread {
    min-height: calc(100dvh - var(--os-topbar-height) - var(--os-mobile-dock-height) - 28px);
  }
  .social-inbox-list {
    border-right: 0;
    border-bottom: 0;
    padding: 0;
  }
  .social-inbox-list .social-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
  }
  .social-inbox-list .social-avatar {
    width: 48px;
    height: 48px;
  }
  .social-inbox-list .social-row-main {
    gap: 4px;
  }
  .social-inbox-list .social-author-name {
    font-size: 16px;
  }
  .social-inbox-list .social-handle {
    display: none;
  }
  .social-inbox-list .social-note {
    overflow: hidden;
    color: var(--os-color-ink-secondary);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .social-inbox-mobile-list .social-inbox-thread,
  .social-inbox-mobile-thread .social-inbox-list {
    display: none;
  }
  .social-inbox-thread {
    min-height: calc(100dvh - var(--os-topbar-height) - var(--os-mobile-dock-height) - 190px);
  }
  .social-row.social-message-thread-header {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 6px;
    min-height: 0;
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--os-color-hairline);
    text-align: center;
  }
  .social-message-thread-header .social-avatar {
    width: 56px;
    height: 56px;
    justify-self: center;
  }
  .social-message-thread-header .social-row-main {
    justify-items: center;
    gap: 2px;
  }
  .social-message-list {
    padding: 14px 8px;
  }
  .social-message {
    max-width: 88%;
  }
  .social-message-form {
    position: sticky;
    bottom: 0;
    padding: 10px 0;
    background: var(--os-color-bg);
  }
  .social-message .os-type-meta {
    display: none;
  }
  .social-compose-panel {
    padding: 0;
    gap: var(--os-space-4);
  }
  .social-compose-to-row {
    border-radius: var(--os-radius-3);
  }
}

/* ── Detail hero text ── */

.app-detail-actions .os-button { flex: 1 1 auto; }

.app-centered {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--os-space-10);
  color: var(--os-color-ink-muted);
}

/* ── Settings ── */
.settings-page-stack {
  width: min(100%, 880px);
  display: grid;
  gap: var(--os-space-10);
}

.settings-page-section {
  display: grid;
  gap: var(--os-space-6);
  scroll-margin-top: calc(var(--os-topbar-height) + var(--os-space-6));
}

.settings-section { display: grid; gap: var(--os-space-4); max-width: 660px; }
.settings-section-wide { max-width: none; }
.email-delivery-control-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.email-delivery-control-grid > .admin-dialog-field {
  min-width: 0;
  margin-top: 0;
  padding: var(--os-space-5);
}
.settings-two-column {
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--os-space-6);
  row-gap: var(--os-space-8);
  align-items: start;
}
@media (max-width: 900px) {
  .email-delivery-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .email-delivery-control-grid { grid-template-columns: 1fr; }
}
.settings-section#dock {
  scroll-margin-top: calc(var(--os-topbar-height) + var(--os-space-6));
}

.settings-field {
  display: grid;
  gap: var(--os-space-3);
  padding: 0;
}
.settings-field-head { display: grid; gap: var(--os-space-2); }
.settings-field-head p { margin: 0; color: var(--os-color-ink-secondary); }
.settings-status {
  grid-column: 1 / -1;
  color: var(--os-color-ink-secondary);
}
.settings-list {
  display: grid;
  gap: var(--os-space-2);
}

.settings-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--os-space-3);
  align-items: center;
}

.settings-inline-form .os-input-field {
  min-width: min(100%, 280px);
  flex: 1 1 280px;
}

.search-page-form {
  width: min(520px, 100%);
  margin-bottom: var(--os-section-gap);
  flex: 0 1 auto;
}

.search-page-form input {
  font-weight: 560;
}

.search-profile-list {
  display: grid;
  gap: var(--os-space-3);
}

.search-profile-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--os-space-4);
  align-items: start;
  padding: var(--os-space-5);
  border: 1px solid var(--os-paper-border);
  border-radius: var(--os-radius-5);
  background: var(--os-paper-bg);
  box-shadow: var(--os-paper-highlight);
  color: inherit;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {

.search-profile-row:hover {
  border-color: var(--os-paper-border-strong);
  background: color-mix(in srgb, var(--os-color-ink) 3%, var(--os-paper-bg));
} }

.search-profile-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.notification-art {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--os-color-accent) 18%, transparent);
  color: var(--os-color-ink);
  font-size: 18px;
  font-weight: 760;
}

.notification-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notification-art-user {
  border-radius: 50%;
}

.notification-art-achievement {
  border-radius: 50%;
  color: var(--os-color-ink);
}

.notification-page-row {
  grid-template-columns: auto minmax(0, 1fr) 32px;
  align-items: center;
  gap: var(--os-space-4);
}

.notification-page-row-new {
  background: color-mix(in srgb, var(--os-color-accent) 11%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--os-color-accent) 76%, var(--os-color-ink));
}

.notification-page-new-dot {
  justify-self: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--os-color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--os-color-accent) 14%, transparent);
}

.profile-edit-input:focus,
.profile-edit-input:focus-visible,
.os-topbar-search-input:focus,
.os-topbar-search-input:focus-visible {
  border-color: color-mix(in srgb, var(--os-color-accent) 44%, rgba(0, 0, 0, 0.12));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--os-color-accent) 18%, transparent);
}

.settings-swatches { display: flex; flex-wrap: wrap; gap: var(--os-space-3); }
.settings-swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--os-space-2);
  padding: 8px 16px 8px 10px;
  border-radius: var(--os-radius-pill);
  background: var(--os-glass-panel-bg);
  border: 1px solid var(--os-glass-panel-border);
  color: var(--os-color-ink-secondary);
  font-family: var(--os-font-app);
  font-size: 13px;
  font-weight: 560;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
.settings-swatch:hover { color: var(--os-color-ink); } }
.settings-swatch-active {
  color: var(--os-color-ink);
  border-color: var(--os-color-accent);
  box-shadow: 0 0 0 1px var(--os-color-accent);
}
.settings-swatch-dot {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.settings-theme-swatch-system {
  background: linear-gradient(90deg, #fff 0 50%, #111 50% 100%);
}
.settings-theme-swatch-light { background: #fff; }
.settings-theme-swatch-dark { background: #111; }
.settings-theme-field .settings-swatch,
.settings-accent-field .settings-swatch {
  width: 104px;
  flex: 0 0 104px;
  justify-content: center;
  padding-inline: 10px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--os-space-4);
  padding: var(--os-space-2) 0;
}
.settings-row-copy { display: grid; gap: 2px; }
.settings-row-copy p { margin: 0; color: var(--os-color-ink-secondary); }

.settings-toggle {
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--os-radius-pill);
  border: 1px solid var(--os-glass-panel-border);
  background: var(--os-glass-recessed-bg);
  position: relative;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--os-color-ink);
  opacity: 0.65;
  transition: transform 140ms ease, opacity 140ms ease;
}
.settings-toggle-on {
  background: color-mix(in srgb, var(--os-color-accent) 55%, transparent);
  border-color: var(--os-color-accent);
}
.settings-toggle-on::after { transform: translateX(18px); opacity: 1; }

/* ── First-run welcome ── */
.welcome-page {
  width: min(100%, 1040px);
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  padding-bottom: var(--os-space-12);
}

.welcome-page-signed-out {
  max-width: 680px;
  align-content: start;
  gap: var(--os-space-5);
}

.welcome-page-signed-out h1,
.welcome-page-signed-out p {
  margin: 0;
}

.welcome-page-signed-out .os-button {
  width: fit-content;
}

.welcome-hero {
  display: grid;
  gap: var(--os-space-4);
  padding: clamp(28px, 5vw, 64px) 0 clamp(12px, 2vw, 24px);
  border-bottom: 1px solid var(--os-color-hairline);
}

.welcome-eyebrow {
  margin: 0;
  color: var(--os-color-accent);
  font: 700 12px/16px var(--os-font-app);
  letter-spacing: 0.12em;
}

.welcome-hero h1 {
  max-width: 820px;
  margin: 0;
  font: 720 clamp(38px, 5vw, 66px)/0.98 var(--os-font-app);
  letter-spacing: -0.045em;
}

.welcome-intro {
  max-width: 720px;
  margin: 0;
  color: var(--os-color-ink-secondary);
  font: 500 clamp(17px, 1.8vw, 21px)/1.45 var(--os-font-app);
}

.welcome-status {
  width: fit-content;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--os-color-hairline);
  border-radius: var(--os-radius-pill);
  background: color-mix(in srgb, var(--os-color-accent) 8%, transparent);
  color: var(--os-color-ink-secondary);
  font: 600 13px/18px var(--os-font-app);
}

.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--os-space-3);
  padding-top: var(--os-space-2);
}

.welcome-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 52px);
}

.welcome-guide-item {
  display: grid;
  align-content: start;
  gap: var(--os-space-3);
}

.welcome-guide-item h2,
.welcome-desktop-note h2 {
  margin: 0;
  color: var(--os-color-ink);
  font: 700 22px/1.15 var(--os-font-app);
  letter-spacing: -0.025em;
}

.welcome-guide-item > p:last-child,
.welcome-desktop-note > div > p:last-child {
  margin: 0;
  color: var(--os-color-ink-secondary);
  font: 500 15px/1.55 var(--os-font-app);
}

.welcome-desktop-note {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--os-space-8);
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--os-color-hairline);
  border-radius: var(--os-radius-6);
  background: color-mix(in srgb, var(--os-color-ink) 4%, transparent);
}

.welcome-desktop-note > div {
  max-width: 700px;
  display: grid;
  gap: var(--os-space-3);
}

.welcome-text-link {
  flex: 0 0 auto;
  color: var(--os-color-ink);
  font: 700 14px/20px var(--os-font-app);
  text-decoration: none;
}

@media (max-width: 768px) {
  .welcome-page {
    gap: 40px;
  }

  .welcome-hero {
    padding-top: 24px;
  }

  .welcome-hero h1 {
    font-size: clamp(36px, 12vw, 50px);
  }

  .welcome-guide {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .welcome-desktop-note {
    align-items: start;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .settings-page-stack {
    gap: var(--os-space-10);
  }

  .settings-page-section > .hub-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-page-section > .hub-section-head .os-button {
    align-self: flex-start;
  }

  .settings-two-column {
    grid-template-columns: 1fr;
    row-gap: var(--os-space-8);
  }

  .settings-inline-form,
  .settings-swatches {
    width: 100%;
  }
}

.onboarding-tip {
  display: grid;
  gap: var(--os-space-2);
  margin: 0 0 var(--os-space-3);
  padding: var(--os-space-3);
  border: 1px solid var(--os-color-hairline);
  border-radius: var(--os-radius-card);
  background: color-mix(in srgb, var(--os-color-accent) 10%, var(--os-surface-card));
  color: var(--os-color-ink-secondary);
}

.onboarding-tip-dismiss {
  width: fit-content;
  border: 0;
  padding: 0;
  background: none;
  color: var(--os-color-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
}

.support-search {
  max-width: 720px;
  margin-bottom: var(--os-space-5);
}

.support-reader-actions {
  display: flex;
  gap: var(--os-space-3);
  flex-wrap: wrap;
}

.support-case-form .os-button {
  justify-self: start;
}

.support-center {
  display: grid;
  gap: var(--os-space-7);
}

.support-search-hero {
  display: grid;
  gap: var(--os-space-3);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--os-color-hairline);
  border-radius: var(--os-radius-card);
  background: color-mix(in srgb, var(--os-color-accent) 8%, var(--os-surface-card));
}

.support-search-hero h2,
.support-search-hero p,
.support-section-heading h2,
.support-quick > h2,
.support-categories > h2,
.support-contact h2,
.support-contact p {
  margin: 0;
}

.support-search-hero .support-search {
  width: min(100%, 760px);
  max-width: none;
  margin: 0;
}

.support-quick,
.support-categories,
.support-results {
  display: grid;
  gap: var(--os-space-4);
}

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

.support-quick-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--os-space-2);
  min-height: 150px;
  padding: var(--os-space-5);
  padding-right: calc(var(--os-space-5) + 24px);
  color: var(--os-color-ink);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.support-quick-title {
  font-size: 18px;
  font-weight: 750;
  line-height: 1.25;
}

.support-card-arrow {
  font-size: 28px;
  font-weight: 350;
  line-height: 1;
}

.support-quick-card > .support-card-arrow {
  position: absolute;
  top: var(--os-space-5);
  right: var(--os-space-5);
}

@media (hover: hover) and (pointer: fine) {
  .support-quick-card:hover {
    border-color: color-mix(in srgb, var(--os-color-accent) 55%, var(--os-color-hairline));
    transform: translateY(-2px);
  }
}

.support-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--os-space-5);
}

.support-category-card {
  display: grid;
  align-content: start;
  gap: var(--os-space-4);
  padding: var(--os-space-5);
}

.support-category-copy {
  display: grid;
  gap: var(--os-space-2);
}

.support-category-copy h3,
.support-category-copy p {
  margin: 0;
}

.support-category-copy h3 {
  font-size: 20px;
}

.support-category-copy p {
  color: var(--os-color-ink-secondary);
  line-height: 1.5;
}

.support-category-links {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--os-color-hairline);
}

.support-category-links a,
.support-related nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--os-space-3);
  padding: 13px 0;
  border-bottom: 1px solid var(--os-color-hairline);
  color: var(--os-color-ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}

.support-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--os-space-4);
}

.support-article-list {
  overflow: hidden;
}

.support-article-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--os-space-4);
  padding: var(--os-space-4) var(--os-space-5);
  color: var(--os-color-ink);
  text-decoration: none;
}

.support-article-row-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.support-article-row-title {
  font-size: 17px;
  font-weight: 750;
}

.support-empty {
  display: grid;
  justify-items: start;
  gap: var(--os-space-3);
  padding: var(--os-space-6);
}

.support-empty h3,
.support-empty p {
  margin: 0;
}

.support-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--os-space-6);
  padding: var(--os-space-6);
}

.support-contact > div {
  display: grid;
  max-width: 760px;
  gap: var(--os-space-2);
}

.support-article-page {
  display: grid;
  gap: var(--os-space-5);
}

.support-article-page > .support-breadcrumbs {
  margin: 0;
}

.support-breadcrumbs a {
  color: inherit;
}

.support-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: var(--os-space-6);
  align-items: start;
}

.support-article-document {
  display: grid;
  gap: var(--os-space-6);
  padding: clamp(24px, 4vw, 48px);
}

.support-article-intro {
  max-width: 820px;
  margin: 0;
  padding-bottom: var(--os-space-5);
  border-bottom: 1px solid var(--os-color-hairline);
  color: var(--os-color-ink-secondary);
  font-size: 18px;
  line-height: 1.55;
}

.support-article-section {
  display: grid;
  gap: var(--os-space-3);
  max-width: 820px;
}

.support-article-section h2,
.support-article-section p,
.support-article-section ol,
.support-article-section ul {
  margin: 0;
}

.support-article-section h2 {
  font-size: 21px;
  line-height: 1.25;
}

.support-article-section p,
.support-article-section li {
  color: var(--os-color-ink-secondary);
  font-size: 16px;
  line-height: 1.65;
}

.support-article-section ol,
.support-article-section ul {
  display: grid;
  gap: var(--os-space-2);
  padding-left: 1.4em;
}

.support-related {
  position: sticky;
  top: var(--os-space-6);
  display: grid;
  gap: var(--os-space-4);
  padding: var(--os-space-5);
}

.support-related h2 {
  margin: 0;
  font-size: 18px;
}

.support-related nav {
  display: grid;
}

body.theme-dark .settings-segment-item-active,
body.theme-dark .sidebar-item-active,
body.theme-dark .social-profile-tabs button[aria-selected="true"] {
  background: color-mix(in srgb, white 16%, transparent);
}

/* Unified controls added during the functional sweep. */
.search-profile-row,
.upload-preview {
  background: var(--os-surface-card);
  border-color: var(--os-color-hairline);
}

.dashboard-achievement-copy {
  display: grid;
  gap: 3px;
}

.dashboard-achievement-copy .os-type-body-small {
  color: var(--os-color-ink-secondary);
}

.dashboard-achievement-toggle {
  display: grid;
  place-items: center;
}

.dashboard-achievement-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--os-color-ink);
}

.dashboard-achievement-toggle input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.social-compose-panel {
  grid-row: 1 / -1;
  height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  min-height: 100%;
}

.social-compose-to-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--os-space-3);
  align-items: center;
  min-height: 52px;
  padding: 6px 8px 6px 16px;
  border: 1px solid var(--os-color-hairline);
  border-radius: var(--os-radius-pill);
  background: var(--os-surface-card);
}

.social-compose-to-label {
  color: var(--os-color-ink-muted);
  font-weight: 700;
}

.social-compose-to-input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--os-color-ink);
  font: inherit;
  min-width: 0;
}

.social-compose-recipient {
  width: fit-content;
  border: 0;
  border-radius: var(--os-radius-pill);
  padding: 7px 12px;
  background: color-mix(in srgb, var(--os-color-ink) 10%, transparent);
  color: var(--os-color-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.social-message-form-compose {
  grid-row: 4;
  border-top: 0;
  padding: 0;
}

.support-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--os-space-2);
  margin: calc(var(--os-space-5) * -1) 0 var(--os-space-5);
  color: var(--os-color-ink-secondary);
  font-size: 13px;
  font-weight: 700;
}

.upload-preview {
  position: relative;
  width: fit-content;
  max-width: 280px;
  border: 1px solid var(--os-color-hairline);
  border-radius: var(--os-radius-card);
  overflow: hidden;
}

.upload-preview-image {
  width: 160px;
  aspect-ratio: 1;
}

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

.upload-preview-file {
  display: inline-flex;
  align-items: center;
  gap: var(--os-space-3);
  padding: 10px 38px 10px 12px;
  color: var(--os-color-ink-secondary);
}

.upload-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--os-color-ink) 78%, transparent);
  color: var(--os-color-canvas);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.upload-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--os-space-3);
}

.upload-gallery-item {
  width: 112px;
}

.upload-state {
  color: var(--os-color-ink-muted);
  font-size: 13px;
  font-weight: 700;
}

.upload-state-complete {
  color: var(--os-color-success);
}

.dashboard-status-pill-success {
  background: color-mix(in srgb, var(--os-color-success) 18%, transparent);
  color: var(--os-color-success);
}

.dashboard-status-pill-warning {
  background: color-mix(in srgb, var(--os-color-warning) 20%, transparent);
  color: var(--os-color-warning);
}

/* Studio release state is descriptive metadata, not an interactive status pill. */
.studio-publication-status {
  display: block;
  width: fit-content;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  text-transform: none;
}

.studio-publication-status.dashboard-status-pill-success { color: var(--os-color-success); }
.studio-publication-status.dashboard-status-pill-warning { color: var(--os-color-warning); }
.studio-publication-status.studio-status-pill-draft { color: var(--os-color-ink-muted); }

.studio-video-embed-fields,
.studio-video-embed-row {
  display: grid;
  gap: 12px;
}

.studio-video-embed-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding-top: 12px;
  border-top: 1px solid var(--os-color-hairline);
}

.studio-video-embed-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.library-video-embed-list {
  display: grid;
  gap: 24px;
}

.library-video-embed {
  display: grid;
  gap: 10px;
}

.library-video-embed-frame {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--os-color-hairline);
  border-radius: 16px;
  background: #000;
}

.library-video-embed-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .studio-video-embed-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   44OS THEME SYSTEM
   body.theme-light / body.theme-dark swap all semantic tokens.
   body.accent-* layers an accent color on top of either theme.
   Components use tokens only — they never need redesigning.
   ========================================================= */

body.theme-light {
  color-scheme: light;
  background: var(--os-color-canvas);
  color: var(--os-color-ink);
}

body.theme-dark {
  color-scheme: dark;
  background: var(--os-color-canvas);
  color: var(--os-color-ink);

  /* ── Canvas + Ink ── */
  --os-color-canvas:         #0f1110;
  --os-color-ink:            #f4f3ee;
  --os-color-ink-secondary:  rgba(255, 255, 255, 0.60);
  --os-color-ink-muted:      rgba(255, 255, 255, 0.38);
  --os-color-hairline:       rgba(255, 255, 255, 0.10);
  --os-color-app-environment: #07080d;
  --os-color-paper:          #1c1e1b;

  /* ── Elevation ── */
  --os-shadow-1:  0 4px 12px rgba(0, 0, 0, 0.22);
  --os-shadow-2:  0 8px 22px rgba(0, 0, 0, 0.30);
  --os-shadow-3:  0 14px 34px rgba(0, 0, 0, 0.38);
  --os-shadow-4:  0 22px 54px rgba(0, 0, 0, 0.46);
  --os-shadow-paper:  0 14px 34px rgba(0, 0, 0, 0.30);
  --os-shadow-card:   0 18px 44px rgba(0, 0, 0, 0.38);
  --os-shadow-panel:  0 28px 76px rgba(0, 0, 0, 0.50);
  --os-shadow-modal:  0 44px 120px rgba(0, 0, 0, 0.62);
  --os-shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --os-shadow-inset-recessed:  inset 0 1px 2px rgba(0, 0, 0, 0.28);

  /* ── Card material — warm dark card ── */
  --os-card-bg:              #211f1c;
  --os-card-border:          rgba(255, 255, 255, 0.06);

  /* ── Paper ── */
  --os-paper-bg:             #1c1e1b;
  --os-paper-bg-soft:        #171917;
  --os-paper-border:         rgba(255, 255, 255, 0.09);
  --os-paper-border-strong:  rgba(255, 255, 255, 0.14);
  --os-paper-highlight:      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --os-paper-shadow:         0 14px 34px rgba(0, 0, 0, 0.30);

  /* ── App window (shell) material — dark mode, translucent glass ── */
  --os-shell-bg: rgba(28, 30, 27, 0.62);
  --os-shell-border: rgba(255, 255, 255, 0.10);
  --os-shell-shadow:
    0 58px 140px rgba(0, 0, 0, 0.72),
    0 18px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
  --os-sidebar-tint: rgba(255, 255, 255, 0.03);

  /* ── Glass A (ambient panel) — transparent, strongly picks up theme color ── */
  --os-glass-panel-bg:       rgba(255, 255, 255, 0.07);
  --os-glass-panel-border:   rgba(255, 255, 255, 0.13);
  /* ── Glass B (sidebar) — moderately opaque, still lets theme through ── */
  --os-glass-control-bg:     rgba(255, 255, 255, 0.12);
  --os-glass-control-border: rgba(255, 255, 255, 0.18);
  --os-glass-recessed-bg:    rgba(0, 0, 0, 0.32);
  --os-glass-highlight:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  --os-glass-shadow:        0 28px 76px rgba(0, 0, 0, 0.50);

  /* ── Chrome ── */

  /* ── Inputs ── */
  --os-input-bg:           rgba(255, 255, 255, 0.08);
  --os-input-bg-hover:     rgba(255, 255, 255, 0.12);
  --os-input-bg-focus:     rgba(255, 255, 255, 0.14);
  --os-input-border:       rgba(255, 255, 255, 0.10);
  --os-input-border-hover: rgba(255, 255, 255, 0.16);
  --os-input-border-focus: rgba(255, 255, 255, 0.24);
  --os-input-text:         #f4f3ee;
  --os-input-placeholder:  rgba(255, 255, 255, 0.36);
  --os-input-focus-shadow:
    var(--os-shadow-inset-recessed),
    0 0 0 3px rgba(124, 255, 79, 0.14);

  /* ── Buttons ── */
  --os-button-primary-bg:      rgba(0, 0, 0, 0.36);
  --os-button-primary-text:    #f4f3ee;
  --os-button-primary-border:  rgba(255, 255, 255, 0.12);
  --os-button-secondary-bg:    rgba(0, 0, 0, 0.28);
  --os-button-secondary-text:  #f4f3ee;
  --os-button-secondary-border: rgba(255, 255, 255, 0.12);
  --os-button-ghost-bg:        rgba(0, 0, 0, 0.22);
  --os-button-ghost-text:      #f4f3ee;
  --os-button-ghost-border:    rgba(255, 255, 255, 0.10);
  --os-button-hover-bg:        #f4f3ee;
  --os-button-hover-text:      #0f1110;
  --os-button-hover-border:    rgba(255, 255, 255, 0.16);
  --os-button-danger-bg:       #d9363e;
  --os-button-danger-hover-bg: #ff5a64;
  --os-button-disabled-bg:     rgba(255, 255, 255, 0.06);
  --os-button-disabled-text:   rgba(255, 255, 255, 0.28);
  --os-button-disabled-border: rgba(255, 255, 255, 0.06);

  /* ── Pills + Badges ── */
  --os-pill-bg:     rgba(255, 255, 255, 0.12);
  --os-pill-border: rgba(255, 255, 255, 0.14);
  --os-pill-text:   rgba(255, 255, 255, 0.78);

  /* ── Status states (dark-mode legible) ── */
  --os-state-owned-bg:           rgba(124, 255, 79, 0.16);
  --os-state-owned-border:       rgba(124, 255, 79, 0.28);
  --os-state-owned-text:         #7cff4f;

  /* ── Product card ── */

  /* ── Category card (glass A) ── */

  /* ── Panels (glass A for floating, glass B for docked) ── */
}

/* ── Accent overrides (layer on top of either theme) ── */

body.accent-amber {
  --os-color-accent: #f59e0b;
  --os-input-focus-shadow:
    var(--os-shadow-inset-recessed),
    0 0 0 3px rgba(245, 158, 11, 0.16);
}

body.accent-sage {
  --os-color-accent: #7cff4f;
}

body.accent-ocean {
  --os-color-accent: #60a5fa;
  --os-input-focus-shadow:
    var(--os-shadow-inset-recessed),
    0 0 0 3px rgba(96, 165, 250, 0.16);
}

body.accent-violet {
  --os-color-accent: #b56cff;
  --os-input-focus-shadow:
    var(--os-shadow-inset-recessed),
    0 0 0 3px rgba(181, 108, 255, 0.18);
}

/* ─── Article reader (Resources) ──────────────────────────── */
.login-page {
  min-height: 100%;
  padding: 40px 24px;
  display: grid;
  place-items: center;
}

.login-shell {
  box-sizing: border-box;
  width: min(100%, 480px);
  min-width: 0;
  margin: 0 auto;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--os-color-hairline);
  border-radius: 28px;
  background: var(--os-paper-bg);
  box-shadow: var(--os-shadow-2);
}

.login-copy {
  display: grid;
  gap: 10px;
  margin-bottom: 32px;
}

.login-copy .os-type-body {
  max-width: 380px;
  color: var(--os-color-ink-secondary);
}

.login-form,
.login-field {
  display: grid;
}

.login-form {
  min-width: 0;
  gap: 14px;
}

.login-field {
  gap: 8px;
}

.login-field .os-input-large,
.login-primary-action {
  width: 100%;
}

.login-field .os-input-field {
  border: 1px solid var(--os-color-hairline);
  background: transparent;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {

.login-field .os-input-field:hover {
  border-color: var(--os-color-ink-muted);
  background: transparent;
} }

.login-field .os-input-field:focus {
  border-color: var(--os-color-accent);
  background: transparent;
  box-shadow: none;
}

.login-email-summary {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 2px;
  color: var(--os-color-ink-secondary);
  font-size: 14px;
}

.login-email-summary span {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-email-summary button {
  flex: 0 0 auto;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--os-color-accent);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.login-link-action {
  justify-self: center;
}

.login-status {
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid var(--os-paper-border);
  border-radius: var(--os-radius-3);
  background: var(--os-paper-bg-soft);
  color: var(--os-color-ink-secondary);
}

@media (max-width: 768px) {
  .login-page {
    padding: 0;
    place-items: stretch;
  }

  .login-shell {
    width: 100%;
    min-height: calc(100dvh - var(--os-mobile-dock-height) - env(safe-area-inset-bottom));
    padding: 48px 20px 40px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .login-page-account .login-shell {
    min-height: calc(100dvh - var(--os-topbar-height) - var(--os-mobile-dock-height) - env(safe-area-inset-bottom));
  }

  .login-copy {
    margin-bottom: 28px;
  }

  .login-copy .os-type-page-title {
    font-size: clamp(30px, 8.75vw, 34px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    white-space: nowrap;
  }
}

/* ─── Rich editor (Studio) ────────────────────────────────── */

/* =========================================================
   Mobile Launch Pass
   Phone screens keep the 44OS shell, but primary navigation becomes a
   bottom tray and content collapses to a single readable column.
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --os-content-inset: 18px;
    --os-detail-inset: 10px;
    --os-page-pad: 18px;
    --os-section-gap: 34px;
    --os-app-header-pad-top: 26px;
    --os-app-header-pad-bottom: 22px;
    --os-type-display-size: 32px;
    --os-type-display-line: 36px;
    --os-topbar-content-height: 56px;
    --os-topbar-pill-height: 36px;
    --os-topbar-edge-inset: 10px;
    --os-topbar-left-inset: 10px;
  }

  html,
  body:is(.theme-dark, .theme-light) {
    min-height: 100dvh;
  }

  .app-environment {
    border-radius: 0;
    border: 0;
  }

  .os-topbar {
    height: var(--os-topbar-height);
    padding: var(--os-safe-area-top) 10px 0;
    gap: 8px;
  }

  .os-topbar-left {
    gap: 6px;
    flex: 0 0 auto;
  }

  .os-topbar-right {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 6px;
  }

  .os-topbar-tab {
    min-width: 0;
    min-height: 36px;
    padding: 0 13px;
    font-size: 13px;
  }

  .os-topbar-back {
    width: var(--os-topbar-control-size);
    height: var(--os-topbar-control-size);
    min-width: var(--os-topbar-control-size);
    min-height: var(--os-topbar-control-size);
    padding: 0;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .os-topbar-back svg {
    flex: 0 0 auto;
  }

  .os-topbar-search-form {
    position: fixed;
    z-index: 60;
    top: calc(var(--os-safe-area-top) + 8px);
    left: 10px;
    right: 10px;
    width: auto;
    height: 42px;
  }

  @keyframes os-topbar-search-in {
    from { opacity: 0.72; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .os-popover {
    position: fixed;
    top: calc(var(--os-topbar-height) + 6px);
    right: 10px;
    left: auto;
    max-width: min(360px, calc(100vw - 20px));
    max-height: calc(100dvh - var(--os-topbar-height) - 96px);
    overflow: auto;
  }

  .os-popover-wide {
    width: min(420px, calc(100vw - 20px));
  }

  .view-hub {
    padding-left: var(--os-content-inset);
    padding-right: var(--os-content-inset);
    padding-bottom: 96px;
    gap: var(--os-section-gap);
  }

  .view-hub:has(.radio-page) {
    padding-left: 0;
    padding-right: 0;
  }

  .dashboard-header,
  .app-header,
  .social-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .app-header:has(.page-filter-menu) {
    flex-direction: row;
    gap: 12px;
  }

  .app-header:has(.page-filter-menu) .page-header-tools {
    width: auto;
    flex: 0 0 auto;
  }

  .app-header:has(.page-filter-menu) .page-search-control {
    display: none;
  }

  .page-filter-button {
    width: var(--os-topbar-control-size);
    height: var(--os-topbar-control-size);
  }

  .app-header-copy p,
.dashboard-header-copy p {
    max-width: 100%;
  }

  .search-page-form {
    width: 100%;
    margin-bottom: 18px;
  }

  .search-page > .app-empty-text {
    padding: 6px 0 0;
    white-space: nowrap;
    font-size: 14px;
  }

  .hub-section-head {
    align-items: center;
    flex-direction: row;
  }

  .hub-section-head-described .hub-section-copy {
    grid-template-columns: 1fr;
    row-gap: var(--os-space-2);
  }

  .dashboard-overview-grid,
.dashboard-form-grid,
.dashboard-form-grid-2,
.dashboard-form-grid-3,
.checkout-grid {
    grid-template-columns: 1fr;
  }

  .app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .product-tile-title {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 520;
  }

  .social-artifact-info .os-type-card-title {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 520;
  }

  .view-album-header {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px var(--os-detail-inset) 12px;
    min-height: 0;
    align-items: center;
    justify-items: center;
    text-align: center;
  }

  .view-album-cover,
  .library-detail-header .view-album-cover {
    width: min(70vw, 270px);
    height: min(70vw, 270px);
    border-radius: 16px;
  }

  .view-album-cover-book {
    width: min(58vw, 220px);
    height: auto;
  }

  .view-album-copy,
  .library-detail-header .view-album-copy {
    padding: 0;
    gap: 6px;
    align-items: center;
    width: 100%;
  }

  .view-album-title,
  .library-detail-header .view-album-title {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-size: 34px;
    line-height: 41px;
    font-weight: 800;
    margin: 2px 0 0;
    text-align: center;
  }

  .library-creator-chip {
    gap: 8px;
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
  }

  .library-creator-avatar {
    display: none;
  }

  .view-album-eyebrow {
    justify-content: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: 0;
    margin-top: 0;
    text-transform: none;
  }

  .view-album-meta-token {
    gap: 8px;
  }

  .view-album-meta-sep {
    background: currentColor;
    opacity: 0.62;
  }

  .view-album-actions {
    width: 100%;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
    flex-wrap: nowrap;
  }

  .view-album-actions .os-button {
    flex: 1 1 0;
    max-width: 210px;
    justify-content: center;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 17px;
    font-weight: 720;
    white-space: nowrap;
  }

  .view-tracklist-section {
    max-width: none;
    margin: 0;
    padding: 12px 0 0;
  }

  .view-tracklist-section > .view-section-title,
  .view-tracklist-section > .item-community-header {
    display: none;
  }

  .view-tracklist {
    border-left: 0;
    border-right: 0;
    background: transparent;
    box-shadow: none;
  }

  .view-track-row {
    border-top-color: rgba(60, 60, 67, 0.18);
  }

  .view-track-row-selected {
    background: transparent;
  }

  @media (hover: hover) and (pointer: fine) {

  .view-track-row:hover {
    background: transparent;
  } }

  .view-track-leading {
    height: 62px;
    place-items: center;
  }

  .view-track-number {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-size: 20px;
    line-height: 25px;
    font-weight: 400;
    color: rgba(60, 60, 67, 0.64);
  }

  .view-track-play {
    display: none;
  }

  .view-track-row-selected .view-track-number,
.view-track-row:focus-within .view-track-number {
    opacity: 1;
  }

  @media (hover: hover) and (pointer: fine) {

  .view-track-row:hover .view-track-number {
    opacity: 1;
  } }

  .view-track-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-size: 22px;
    line-height: 28px;
    font-weight: 400;
  }

  .view-track-duration {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    color: rgba(60, 60, 67, 0.64);
  }

  .radio-hero {
    width: 100%;
    padding: 24px 18px;
    gap: 22px;
    justify-items: center;
  }

  .radio-hero .radio-hero-cover,
  .radio-hero .view-album-cover {
    width: min(68vw, 292px);
    height: min(68vw, 292px);
  }

  .radio-hero-title {
    max-width: min(86vw, 520px);
    font-size: clamp(24px, 7vw, 31px);
  }

  .radio-hero-copy {
    gap: 10px;
    padding: 0;
  }

  .radio-hero-actions {
    margin-top: 12px;
  }

  .view-album-actions .os-button,
  .library-action-buttons .os-button,
  .dashboard-form-actions .os-button {
    min-height: 44px;
  }

  .view-tracklist {
    border-radius: 20px;
  }

  .view-track-leading {
    width: 46px;
  }

  .view-track-duration {
    width: 46px;
    min-width: 46px;
  }

  /* Release details use the compact, edge-to-edge rhythm of a native music list. */
  .view-album-header .view-album-title {
    font-size: 22px;
    line-height: 27px;
    font-weight: 700;
    margin-top: 0;
  }

  .view-album-header .library-creator-chip {
    font-size: 17px;
    line-height: 22px;
    font-weight: 500;
  }

  .view-album-header .view-album-eyebrow {
    font-size: 15px;
    line-height: 20px;
  }

  .view-album-header .view-album-actions {
    margin-top: 8px;
    margin-bottom: 14px;
  }

  .view-tracklist-section.view-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .view-tracklist-section .view-tracklist {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .view-tracklist-section .view-track-row {
    grid-template-columns: 38px minmax(0, 1fr) 48px;
    gap: 8px;
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border-top: 1px solid rgba(60, 60, 67, 0.18);
  }

  .view-tracklist-section .view-track-row:first-child {
    border-top: 1px solid rgba(60, 60, 67, 0.18);
  }

  .view-tracklist-section .view-track-leading {
    width: 38px;
    height: 54px;
  }

  .view-tracklist-section .view-track-number {
    font-size: 15px;
    line-height: 20px;
  }

  .view-tracklist-section .view-track-title {
    font-size: 17px;
    line-height: 22px;
  }

  .view-tracklist-section .view-track-duration {
    width: 48px;
    min-width: 48px;
    font-size: 15px;
    line-height: 20px;
  }

  .view-detail-single > .view-section:not(.view-tracklist-section) .view-section-title,
  .view-detail-single > .view-section:not(.view-tracklist-section) .item-community-header .view-section-title {
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    margin-bottom: 18px;
  }

  body.theme-dark .view-tracklist-section .view-track-number,
  body.theme-dark .view-tracklist-section .view-track-duration {
    color: rgba(255, 255, 255, 0.62);
  }

  body.theme-dark .view-tracklist-section .view-track-row {
    border-top-color: rgba(255, 255, 255, 0.12);
  }

  .library-achievements-section.view-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .library-achievements-section > .item-community-header,
  .library-achievements-section > .view-section-title {
    padding-left: 16px;
    padding-right: 16px;
  }

  .library-achievements-section .library-achievement-list {
    border-left: 0;
    border-right: 0;
  }

  .library-achievements-section .library-achievement-row {
    padding-left: 16px;
    padding-right: 16px;
  }

  .library-achievement-row,
  .dashboard-list-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }

  .library-achievement-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .notification-page-row {
    grid-template-columns: 48px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 14px;
  }

  .notification-page-row .dashboard-row-title {
    font: 600 13px/16px var(--os-font-app);
    letter-spacing: 0;
  }


  .dashboard-list-surface {
    border-radius: 22px;
  }

  .social-shell,
  .social-shell-wide,
  .community-app-page {
    width: 100%;
    max-width: none;
  }

  .social-feed-list {
    padding: 0 16px;
  }

  .social-row {
    min-height: 0;
    padding: 18px 0;
  }

  .social-profile-main {
    padding-top: 16px;
  }

  .social-profile-identity {
    flex-direction: row;
    gap: 14px;
  }

  .social-avatar-large {
    width: 78px;
    height: 78px;
  }

  .social-profile-actions {
    width: 100%;
  }

  .social-profile-actions .os-button {
    flex: 1 1 140px;
  }

  .music-player-bar {
    position: fixed;
    z-index: 140;
    gap: 10px;
  }

  .music-player-bar::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--os-color-ink) 14%, transparent);
    overflow: hidden;
  }

  .music-player-bar::after {
    content: '';
    position: absolute;
    left: 18px;
    top: 0;
    width: calc((100% - 36px) * var(--music-progress));
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--os-color-ink) 72%, var(--os-color-accent));
  }

  .music-player-bar-radio {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .music-player-art {
    width: 44px;
    height: 44px;
    border-radius: 9px;
  }

  .music-player-title {
    font-size: 15px;
  }

  .music-player-subtitle {
    font-size: 13px;
  }

  .music-player-controls .music-player-button:not(.music-player-button-primary):first-child {
    display: none;
  }

  .music-player-button {
    min-width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
  }

  .music-player-button-primary {
    background: transparent;
    color: var(--os-color-ink);
  }

  .music-player-actions {
    display: none;
  }

  .music-player-close-mobile {
    display: inline-grid;
  }

  .music-player-overlay {
    z-index: 210;
  }

  .music-player-scrim {
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
  }

  .music-player-sheet {
    min-height: 0;
    gap: 0;
    border-bottom: 0;
  }

  .music-player-sheet-header {
    position: relative;
  }

  .music-player-sheet-minimize,
.music-player-sheet-header-spacer {
    width: 48px;
    height: 48px;
  }

  .music-player-sheet-minimize {
    top: 2px;
    left: 50%;
    align-content: center;
    gap: 2px;
  }

  .music-player-sheet-art {
    border-radius: 18px;
  }

  .music-player-sheet-copy {
    padding-top: 4px;
  }

  .music-player-sheet-copy h2 {
    font-size: clamp(24px, 7vw, 34px);
  }

  .music-player-sheet-copy p {
    font-size: 17px;
  }

  .music-player-sheet-button {
    width: 58px;
    height: 58px;
  }

  .music-player-sheet-button-primary {
    width: 58px;
    height: 58px;
  }

  .music-player-queue {
    border-left: 0;
    padding: 18px 0 0;
    display: none;
  }

  .music-player-queue-open {
    display: grid;
  }

  .music-player-queue-row {
    min-height: 58px;
  }

  .music-player-queue-play {
    min-height: 58px;
  }
}

@media (max-width: 420px) {
  :root {
    --os-content-inset: 14px;
    --os-detail-inset: 14px;
  }

  .os-topbar-icon-button,
  .os-topbar-avatar {
    width: 38px;
    height: 38px;
  }

  .os-topbar-tab {
    padding: 0 11px;
  }

  .sidebar-item,
  .app-sidebar-compact .sidebar-item {
    width: 54px;
    height: 54px;
    min-height: 54px;
  }

  .sidebar-pin-art,
  .app-sidebar-compact .sidebar-pin-art {
    width: 34px;
    height: 34px;
  }
}

/* Primary navigation: five durable mobile destinations. */
@media (max-width: 768px) {
  .app-sidebar {
    overflow: hidden;
    touch-action: none;
  }

  .sidebar-nav-desktop {
    display: none;
  }

  .sidebar-nav-mobile {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
  }

  .mobile-dock-item {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: transparent;
    color: var(--os-color-ink-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: color 130ms ease;
  }

  .mobile-dock-item .mobile-dock-icon {
    width: 23px;
    height: 23px;
  }

  .mobile-dock-item-active {
    color: var(--os-color-ink);
  }

  .mobile-dock-label {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-dock-item-active .mobile-dock-label {
    font-weight: 760;
  }

  @media (hover: hover) and (pointer: fine) {

  .mobile-dock-item:hover {
    color: var(--os-color-ink);
  } }

  .os-mobile-logo {
    width: 44px;
    height: 40px;
    flex: 0 0 44px;
    place-items: center;
    color: var(--os-color-ink);
    text-decoration: none;
  }

  .os-topbar-search-desktop {
    display: none;
  }

  .os-topbar-search-mobile {
    box-sizing: border-box;
    min-width: 0;
    height: var(--os-topbar-control-size);
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--os-border-control);
    border-radius: var(--os-radius-pill);
    background: var(--os-control-surface-bg);
    color: var(--os-color-ink-secondary);
    order: 1;
    margin: 0;
  }

  .os-topbar-mode-search .os-topbar-left {
    display: none;
  }

  .os-topbar-search-mobile-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    appearance: none;
    background: transparent;
    color: var(--os-color-ink);
    font: 500 15px/20px var(--os-font-app);
    box-shadow: none;
  }

  .os-topbar-search-mobile-input::placeholder {
    color: var(--os-color-ink-muted);
    opacity: 1;
  }

  .os-topbar-search-mobile-input::-webkit-search-cancel-button {
    display: none;
  }

  .os-topbar-search-mobile .os-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .os-topbar-cart-button {
    order: 1;
  }

  .os-topbar-mobile-search-trigger {
    order: 2;
  }

  .os-topbar-back-mobile-only {
    display: inline-flex;
  }

  .os-topbar-notification-menu,
  .os-topbar-account-menu,
  .os-topbar-login-avatar {
    display: none;
  }

  .os-topbar-mode-back .os-topbar-right,
  .os-topbar-mode-quiet .os-topbar-right {
    flex: 0 0 auto;
  }

  @media (hover: hover) and (pointer: fine) {
    .os-topbar-search-mobile:hover {
      border-color: var(--os-input-border-focus);
      background: var(--os-input-bg-focus-neutral);
      color: var(--os-color-ink);
    }
  }

  .os-topbar-search-mobile:focus-within {
    border-color: var(--os-input-border-focus);
    background: var(--os-input-bg-focus-neutral);
    box-shadow: var(--os-elevation-focus);
  }

  .search-page > .app-header {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .search-page > .search-page-form {
    display: none;
  }

  .page-header-tools {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .page-search-control {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .community-app-page .page-header-tools {
    width: 100%;
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .community-app-page .page-search-control {
    width: auto;
    flex: 1 1 auto;
  }

}

/* Solid-surface enforcement: the unified .app-shell is the only glass material. */
:where(
  .glass-panel,
  .os-glass-panel,
  .os-glass-sidebar,
  .os-glass-chrome,
  .os-glass-control,
  .os-glass-recessed,
  .os-floating-panel,
  .app-panel,
  .os-panel-surface,
  .achievement-toast
) {
  background: var(--os-paper-bg);
  border-color: var(--os-paper-border);
  box-shadow: var(--os-paper-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 768px) {
  :root {
    --os-mobile-dock-pill-height: 62px;
    --os-mobile-dock-height: var(--os-mobile-dock-pill-height);
    --os-mobile-player-height: 64px;
  }

  .sidebar-nav-mobile {
    width: 100%;
    height: var(--os-mobile-dock-pill-height);
    margin: 0 0 env(safe-area-inset-bottom);
    padding: 2px 6px 0;
    gap: 0;
    border: 0;
    border-top: 1px solid var(--os-shell-border);
    border-radius: 0;
    background: var(--os-shell-bg);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent);
    backdrop-filter: blur(44px) saturate(1.72);
    -webkit-backdrop-filter: blur(44px) saturate(1.72);
  }

  .mobile-dock-item {
    height: 58px;
    border-radius: 8px;
  }

  .mobile-dock-item-active {
    background: transparent;
    box-shadow: none;
  }

  @media (hover: hover) and (pointer: fine) {

  .mobile-dock-item:hover {
    background: transparent;
    box-shadow: none;
  } }

  .music-player-bar {
    left: 0;
    right: 0;
    bottom: var(--os-mobile-shell-bottom);
    min-height: var(--os-mobile-player-height);
    grid-template-columns: 44px minmax(0, 1fr) 96px;
    padding: 8px 12px;
    border: 0;
    border-top: 1px solid var(--os-paper-border);
    border-radius: 0;
    background: var(--os-paper-bg);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: music-player-dock-in 220ms ease-out both;
  }

  @keyframes music-player-dock-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .music-player-bar > .music-player-progress {
    display: none;
  }

  .music-player-controls .music-player-button:not(.music-player-button-primary, .music-player-close) {
    display: none;
  }

  .music-player-controls {
    width: 96px;
    justify-content: flex-start;
    gap: 4px;
  }

  .music-player-controls .music-player-close {
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    color: var(--os-color-ink-secondary);
  }

  .view-track-leading.view-track-leading-current > .view-track-play {
    display: grid;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--os-color-ink);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .view-track-leading.view-track-leading-current > .view-track-number {
    opacity: 0;
    visibility: hidden;
  }

  .view-track-leading-current .view-track-icon {
    width: 14px;
    height: 14px;
  }

  .view-track-leading-current .view-track-icon-pause::before,
  .view-track-leading-current .view-track-icon-pause::after {
    top: 2px;
    bottom: 2px;
    width: 3px;
  }

  .view-track-leading-current .view-track-icon-pause::before {
    left: 2px;
  }

  .view-track-leading-current .view-track-icon-pause::after {
    right: 2px;
  }

  .view-detail-single .hub-section-title,
  .view-detail-single .view-section-title {
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .library-achievements-section .library-achievement-list {
    border-color: var(--os-color-hairline);
  }

  .music-player-sheet {
    width: 100%;
    height: 100dvh;
    max-height: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, auto) minmax(120px, 1fr);
    padding: max(8px, env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }

  .music-player-sheet-header {
    min-height: 44px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    padding-top: 0;
  }

  .music-player-sheet-minimize {
    position: static;
    grid-column: 3;
    transform: none;
    color: var(--os-color-ink);
    background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  }

  .music-player-sheet-minimize .music-player-icon {
    display: block;
  }

  .music-player-sheet-main {
    padding-top: 0;
  }

  .music-player-queue {
    padding-top: 12px;
  }

  .music-player-queue-list {
    max-height: none;
  }

  .music-player-sheet-progress,
  .music-player-sheet-progress input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .music-player-sheet-controls {
    width: 100%;
    gap: clamp(8px, 3vw, 16px);
  }

  .music-player-sheet-controls .music-player-sheet-button:not(.music-player-sheet-button-primary) {
    width: 44px;
    height: 44px;
    border-color: transparent;
    background: transparent;
  }

  .music-player-sheet-controls .music-player-sheet-button-primary {
    width: 64px;
    height: 64px;
  }

  .music-player-sheet-controls .music-player-sheet-button:not(.music-player-sheet-button-primary, .music-player-sheet-button-utility) {
    width: 48px;
    height: 48px;
    border-color: color-mix(in srgb, var(--os-color-ink) 16%, transparent);
    background: color-mix(in srgb, var(--os-color-ink) 7%, transparent);
  }

  .music-player-sheet-controls .music-player-sheet-shuffle.music-player-sheet-button-active {
    color: var(--os-color-accent);
    background: transparent;
    border-color: transparent;
  }

  .music-player-sheet-button-primary .music-player-icon-pause {
    width: 22px;
    height: 22px;
  }

  .music-player-sheet-button-primary .music-player-icon-pause::before,
  .music-player-sheet-button-primary .music-player-icon-pause::after {
    top: 3px;
    width: 5px;
    height: 16px;
  }

  .music-player-sheet-button-primary .music-player-icon-pause::before {
    left: 4px;
  }

  .music-player-sheet-button-primary .music-player-icon-pause::after {
    right: 4px;
  }

  .music-player-sheet-minimize {
    width: 36px;
    height: 36px;
    justify-self: end;
  }

  .music-player-sheet-minimize .music-player-icon {
    transform: scale(0.82);
  }

  .music-player-sheet-queue-open .music-player-sheet-main {
    display: none;
  }

  .music-player-sheet-queue-open .music-player-queue {
    display: grid;
    padding: 8px 0 0;
  }

  .music-player-sheet-queue-open .music-player-queue-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .music-player-queue-empty {
    padding: 40px 16px;
    color: var(--os-color-ink-secondary);
    font-size: 15px;
    text-align: center;
  }

  .music-player-sheet {
    animation: os-mobile-player-slide-up 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .music-player-sheet-queue-open .music-player-queue {
    animation: os-mobile-queue-slide-up 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes os-mobile-player-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  @keyframes os-mobile-queue-slide-up {
    from { opacity: 0; transform: translateY(32px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .library-achievements-section.view-section {
    padding: 24px 20px;
  }

  .library-achievements-section > .hub-section-head,
  .library-achievements-section > .item-community-header,
  .library-achievements-section > .view-section-title {
    padding-left: 0;
    padding-right: 0;
  }

  .os-mobile-logo {
    display: none;
  }

  .os-topbar-back,
  .os-topbar-icon-button,
  .os-topbar-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .os-topbar-icon-button.os-topbar-cart-button {
    width: auto;
    min-width: 70px;
    padding: 0 9px 0 11px;
    gap: 7px;
    border-radius: var(--os-radius-pill);
  }

  .os-topbar-cart-count {
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    font-size: 13px;
  }

  .os-topbar-back svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .music-player-sheet,
  .music-player-sheet-queue-open .music-player-queue {
    animation: none;
  }
}

@media (max-width: 720px) {
  .dashboard-page .dashboard-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--os-space-3);
  }

  .dashboard-page .dashboard-overview-card,
  .dashboard-page .dashboard-metric-card {
    min-height: 124px;
    padding: var(--os-space-4);
  }
}

/* Shared content material: themed glass for posts, threads, achievements,
   reviews, updates, and other in-page list surfaces. Chrome menus and filters
   intentionally keep their opaque paper material. */
:is(
  .dashboard-list-surface,
  .social-feed-panel,
  .social-feed-composer,
  .social-reply-drawer-form,
  .item-community-surface,
  .item-domain-surface,
  .thread-row,
  .library-achievement-list
) {
  background: var(--44ui-material-glass);
  border-color: var(--44ui-panel-border);
  box-shadow: var(--44ui-elevation-flat);
  backdrop-filter: var(--44ui-glass-filter);
  -webkit-backdrop-filter: var(--44ui-glass-filter);
}

body.theme-dark :is(
  .dashboard-list-surface,
  .social-feed-panel,
  .social-feed-composer,
  .social-reply-drawer-form,
  .item-community-surface,
  .item-domain-surface,
  .thread-row,
  .library-achievement-list
) {
  background: var(--44ui-material-glass);
  border-color: var(--44ui-panel-border);
  box-shadow: var(--44ui-elevation-flat);
}

/* Solid exceptions: filters and account chrome must remain fully readable. */
:is(
  .page-filter-popover,
  .library-filter-popover,
  .os-popover
) {
  background: var(--os-paper-bg);
  border-color: var(--os-paper-border);
  box-shadow: var(--os-shadow-4);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 768px) {
  .dashboard-page > .settings-segment[role="tablist"] {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    overflow: hidden;
  }

  .dashboard-page > .settings-segment[role="tablist"] .settings-segment-item {
    min-width: 0;
    flex: 1 1 auto;
    padding: 7px 9px;
    font-size: 12px;
    text-align: center;
  }

  .support-center {
    gap: var(--os-space-5);
  }

  .support-search-hero {
    padding: var(--os-space-5);
  }

  .support-quick-grid,
  .support-category-grid,
  .support-article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-quick-card {
    min-height: 0;
  }

  .support-category-card,
  .support-article-document,
  .support-related {
    padding: var(--os-space-4);
  }

  .support-contact {
    align-items: stretch;
    flex-direction: column;
    padding: var(--os-space-5);
  }

  .support-contact .os-button {
    width: 100%;
  }

  .support-related {
    position: static;
  }

  .support-article-row {
    padding: var(--os-space-4);
  }

  .support-reader :is(h2, p, .support-reader-copy, .support-reader-actions) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .support-breadcrumbs {
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .os-popover,
  .os-popover-wide {
    left: 10px;
    right: 10px;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .os-account-popover {
    left: auto;
    right: 10px;
    width: min(180px, calc(100vw - 20px));
    padding: 5px;
    border-radius: 14px;
    gap: 1px;
  }

  .os-account-popover .os-popover-item {
    min-height: 36px;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 10px;
  }

  .os-account-popover .os-popover-divider {
    margin: 3px 4px;
  }

  .community-app-page .social-feed-panel,
  .social-thread-page > section > .social-feed-list {
    width: calc(100% + (2 * var(--os-content-inset)));
    margin-left: calc(-1 * var(--os-content-inset));
    margin-right: calc(-1 * var(--os-content-inset));
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .library-achievements-section .library-achievement-list {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .library-achievements-section .library-achievement-row {
    min-height: 0;
    padding: 20px;
    border-top: 1px solid var(--os-color-hairline);
  }

  .library-achievements-section .library-achievement-row:last-child {
    border-bottom: 1px solid var(--os-color-hairline);
  }

  .community-app-page .social-feed-post {
    margin: 0;
    padding: 0 20px;
    border-top: 1px solid var(--os-color-hairline);
    border-radius: 0;
  }

  .community-app-page .social-feed-post:last-child {
    border-bottom: 1px solid var(--os-color-hairline);
  }

  .community-app-page .social-feed-post .social-row {
    border-bottom: 0;
  }

  .social-thread-page > section > .social-feed-list > .social-row {
    padding-left: 20px;
    padding-right: 20px;
    border-top: 1px solid var(--os-color-hairline);
  }

  .social-thread-page > section > .social-feed-list > :last-child {
    border-bottom: 1px solid var(--os-color-hairline);
  }

  .community-app-page .social-feed-composer {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body:is(.theme-light, .theme-dark) .library-achievements-section .library-achievement-list,
  body:is(.theme-light, .theme-dark) .community-app-page .social-feed-panel,
  body:is(.theme-light, .theme-dark) .social-thread-page > section > .social-feed-list {
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body:is(.theme-light, .theme-dark) .community-app-page .social-feed-composer {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body:is(.theme-light, .theme-dark) .community-app-page .social-feed-list .social-feed-post,
  body:is(.theme-light, .theme-dark) .community-app-page .social-feed-list .social-feed-post:first-of-type,
  body:is(.theme-light, .theme-dark) .community-app-page .social-feed-list .social-feed-post:last-of-type {
    border-radius: 0;
  }

  body.theme-dark .community-app-page :is(.social-author-name, .social-row-title),
  body.theme-dark .social-thread-page :is(.social-author-name, .social-row-title) {
    color: #fff;
  }

  body.theme-dark .community-app-page .social-author-name,
  body.theme-dark .social-thread-page .social-author-name {
    font-weight: 760;
  }

  body.theme-dark .community-app-page .social-row-body,
  body.theme-dark .social-thread-page .social-row-body {
    color: rgba(255, 255, 255, 0.88);
  }

  .social-thread-page .social-inline-composer {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    padding: 12px 20px 16px;
  }

  .social-thread-page .social-inline-composer-box,
  .social-thread-page .social-inline-composer textarea {
    width: 100%;
    min-width: 0;
  }

  .social-thread-page > section > .social-feed-list > .social-row {
    border-bottom: 1px solid var(--os-color-hairline);
  }

  .social-thread-page .social-actions {
    min-width: 0;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .social-thread-page .social-action-danger {
    flex: 0 0 auto;
  }

  .social-thread-page .social-action-danger svg {
    display: block;
  }
}

.library-achievement-row-unlocked .library-achievement-icon {
  color: var(--os-color-ink);
  border-color: var(--os-color-hairline);
  background: color-mix(in srgb, var(--os-color-ink) 6%, transparent);
}

.view-album-header .library-creator-chip {
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {

.view-album-header .library-creator-chip:hover {
  color: #fff;
} }

.music-player-radio-stop,
.music-player-sheet-radio-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--os-color-hairline);
  background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  color: var(--os-color-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.music-player-radio-stop {
  width: auto;
  min-width: 64px;
  padding: 0 14px;
  border-radius: 999px;
}

.music-player-sheet-radio-stop {
  min-width: 120px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
}

.search-page .social-feed > .social-row {
  border-top: 1px solid var(--os-color-hairline);
}

@media (max-width: 768px) {
  body.theme-dark .os-button:is(.os-button-primary, .os-button-secondary) {
    background: #fff;
    color: #111;
    border-color: transparent;
    box-shadow: var(--os-shadow-2);
  }
  @media (hover: hover) and (pointer: fine) {
  body.theme-dark .os-button:is(.os-button-primary, .os-button-secondary):hover {
    background: #fff;
    color: #111;
    border-color: transparent;
    box-shadow: var(--os-shadow-2);
  } }

  body.theme-light .os-button:is(.os-button-primary, .os-button-secondary) {
    background: #111;
    color: #fff;
    border-color: transparent;
    box-shadow: var(--os-shadow-2);
  }

  @media (hover: hover) and (pointer: fine) {

  body.theme-light .os-button:is(.os-button-primary, .os-button-secondary):hover {
    background: #111;
    color: #fff;
    border-color: transparent;
    box-shadow: var(--os-shadow-2);
  } }

  .music-player-controls .music-player-radio-stop {
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--os-color-ink);
  }

  body.theme-dark .view-album-actions :is(.os-button-primary, .os-button-secondary) {
    background: #fff;
    color: #111;
    border-color: transparent;
    box-shadow: var(--os-shadow-2);
  }

  body.theme-light .view-album-actions :is(.os-button-primary, .os-button-secondary) {
    background: #111;
    color: #fff;
    border-color: transparent;
    box-shadow: var(--os-shadow-2);
  }

  .radio-page {
    min-height: 0;
    overflow: hidden;
  }

  .radio-hero {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: transparent !important;
  }

  .radio-hero-kicker {
    display: flex;
    justify-content: center;
    order: -1;
    margin: 0;
  }

  .radio-hero-eyebrow {
    display: none;
  }

  .radio-hero::before,
  .radio-hero::after {
    display: none;
  }

  body.theme-light .radio-hero :is(.radio-hero-kicker, .radio-hero-eyebrow, .radio-hero-title, .radio-hero-artist) {
    color: var(--os-color-ink);
  }

  .music-player-overlay,
  .music-player-scrim {
    background:
      radial-gradient(circle at 18% 12%, var(--theme-orb-a), transparent 36%),
      radial-gradient(circle at 80% 16%, var(--theme-orb-b), transparent 34%),
      radial-gradient(circle at 52% 82%, var(--theme-orb-c), transparent 44%),
      var(--os-color-app-environment);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .music-player-sheet {
    background:
      radial-gradient(circle at 18% 12%, var(--theme-orb-a), transparent 36%),
      radial-gradient(circle at 80% 16%, var(--theme-orb-b), transparent 34%),
      radial-gradient(circle at 52% 82%, var(--theme-orb-c), transparent 44%),
      var(--os-color-app-environment);
    box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.22), var(--os-shadow-inset-highlight);
  }

  .music-player-sheet-radio-stop {
    width: 68px;
    min-width: 68px;
    height: 68px;
    min-height: 68px;
    padding: 0;
    border-radius: 50%;
  }

  .view-track-title-active,
.achievement-toast-eyebrow,
.project-status-pill[data-status="accepted"],
.project-status-pill[data-status="in_progress"] {
    color: var(--os-color-ink);
  }

  .view-album-header {
    background-image: none;
  }

  .view-album-header::before {
    background-image: var(--release-artwork);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
  }

  .view-album-header::after {
    background:
      radial-gradient(circle at 50% 24%, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.26) 64%, transparent 100%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.12) 62%, transparent 100%);
  }

  .search-page .hub-section-title {
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .search-page .social-feed > .social-row {
    border-top: 1px solid var(--os-color-hairline);
    border-bottom: 0;
  }
}

/* Profile image selection and framing */
.profile-edit-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.profile-avatar-edit-control {
  cursor: pointer;
}

.profile-image-edit-icon {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--os-paper-bg) 88%, transparent);
  border: 1px solid var(--os-paper-border);
  box-shadow: var(--os-shadow-2);
  color: var(--os-color-ink);
}

.profile-image-edit-icon::before {
  content: '';
  width: 14px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 3px;
  box-sizing: border-box;
}

.profile-image-edit-icon::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.profile-avatar-edit-control > .profile-image-edit-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--os-paper-bg) 78%, transparent);
}

.profile-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 20px;
}

.profile-crop-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.profile-crop-dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100dvh - 40px);
  display: grid;
  gap: 20px;
  padding: 16px 18px 22px;
  overflow-y: auto;
  border: 1px solid var(--os-paper-border);
  border-radius: 24px;
  background: var(--os-paper-bg);
  box-shadow: var(--os-shadow-modal);
}

.profile-crop-header {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) auto minmax(76px, 1fr);
  align-items: center;
  gap: 12px;
}

.profile-crop-header h2 {
  margin: 0;
  font-size: 16px;
  text-align: center;
}

.profile-crop-text-button {
  justify-self: start;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--os-color-ink-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 680;
  cursor: pointer;
}

.profile-crop-confirm {
  justify-self: end;
  color: var(--os-color-accent);
}

.profile-crop-preview {
  position: relative;
  width: min(100%, 520px);
  margin: 0 auto;
  overflow: hidden;
  background: #080808;
  box-shadow: 0 0 0 1px var(--os-color-hairline);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.profile-crop-preview:active {
  cursor: grabbing;
}

.profile-crop-preview-avatar {
  max-width: 360px;
  aspect-ratio: 1;
  border-radius: 50%;
}

.profile-crop-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform-origin: center;
  pointer-events: none;
  will-change: transform;
}

.profile-crop-controls {
  display: grid;
  gap: 14px;
}

.profile-crop-instruction {
  margin: 0;
  color: var(--os-color-ink-muted);
  font-size: 13px;
  text-align: center;
}

.profile-crop-controls label {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  color: var(--os-color-ink-secondary);
  font-size: 13px;
  font-weight: 620;
}

.profile-crop-controls input {
  width: 100%;
  accent-color: var(--os-color-accent);
}

body:is(.theme-light, .theme-dark) .view-album-actions .os-button.os-button-active {
  background: var(--os-color-accent);
  color: #111;
  border-color: color-mix(in srgb, var(--os-color-accent) 72%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--os-color-accent) 20%, transparent), var(--os-shadow-2);
}

@media (hover: hover) and (pointer: fine) {

body:is(.theme-light, .theme-dark) .view-album-actions .os-button.os-button-active:hover {
  background: var(--os-color-accent);
  color: #111;
  border-color: color-mix(in srgb, var(--os-color-accent) 72%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--os-color-accent) 20%, transparent), var(--os-shadow-2);
} }

@media (max-width: 768px) {
  /* Continue the existing unified shell material behind iOS system chrome.
     These strips only fill the safe areas; Sidebar and Topbar geometry/material
     remain unchanged. */
  .app-shell::before,
  .app-sidebar::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--os-shell-bg);
    backdrop-filter: blur(44px) saturate(1.72);
    -webkit-backdrop-filter: blur(44px) saturate(1.72);
  }

  .app-shell::before {
    top: 0;
    height: var(--os-safe-area-top);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, white 18%, transparent);
  }

  .app-sidebar::after {
    bottom: 0;
    height: env(safe-area-inset-bottom);
  }

  body:has(.radio-page),
  .app-main-content:has(.radio-page) {
    overflow: hidden;
  }

  .radio-hero {
    align-content: center;
  }

  .social-profile-main {
    gap: 22px;
    padding: 28px 0 0;
  }

  .social-profile-name {
    max-width: 100%;
    font-size: clamp(30px, 8.7vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
  }

  .social-profile-tabs {
    width: 100%;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    padding: 8px 0 12px;
  }

  .social-profile-tabs button {
    padding: 8px 14px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
  }

  .social-profile-tabs button[aria-selected="true"] {
    border: 0;
    background: color-mix(in srgb, var(--os-color-ink) 14%, transparent);
  }

  .social-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
  }

  .social-artifact-cover {
    border-radius: 14px;
  }

  .profile-crop-overlay {
    padding: 0;
    place-items: end center;
  }

  .profile-crop-dialog {
    width: 100%;
    max-height: calc(100dvh - 28px);
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 26px 26px 0 0;
    border-bottom: 0;
  }

  .profile-crop-preview-avatar {
    max-width: min(78vw, 340px);
  }

  .profile-crop-controls label {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Desktop theme-through pass. Mobile already uses its own reviewed flat
   layouts, so these material changes intentionally begin above 768px. */
@media (min-width: 769px) {
  :is(
    .view-tracklist,
    .library-achievement-list,
    .social-feed-panel,
    .social-feed-composer,
    .social-reply-drawer-form,
    .item-community-surface,
    .item-domain-surface,
    .thread-row
  ) {
    background: transparent;
    border-color: var(--os-color-hairline);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  :is(
    .view-tracklist,
    .library-achievement-list,
    .social-feed-panel
  ) {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .view-track-row,
  .library-achievement-row,
  .social-feed-post {
    background: transparent;
  }

  .radio-page {
    min-height: calc(100dvh - var(--os-topbar-height) - (2 * var(--os-content-inset)));
  }

  .radio-hero {
    min-height: calc(100dvh - var(--os-topbar-height) - (2 * var(--os-content-inset)));
    padding: 28px var(--os-detail-inset);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-content: center;
    gap: 18px;
    background: transparent !important;
    color: var(--os-color-ink);
  }

  .radio-hero::before,
  .radio-hero::after {
    display: none;
  }

  .radio-hero-kicker {
    display: flex;
    justify-content: center;
    color: var(--os-color-ink-secondary);
  }

  .radio-hero .radio-hero-cover,
  .radio-hero .view-album-cover {
    width: min(34vw, 360px);
    height: min(34vw, 360px);
    grid-row: 2;
  }

  .radio-hero-copy {
    grid-row: 3;
    align-items: center;
    width: 100%;
    max-width: 680px;
    padding: 0;
  }

  .radio-hero-eyebrow {
    display: none;
  }

  .radio-hero :is(.radio-hero-title, .radio-hero-artist) {
    color: var(--os-color-ink);
  }

  @media (hover: hover) and (pointer: fine) {

  .radio-hero :is(.radio-hero-title, .radio-hero-artist):hover {
    color: var(--os-color-ink);
  } }

  .music-player-overlay {
    inset: var(--os-topbar-height) 0 0 var(--os-active-sidebar-width, var(--os-sidebar-width));
    place-items: stretch;
  }

  body:has(.app-sidebar-compact) .music-player-overlay {
    left: var(--os-sidebar-compact-width);
  }

  .music-player-scrim {
    display: none;
  }

  .music-player-sheet {
    width: 100%;
    height: 100%;
    max-height: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    padding: 16px clamp(24px, 3vw, 52px) 28px;
    border: 0;
    border-radius: 0;
    background: var(--os-paper-bg);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: os-desktop-player-slide-up 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: grid-template-columns 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .music-player-sheet-main {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 620px);
    height: 100%;
    justify-self: center;
    align-content: center;
    padding: 0 clamp(16px, 2vw, 34px);
  }

  .music-player-sheet-art {
    width: min(430px, 46dvh, 46vw);
  }

  .music-player-queue {
    grid-column: 2;
    grid-row: 2;
    display: none;
    width: 100%;
    height: 100%;
    justify-self: center;
    overflow: hidden;
    border-left: 0;
    padding: 12px 0 0;
  }

  .music-player-sheet-queue-open {
    grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
    column-gap: clamp(22px, 3vw, 48px);
  }

  .music-player-sheet-queue-open .music-player-sheet-main {
    width: min(100%, 560px);
    animation: os-desktop-player-shift-left 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .music-player-sheet-queue-open .music-player-sheet-art {
    width: min(360px, 40dvh, 34vw);
  }

  .music-player-sheet-queue-open .music-player-queue {
    display: grid;
    animation: os-desktop-queue-slide-up 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .music-player-sheet-queue-open .music-player-queue-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  @keyframes os-desktop-player-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  @keyframes os-desktop-queue-slide-up {
    from { opacity: 0; transform: translate(32px, 36px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes os-desktop-player-shift-left {
    from { transform: translateX(14%); }
    to { transform: translateX(0); }
  }
}

@media (max-width: 768px) {
  .studio-tracks-section,
  .studio-achievements-section {
    margin-top: 28px;
  }

  .studio-tracks-section .dashboard-track-editor-copy {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
  }

  .studio-track-panel {
    padding: 0 16px;
  }

  .dashboard-achievement-choice-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 18px 0;
  }
}

/* =========================================================
   44OS DESKTOP MATERIAL AUTHORITY
   Permanent content uses Control Surface. Floating menus and music-player
   surfaces use Opaque Paper. Structural shell/sidebar materials are untouched.
   ========================================================= */
@media (min-width: 769px) {
  body:is(.theme-dark, .theme-light) {
    --os-control-surface-bg: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
    --os-control-surface-bg-hover: color-mix(in srgb, var(--os-color-ink) 10%, transparent);
    --os-control-surface-bg-active: color-mix(in srgb, var(--os-color-ink) 14%, transparent);
    --os-control-surface-border: color-mix(in srgb, var(--os-color-ink) 12%, transparent);
    --os-opaque-paper-bg: var(--os-paper-bg);
    --os-opaque-paper-border: var(--os-paper-border);
    --os-radius-panel: 28px;
    --os-radius-menu: 18px;
    --os-radius-control: 18px;
    --os-radius-compact: 14px;
    --os-radius-media: 16px;
    --os-radius-pill-system: 999px;
    --os-panel-inset: 24px;
    --os-row-inset-y: 20px;
    --os-row-inset-x: 24px;
    --os-panel-content-gap: 20px;
    --os-menu-inset: 10px;
    --os-menu-item-y: 12px;
    --os-menu-item-x: 14px;
    --os-border-surface: var(--os-control-surface-border);
    --os-border-divider: color-mix(in srgb, var(--os-color-ink) 9%, transparent);
    --os-border-control: var(--os-control-surface-border);
    --os-border-focus: color-mix(in srgb, var(--os-color-ink) 28%, transparent);
    --os-elevation-input: inset 0 1px 2px rgba(0, 0, 0, 0.10);

    /* Retired desktop material families resolve to one canonical surface. */
    --os-glass-panel-bg: var(--os-control-surface-bg);
    --os-glass-panel-border: var(--os-control-surface-border);
    --os-glass-control-bg: var(--os-control-surface-bg);
    --os-glass-control-border: var(--os-control-surface-border);
    --os-input-bg: var(--os-control-surface-bg);
    --os-input-border: var(--os-control-surface-border);
    --os-input-radius: var(--os-radius-control);
    --os-input-shadow: var(--os-elevation-input);
    --os-card-bg: var(--os-control-surface-bg);
    --os-card-border: var(--os-control-surface-border);
  }

  body:is(.theme-dark, .theme-light) {
    --os-elevation-floating: var(--44ui-elevation-raised);
  }

  body:is(.theme-dark, .theme-light) :is(
    .glass-panel, .os-glass-panel, .os-glass-control, .os-glass-chrome,
    .dashboard-overview-card.glass-panel, .dashboard-metric-card.glass-panel,
    .os-paper-card, .os-panel-surface, .app-panel, .app-card, .app-empty,
    .dashboard-form-step, .dashboard-track-editor-list, .dashboard-list-surface,
    .dashboard-overview-card, .dashboard-metric-card, .dashboard-feature-card,
    .dashboard-feature-row, .library-achievement-list, .item-community-surface,
    .item-domain-surface, .product-review-list-surface, .social-feed-panel,
    .social-feed-composer, .social-reply-drawer-form, .social-compose-panel,
    .social-inbox-list, .social-message-list, .social-structured-list,
    .social-structured-metrics, .search-profile-list,
    .search-profile-row, .thread-row, .cart-summary, .os-home-app-tile,
    .settings-list, .os-home-panel, .project-thread-surface, .project-composer,
    .project-sidebar-card, .support-sidebar, .support-reader, .radio-setup-card,
    .rich-editor-surface, .docked-panel
  ) {
    background: var(--os-control-surface-bg);
    border-color: var(--os-control-surface-border);
    box-shadow: var(--os-elevation-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body:is(.theme-dark, .theme-light) :is(.os-glass-control, .os-glass-chrome) {
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light) :is(
    .glass-panel, .os-glass-panel, .os-paper-card, .os-panel-surface, .app-panel,
    .dashboard-form-step, .dashboard-track-editor-list, .dashboard-list-surface,
    .library-achievement-list, .item-community-surface, .item-domain-surface,
    .product-review-list-surface, .social-feed-panel, .social-feed-composer,
    .social-compose-panel, .social-inbox-list, .social-message-list,
    .social-structured-list, .search-profile-list, .search-profile-row, .settings-list,
    .project-thread-surface, .project-composer, .project-sidebar-card,
    .support-sidebar, .support-reader, .radio-setup-card, .rich-editor-surface
  ) {
    border-radius: var(--os-radius-panel);
    overflow: hidden;
  }

  body:is(.theme-dark, .theme-light) :is(.os-popover, .page-filter-popover, .library-filter-popover, .tag-select-menu, .rich-editor-toolbar-popover, .social-mention-list, .music-player-bar, .music-player-sheet, .os-modal, .os-paper-panel, .profile-crop-dialog) {
    background: var(--os-opaque-paper-bg);
    border-color: var(--os-opaque-paper-border);
    box-shadow: var(--os-elevation-floating);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: var(--os-radius-menu);
  }

  body:is(.theme-dark, .theme-light) :is(.os-input-field, .os-input-textarea, .tag-select-control) {
    border-radius: var(--os-radius-control);
    border-color: var(--os-border-control);
    box-shadow: var(--os-elevation-input);
  }

  body:is(.theme-dark, .theme-light) :is(.os-input-field, .os-input-textarea, .tag-select-control):focus-within,
  body:is(.theme-dark, .theme-light) :is(input.os-input-field, textarea.os-input-textarea):focus-visible {
    border-color: var(--os-border-focus);
    box-shadow: var(--os-elevation-input), var(--os-elevation-focus);
  }

  body:is(.theme-dark, .theme-light) :is(.glass-panel, .dashboard-form-step, .social-feed-composer, .project-composer, .support-sidebar, .support-reader, .radio-setup-card, .rich-editor-surface) {
    padding: var(--os-panel-inset);
  }

  body:is(.theme-dark, .theme-light) :is(.dashboard-form-step, .studio-achievements-content) {
    gap: var(--os-panel-content-gap);
  }

  body:is(.theme-dark, .theme-light) :is(.dashboard-list-row, .dashboard-track-editor-row, .dashboard-achievement-choice-row, .library-achievement-row) {
    padding: var(--os-row-inset-y) var(--os-row-inset-x);
  }

  body:is(.theme-dark, .theme-light) :is(.dashboard-list-row, .dashboard-track-editor-row, .dashboard-achievement-choice-row, .library-achievement-row) + :is(.dashboard-list-row, .dashboard-track-editor-row, .dashboard-achievement-choice-row, .library-achievement-row) {
    border-top: 1px solid var(--os-border-divider);
  }

  body:is(.theme-dark, .theme-light) :is(.os-popover, .page-filter-popover, .library-filter-popover, .tag-select-menu, .rich-editor-toolbar-popover, .social-mention-list) {
    padding: var(--os-menu-inset);
  }

  body:is(.theme-dark, .theme-light) :is(.os-popover-item, .page-filter-option, .library-filter-option, .tag-select-menu button, .social-mention-option) {
    min-height: 44px;
    padding: var(--os-menu-item-y) var(--os-menu-item-x);
    border-radius: var(--os-radius-compact);
  }

  body:is(.theme-dark, .theme-light) :is(.product-tile-art, .app-card, .os-product-card, .os-category-card, .os-category-icon-card, .social-artifact-cover) {
    border-radius: var(--os-radius-media);
    box-shadow: var(--44ui-elevation-raised);
  }

  body:is(.theme-dark, .theme-light) :is(.product-tile-art, .app-card, .os-product-card, .os-category-card, .os-category-icon-card, .social-artifact-cover) {
    transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 180ms ease, filter 180ms ease;
    transform-origin: center;
  }

  @media (hover: hover) and (pointer: fine) {

  body:is(.theme-dark, .theme-light) :is(.product-tile:hover .product-tile-art, .app-card:hover, .os-product-card:hover, .os-category-card:hover, .os-category-icon-card:hover, .social-artifact-card:hover .social-artifact-cover) {
    transform: scale(1.018);
    box-shadow: var(--os-elevation-floating);
    filter: saturate(1.035) contrast(1.01);
  } }

  .music-player-controls .music-player-close-mobile { display: none !important; }
  body.theme-dark .os-popover { color: #f4f3ee; }
  body.theme-dark .os-popover :is(.os-popover-item, .os-popover-heading, .os-popover-footer-link, .os-popover-text-button) { color: #f4f3ee; }
  body.theme-dark .os-button:not(.os-button-danger), body.theme-dark .os-button:not(.os-button-danger):is(:link, :visited, :hover) { background: #fff; color: #111; border-color: transparent; box-shadow: var(--os-shadow-2); }
  body.theme-light .os-button:not(.os-button-danger), body.theme-light .os-button:not(.os-button-danger):is(:link, :visited, :hover) { background: #111; color: #fff; border-color: transparent; box-shadow: var(--os-shadow-2); }
}

/* =========================================================
   44OS DESKTOP INTERACTION AUTHORITY
   Neutral focus, pill tabs, full-width list dividers, and one action geometry.
   Shell, sidebar, environment, theme artwork, and mobile remain untouched.
   ========================================================= */
@media (min-width: 769px) {
  body:is(.theme-dark, .theme-light) {
    --os-button-height: 40px;
    --os-button-compact-height: 40px;
    --os-input-bg-focus-neutral: color-mix(in srgb, var(--os-color-ink) 12%, transparent);
    --os-input-border-focus: color-mix(in srgb, var(--os-color-ink) 22%, transparent);
    --os-input-focus-shadow: var(--os-elevation-input);
    --os-elevation-focus: 0 0 0 1px color-mix(in srgb, var(--os-color-ink) 14%, transparent);
  }

  /* A regular and compact action share one desktop height. Large actions stay large. */
  body:is(.theme-dark, .theme-light) .os-button,
  body:is(.theme-dark, .theme-light) .os-button.os-button-compact {
    height: var(--os-button-height);
    min-height: var(--os-button-height);
    padding-inline: 20px;
  }

  body:is(.theme-dark, .theme-light) .os-button.os-button-large {
    height: var(--os-button-large-height);
    min-height: var(--os-button-large-height);
  }

  body:is(.theme-dark, .theme-light) :is(.os-icon-button, .os-icon-button-compact) {
    width: var(--os-button-height);
    height: var(--os-button-height);
    min-height: var(--os-button-height);
    padding: 0;
  }

  /* Section actions use the same trailing safe inset as actions inside list rows. */
  body:is(.theme-dark, .theme-light) .hub-section-head {
    align-items: center;
    padding-right: 0;
  }

  body:is(.theme-dark, .theme-light) .hub-section-head-described {
    align-items: flex-start;
  }

  /* Profile content tabs are one neutral segmented pill, never square tabs. */
  body:is(.theme-dark, .theme-light) .social-profile-tabs {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    gap: 8px;
    margin: 8px auto 0;
    padding: 0;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light) .social-profile-tabs button {
    min-height: 40px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid var(--os-border-control);
    border-radius: var(--os-radius-pill-system);
    background: var(--os-control-surface-bg);
    box-shadow: none;
    color: var(--os-color-ink-muted);
    transition: background 140ms ease, color 140ms ease;
  }

  @media (hover: hover) and (pointer: fine) {

  body:is(.theme-dark, .theme-light) .social-profile-tabs button:hover {
    background: var(--os-control-surface-bg-active);
    color: var(--os-color-ink);
  } }

  body:is(.theme-dark, .theme-light) .social-profile-tabs button[aria-selected="true"],
  body.theme-dark .social-profile-tabs button[aria-selected="true"] {
    border-color: transparent;
    background: var(--os-color-ink);
    box-shadow: none;
    color: var(--os-color-canvas);
  }

  /* Artwork-first profile cards are not panels. Only their media carries depth. */
  body:is(.theme-dark, .theme-light) .social-artifact-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: none;
    transform: none;
  }
  @media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light) .social-artifact-card:hover {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: none;
    transform: none;
  } }

  body:is(.theme-dark, .theme-light) .social-artifact-cover {
    box-shadow: var(--44ui-elevation-raised);
    transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 180ms ease, filter 180ms ease;
    transform-origin: center;
  }

  @media (hover: hover) and (pointer: fine) {

  body:is(.theme-dark, .theme-light) .social-artifact-card:hover .social-artifact-cover {
    transform: scale(1.018);
    box-shadow: var(--os-elevation-floating);
    filter: saturate(1.035) contrast(1.01);
  } }

  /* Feed panels own their complete outline; rows own edge-to-edge dividers. */
  body:is(.theme-dark, .theme-light) .social-feed-panel {
    padding: 0;
    border: 1px solid var(--os-border-surface);
    border-radius: var(--os-radius-panel);
    overflow: hidden;
  }

  body:is(.theme-dark, .theme-light) .social-feed-panel .social-feed-post {
    margin: 0;
    padding: 0;
    border-radius: 0;
  }

  body:is(.theme-dark, .theme-light) .social-feed-panel .social-feed-post + .social-feed-post {
    border-top: 1px solid var(--os-border-divider);
  }

  body:is(.theme-dark, .theme-light) .social-feed-panel .social-feed-post > .social-row {
    padding: var(--os-row-inset-y) var(--os-row-inset-x);
    border-bottom: 0;
  }

  /* Profile and Search reuse the exact same post surface and hover language. */
  body:is(.theme-dark, .theme-light) .social-feed:not(.social-feed-list) {
    border: 1px solid var(--os-border-surface);
    border-radius: var(--os-radius-panel);
    background: var(--44ui-material-glass);
    box-shadow: var(--os-elevation-panel);
    overflow: hidden;
  }

  body:is(.theme-dark, .theme-light) .social-feed:not(.social-feed-list) > .social-row {
    padding: var(--os-row-inset-y) var(--os-row-inset-x);
    border-bottom: 0;
    transition: background 140ms ease;
  }

  body:is(.theme-dark, .theme-light) .social-feed:not(.social-feed-list) > .social-row + .social-row {
    border-top: 1px solid var(--os-border-divider);
  }

  @media (hover: hover) and (pointer: fine) {

  body:is(.theme-dark, .theme-light) :is(
    .social-feed-panel .social-feed-post:hover,
    .social-feed:not(.social-feed-list) > .social-row-interactive:hover
  ) {
    background: var(--os-control-surface-bg-hover);
  } }

  /* Filter, notification, and composer controls acknowledge their open state. */
  body:is(.theme-dark, .theme-light) :is(
    .page-filter-menu[open] > .page-filter-button,
    .page-filter-menu-open > .page-filter-button,
    .library-filter-menu[open] > .library-filter-button,
    .page-compose-button-active,
    .os-topbar-icon-button-active
  ) {
    background: var(--os-control-surface-bg-active);
    border-color: var(--os-input-border-focus);
    box-shadow: var(--os-elevation-input), var(--os-elevation-focus);
  }

  body:is(.theme-dark, .theme-light) .page-compose-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--os-border-control);
    border-radius: 50%;
    background: var(--os-control-surface-bg);
    color: var(--os-color-ink);
    box-shadow: none;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  }

  @media (hover: hover) and (pointer: fine) {

  body:is(.theme-dark, .theme-light) .page-compose-button:hover {
    background: var(--os-control-surface-bg-hover);
  } }

  body:is(.theme-dark, .theme-light) .page-compose-button-active {
    background: var(--os-control-surface-bg-active);
    border-color: var(--os-input-border-focus);
    box-shadow: var(--os-elevation-input), var(--os-elevation-focus);
  }

  @media (hover: hover) and (pointer: fine) {

  body:is(.theme-dark, .theme-light) .page-compose-button-active:hover {
    background: var(--os-control-surface-bg-active);
    border-color: var(--os-input-border-focus);
    box-shadow: var(--os-elevation-input), var(--os-elevation-focus);
  } }

  body:is(.theme-dark, .theme-light) .page-compose-button > span {
    display: block;
    font-size: 27px;
    font-weight: 360;
    line-height: 1;
    transform: translateY(-1px);
  }

  body:is(.theme-dark, .theme-light) .page-compose-button-active > span {
    transform: rotate(45deg);
  }

  body:is(.theme-dark, .theme-light) .community-app-page > .social-feed-composer-compact {
    display: none;
  }

  body:is(.theme-dark, .theme-light) .social-thread-page > section > .social-feed-list {
    padding: 0;
    border: 1px solid var(--os-border-surface);
    border-radius: var(--os-radius-panel);
    overflow: hidden;
  }

  body:is(.theme-dark, .theme-light) .social-thread-page > section > .social-feed-list > .social-row,
  body:is(.theme-dark, .theme-light) .social-thread-page > section > .social-feed-list > .social-feed-post > .social-row {
    padding: var(--os-row-inset-y) var(--os-row-inset-x);
  }

  /* A top-level reply composer starts on the post's content column. */
  body:is(.theme-dark, .theme-light) .social-thread-page > section > .social-feed-list > .social-composer-inline-surface {
    margin: 0;
    padding: var(--os-row-inset-y) var(--os-row-inset-x) var(--os-row-inset-y) calc(var(--os-row-inset-x) + 62px);
    border-top: 1px solid var(--os-border-divider);
    border-bottom: 0;
  }

  /* Every text entry surface uses the same quiet neutral active state. */
  body:is(.theme-dark, .theme-light) :is(
    .os-input-field,
    .os-input-search,
    .os-input-textarea,
    .profile-edit-input,
    .tag-select-control
  ) {
    outline: 0;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }

  body:is(.theme-dark, .theme-light) :is(
    .os-input-field,
    .os-input-search,
    .os-input-textarea,
    .profile-edit-input
  ):is(:focus, :focus-visible),
  body:is(.theme-dark, .theme-light) .tag-select-control:focus-within {
    outline: 0;
    background: var(--os-input-bg-focus-neutral);
    border-color: var(--os-input-border-focus);
    box-shadow: var(--os-elevation-input), var(--os-elevation-focus);
  }

  body:is(.theme-dark, .theme-light) :is(
    .social-feed-composer,
    .social-reply-drawer-form,
    .social-inline-composer-box,
    .social-composer-box,
    .rich-editor-surface
  ):focus-within {
    background: var(--os-input-bg-focus-neutral);
    border-color: var(--os-input-border-focus);
    box-shadow: var(--os-elevation-input), var(--os-elevation-focus);
  }

  body:is(.theme-dark, .theme-light) :is(
    .social-feed-composer,
    .social-reply-drawer-form,
    .social-inline-composer-box,
    .social-composer-box
  ) textarea:focus,
  body:is(.theme-dark, .theme-light) :is(
    .social-feed-composer,
    .social-reply-drawer-form,
    .social-inline-composer-box,
    .social-composer-box
  ) textarea:focus-visible {
    outline: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light) :is(.social-inline-composer-box, .social-composer-box) {
    padding: 14px 16px;
    border: 1px solid var(--os-border-control);
    border-radius: var(--os-radius-control);
    background: var(--os-control-surface-bg);
    box-shadow: var(--os-elevation-input);
  }

  body:is(.theme-dark, .theme-light) :is(.social-inline-composer-box, .social-composer-box) > .os-input-textarea {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light) .os-topbar-search-form {
    border-color: var(--os-border-control);
    background: var(--os-control-surface-bg);
    box-shadow: var(--os-elevation-input);
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }

  body:is(.theme-dark, .theme-light) .os-topbar-search-form:focus-within {
    background: var(--os-input-bg-focus-neutral);
    border-color: var(--os-input-border-focus);
    box-shadow: var(--os-elevation-input), var(--os-elevation-focus);
  }

  body:is(.theme-dark, .theme-light) .os-topbar-search-input:is(:focus, :focus-visible) {
    outline: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light) :is(.page-search-control, .library-search-control, .social-compose-to-row) {
    border-color: var(--os-border-control);
    background: var(--os-control-surface-bg);
    box-shadow: var(--os-elevation-input);
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }

  body:is(.theme-dark, .theme-light) :is(.page-search-control, .library-search-control, .social-compose-to-row):focus-within {
    background: var(--os-input-bg-focus-neutral);
    border-color: var(--os-input-border-focus);
    box-shadow: var(--os-elevation-input), var(--os-elevation-focus);
  }

  body:is(.theme-dark, .theme-light) :is(.page-search-control, .library-search-control, .social-compose-to-row) input:is(:focus, :focus-visible) {
    outline: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light) .item-community-composer-surface {
    border: 1px solid transparent;
    border-radius: var(--os-radius-control);
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }

  body:is(.theme-dark, .theme-light) .item-community-composer-surface:focus-within {
    background: var(--os-input-bg-focus-neutral);
    border-color: var(--os-input-border-focus);
    box-shadow: var(--os-elevation-input), var(--os-elevation-focus);
  }

  body:is(.theme-dark, .theme-light) .item-community-composer-surface :is(textarea, input):is(:focus, :focus-visible) {
    outline: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light) .login-field .os-input-field:focus {
    border-color: var(--os-input-border-focus);
    background: var(--os-input-bg-focus-neutral);
    box-shadow: var(--os-elevation-input), var(--os-elevation-focus);
  }

  /* Keyboard focus remains visible without borrowing the theme accent. */
  body:is(.theme-dark, .theme-light) :is(.dashboard-card-link, .social-row-main-clickable):focus-visible {
    outline: 1px solid var(--os-border-focus);
    outline-offset: 3px;
  }

  body:is(.theme-dark, .theme-light) .dashboard-card-link:focus-visible .glass-panel {
    border-color: var(--os-border-focus);
    box-shadow: var(--os-elevation-panel);
  }

  /* Profile identity uses the full measure; navigation and actions share one row. */
  body:is(.theme-dark, .theme-light) .social-profile-main {
    display: block;
    width: 100%;
  }

  body:is(.theme-dark, .theme-light) .social-profile-identity,
  body:is(.theme-dark, .theme-light) .social-profile-text {
    width: 100%;
  }

  body:is(.theme-dark, .theme-light) .social-profile-text {
    flex: 1 1 auto;
  }

  body:is(.theme-dark, .theme-light) .social-profile-bio {
    width: 100%;
    max-width: none;
  }

  body:is(.theme-dark, .theme-light) .social-profile-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-inline: 4px;
  }

  body:is(.theme-dark, .theme-light) .social-profile-toolbar .social-profile-tabs {
    margin: 0;
    flex: 0 1 auto;
  }

  body:is(.theme-dark, .theme-light) .social-profile-toolbar .social-profile-actions {
    margin-left: auto;
    padding-top: 0;
    flex: 0 0 auto;
  }

  /* Notification categories navigate content, so they use the tab navigator. */
  body:is(.theme-dark, .theme-light) .notification-navigation {
    margin: 0;
  }

  /* Studio rows are the edit affordance; status remains informational. */
  body:is(.theme-dark, .theme-light) .studio-item-row {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms ease;
  }

  @media (hover: hover) and (pointer: fine) {

  body:is(.theme-dark, .theme-light) .studio-item-row:hover {
    background: var(--os-control-surface-bg-hover);
  } }

  body:is(.theme-dark, .theme-light) .studio-status-pill-draft {
    background: var(--os-control-surface-bg-active);
    color: var(--os-color-ink-secondary);
    border-color: var(--os-border-control);
  }

  /* Buttons visibly answer hover without introducing a new accent color. */
  @media (hover: hover) and (pointer: fine) {
  body.theme-dark .os-button:not(.os-button-danger):not(:disabled):hover {
    background: #111;
    color: #fff;
    border-color: color-mix(in srgb, white 18%, transparent);
    box-shadow: var(--os-button-shadow-hover);
  } }

  @media (hover: hover) and (pointer: fine) {

  body.theme-light .os-button:not(.os-button-danger):not(:disabled):hover {
    background: #fff;
    color: #111;
    border-color: color-mix(in srgb, black 14%, transparent);
    box-shadow: var(--os-button-shadow-hover);
  } }

  /* Settings use a predictable two-column desktop grid. */
  body:is(.theme-dark, .theme-light) .settings-page-stack {
    width: 100%;
  }

  body:is(.theme-dark, .theme-light) .settings-theme-field {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body:is(.theme-dark, .theme-light) .settings-accent-field {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body:is(.theme-dark, .theme-light) :is(.settings-theme-field, .settings-accent-field) .settings-swatches {
    flex-wrap: nowrap;
    width: 100%;
  }

  body:is(.theme-dark, .theme-light) .settings-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: var(--os-space-3);
  }

  body:is(.theme-dark, .theme-light) .settings-inline-form .os-button {
    width: 88px;
    padding-inline: 12px;
  }

  body:is(.theme-dark, .theme-light) .settings-market-field {
    padding-right: calc(88px + var(--os-space-3));
  }

  body:is(.theme-dark, .theme-light) .settings-list {
    padding: 0;
  }

  body:is(.theme-dark, .theme-light) .settings-list > .settings-row {
    min-height: 72px;
    padding: 18px var(--os-panel-inset);
  }

  body:is(.theme-dark, .theme-light) .settings-list > .settings-row + .settings-row {
    border-top: 1px solid var(--os-border-divider);
  }
}

.tag-select { position: relative; }
.tag-select-control { min-height: 48px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px; border: 1px solid var(--os-input-border); border-radius: var(--os-radius-4); background: var(--os-input-bg); box-shadow: var(--os-input-shadow); cursor: text; }
.tag-select-control:focus-within { border-color: var(--os-input-border-focus); box-shadow: var(--os-input-focus-shadow); }

/* M14 cross-platform reach */
.profile-edit-links-section {
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 0 4px;
}

.profile-edit-fields + .profile-edit-links-section {
  margin-top: -12px;
}

.external-links-editor,
.external-links-list {
  display: grid;
  gap: 12px;
}

.external-links-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.external-links-editor-head .dashboard-form-note {
  margin: 0;
}

.external-link-row {
  display: block;
}

.external-link-service-name {
  font-size: 12px;
  font-weight: 620;
}

.external-link-actions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.external-link-actions-list-profile {
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
}

.external-link-actions-list-icons { align-items: center; flex-wrap: nowrap; width: max-content; max-width: 100%; }
.view-album-copy > .external-link-actions-list-item { margin-top: 8px; color: #fff; gap: 14px; }
.view-album-copy > .external-link-actions-list-item .external-profile-icon-link { color: #fff; background: transparent; }
@media (hover: hover) and (pointer: fine) {
.view-album-copy > .external-link-actions-list-item .external-profile-icon-link:hover { background: rgba(255, 255, 255, 0.12); } }

.external-profile-icon-link {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--os-color-ink);
  border-radius: 8px;
  transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}

.external-profile-icon-link svg {
  width: 25px;
  height: 25px;
}

@media (hover: hover) and (pointer: fine) {

.external-profile-icon-link:hover {
  color: var(--os-color-ink-strong, var(--os-color-ink));
  background: var(--os-control-surface-bg);
  transform: translateY(-1px);
} }

.external-profile-icon-link:focus-visible {
  outline: 1px solid var(--os-border-focus);
  outline-offset: 4px;
}

.external-link-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

.external-link-action-icon {
  font-size: 0.9em;
  opacity: 0.66;
}

@media (max-width: 720px) {
  .external-links-editor-head {
    align-items: flex-start;
  }

}
.tag-select-control input { flex: 1 1 150px; min-width: 120px; border: 0; outline: 0; background: transparent; color: var(--os-input-text); font: inherit; }
.tag-select-control input::placeholder { color: var(--os-input-placeholder); }
.tag-select-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 8px 0 11px; border-radius: var(--os-radius-pill); background: var(--os-pill-bg); border: 1px solid var(--os-pill-border); color: var(--os-pill-text); font-size: 13px; font-weight: 680; }
.tag-select-pill button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 17px; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
.tag-select-pill button:hover { background: color-mix(in srgb, var(--os-color-ink) 12%, transparent); } }
.tag-select-menu { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; max-height: 260px; overflow-y: auto; display: grid; padding: 8px; border: 1px solid var(--os-paper-border); border-radius: 16px; background: var(--os-paper-bg); box-shadow: var(--os-shadow-4); }
.tag-select-menu button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--os-color-ink); text-align: left; cursor: pointer; font: inherit; }
@media (hover: hover) and (pointer: fine) {
.tag-select-menu button:hover { background: color-mix(in srgb, var(--os-color-ink) 10%, transparent); } }
.tag-select-empty { padding: 10px 12px; color: var(--os-color-ink-muted); font-size: 13px; }

body:is(.theme-dark, .theme-light) .store-clear-filters {
  display: block;
  width: 100%;
  text-align: center;
}

@media (min-width: 769px) {

  /* The mini player joins the shell at its lower-left seam. */
  body:is(.theme-dark, .theme-light) .music-player-bar {
    border-bottom-left-radius: 0;
  }

  /* Mini and expanded transport controls share one circular material system. */
  body:is(.theme-dark, .theme-light) :is(
    .music-player-button.music-player-button-icon,
    .music-player-sheet-button:not(.music-player-sheet-button-utility)
  ) {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--os-border-control);
    border-radius: 50%;
    background: var(--os-control-surface-bg);
    color: var(--os-color-ink-secondary);
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light) :is(
    .music-player-button.music-player-button-primary,
    .music-player-sheet-button.music-player-sheet-button-primary
  ) {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--os-control-surface-bg-active);
    color: var(--os-color-ink);
  }

  @media (hover: hover) and (pointer: fine) {

  body:is(.theme-dark, .theme-light) :is(
    .music-player-button.music-player-button-icon,
    .music-player-sheet-button:not(.music-player-sheet-button-utility)
  ):hover:not(:disabled) {
    background: var(--os-control-surface-bg-active);
    color: var(--os-color-ink);
    border-color: var(--os-border-focus);
  } }

  /* Expanded-player close is a nested corner control with system spacing. */
  body:is(.theme-dark, .theme-light) .music-player-sheet-minimize {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border: 1px solid var(--os-border-control);
    border-radius: 50%;
    background: var(--os-control-surface-bg);
    color: var(--os-color-ink);
    box-shadow: var(--os-elevation-input);
  }

  @media (hover: hover) and (pointer: fine) {

  body:is(.theme-dark, .theme-light) .music-player-sheet-minimize:hover {
    background: var(--os-control-surface-bg-active);
    border-color: var(--os-border-focus);
  } }

  /* Light mode keeps the same material hierarchy with quieter tonal movement. */
  body.theme-light {
    --os-control-surface-bg: color-mix(in srgb, var(--os-color-ink) 4%, transparent);
    --os-control-surface-bg-hover: color-mix(in srgb, var(--os-color-ink) 5.5%, transparent);
    --os-control-surface-bg-active: color-mix(in srgb, var(--os-color-ink) 7.5%, transparent);
    --os-border-surface: var(--os-control-surface-border);
    --os-border-control: var(--os-control-surface-border);
    --os-border-focus: color-mix(in srgb, var(--os-color-ink) 14%, transparent);
    --os-input-bg: var(--os-control-surface-bg);
    --os-input-bg-hover: var(--os-control-surface-bg-hover);
    --os-input-bg-focus: var(--os-control-surface-bg-active);
    --os-input-bg-focus-neutral: var(--os-control-surface-bg-active);
    --os-input-border: var(--os-control-surface-border);
    --os-input-border-hover: color-mix(in srgb, var(--os-color-ink) 10%, transparent);
    --os-input-border-focus: var(--os-border-focus);
    --os-elevation-input: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    --os-elevation-focus: 0 0 0 1px color-mix(in srgb, var(--os-color-ink) 8%, transparent);
  }

  body.theme-light :is(.page-filter-option-active, .library-filter-option-active) {
    background: var(--os-control-surface-bg-active);
  }

  @media (hover: hover) and (pointer: fine) {
    body.theme-light :is(.page-filter-option:hover, .library-filter-option:hover) {
      background: var(--os-control-surface-bg-active);
    }
  }
}

/* Radio is a fixed listening panel inside the existing 44OS environment.
   Its title and player share the available viewport instead of creating a
   second scroll surface when the persistent music player is present. */
.app-main-content:has(.radio-page),
.view-hub:has(.radio-page),
.radio-page {
  min-height: 0;
  overflow: hidden;
}

.view-hub:has(.radio-page) {
  height: 100%;
  padding-bottom: var(--os-content-inset);
}

.radio-page {
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
}

.radio-page > .radio-hero {
  height: 100%;
  min-height: 0;
}

.store-discover-opening {
  display: contents;
}

.section-tab-rail {
  display: none;
}

.section-tab-rail[data-topbar-docked="true"] {
  visibility: hidden;
}

@media (min-width: 769px) {
  .radio-page > .radio-hero {
    padding-block: 14px;
    gap: 12px;
  }

  .radio-page .radio-hero .radio-hero-cover,
  .radio-page .radio-hero .view-album-cover {
    width: min(30vw, 310px, 35dvh);
    height: min(30vw, 310px, 35dvh);
  }

  .radio-page .radio-hero-title {
    max-width: 720px;
    font-size: clamp(22px, 1.75vw, 26px);
  }

  .radio-page .radio-hero-actions {
    margin-top: 10px;
  }

  .store-discover-opening {
    display: grid;
    gap: 18px;
    min-width: 0;
  }

  .section-tab-rail {
    display: flex;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .section-tab-rail::-webkit-scrollbar {
    display: none;
  }

  .section-tab {
    position: relative;
    display: inline-flex;
    min-width: max-content;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: var(--os-color-ink-secondary);
    font: 600 14px/18px var(--os-font-app);
    text-decoration: none;
    cursor: pointer;
  }

  .section-tab:first-child {
    padding-left: 0;
  }

  .section-tab[aria-current="page"] {
    color: var(--os-color-accent);
  }

  .section-tab[aria-current="page"]::after {
    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
  }

  .section-tab:first-child[aria-current="page"]::after {
    left: 0;
  }

  .section-tab:focus-visible {
    border-radius: var(--os-radius-pill-system);
    outline: 2px solid var(--os-color-accent);
    outline-offset: -2px;
  }

  body:is(.theme-dark, .theme-light) .store-mobile-shelf.app-grid {
    display: grid;
    width: 100%;
    padding: 0 0 6px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(210px, calc((100% - 54px) / 4), 320px);
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 0;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }

  .store-mobile-shelf.app-grid::-webkit-scrollbar {
    display: none;
  }

  .store-mobile-shelf .product-tile {
    scroll-snap-align: start;
  }
}

@media (max-width: 768px) {

  .library-opening {
    gap: 14px;
  }

  .library-opening .library-filter-control {
    display: none;
  }

  .notifications-page-header .app-header-copy > p {
    display: none;
  }

  .store-browse-header {
    display: grid;
  }

  .store-discover-opening {
    display: grid;
    gap: 14px;
    min-width: 0;
  }

  .section-tab-rail {
    display: flex;
    width: calc(100% + (2 * var(--os-content-inset)));
    min-width: 0;
    margin-inline: calc(-1 * var(--os-content-inset));
    padding-inline: var(--os-content-inset);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--os-content-inset);
    scrollbar-width: none;
  }

  .section-tab-rail::-webkit-scrollbar {
    display: none;
  }

  .section-tab {
    position: relative;
    display: inline-flex;
    min-width: max-content;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--os-color-ink-secondary);
    font: 600 13px/16px var(--os-font-app);
    text-decoration: none;
    cursor: pointer;
  }

  .section-tab:first-child {
    padding-left: 0;
  }

  .section-tab[aria-current="page"] {
    color: var(--os-color-accent);
  }

  .section-tab[aria-current="page"]::after {
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
  }

  .section-tab:first-child[aria-current="page"]::after {
    left: 0;
  }

  .section-tab:focus-visible {
    border-radius: var(--os-radius-pill-system);
    outline: 2px solid var(--os-color-accent);
    outline-offset: -2px;
  }

  .store-app-page > .app-section {
    gap: 14px;
  }

  body:is(.theme-dark, .theme-light) .store-app-page .app-header .ui44-type-page-title {
    font: 700 32px/36px var(--os-font-app);
    letter-spacing: -0.025em;
  }

  body:is(.theme-dark, .theme-light) .store-app-page > .app-section .hub-section-title {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0;
  }

  body:is(.theme-dark, .theme-light) .store-mobile-shelf.app-grid {
    display: grid;
    width: calc(100% + (2 * var(--os-content-inset)));
    margin-inline: calc(-1 * var(--os-content-inset));
    padding: 0 var(--os-content-inset) 4px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 18px) / 2);
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--os-content-inset);
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }

  .store-mobile-shelf.app-grid::-webkit-scrollbar {
    display: none;
  }

  .store-mobile-shelf .product-tile {
    scroll-snap-align: start;
  }

  .view-hub:has(.radio-page) {
    height: calc(100dvh - var(--os-topbar-height) - var(--os-mobile-dock-height) - env(safe-area-inset-bottom));
    padding-inline: var(--os-content-inset);
    padding-bottom: 0;
    gap: var(--os-space-3);
  }

  .radio-page {
    height: 100%;
  }

  .radio-page > .radio-hero {
    padding-block: 10px;
    gap: 10px;
  }

  .radio-page .radio-hero .radio-hero-cover,
  .radio-page .radio-hero .view-album-cover {
    width: min(58vw, 250px, 32dvh);
    height: min(58vw, 250px, 32dvh);
  }

  .radio-page .radio-hero-title {
    font-size: clamp(22px, 6vw, 28px);
  }

  .store-shelf-action.os-button {
    width: 34px;
    min-width: 34px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--os-color-ink);
    font-size: 0;
  }

  .store-shelf-action.os-button::before {
    width: 13px;
    height: 13px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    transform: rotate(45deg);
  }

  .store-shelf-action.os-button:active {
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translateX(2px);
  }

  @media (hover: hover) and (pointer: fine) {

  .store-shelf-action.os-button:hover {
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translateX(2px);
  } }

  /* Mobile Community uses the same responsive input material as desktop. */
  body.theme-light .community-app-page .social-feed-composer {
    background: color-mix(in srgb, var(--os-color-ink) 4%, transparent);
    border-color: color-mix(in srgb, var(--os-color-ink) 9%, transparent);
    box-shadow: var(--os-elevation-input);
  }

  body.theme-dark .community-app-page .social-feed-composer {
    background: color-mix(in srgb, var(--os-color-ink) 8%, transparent);
    border-color: color-mix(in srgb, var(--os-color-ink) 12%, transparent);
    box-shadow: var(--os-elevation-input);
  }

  .social-thread-page > section > .social-feed-list > .social-composer-inline-surface {
    width: 100%;
    margin: 0;
    padding: 16px var(--os-content-inset) 20px;
    border-top: 1px solid var(--os-color-hairline);
    border-bottom: 0;
  }

  .social-thread-page > section > .social-feed-list > .social-composer-inline-surface .social-composer-box {
    width: 100%;
    min-width: 0;
    padding: 14px 16px;
  }

  .social-thread-page > section > .social-feed-list > .social-composer-inline-surface textarea {
    width: 100%;
    min-width: 0;
    min-height: 132px;
    resize: vertical;
  }

  .social-thread-page > section > .social-feed-list > .social-composer-inline-surface .social-composer-actions {
    width: 100%;
    align-items: flex-end;
  }

  /* Studio overview keeps only its four operational signals. */
  .dashboard-page .dashboard-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--os-space-3);
  }

  .dashboard-page .dashboard-overview-card,
  .dashboard-page .dashboard-metric-card {
    min-height: 88px;
    padding: 8px 5px;
    border-radius: 16px;
  }

  .dashboard-page :is(.dashboard-overview-card, .dashboard-metric-card) .os-type-meta {
    font-size: 9px;
    line-height: 1.1;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .dashboard-page :is(.dashboard-overview-card, .dashboard-metric-card) .os-type-page-title {
    font-size: clamp(24px, 8vw, 32px);
  }

  .studio-item-row .studio-publication-status {
    display: block;
    width: fit-content;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    line-height: 1.1;
    box-shadow: none;
    align-self: start;
    margin-top: 2px;
  }

  .studio-item-row .dashboard-status-pill-success.studio-publication-status {
    background: transparent;
    color: var(--os-color-success);
  }

  .studio-item-row .studio-status-pill-draft.studio-publication-status {
    background: transparent;
    color: var(--os-color-ink-muted);
  }

  .studio-achievements-section .dashboard-achievement-choice-row {
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    gap: 12px;
    min-height: 100px;
    padding: 16px 14px;
  }

  .studio-achievements-section .dashboard-achievement-toggle {
    padding-left: 0;
  }
}

/* Final mobile containment and hierarchy rules. These intentionally live after
   route-responsive layers so every app shares one predictable viewport. */
@media (max-width: 768px) {
  :is(.hub-section-title, .view-section-title) {
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  .store-app-page .hub-section-title,
  .admin-section-panel .hub-section-title,
  .view-detail-single .hub-section-title,
  .view-detail-single .view-section-title {
    font-size: 32px;
    line-height: 1.12;
  }

  .dashboard-form-section > .hub-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 16px;
    row-gap: 8px;
  }

  .dashboard-form-section > .hub-section-head .hub-section-copy {
    display: contents;
  }

  .dashboard-form-section > .hub-section-head .hub-section-title {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-form-section > .hub-section-head > .settings-toggle {
    grid-column: 2;
    grid-row: 1;
    margin-top: 4px;
  }

  .dashboard-form-section > .hub-section-head .hub-section-description {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    width: 100%;
    font-size: 16px;
    line-height: 1.35;
  }

  /* Edit-release actions: two equal buttons, then one full-width destructive action. */
  .dashboard-form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .dashboard-form-actions-left,
  .dashboard-form-actions-right {
    display: grid;
    width: 100%;
    gap: 12px;
  }

  .dashboard-form-actions-right {
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
  }

  .dashboard-form-actions-left {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 1fr;
  }

  .dashboard-form-actions-left .os-button,
  .dashboard-form-actions-right .os-button {
    width: 100%;
    justify-content: center;
  }

  .dashboard-form-section > .hub-section-head .hub-section-title {
    font-size: 32px;
    line-height: 1.12;
  }

  .studio-achievements-section,
  .studio-video-embeds-section {
    margin-top: 0;
  }

  .dashboard-field:has(.studio-rights-checkbox) .dashboard-form-note {
    margin-left: 30px;
  }

  .studio-rights-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .studio-rights-checkbox input {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 2px 0 0;
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--os-color-ink) 36%, transparent);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
  }

  .studio-rights-checkbox input:checked {
    border-color: #fff;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-9' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
  }

  .studio-item-row {
    align-items: center;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 16px;
  }

  .studio-item-row-no-actions {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .studio-item-artwork {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    object-fit: cover;
    border-radius: 14px;
    background: var(--os-glass-recessed-bg);
  }

  .studio-item-artwork-empty {
    border: 1px solid var(--os-color-hairline);
  }

  .view-album-cover-physical,
  .library-detail-header .view-album-cover-physical {
    width: min(60vw, 240px);
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .social-profile-identity {
    width: 100%;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: 14px;
    row-gap: 2px;
  }

  .social-profile-avatar-button {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: flex-start;
  }

  .profile-avatar-edit-control {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: flex-start;
  }

  .social-profile-identity .social-avatar-large {
    width: 64px;
    height: 64px;
  }

  .social-profile-text {
    display: contents;
  }

  .social-profile-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .social-profile-text > .social-handle {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .social-profile-bio {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin-top: var(--os-space-4);
  }

  .social-profile-external-links {
    grid-column: 1 / -1;
  }

  body:is(.theme-light, .theme-dark) .social-profile-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--os-space-4);
    padding-inline: 0;
  }

  body:is(.theme-light, .theme-dark) .social-profile-toolbar .social-profile-actions {
    order: 1;
    width: 100%;
    margin: 0;
  }

  body:is(.theme-light, .theme-dark) .social-profile-toolbar .social-profile-tabs {
    order: 2;
    margin: 0;
  }

  .settings-two-column {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .store-browse-header,
.app-header:has(.page-filter-menu),
.app-header:has(.page-filter-menu) .app-header-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .app-header:has(.page-filter-menu) {
    display: flex;
    align-items: center;
  }

  .app-header:has(.page-filter-menu) .app-header-copy {
    width: auto;
    flex: 1 1 auto;
  }

  .app-header:has(.page-filter-menu) .page-header-tools,
  .community-app-page .page-header-tools {
    width: auto;
    min-width: max-content;
    max-width: none;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  .page-filter-menu {
    margin-right: 0;
  }

  .page-filter-popover,
.page-filter-popover:has(.store-filter-group) {
    position: fixed;
    top: calc(var(--os-topbar-height) + var(--os-space-3));
    right: var(--os-content-inset);
    left: auto;
    width: min(280px, calc(100vw - (var(--os-content-inset) * 2)));
    max-width: calc(100vw - (var(--os-content-inset) * 2));
  }

  body:is(.theme-light, .theme-dark) .store-shelf-action.os-button,
body:is(.theme-light, .theme-dark) .store-shelf-action.os-button:active,
body:is(.theme-light, .theme-dark) .store-shelf-action.os-button:focus-visible {
    appearance: none;
    width: 34px;
    min-width: 34px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--os-color-ink) !important;
  }

  @media (hover: hover) and (pointer: fine) {

  body:is(.theme-light, .theme-dark) .store-shelf-action.os-button:hover {
    appearance: none;
    width: 34px;
    min-width: 34px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--os-color-ink) !important;
  } }

  .store-shelf-action.os-button::before {
    content: none;
  }

  .radio-page .radio-hero-actions .os-button {
    width: auto;
    min-width: 132px;
    min-height: 44px;
    padding-inline: 28px;
  }
}

@media (max-width: 420px) {
  body:is(.theme-dark, .theme-light) .store-mobile-shelf.app-grid {
    grid-auto-columns: calc((100% - 14px) / 2);
    gap: 14px;
  }
}

@media (max-width: 780px) {
  .dashboard-list-row.cart-row {
    grid-template-columns: minmax(0, 1fr) auto 32px;
    align-items: center;
  }
}
/* M16 Events and Community Calendar */
.event-ticket-note { margin: 0 0 var(--os-space-5); color: var(--os-color-ink-secondary); }
.event-studio-row .dashboard-row-copy { min-width: 0; text-decoration: none; }
.calendar-page { width: 100%; max-width: none; }
.calendar-divider { height: 1px; background: var(--os-color-border); margin-bottom: var(--os-space-6); }
.calendar-surface { border: 1px solid var(--os-color-border); border-radius: var(--os-radius-panel); background: var(--os-material-control); overflow: hidden; }
.calendar-toolbar { min-height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--os-color-border); }
.calendar-toolbar h2 { margin: 0; text-align: center; }
.calendar-toolbar button:first-child { justify-self: start; }
.calendar-toolbar button:last-child { justify-self: end; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { grid-column: 1 / -1; border-bottom: 1px solid var(--os-color-border); }
.calendar-weekdays span { padding: 10px; color: var(--os-color-ink-secondary); font-size: 12px; text-align: center; }
.calendar-day { min-height: 132px; min-width: 0; padding: 8px; border-right: 1px solid var(--os-color-border); border-bottom: 1px solid var(--os-color-border); }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day-empty { background: color-mix(in srgb, var(--os-color-ink) 3%, transparent); }
.calendar-day-number { display: block; margin-bottom: 6px; font-size: 12px; }
.calendar-entry { min-width: 0; }
.calendar-entry > a { display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; }
.calendar-month .calendar-entry { border-left: 3px solid var(--os-color-accent); padding: 5px 6px; margin-bottom: 5px; background: var(--os-material-paper); border-radius: 6px; font-size: 12px; }
.calendar-entry strong { overflow: hidden; text-overflow: ellipsis; }
.calendar-entry-source { color: var(--os-color-ink-secondary); font-size: 11px; }
.calendar-entry-cancelled { opacity: .62; }
.calendar-entry-cancelled strong { text-decoration: line-through; }
.calendar-agenda { display: none; }
.calendar-state { padding: 40px; text-align: center; color: var(--os-color-ink-secondary); }
.calendar-entry-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.calendar-entry-actions a { color: var(--os-color-accent); text-decoration: underline; text-underline-offset: 3px; }
.profile-events { display: grid; gap: 28px; }
.profile-events h2 { margin: 0 0 10px; }
.profile-event-row { display: flex; justify-content: space-between; gap: 24px; padding: 16px; border-bottom: 1px solid var(--os-color-border); }
.profile-event-row > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.profile-event-row p { margin: 0; }

@media (max-width: 700px) {
  .calendar-month { display: none; }
  .calendar-agenda { display: grid; }
  .calendar-agenda .calendar-entry { padding: 16px; border-bottom: 1px solid var(--os-color-border); }
  .calendar-toolbar { grid-template-columns: auto 1fr auto; gap: 8px; }
  .calendar-toolbar h2 { font-size: 18px; }
  .calendar-toolbar .os-button { min-width: 44px; padding-inline: 10px; font-size: 0; }
  .calendar-toolbar .os-button { min-height: 44px; }
  .calendar-toolbar button:first-child::after { content: '‹'; font-size: 24px; }
  .calendar-toolbar button:last-child::after { content: '›'; font-size: 24px; }
  .profile-event-row, .event-studio-row { align-items: stretch; flex-direction: column; }
  .event-studio-row .dashboard-row-actions { width: 100%; flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .page-filter-popover.studio-create-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(210px, calc(100vw - (var(--os-content-inset) * 2)));
    padding: 6px;
    gap: 2px;
  }

  .store-app-page .page-filter-popover:has(.store-filter-group) {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
  }

  body:is(.theme-light, .theme-dark) .studio-create-popover .page-filter-option {
    min-height: 40px;
    padding: 7px 10px;
    font-size: 14px;
  }

  /* Mobile sub-navigation sits evenly between full-width dividers and always
     begins at its first visible tab rather than inheriting stale scroll. */
  .dashboard-page:has(> .notification-navigation) > .app-header {
    width: calc(100% + (2 * var(--os-content-inset)));
    margin-inline: calc(-1 * var(--os-content-inset));
    padding-inline: var(--os-content-inset);
  }

  body:is(.theme-light, .theme-dark) .notification-navigation {
    display: flex;
    width: calc(100% + (2 * var(--os-content-inset)));
    max-width: none;
    margin: calc(-1 * var(--os-section-gap)) calc(-1 * var(--os-content-inset)) 0;
    padding: 16px var(--os-content-inset);
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    border: 0;
    border-bottom: 1px solid var(--os-color-hairline);
    scroll-padding-inline: var(--os-content-inset);
  }

  body:is(.theme-light, .theme-dark) .social-profile-toolbar .social-profile-tabs {
    display: flex;
    align-self: stretch;
    width: calc(100% + (2 * var(--os-content-inset)));
    max-width: none;
    margin-inline: calc(-1 * var(--os-content-inset));
    padding: 16px var(--os-content-inset);
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    border: 0;
    border-top: 1px solid var(--os-color-hairline);
    border-bottom: 1px solid var(--os-color-hairline);
    scroll-padding-inline: var(--os-content-inset);
  }

  .social-profile-toolbar .social-profile-tabs::-webkit-scrollbar {
    display: none;
  }

  .social-profile-toolbar .social-profile-tabs button {
    flex: 0 0 auto;
  }
}
.merch-variant-picker {
  display: grid;
  gap: 22px;
  padding: clamp(18px, 3vw, 28px);
}

.view-album-media {
  display: grid;
  gap: 14px;
  justify-items: center;
  min-width: 0;
}

.view-merch-purchase-header {
  min-height: 0;
  grid-template-columns: minmax(320px, 1.08fr) minmax(340px, 0.92fr);
  align-items: start;
  gap: clamp(42px, 6vw, 90px);
  padding: 38px var(--os-detail-inset) 56px;
  color: var(--os-color-ink);
  background: transparent;
}

.view-merch-purchase-header::before,
.view-merch-purchase-header::after {
  display: none;
}

.view-merch-purchase-header .view-album-media {
  width: 100%;
  justify-self: start;
  justify-items: start;
  margin: 0;
}

.view-merch-purchase-header .view-album-cover-physical {
  width: min(100%, 620px);
  height: auto;
  aspect-ratio: auto;
  justify-self: start;
  border: 1px solid var(--os-color-hairline);
  border-radius: 18px;
  background: var(--os-color-surface);
  box-shadow: none;
}

.view-merch-purchase-header .view-album-cover-physical img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: left top;
  background: transparent;
}

.view-merch-purchase-header .view-album-copy {
  width: 100%;
  max-width: 570px;
  padding: 6px 0 0;
  gap: 14px;
}

.view-merch-purchase-header .view-album-title,
.view-merch-purchase-header .view-album-eyebrow,
.view-merch-purchase-header .view-album-meta-token {
  color: var(--os-color-ink);
}

.view-merch-purchase-header .view-album-title {
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.02;
}

.view-merch-purchase-header .view-album-eyebrow {
  opacity: 0.7;
}

.view-merch-purchase-header .view-album-actions {
  display: grid;
  margin-top: 2px;
}

.view-merch-purchase-header .view-album-actions .os-button-primary,
.view-merch-purchase-header .view-album-actions .os-button-secondary {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

.view-merch-purchase-header .view-album-actions .os-button-primary {
  color: var(--os-color-surface);
  background: var(--os-color-ink);
}

.view-merch-purchase-header .merch-variant-picker {
  gap: 18px;
  padding: 10px 0 0;
}

.view-merch-purchase-header .merch-option-group legend,
.view-merch-purchase-header .merch-option-group legend strong,
.view-merch-purchase-header .merch-option-button,
.view-merch-purchase-header .merch-variant-selection {
  color: var(--os-color-ink);
}

.view-merch-purchase-header .merch-option-button {
  border-color: var(--os-color-hairline);
  background: color-mix(in srgb, var(--os-color-surface) 72%, transparent);
}

.view-merch-purchase-header .merch-option-button-selected {
  border-color: var(--os-color-ink);
  box-shadow: 0 0 0 1px var(--os-color-ink);
}

.merch-options-unavailable {
  color: var(--os-color-ink-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.merch-gallery-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  width: min(100%, 620px);
  justify-self: start;
}

.merch-gallery-dot {
  width: 9px;
  height: 9px;
  border: 1px solid var(--os-color-ink-secondary);
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.merch-gallery-dot-active {
  border-color: var(--os-color-ink);
  background: var(--os-color-ink);
}

.merch-image-admin-row {
  align-items: stretch;
  gap: 16px;
}

.merch-image-admin-existing,
.merch-image-admin-form {
  display: grid;
  gap: 10px;
  width: 100%;
}

.merch-image-admin-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.merch-image-admin-card > span:not(.merch-image-admin-preview) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.merch-image-admin-card small {
  color: var(--os-color-ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merch-image-admin-preview {
  width: 64px;
  aspect-ratio: 1;
  border: 1px solid var(--os-color-border);
  border-radius: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.merch-image-admin-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.merch-image-admin-form > button {
  justify-self: start;
}

@media (max-width: 768px) {
  .merch-image-admin-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .merch-image-admin-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .merch-image-admin-card > button {
    grid-column: 2;
    justify-self: start;
  }

  .merch-image-admin-preview {
    width: 56px;
  }
}

.merch-option-group {
  min-width: 0;
  border: 0;
}

.merch-option-group legend {
  margin-bottom: 10px;
  color: var(--ui44-text-secondary, #a9a9a9);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.merch-option-group legend strong {
  margin-left: 8px;
  color: var(--ui44-text-primary, #fff);
  text-transform: none;
  letter-spacing: normal;
}

.merch-option-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.merch-option-button {
  position: relative;
  min-width: 48px;
  min-height: 44px;
  border: 1px solid var(--ui44-border, rgba(255, 255, 255, 0.2));
  border-radius: 9px;
  padding: 9px 13px;
  color: var(--ui44-text-primary, #fff);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font: inherit;
}

.merch-option-button:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
}

.merch-option-button-selected {
  border-color: var(--os-color-accent, #fff);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.merch-option-button:disabled {
  color: var(--ui44-text-secondary, #8b8b8b);
  opacity: 0.52;
  cursor: not-allowed;
  overflow: hidden;
}

.merch-option-button:disabled::after {
  content: '';
  position: absolute;
  width: 140%;
  height: 1px;
  left: -20%;
  top: 50%;
  background: currentColor;
  transform: rotate(-25deg);
}

.merch-color-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.merch-color-dot {
  width: 17px;
  height: 17px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: linear-gradient(135deg, #171717 0 50%, #777 50% 100%);
}

.merch-variant-selection {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  padding-top: 4px;
  color: var(--ui44-text-primary, #fff);
}

.merch-variant-selection span {
  font-weight: 650;
}

@media (max-width: 640px) {
  .merch-variant-selection {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .view-merch-purchase-header {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px var(--os-detail-inset) 42px;
    text-align: left;
    justify-items: stretch;
  }

  .view-merch-purchase-header .view-album-media {
    justify-items: start;
  }

  .view-merch-purchase-header .view-album-cover-physical {
    width: min(100%, 520px);
  }

  .view-merch-purchase-header .view-album-copy {
    max-width: none;
    align-items: stretch;
  }

  .view-merch-purchase-header .view-album-eyebrow,
  .view-merch-purchase-header .view-album-actions {
    justify-content: flex-start;
  }
}

/* Final Studio row ownership. Later theme rules must not allow title length to
   resize the artwork column or move the copy toward the trailing edge. */
body:is(.theme-dark, .theme-light)
  .dashboard-page
  .studio-item-row.studio-item-row-no-actions {
  grid-template-columns: 72px minmax(0, 1fr);
}

body:is(.theme-dark, .theme-light)
  .dashboard-page
  .studio-item-row.studio-item-row-with-actions {
  grid-template-columns: 72px minmax(0, 1fr) auto;
}

body:is(.theme-dark, .theme-light)
  .dashboard-page
  .studio-item-row
  > .studio-item-copy {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  max-width: none;
  justify-self: stretch;
  justify-items: start;
  align-items: start;
  text-align: left;
}

body:is(.theme-dark, .theme-light)
  .dashboard-page
  .studio-item-row
  > .studio-item-copy
  > * {
  width: auto;
  max-width: 100%;
  text-align: left;
}

body:is(.theme-dark, .theme-light)
  .dashboard-page
  .studio-item-row
  .dashboard-status-pill-success.studio-publication-status {
  color: var(--os-color-accent);
}

/* Inbox index and conversation routes are separate navigation surfaces. */
.social-inbox-index,
.social-inbox-conversation-route {
  grid-template-columns: minmax(0, 1fr);
}

.social-inbox-index > .social-inbox-list {
  border-right: 0;
}

.social-conversation-page {
  width: 100%;
  max-width: none;
  min-height: 0;
}

.social-inbox-conversation-route .social-inbox-thread {
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: min(680px, calc(100dvh - 220px));
  overflow: hidden;
}

.social-inbox-conversation-route .social-message-list {
  min-height: 0;
  padding: 16px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.social-inbox-conversation-route .social-message-list::before {
  display: none;
}

.social-inbox-conversation-route .social-message {
  max-width: min(560px, 78%);
  padding: 9px 13px;
  border-radius: 20px 20px 20px 6px;
  font-size: 15px;
  line-height: 20px;
}

.social-inbox-conversation-route .social-message-own {
  border-radius: 20px 20px 6px 20px;
}

.social-inbox-conversation-route .social-message-form {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 10px 12px;
  background: var(--os-color-bg);
}

.social-inbox-conversation-route .social-message-form .ui44-composer-input {
  min-height: 44px;
  max-height: 116px;
  padding: 10px 14px;
  border-radius: 22px;
  resize: none;
}

.social-inbox-conversation-route .social-message-form .os-button {
  min-height: 40px;
  border-radius: 999px;
}

@media (max-width: 860px) {
  .social-conversation-page {
    height: calc(100dvh - var(--os-topbar-height) - var(--os-mobile-dock-height));
    padding: 0;
    overflow: hidden;
  }

  .social-inbox-conversation-route {
    height: 100%;
    min-height: 0;
  }

  .social-inbox-conversation-route .social-inbox-thread {
    height: 100%;
    min-height: 0;
  }

  .social-inbox-conversation-route .social-message-thread-header {
    padding: 8px 12px 10px;
    background: var(--os-color-bg);
  }

  .social-inbox-conversation-route .social-message-list {
    padding: 12px 10px 16px;
  }

  .social-inbox-conversation-route .social-message {
    max-width: 82%;
  }

  .social-inbox-conversation-route .social-message-form {
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  }
}

/* Final ownership: docked page tabs remain the same plain, underlined rail. */
body:is(.theme-dark, .theme-light) .os-topbar .os-topbar-tab.os-topbar-tab-section {
  position: relative;
  min-width: max-content;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--os-color-ink-secondary);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light) .os-topbar .os-topbar-tab.os-topbar-tab-section:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--os-color-ink);
  }
}

body:is(.theme-dark, .theme-light) .os-topbar .os-topbar-tab.os-topbar-tab-section.os-topbar-tab-active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--os-color-accent);
}

body:is(.theme-dark, .theme-light) .os-topbar .os-topbar-tab.os-topbar-tab-section.os-topbar-tab-active::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}


/* =========================================================
   CANONICAL MATERIALS
   ========================================================= */

/*
 * 44 UI — material tokens and panel references
 *
 * The reference pages render these recipes, and production ui44 primitives
 * consume the same tokens. Keep responsive material ownership explicit here;
 * this file is globally imported by the root layout.
 */

:root,
body.theme-light {
  --44ui-control-height: 44px;
  --44ui-glass-filter: none;
  --44ui-paper-panel-radius: 24px;
  --44ui-menu-inset: 6px;
  --44ui-material-paper: #ffffff;
  --44ui-material-glass: var(--os-sidebar-tint);
  /* Light surfaces need a deliberate hairline: 10% disappears against the
     warm canvas once a glass surface is involved. */
  --44ui-panel-border: rgba(0, 0, 0, 0.16);
  --44ui-interactive-hover: rgba(21, 21, 21, 0.08);
}

body.theme-dark {
  --44ui-material-paper: #1c1e1b;
  --44ui-material-glass: var(--os-sidebar-tint);
  --44ui-panel-border: rgba(255, 255, 255, 0.14);
  --44ui-interactive-hover: rgba(255, 255, 255, 0.12);
}

/* Glass panels reuse the Sidebar tint over the already-blurred App Shell.
   The Shell remains the sole owner of environmental blur and saturation. */

.ui44-panel {
  border: 1px solid var(--44ui-panel-border);
}

.ui44-panel-paper {
  background: var(--44ui-material-paper);
}

.ui44-panel-glass {
  background: var(--44ui-material-glass);
}

.ui44-panel {
  overflow: hidden;
}

.ui44-panel-paper {
  border-radius: var(--44ui-paper-panel-radius);
  box-shadow: var(--44ui-elevation-raised);
}

.ui44-panel-glass {
  border-radius: 24px;
  box-shadow: var(--44ui-elevation-flat);
}

.ui44-panel-rows {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  height: 100%;
}

.ui44-panel-row {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--44ui-panel-border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 140ms ease;
}

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

@media (hover: hover) and (pointer: fine) {
  .ui44-panel-row:hover {
    background: var(--44ui-interactive-hover);
  }
}

.ui44-panel-row:focus-visible {
  outline: 1px solid var(--44ui-panel-border);
  outline-offset: -3px;
  background: var(--44ui-interactive-hover);
}

@media (max-width: 768px) {
  .ui44-panel-paper,
  .ui44-panel-glass {
    border-radius: 16px;
  }

  :root,
  body.theme-light,
  body.theme-dark {
    --44ui-paper-panel-radius: 16px;
  }
}

/* =========================================================
   CANONICAL INPUTS
   ========================================================= */

/*
 * 44 UI — canonical text and select inputs
 *
 * Production and reference routes share this one control API.
 */

:root,
body.theme-light {
  --44ui-input-background: rgba(21, 21, 21, 0.04);
  --44ui-input-background-hover: var(--44ui-interactive-hover);
  --44ui-input-background-focus: rgba(21, 21, 21, 0.12);
  --44ui-input-border: rgba(0, 0, 0, 0.16);
  --44ui-input-border-focus: rgba(0, 0, 0, 0.24);
  --44ui-input-text: #151515;
  --44ui-input-placeholder: rgba(0, 0, 0, 0.42);
}

body.theme-dark {
  --44ui-input-background: rgba(255, 255, 255, 0.08);
  --44ui-input-background-hover: var(--44ui-interactive-hover);
  --44ui-input-background-focus: rgba(255, 255, 255, 0.16);
  --44ui-input-border: rgba(255, 255, 255, 0.14);
  --44ui-input-border-focus: rgba(255, 255, 255, 0.24);
  --44ui-input-text: #f4f3ee;
  --44ui-input-placeholder: rgba(255, 255, 255, 0.38);
}

.ui44-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--44ui-control-height);
  min-height: var(--44ui-control-height);
  padding: 0 16px;
  border: 1px solid var(--44ui-input-border);
  border-radius: 16px;
  outline: 1px solid transparent;
  outline-offset: 2px;
  background-color: var(--44ui-input-background);
  box-shadow: none;
  color: var(--44ui-input-text);
  font-family: var(--os-font-app);
  font-size: 16px;
  line-height: 1.2;
  transition: background-color 140ms ease, border-color 140ms ease, outline-color 140ms ease;
}

.ui44-input::placeholder {
  color: var(--44ui-input-placeholder);
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .ui44-input:hover {
    background-color: var(--44ui-input-background-hover);
  }
}

.ui44-input:focus,
.ui44-input:focus-visible {
  border-color: var(--44ui-input-border);
  outline-color: var(--44ui-input-border-focus);
  background-color: var(--44ui-input-background-focus);
}

.ui44-select-control {
  position: relative;
  width: 100%;
  min-width: 0;
}

.ui44-input-select {
  padding-right: 46px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.ui44-select-caret {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--44ui-input-placeholder);
  border-bottom: 2px solid var(--44ui-input-placeholder);
  pointer-events: none;
  transform: translateY(-68%) rotate(45deg);
  transition: border-color 140ms ease, transform 140ms ease;
}

.ui44-select-control:focus-within .ui44-select-caret {
  border-color: var(--44ui-input-text);
  transform: translateY(-32%) rotate(225deg);
}

@media (max-width: 768px) {
  .ui44-input {
    border-radius: 12px;
  }
}

/* =========================================================
   CANONICAL CONTROLS
   ========================================================= */

/*
 * 44 UI — canonical buttons and symbol actions
 *
 * Production and reference routes share this one control API.
 */

:root,
body.theme-light {
  --44ui-button-background: #151515;
  --44ui-button-text: #ffffff;
  --44ui-button-background-hover: #ffffff;
  --44ui-button-text-hover: #151515;
  --44ui-control-unavailable: rgba(21, 21, 21, 0.14);
  --44ui-control-unavailable-text: rgba(21, 21, 21, 0.46);
}

body.theme-dark {
  --44ui-button-background: #f4f3ee;
  --44ui-button-text: #151515;
  --44ui-button-background-hover: #151515;
  --44ui-button-text-hover: #f4f3ee;
  --44ui-control-unavailable: rgba(255, 255, 255, 0.14);
  --44ui-control-unavailable-text: rgba(255, 255, 255, 0.46);
}

.ui44-button {
  box-sizing: border-box;
  height: var(--44ui-control-height);
  min-height: var(--44ui-control-height);
  padding: 0 22px;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 999px;
  background: var(--44ui-button-background);
  box-shadow: none;
  color: var(--44ui-button-text);
  cursor: pointer;
  font: 700 15px/1 var(--os-font-app);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ui44-button:not(:disabled):hover {
    background: var(--44ui-button-background-hover);
    color: var(--44ui-button-text-hover);
  }

  .ui44-button-destructive:hover {
    border-color: #e63946;
    background: #e63946;
    color: #ffffff;
  }
}

.ui44-button:focus-visible,
.ui44-symbol-button:focus-visible {
  outline: 1px solid var(--44ui-input-border-focus);
  outline-offset: 2px;
}

.ui44-section-arrow {
  display: inline-grid;
  width: var(--44ui-control-height);
  height: var(--44ui-control-height);
  flex: 0 0 var(--44ui-control-height);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--44ui-input-text);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ui44-section-arrow:hover {
    background: var(--44ui-interactive-hover);
  }
}

.ui44-section-arrow:focus-visible {
  outline: 1px solid var(--44ui-input-border-focus);
  outline-offset: 2px;
  background: var(--44ui-interactive-hover);
}

.ui44-section-arrow-icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.ui44-button-unavailable,
.ui44-button:disabled {
  border-color: transparent;
  background: var(--44ui-control-unavailable);
  color: var(--44ui-control-unavailable-text);
  cursor: not-allowed;
}

@media (min-width: 769px) {
  .ui44-button-destructive {
    background: #f4f3ee;
    color: #151515;
  }
}

.ui44-button-audit-grid,
.ui44-symbol-audit-grid {
  display: grid;
  gap: 20px;
}

.ui44-button-audit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui44-button-audit-item,
.ui44-symbol-audit-item {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  min-width: 0;
}

.ui44-button-audit-item > span,
.ui44-symbol-audit-item > span {
  color: var(--os-color-ink-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ui44-symbol-audit-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ui44-symbol-audit-row-navigation .ui44-symbol-audit-item:first-child,
.ui44-symbol-audit-row-navigation .ui44-symbol-audit-item:last-child,
.ui44-symbol-audit-row-edge-actions .ui44-symbol-audit-item {
  justify-items: end;
}

.ui44-symbol-action {
  position: relative;
  width: fit-content;
}

.ui44-symbol-button {
  display: inline-grid;
  width: var(--44ui-control-height);
  height: var(--44ui-control-height);
  place-items: center;
  padding: 0;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 50%;
  background: var(--44ui-material-glass);
  box-shadow: none;
  color: var(--44ui-input-text);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ui44-symbol-button:hover {
    background: var(--44ui-interactive-hover);
  }
}

.ui44-symbol-button[aria-expanded="true"] {
  background: var(--44ui-interactive-hover);
}

.ui44-symbol-button-active {
  border-color: var(--os-color-accent);
}

.ui44-symbol-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.ui44-symbol-plus {
  display: block;
  font-size: 27px;
  font-weight: 360;
  line-height: 1;
  transform: translateY(-1px);
}

.ui44-symbol-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  display: grid;
  width: max-content;
  max-width: calc(100vw - 48px);
  padding: var(--44ui-menu-inset);
}

.ui44-symbol-menu-left {
  left: 0;
  right: auto;
}

.ui44-symbol-menu-right {
  right: 0;
  left: auto;
}

.ui44-symbol-menu-item {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: max(8px, calc(var(--44ui-paper-panel-radius) - var(--44ui-menu-inset) - 1px));
  background: transparent;
  color: var(--44ui-input-text);
  cursor: pointer;
  font: 500 14px/1.2 var(--os-font-app);
  text-align: left;
  white-space: nowrap;
}

.ui44-symbol-menu-item > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) and (pointer: fine) {
  .ui44-symbol-menu-item:hover {
    background: var(--44ui-interactive-hover);
  }
}

.ui44-symbol-menu-item:focus-visible {
  outline: 1px solid var(--44ui-input-border-focus);
  outline-offset: -1px;
  background: var(--44ui-interactive-hover);
}

.ui44-symbol-menu-check {
  color: var(--os-color-accent);
  font-weight: 800;
}

.ui44-search-action {
  position: relative;
  display: flex;
  width: min(260px, calc(100vw - 48px));
  justify-content: flex-end;
}

.ui44-search-open {
  position: relative;
  width: min(260px, calc(100vw - 48px));
}

.ui44-search-open .ui44-input {
  padding-left: 44px;
  border-radius: 999px;
}

.ui44-search-open-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 15px;
  width: 18px;
  height: 18px;
  color: var(--44ui-input-placeholder);
  pointer-events: none;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .ui44-button-destructive {
    border-color: #e63946;
    background: #e63946;
    color: #ffffff;
  }

  .ui44-button-audit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui44-symbol-audit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui44-symbol-audit-row .ui44-symbol-audit-item {
    min-width: 0;
  }

  .ui44-search-action {
    width: min(220px, calc(100vw - 48px));
  }
}

/* =========================================================
   REFERENCE COMPOSITIONS AND SPACING API
   ========================================================= */

/*
 * 44 UI — reference compositions and spacing API
 *
 * The reference-only composition demonstrations stay scoped to the two UI
 * pages; production consumes the canonical tokens and source-owned layouts.
 */

.ui44-spacing-section {
  display: grid;
  gap: var(--44ui-header-content-gap);
  min-width: 0;
}

.ui44-spacing-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  align-items: flex-start;
  gap: var(--os-space-2) var(--os-space-4);
}

.ui44-spacing-section-title {
  margin: 0;
}

.ui44-spacing-section-action {
  display: grid;
  min-width: var(--44ui-target);
  min-height: var(--44ui-target);
  flex: 0 0 auto;
  place-items: center;
}

.ui44-spacing-section-content {
  display: grid;
  min-width: 0;
  gap: var(--44ui-panel-content-gap);
}

.ui44-layout-panel {
  min-width: 0;
}

.ui44-panel-content {
  display: grid;
  min-width: 0;
  gap: var(--44ui-panel-content-gap);
  padding: var(--44ui-panel-inset);
}

.ui44-panel-content-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr) auto;
  gap: var(--44ui-panel-content-gap);
  align-items: end;
}

.ui44-panel-content-form-field {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.ui44-panel-content-form-field > span {
  color: var(--44ui-text-secondary);
  font: 600 var(--44ui-type-field-label-size)/var(--44ui-type-field-label-line) var(--44ui-font-app);
  letter-spacing: normal;
  text-transform: none;
}

.ui44-list-row {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: var(--44ui-target);
  align-items: center;
  padding: var(--44ui-row-y) var(--44ui-row-x);
  border: 0;
  background: transparent;
  color: var(--os-color-ink);
  font: inherit;
  text-align: left;
}

.ui44-list-row + .ui44-list-row {
  border-top: 1px solid var(--44ui-panel-border);
}

.ui44-list-row-has-leading {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--os-space-4);
}

.ui44-list-row-has-trailing {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--os-space-4);
}

.ui44-list-row-has-leading.ui44-list-row-has-trailing {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.ui44-list-row-interactive {
  cursor: pointer;
  transition: background-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ui44-list-row-interactive:hover {
    background: var(--44ui-interactive-hover);
  }
}

.ui44-list-row-interactive:focus-visible {
  outline: 1px solid var(--44ui-input-border-focus);
  outline-offset: -3px;
  background: var(--44ui-interactive-hover);
}

.ui44-list-row-leading,
.ui44-list-row-trailing {
  display: grid;
  min-width: 0;
  align-items: center;
}

.ui44-list-row-copy {
  display: grid;
  min-width: 0;
  gap: var(--os-space-2);
  overflow-wrap: anywhere;
}

.ui44-list-row-title,
.ui44-list-row-secondary,
.ui44-list-row-body {
  min-width: 0;
}

.ui44-list-row-title {
  color: var(--44ui-text-primary);
}

.ui44-list-row-secondary,
.ui44-list-row-body {
  color: var(--44ui-text-secondary);
}

.ui44-list-row-body {
  margin-top: 4px;
}

.ui44-track-duration {
  color: var(--44ui-text-secondary);
  white-space: nowrap;
}

.ui44-row-publication-status-published {
  color: var(--44ui-text-success);
}

.ui44-row-publication-status-review {
  color: var(--44ui-text-warning);
}

.ui44-row-publication-status-draft {
  color: var(--44ui-text-secondary);
}

.ui44-list-row-studio .ui44-list-row-body {
  margin-top: 0;
}

.ui44-row-issue-status {
  color: var(--44ui-text-secondary);
  white-space: nowrap;
}

.ui44-row-artwork {
  display: grid;
  width: var(--44ui-artwork-size);
  height: var(--44ui-artwork-size);
  place-items: center;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 12px;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.38), transparent 28%),
    linear-gradient(145deg, #e8b44a, #8f4e82 52%, #263960);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 800;
}

.ui44-row-artwork-missing {
  background: var(--44ui-input-background);
  color: var(--44ui-input-placeholder);
}

.ui44-row-achievement-icon {
  display: grid;
  width: var(--44ui-achievement-size);
  height: var(--44ui-achievement-size);
  place-items: center;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 12px;
  background: var(--44ui-input-background);
  font-size: 19px;
}

.ui44-row-achievement-icon-locked {
  opacity: 0.48;
  color: var(--os-color-ink-secondary);
}

.ui44-row-check {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: var(--44ui-button-background);
  color: var(--44ui-button-text);
  font-size: 15px;
  font-weight: 850;
}

.ui44-community-copy,
.ui44-review-copy {
  display: grid;
  min-width: 0;
}

.ui44-community-copy {
  gap: 8px;
}

.ui44-community-author-line {
  display: inline-flex;
  width: fit-content;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.ui44-community-meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--44ui-text-secondary);
}

.ui44-community-meta strong {
  color: var(--44ui-text-primary);
}

.ui44-community-body,
.ui44-review-body {
  color: var(--44ui-text-secondary);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.ui44-community-actions {
  display: flex;
  min-height: var(--44ui-target);
  align-items: center;
  gap: 4px;
  margin-block: -3px -7px;
}

.ui44-row-action {
  position: relative;
  display: inline-flex;
  min-width: var(--44ui-target);
  min-height: var(--44ui-target);
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--os-color-ink-secondary);
  cursor: pointer;
  font: 650 12px/1 var(--os-font-app);
  transition: background-color 140ms ease, color 140ms ease;
}

.ui44-row-action > * {
  position: relative;
  z-index: 1;
}

.ui44-row-action::before {
  content: '';
  position: absolute;
  inset: 5px 2px;
  border-radius: 999px;
  background: transparent;
  transition: background-color 140ms ease;
}

.ui44-row-action-delete {
  margin-left: auto;
}

.ui44-row-action-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

@media (hover: hover) and (pointer: fine) {
  .ui44-row-action:hover {
    color: var(--os-color-ink);
  }

  .ui44-row-action:hover::before {
    background: var(--44ui-interactive-hover);
  }

  .ui44-row-action-delete:hover {
    color: #e63946;
  }
}

.ui44-row-action:focus-visible {
  outline: 1px solid var(--44ui-input-border-focus);
  outline-offset: 1px;
}

.ui44-row-action:focus-visible::before {
  background: var(--44ui-interactive-hover);
}

.ui44-review-copy {
  gap: 12px;
}

.ui44-review-author {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  color: var(--44ui-text-secondary);
}

.ui44-review-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 50%;
  background: var(--44ui-input-background);
  color: var(--os-color-ink);
  font-size: 10px;
  font-weight: 800;
}

.ui44-list-row-detail {
  grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr);
}

.ui44-detail-label {
  color: var(--44ui-text-secondary);
}

.ui44-detail-value {
  color: var(--44ui-text-primary);
  overflow-wrap: anywhere;
  text-align: right;
}

.ui44-list-row-track {
  min-height: var(--44ui-target);
  padding-block: 14px;
}

.ui44-track-number {
  display: grid;
  width: var(--44ui-target);
  height: var(--44ui-target);
  place-items: center;
  color: var(--44ui-text-secondary);
  font: 400 var(--44ui-type-meta-size)/var(--44ui-type-meta-line) var(--44ui-font-app);
}

.ui44-track-play {
  display: none;
  font-size: 13px;
}

@media (hover: hover) and (pointer: fine) {
  .ui44-list-row-track:hover .ui44-track-number > span:first-child {
    display: none;
  }

  .ui44-list-row-track:hover .ui44-track-play {
    display: inline;
  }
}

@media (max-width: 768px) {
  .ui44-panel-content-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui44-panel-content-form-row .ui44-button {
    width: 100%;
  }
}

.ui-audit-page-mobile .ui44-panel-content-form-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ui-audit-page-mobile .ui44-panel-content-form-grid .ui44-button {
  width: 100%;
}

.ui-audit-page-mobile .ui44-list-row-track {
  padding-block: 11px;
}

.ui-audit-page-mobile .ui44-track-number {
  font-size: var(--44ui-type-subheadline-size);
  line-height: var(--44ui-type-subheadline-line);
}

.ui44-track-title {
  font-weight: 400;
}

.ui-audit-page-mobile .ui44-list-row-detail {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 4px;
}

.ui-audit-page-mobile .ui44-detail-value {
  text-align: left;
}

@media (max-width: 520px) {
  .ui44-list-row-detail {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .ui44-detail-value {
    text-align: left;
  }
}

/* =========================================================
   REFERENCE TYPOGRAPHY API
   ========================================================= */

/*
 * 44 UI — reference semantic typography API
 *
 * The demonstrations are scoped to the two UI pages. Production type roles
 * use the canonical variables defined in this stylesheet.
 */

.ui44-type-audit {
  --44ui-font-app: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --44ui-type-page-title-size: 1.625rem;
  --44ui-type-page-title-line: 2rem;
  --44ui-type-section-title-size: 1.375rem;
  --44ui-type-section-title-line: 1.625rem;
  --44ui-type-subsection-title-size: 1.0625rem;
  --44ui-type-subsection-title-line: 1.375rem;
  --44ui-type-headline-size: 0.8125rem;
  --44ui-type-headline-line: 1rem;
  --44ui-type-body-size: 0.8125rem;
  --44ui-type-body-line: 1.125rem;
  --44ui-type-callout-size: 0.75rem;
  --44ui-type-callout-line: 0.9375rem;
  --44ui-type-subheadline-size: 0.6875rem;
  --44ui-type-subheadline-line: 0.875rem;
  --44ui-type-meta-size: 0.625rem;
  --44ui-type-meta-line: 0.8125rem;
  --44ui-type-caption-size: 0.625rem;
  --44ui-type-caption-line: 0.8125rem;
  --44ui-type-field-label-size: 0.75rem;
  --44ui-type-field-label-line: 0.9375rem;
  --44ui-type-control-size: 0.8125rem;
  --44ui-type-control-line: 1rem;

  --44ui-text-primary: #151515;
  --44ui-text-secondary: #3f3f3b;
  --44ui-text-placeholder: #65655f;
  --44ui-text-disabled: rgba(21, 21, 21, 0.48);
  --44ui-text-success: #147a32;
  --44ui-text-warning: #8a5600;
  --44ui-text-danger: #b4232a;
  --44ui-text-accent: var(--os-color-accent);

  font-family: var(--44ui-font-app);
}

body.theme-dark .ui44-type-audit {
  --44ui-text-primary: #f4f3ee;
  --44ui-text-secondary: #c7c5bd;
  --44ui-text-placeholder: #98968f;
  --44ui-text-disabled: rgba(244, 243, 238, 0.48);
  --44ui-text-success: #5fd17b;
  --44ui-text-warning: #f0b34a;
  --44ui-text-danger: #ff6b70;
}

.ui-audit-page-mobile.ui44-type-audit {
  --44ui-type-page-title-size: 2.125rem;
  --44ui-type-page-title-line: 2.5625rem;
  --44ui-type-section-title-size: 1.75rem;
  --44ui-type-section-title-line: 2.125rem;
  --44ui-type-subsection-title-size: 1.375rem;
  --44ui-type-subsection-title-line: 1.75rem;
  --44ui-type-headline-size: 1.0625rem;
  --44ui-type-headline-line: 1.375rem;
  --44ui-type-body-size: 1.0625rem;
  --44ui-type-body-line: 1.5rem;
  --44ui-type-callout-size: 1rem;
  --44ui-type-callout-line: 1.3125rem;
  --44ui-type-subheadline-size: 0.9375rem;
  --44ui-type-subheadline-line: 1.25rem;
  --44ui-type-meta-size: 0.8125rem;
  --44ui-type-meta-line: 1.125rem;
  --44ui-type-caption-size: 0.75rem;
  --44ui-type-caption-line: 1rem;
  --44ui-type-field-label-size: 0.9375rem;
  --44ui-type-field-label-line: 1.25rem;
  --44ui-type-control-size: 1.0625rem;
  --44ui-type-control-line: 1.375rem;
}

.ui44-type {
  min-width: 0;
  margin: 0;
  font-family: var(--44ui-font-app);
  font-kerning: normal;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

.ui44-type-page-title { font-size: var(--44ui-type-page-title-size); line-height: var(--44ui-type-page-title-line); font-weight: 700; }
.ui44-type-section-title { font-size: var(--44ui-type-section-title-size); line-height: var(--44ui-type-section-title-line); font-weight: 700; }
.ui44-type-subsection-title { font-size: var(--44ui-type-subsection-title-size); line-height: var(--44ui-type-subsection-title-line); font-weight: 700; }
.ui44-type-headline { font-size: var(--44ui-type-headline-size); line-height: var(--44ui-type-headline-line); font-weight: 600; }
.ui44-type-body { font-size: var(--44ui-type-body-size); line-height: var(--44ui-type-body-line); font-weight: 400; }
.ui44-type-callout { font-size: var(--44ui-type-callout-size); line-height: var(--44ui-type-callout-line); font-weight: 500; }
.ui-audit-page-mobile .ui44-type-callout { font-weight: 400; }
.ui44-type-subheadline { font-size: var(--44ui-type-subheadline-size); line-height: var(--44ui-type-subheadline-line); font-weight: 400; }
.ui44-type-meta { font-size: var(--44ui-type-meta-size); line-height: var(--44ui-type-meta-line); font-weight: 400; }
.ui44-type-caption { font-size: var(--44ui-type-caption-size); line-height: var(--44ui-type-caption-line); font-weight: 500; }
.ui-audit-page-mobile .ui44-type-caption { font-weight: 400; }
.ui44-type-field-label { font-size: var(--44ui-type-field-label-size); line-height: var(--44ui-type-field-label-line); font-weight: 600; }
.ui44-type-control { font-size: var(--44ui-type-control-size); line-height: var(--44ui-type-control-line); font-weight: 600; }

.ui44-tone-primary { color: var(--44ui-text-primary); }
.ui44-tone-secondary { color: var(--44ui-text-secondary); }
.ui44-tone-placeholder { color: var(--44ui-text-placeholder); }
.ui44-tone-disabled { color: var(--44ui-text-disabled); }
.ui44-tone-success { color: var(--44ui-text-success); }
.ui44-tone-warning { color: var(--44ui-text-warning); }
.ui44-tone-danger { color: var(--44ui-text-danger); }
.ui44-tone-accent { color: var(--44ui-text-accent); }
.ui44-tone-inherit { color: inherit; }

/* Compatibility audit markup is remapped to the canonical scale. */
.ui44-type-audit .os-type-page-title { font: 700 var(--44ui-type-page-title-size)/var(--44ui-type-page-title-line) var(--44ui-font-app); letter-spacing: normal; }
.ui44-type-audit .os-type-section-title { font: 700 var(--44ui-type-subsection-title-size)/var(--44ui-type-subsection-title-line) var(--44ui-font-app); letter-spacing: normal; }
.ui44-type-audit .os-type-card-title { font: 600 var(--44ui-type-headline-size)/var(--44ui-type-headline-line) var(--44ui-font-app); letter-spacing: normal; }
.ui44-type-audit .os-type-body,
.ui44-type-audit .os-type-body-small { font: 400 var(--44ui-type-body-size)/var(--44ui-type-body-line) var(--44ui-font-app); letter-spacing: normal; color: var(--44ui-text-secondary); }
.ui44-type-audit .os-type-meta { font: 400 var(--44ui-type-meta-size)/var(--44ui-type-meta-line) var(--44ui-font-app); letter-spacing: normal; color: var(--44ui-text-secondary); }

.ui44-type-audit .ui44-button,
.ui44-type-audit .ui44-symbol-menu-item,
.ui44-type-audit .ui44-input {
  font-family: var(--44ui-font-app);
  font-size: var(--44ui-type-control-size);
  line-height: var(--44ui-type-control-line);
}

.ui44-type-audit .ui44-button,
.ui44-type-audit .ui44-symbol-menu-item { font-weight: 600; }
.ui44-type-audit .ui44-input { font-weight: 400; }

.ui44-type-specimen-list,
.ui44-type-tone-grid,
.ui44-type-inventory-grid {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.ui44-type-specimen-list { gap: 0; }

.ui44-type-specimen {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--44ui-panel-border);
}

.ui44-type-specimen:last-child { border-bottom: 0; }

.ui44-type-specimen-meta {
  display: grid;
  gap: 4px;
}

.ui44-type-tone-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ui44-type-tone-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 12px;
  background: var(--44ui-material-glass);
}

.ui44-type-theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ui44-type-theme-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 16px;
}

.ui44-type-theme-preview-light {
  --44ui-text-primary: #151515;
  --44ui-text-secondary: #3f3f3b;
  background: #f4f3ee;
}

.ui44-type-theme-preview-dark {
  --44ui-text-primary: #f4f3ee;
  --44ui-text-secondary: #c7c5bd;
  background: #151515;
}

.ui44-type-inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ui44-type-inventory-panel {
  min-width: 0;
}

.ui44-type-inventory-list {
  display: grid;
  max-height: 420px;
  overflow: auto;
}

.ui44-type-inventory-item {
  display: grid;
  gap: 5px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--44ui-panel-border);
}

.ui44-type-inventory-item:last-child { border-bottom: 0; }

.ui44-type-inventory-item code,
.ui44-type-specimen-meta code {
  color: var(--44ui-text-primary);
  font: 500 var(--44ui-type-caption-size)/var(--44ui-type-caption-line) ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
}

.ui44-type-inventory-sources {
  color: var(--44ui-text-secondary);
  font: 400 var(--44ui-type-caption-size)/var(--44ui-type-caption-line) var(--44ui-font-app);
  overflow-wrap: anywhere;
}

.ui44-type-section-scenario {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: start;
}

.ui44-type-section-scenario > .ui44-type-body { grid-column: 1 / -1; }

.ui44-type-audit .ui-audit-foundation-variant > span,
.ui44-type-audit .ui44-button-audit-item > span,
.ui44-type-audit .ui44-symbol-audit-item > span,
.ui44-type-audit .ui44-control-example > span {
  color: var(--44ui-text-secondary);
  font: 600 var(--44ui-type-field-label-size)/var(--44ui-type-field-label-line) var(--44ui-font-app);
  letter-spacing: normal;
  text-transform: none;
}

.ui44-type-audit code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (max-width: 768px) {
  .ui44-type-specimen,
  .ui44-type-inventory-grid { grid-template-columns: minmax(0, 1fr); }
  .ui44-type-tone-grid,
  .ui44-type-theme-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .ui44-type-tone-grid,
  .ui44-type-theme-preview-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   CANONICAL PRODUCTION SYSTEM AND SPECIALIZED BRIDGES
   ========================================================= */

/*
 * 44 UI — canonical production system
 *
 * The audit pages and product UI consume the same tokens from this file.
 * App Shell, Sidebar, media heroes, and Radio deliberately remain outside this
 * mapping because they are specialized environment-level experiences.
 */

:root,
body.theme-light {
  --44ui-font-app:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --44ui-page-inset: clamp(44px, 4.4vw, 72px);
  --44ui-section-gap: 48px;
  --44ui-header-content-gap: 20px;
  --44ui-panel-inset: 24px;
  --44ui-panel-content-gap: 20px;
  --44ui-row-x: 24px;
  --44ui-row-y: 20px;
  --44ui-target: 44px;
  --44ui-avatar-inline: 34px;
  --44ui-radius-paper: 24px;
  --44ui-menu-item-radius: 17px;
  --44ui-radius-glass: 24px;
  --44ui-radius-input: 16px;
  /* Two-state elevation system: Glass is always flat. Paper, transient menus,
     and catalog/media cards share the former Floating shadow. */
  --44ui-elevation-flat: none;
  --44ui-elevation-raised: 0 18px 48px rgba(0, 0, 0, 0.16);
  --os-card-shadow: var(--44ui-elevation-raised);
  --44ui-scrim: rgba(0, 0, 0, 0.32);
  --44ui-type-page-title-size: 26px;
  --44ui-type-page-title-line: 32px;
  --44ui-type-section-title-size: 22px;
  --44ui-type-section-title-line: 26px;
  --44ui-type-subsection-title-size: 17px;
  --44ui-type-subsection-title-line: 22px;
  --44ui-type-headline-size: 13px;
  --44ui-type-headline-line: 16px;
  --44ui-type-body-size: 13px;
  --44ui-type-body-line: 18px;
  --44ui-type-callout-size: 12px;
  --44ui-type-callout-line: 15px;
  --44ui-type-subheadline-size: 11px;
  --44ui-type-subheadline-line: 14px;
  --44ui-type-meta-size: 10px;
  --44ui-type-meta-line: 13px;
  --44ui-type-caption-size: 10px;
  --44ui-type-caption-line: 13px;
  --44ui-type-field-label-size: 12px;
  --44ui-type-field-label-line: 15px;
  --44ui-type-control-size: 13px;
  --44ui-type-control-line: 16px;
  --44ui-text-primary: var(--os-color-ink);
  --44ui-text-secondary: var(--os-color-ink-secondary);
  --44ui-text-placeholder: var(--44ui-input-placeholder);
  --44ui-text-disabled: var(--44ui-control-unavailable-text);
  --44ui-text-success: var(--os-color-success);
  --44ui-text-warning: var(--os-color-warning);
  --44ui-text-danger: #b4232a;
  --44ui-text-accent: var(--os-color-accent);
}

body.theme-dark {
  --44ui-elevation-flat: none;
  --44ui-elevation-raised: 0 20px 54px rgba(0, 0, 0, 0.38);
  --os-card-shadow: var(--44ui-elevation-raised);
  --44ui-scrim: rgba(0, 0, 0, 0.44);
  /* Rebind semantic type aliases on the themed element. When these aliases
     only exist on :root, their nested --os-color-* references resolve against
     the light root palette before the values are inherited by the dark body. */
  --44ui-text-primary: var(--os-color-ink);
  --44ui-text-secondary: var(--os-color-ink-secondary);
  --44ui-text-placeholder: var(--44ui-input-placeholder);
  --44ui-text-disabled: var(--44ui-control-unavailable-text);
  --44ui-text-success: var(--os-color-success);
  --44ui-text-warning: var(--os-color-warning);
  --44ui-text-danger: #ff6b70;
  --44ui-text-accent: var(--os-color-accent);
}

body {
  font-family: var(--44ui-font-app);
}

/* Semantic typography: compact macOS defaults. */
:root {
  --os-font-app: var(--44ui-font-app);
  --os-type-display-size: 26px;
  --os-type-display-line: 32px;
  --os-type-display-weight: 700;
  --os-type-display-track: 0;
  --os-type-page-title-size: 26px;
  --os-type-page-title-line: 32px;
  --os-type-page-title-weight: 700;
  --os-type-page-title-track: 0;
  --os-type-panel-title-size: 22px;
  --os-type-panel-title-line: 26px;
  --os-type-panel-title-weight: 700;
  --os-type-panel-title-track: 0;
  --os-type-card-title-size: 13px;
  --os-type-card-title-line: 16px;
  --os-type-card-title-weight: 600;
  --os-type-card-title-track: 0;
  --os-type-field-title-size: 12px;
  --os-type-field-title-line: 15px;
  --os-type-field-title-weight: 600;
  --os-type-field-title-track: 0;
  --os-type-body-size: 13px;
  --os-type-body-line: 18px;
  --os-type-body-weight: 400;
  --os-type-body-track: 0;
  --os-type-body-small-size: 12px;
  --os-type-body-small-line: 15px;
  --os-type-body-small-weight: 500;
  --os-type-body-small-track: 0;
  --os-type-meta-size: 10px;
  --os-type-meta-line: 13px;
  --os-type-meta-weight: 400;
  --os-type-meta-track: 0;
  --os-type-button-size: 13px;
  --os-type-button-line: 16px;
  --os-type-button-weight: 600;
  --os-type-button-track: 0;
  --os-app-header-pad-top: 24px;
  --os-app-header-pad-bottom: 24px;
  --os-content-inset: var(--44ui-page-inset);
  --os-section-gap: var(--44ui-section-gap);
  --os-section-head-gap: var(--44ui-header-content-gap);
  --os-row-pad-y: var(--44ui-row-y);
  --os-row-pad-x: var(--44ui-row-x);
}

/* Canonical component API. */
.ui44-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: start;
  padding-block: 24px;
  border-bottom: 1px solid var(--44ui-panel-border);
}

.ui44-page-header-copy {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.ui44-page-header-copy > p {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
}

.ui44-page-header-action {
  display: flex;
  min-height: var(--44ui-target);
  align-items: flex-start;
}

.ui44-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--44ui-panel-content-gap);
  min-width: 0;
}

.ui44-form-field {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.ui44-form-field-short {
  grid-column: span 4;
}
.ui44-form-field-medium {
  grid-column: span 6;
}
.ui44-form-field-wide {
  grid-column: span 8;
}
.ui44-form-field-full {
  grid-column: 1 / -1;
}

.ui44-identity-avatar {
  display: inline-grid;
  overflow: hidden;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 50%;
  background: var(--44ui-input-background);
  color: var(--44ui-text-primary, var(--os-color-ink));
  font-size: 11px;
  font-weight: 700;
}

.ui44-identity-avatar-inline {
  width: var(--44ui-avatar-inline);
  height: var(--44ui-avatar-inline);
}

.ui44-identity-avatar-hero {
  width: clamp(96px, 9vw, 132px);
  height: clamp(96px, 9vw, 132px);
}

.ui44-identity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Final-system examples use the same canonical tokens as production. */

.ui44-elevation-audit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.ui44-elevation-sample {
  min-height: 120px;
  display: grid;
  place-items: center;
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-glass);
  background: var(--44ui-material-glass);
}

.ui44-track-audit-list .view-track-row {
  width: 100%;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ui44-player-sheet-audit {
  position: absolute;
  right: 12px;
  bottom: 54px;
  left: 12px;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 18px 20px;
  border: 1px solid var(--os-shell-border);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: var(--os-shell-bg);
  box-shadow: var(--44ui-elevation-raised);
  backdrop-filter: blur(36px) saturate(1.42);
  -webkit-backdrop-filter: blur(36px) saturate(1.42);
}

.ui44-player-sheet-audit > button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 50%;
  background: var(--44ui-interactive-hover);
  color: var(--os-color-ink);
  font-size: 24px;
}

.ui44-player-sheet-audit-art {
  width: 176px;
  aspect-ratio: 1;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    var(--os-color-accent),
    color-mix(in srgb, var(--os-color-accent) 12%, transparent)
  );
}

/* Page and section rhythm. */
:where(.app-header, .dashboard-header) {
  align-items: flex-start;
  padding-block: var(--os-app-header-pad-top) var(--os-app-header-pad-bottom);
}

:where(.app-header-copy, .dashboard-header-copy) {
  gap: 8px;
}

:where(.app-header-copy, .dashboard-header-copy) > p {
  width: 100%;
  max-width: none;
}

.hub-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 16px;
}

.hub-section-copy {
  display: contents;
}

.hub-section-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font: 700 22px/26px var(--44ui-font-app);
  letter-spacing: 0;
}

.view-section-title {
  margin-bottom: var(--44ui-header-content-gap);
  font: 700 22px/26px var(--44ui-font-app);
  letter-spacing: 0;
}

/* Approved material hierarchy. */
:where(
  .glass-panel:not(.radio-setup-card),
  .dashboard-form-step,
  .dashboard-list-surface,
  .social-feed-panel,
  .item-community-surface,
  .item-domain-surface,
  .product-review-list-surface,
  .library-achievement-list,
  .calendar-surface,
  .settings-list,
  .social-feed-composer,
  .social-reply-drawer-form,
  .social-compose-panel,
  .social-inbox-list,
  .social-message-list,
  .social-structured-list,
  .social-structured-metrics,
  .search-profile-list,
  .project-thread-surface,
  .project-composer,
  .project-sidebar-card
) {
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-glass);
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
  backdrop-filter: var(--44ui-glass-filter);
  -webkit-backdrop-filter: var(--44ui-glass-filter);
}

:where(.dashboard-row-copy, .product-review-copy) {
  gap: 4px;
}

:where(.dashboard-row-title, .social-row-title) {
  color: var(--os-color-ink);
  font: 600 13px/16px var(--44ui-font-app);
  letter-spacing: 0;
}

:where(
  .dashboard-row-subtitle,
  .dashboard-row-meta,
  .social-row-meta,
  .product-review-author,
  .product-domain-meta,
  .product-domain-meta-link
) {
  color: var(--os-color-ink-secondary);
  font: 400 11px/14px var(--44ui-font-app);
  letter-spacing: 0;
}

:where(
  .social-row-body,
  .product-review-copy > p,
  .product-update-row > p,
  .view-description
) {
  color: var(--os-color-ink-secondary);
  font: 400 13px/18px var(--44ui-font-app);
  letter-spacing: 0;
}

.studio-publication-status {
  margin: 0;
  font: 600 11px/14px var(--44ui-font-app);
  letter-spacing: 0;
}

:where(
  .os-popover,
  .page-filter-popover,
  .library-filter-popover,
  .tag-select-menu,
  .rich-editor-toolbar-popover,
  .social-mention-list,
  .os-modal,
  .profile-crop-dialog
) {
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-paper);
  background: var(--44ui-material-paper);
  box-shadow: var(--44ui-elevation-raised);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.os-modal-backdrop {
  background: var(--44ui-scrim);
}

.os-modal,
.profile-crop-dialog {
  box-shadow: var(--44ui-elevation-raised);
}

/* Forms and responsive 12-column grammar. */
.dashboard-form {
  gap: var(--44ui-section-gap);
}

.dashboard-form-section {
  gap: var(--44ui-header-content-gap);
}

.dashboard-form-step {
  gap: var(--44ui-panel-content-gap);
  padding: var(--44ui-panel-inset);
}

.dashboard-form-grid,
.profile-edit-fields,
.settings-two-column {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--44ui-panel-content-gap);
}

.dashboard-form-grid > *,
.profile-edit-fields > *,
.settings-two-column > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.dashboard-form-grid-2 > *,
.profile-edit-fields > *,
.settings-two-column > * {
  grid-column: span 6;
}

.dashboard-form-grid-3 > * {
  grid-column: span 4;
}

.release-core-grid .release-date-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.studio-paid-download-field {
  gap: 9px;
}

.studio-paid-download-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--44ui-input-border);
  border-radius: var(--44ui-radius-control);
  background: var(--44ui-input-background);
  cursor: pointer;
}

.studio-paid-download-toggle > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.studio-paid-download-toggle strong {
  color: var(--os-color-ink-primary);
  font: 600 13px/18px var(--44ui-font-app);
}

.studio-paid-download-toggle small {
  color: var(--os-color-ink-secondary);
  font: 400 12px/17px var(--44ui-font-app);
}

.studio-paid-download-required {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--44ui-input-border);
  border-radius: var(--44ui-radius-control);
  background: var(--44ui-input-background);
}

.studio-paid-download-required strong {
  color: var(--os-color-ink-primary);
  font: 600 13px/18px var(--44ui-font-app);
}

.studio-paid-download-required small {
  color: var(--os-color-ink-secondary);
  font: 400 12px/17px var(--44ui-font-app);
}

.studio-paid-download-toggle:has(.ui44-checkbox-input:focus-visible) {
  outline: 2px solid var(--44ui-input-border-focus);
  outline-offset: 2px;
}

.studio-paid-download-toggle:has(.ui44-checkbox-input:disabled) {
  cursor: not-allowed;
  opacity: 0.62;
}

:where(.dashboard-form-grid, .profile-edit-fields, .settings-two-column)
  > :is(.dashboard-field-full, .profile-edit-field-full) {
  grid-column: 1 / -1;
}

:where(
  .dashboard-field-label,
  .profile-edit-label,
  .external-link-service-name
) {
  color: var(--os-color-ink-secondary);
  font: 600 12px/15px var(--44ui-font-app);
  letter-spacing: 0;
  text-transform: none;
}

:where(
  .os-input-field,
  .profile-edit-input,
  .dashboard-field
    > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .dashboard-field > select,
  .dashboard-field > textarea,
  .social-message-form input,
  .social-message-form textarea,
  .item-community-composer input,
  .item-community-composer textarea,
  .social-feed-composer input,
  .social-feed-composer textarea,
  .social-reply-drawer-form input,
  .social-reply-drawer-form textarea
) {
  min-height: var(--44ui-control-height);
  padding-inline: 16px;
  border: 1px solid var(--44ui-input-border);
  border-radius: var(--44ui-radius-input);
  outline: 1px solid transparent;
  outline-offset: 2px;
  background: var(--44ui-input-background);
  box-shadow: none;
  color: var(--44ui-input-text);
  font: 400 13px/18px var(--44ui-font-app);
  letter-spacing: 0;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    outline-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .os-input-field,
    .profile-edit-input,
    .dashboard-field
      > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .dashboard-field > select,
    .dashboard-field > textarea,
    .social-message-form input,
    .social-message-form textarea,
    .item-community-composer input,
    .item-community-composer textarea,
    .social-feed-composer input,
    .social-feed-composer textarea,
    .social-reply-drawer-form input,
    .social-reply-drawer-form textarea
  ):hover {
    background: var(--44ui-input-background-hover);
  }
}

:where(
  .os-input-field,
  .profile-edit-input,
  .dashboard-field
    > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .dashboard-field > select,
  .dashboard-field > textarea,
  .social-message-form input,
  .social-message-form textarea,
  .item-community-composer input,
  .item-community-composer textarea,
  .social-feed-composer input,
  .social-feed-composer textarea,
  .social-reply-drawer-form input,
  .social-reply-drawer-form textarea
):focus-visible {
  border-color: var(--44ui-input-border);
  outline-color: var(--44ui-input-border-focus);
  background: var(--44ui-input-background-focus);
}

/* One action language: default, destructive, unavailable. */
.os-button,
.os-button-compact,
.os-button-large {
  min-height: var(--44ui-control-height);
  padding-inline: 22px;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 999px;
  box-shadow: none;
  font: 600 13px/16px var(--44ui-font-app);
  letter-spacing: 0;
}

:where(
  .os-button.os-button-primary,
  .os-button.os-button-secondary,
  .os-button.os-button-ghost,
  .os-button.os-button-glass
) {
  background: var(--44ui-button-background);
  color: var(--44ui-button-text);
  border-color: var(--44ui-panel-border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (hover: hover) and (pointer: fine) {
  :where(
      .os-button.os-button-primary,
      .os-button.os-button-secondary,
      .os-button.os-button-ghost,
      .os-button.os-button-glass
    ):hover:not(:disabled) {
    background: var(--44ui-button-background-hover);
    color: var(--44ui-button-text-hover);
    border-color: var(--44ui-panel-border);
    box-shadow: none;
  }
}

:where(
  .os-button.os-button-danger,
  .os-button.os-button-destructive,
  .os-button.os-button-danger:link
) {
  background: #f4f3ee;
  color: #151515;
  border-color: var(--44ui-panel-border);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  :where(
      .os-button.os-button-danger,
      .os-button.os-button-destructive
    ):hover:not(:disabled) {
    background: #e63946;
    color: #fff;
    border-color: #e63946;
    box-shadow: none;
  }
}

.os-button:disabled {
  background: var(--44ui-control-unavailable);
  color: var(--44ui-control-unavailable-text);
  border-color: transparent;
  box-shadow: none;
}

/* Touch interfaces have no hover affordance, so destructive actions declare
   their consequence at rest. Desktop retains the quiet default until hover. */
@media (max-width: 768px) {
  :where(.os-button.os-button-danger, .os-button.os-button-destructive) {
    background: #e63946;
    color: #fff;
    border-color: #e63946;
  }
}

/* Shared semantic headers, feedback, transient UI, identity-adjacent controls,
   Calendar hooks, and the canonical interaction contract. Production semantic
   hooks resolve to the same registry as their explicit ui44 counterparts. */
body:is(.theme-dark, .theme-light)
  :is(.os-type-display, .os-type-page-title) {
  margin: 0;
  color: var(--44ui-text-primary);
  font: 700 var(--44ui-type-page-title-size)/var(--44ui-type-page-title-line)
    var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light)
  :is(.os-type-panel-title, .hub-section-title, .view-section-title) {
  color: var(--44ui-text-primary);
  font: 700 var(--44ui-type-section-title-size)/var(--44ui-type-section-title-line)
    var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light) .os-type-section-title {
  color: var(--44ui-text-primary);
  font: 700 var(--44ui-type-subsection-title-size)/var(--44ui-type-subsection-title-line)
    var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light)
  :is(.os-type-card-title, .dashboard-row-title, .social-row-title) {
  font: 600 var(--44ui-type-headline-size)/var(--44ui-type-headline-line)
    var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light) .os-type-body {
  font: 400 var(--44ui-type-body-size)/var(--44ui-type-body-line)
    var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light) .os-type-body-small {
  font: 500 var(--44ui-type-callout-size)/var(--44ui-type-callout-line)
    var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light) .os-type-meta {
  font: 400 var(--44ui-type-meta-size)/var(--44ui-type-meta-line)
    var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light) .os-type-field-title {
  font: 600 var(--44ui-type-field-label-size)/var(--44ui-type-field-label-line)
    var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-section-header, .hub-section-head) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
}

body:is(.theme-dark, .theme-light) .hub-section-head-described {
  align-items: start;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-section-header-copy, .hub-section-copy) {
  display: contents;
}

body:is(.theme-dark, .theme-light) .ui44-section-header > :not(:first-child) {
  grid-column: 2;
  grid-row: 1;
}

@media (min-width: 769px) {
  .app-shell {
    --os-active-sidebar-width: var(--os-sidebar-user-width, var(--os-sidebar-width));
  }

  .app-shell:has(.app-sidebar-compact) {
    --os-active-sidebar-width: var(--os-sidebar-compact-width);
  }

  body:is(.theme-dark, .theme-light)
    .store-app-page
    .app-header
    .page-header-tools {
    min-height: var(--44ui-target);
  }

  body:is(.theme-dark, .theme-light) .store-app-page .page-filter-menu {
    margin-right: 0;
  }
}

/* Static metadata chips are quiet semantic labels. Switches and swatches are
   interactive and therefore own a complete 44px hit target independently of
   their smaller visual track/dot. */
body:is(.theme-dark, .theme-light)
  :is(.ui44-pill, .os-pill, .tag-select-pill) {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 999px;
  background: var(--44ui-input-background);
  box-shadow: none;
  color: var(--44ui-text-secondary);
  font: 500 var(--44ui-type-caption-size)/var(--44ui-type-caption-line)
    var(--44ui-font-app);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

body:is(.theme-dark, .theme-light)
  :is(
    .ui44-badge,
    .dashboard-status-pill,
    .project-status-pill,
    .admin-status-pill,
    .admin-section-badge
  ) {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 999px;
  background: var(--44ui-input-background);
  box-shadow: none;
  color: var(--44ui-text-secondary);
  font: 500 var(--44ui-type-caption-size)/var(--44ui-type-caption-line)
    var(--44ui-font-app);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

body:is(.theme-dark, .theme-light)
  :is(.dashboard-status-pill-success, [data-status="accepted"], [data-status="completed"]) {
  color: var(--44ui-text-success);
}

body:is(.theme-dark, .theme-light)
  :is(.dashboard-status-pill-warning, [data-status="in_progress"]) {
  color: var(--44ui-text-warning);
}

body:is(.theme-dark, .theme-light)
  :is(.studio-status-pill-draft, [data-status="declined"], [data-status="canceled"]) {
  color: var(--44ui-text-secondary);
}

body:is(.theme-dark, .theme-light) :is(.ui44-swatch, .settings-swatch) {
  min-height: var(--44ui-target);
  padding: 0 14px 0 10px;
  border: 1px solid var(--44ui-input-border);
  border-radius: 999px;
  background: var(--44ui-input-background);
  box-shadow: none;
  color: var(--44ui-text-secondary);
  font: 600 var(--44ui-type-control-size)/var(--44ui-type-control-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-swatch-active, .settings-swatch-active) {
  border-color: var(--44ui-input-border-focus);
  color: var(--44ui-text-primary);
  outline: 1px solid var(--44ui-input-border-focus);
  outline-offset: 1px;
}

body:is(.theme-dark, .theme-light) :is(.ui44-switch, .settings-toggle) {
  position: relative;
  width: var(--44ui-target);
  height: var(--44ui-target);
  min-height: var(--44ui-target);
  flex: 0 0 var(--44ui-target);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-switch, .settings-toggle)::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 0;
  width: 44px;
  height: 26px;
  border: 1px solid var(--44ui-input-border);
  border-radius: 999px;
  background: var(--44ui-input-background);
  transition: background-color 140ms ease, border-color 140ms ease;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-switch, .settings-toggle)::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--44ui-text-primary);
  opacity: 0.68;
  transition: transform 140ms ease, opacity 140ms ease;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-switch-on, .settings-toggle-on)::before {
  border-color: var(--os-color-accent);
  background: color-mix(in srgb, var(--os-color-accent) 55%, transparent);
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-switch-on, .settings-toggle-on)::after {
  transform: translateX(18px);
  opacity: 1;
}

/* Quiet empty/loading/error states do not invent a second panel. Status
   banners use one semantic color channel and inherit the owning layout. */
body:is(.theme-dark, .theme-light)
  :is(.ui44-state, .app-empty-text, .dashboard-empty, .calendar-state) {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--44ui-text-secondary);
  font: 400 var(--44ui-type-body-size)/var(--44ui-type-body-line)
    var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light) :is(.dashboard-empty, .calendar-state) {
  min-height: 88px;
  display: grid;
  place-items: center;
  padding: var(--44ui-panel-inset);
  text-align: center;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-loading-shell, .ui44-state-loading) {
  display: grid;
  place-items: center;
}

body:is(.theme-dark, .theme-light) .ui44-state-loading {
  color: transparent;
  font-size: 0;
  line-height: 0;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-loading-shell, .ui44-state-loading)::after {
  content: '';
  width: 24px;
  height: 24px;
  border: 2px solid var(--44ui-panel-border);
  border-top-color: var(--44ui-text-primary);
  border-radius: 50%;
  animation: ui44-state-spin 720ms linear infinite;
}

@keyframes ui44-state-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.theme-dark, .theme-light)
    :is(.ui44-loading-shell, .ui44-state-loading)::after {
    animation: none;
    border-top-color: var(--44ui-panel-border);
  }
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-status, .dashboard-status, .login-status, .settings-status) {
  padding: 12px 14px;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 12px;
  background: var(--44ui-input-background);
  box-shadow: none;
  color: var(--44ui-text-secondary);
  font: 500 var(--44ui-type-callout-size)/var(--44ui-type-callout-line)
    var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-status-error, .dashboard-status-error) {
  border-color: color-mix(in srgb, var(--44ui-text-danger) 42%, var(--44ui-panel-border));
  color: var(--44ui-text-danger);
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-status-success, .dashboard-status-success) {
  border-color: color-mix(in srgb, var(--44ui-text-success) 42%, var(--44ui-panel-border));
  color: var(--44ui-text-success);
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-status-warning, .dashboard-status-warning) {
  border-color: color-mix(in srgb, var(--44ui-text-warning) 42%, var(--44ui-panel-border));
  color: var(--44ui-text-warning);
}

/* Canonical modal family. Geometry may become a mobile sheet, but material,
   scrim, elevation, keyboard focus, and dismissal ownership stay shared. */

body:is(.theme-dark, .theme-light) .ui44-dialog-surface {
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-glass);
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
  color: var(--44ui-text-primary);
  backdrop-filter: var(--44ui-glass-filter);
  -webkit-backdrop-filter: var(--44ui-glass-filter);
}

/* Calendar retains month-grid/agenda composition while using canonical type,
   surfaces, row feedback, and outbound-link behavior. */
body:is(.theme-dark, .theme-light) .ui44-calendar-toolbar {
  min-height: var(--44ui-target);
  gap: var(--44ui-header-content-gap);
}

body:is(.theme-dark, .theme-light) .ui44-calendar-entry {
  color: var(--44ui-text-primary);
  font-family: var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-external-link, .external-link-action, .calendar-entry-actions a) {
  min-height: var(--44ui-target);
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

/* A single keyboard-focus language applies to native and ARIA interactions.
   Component-specific focus rules may alter background, never the ring. */

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light)
    :is(.ui44-swatch, .settings-swatch):hover:not(:disabled) {
    border-color: var(--44ui-panel-border-hover);
    color: var(--44ui-text-primary);
  }
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light)
    :is(.ui44-pill, .os-pill, .tag-select-pill, .ui44-badge, .dashboard-status-pill, .project-status-pill) {
    font: 400 var(--44ui-type-caption-size)/var(--44ui-type-caption-line)
      var(--44ui-font-app);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* Canonical action and symbol controls. Production semantic hooks consume the
   same three button intents and one 44px symbol contract as explicit ui44
   primitives. Menu items, toggles, rows, reader tools, and player tools retain
   their owning family contracts. */
body:is(.theme-dark, .theme-light) :is(.ui44-button, .os-button) {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  height: var(--44ui-target);
  min-height: var(--44ui-target);
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 999px;
  background: var(--44ui-button-background);
  box-shadow: none;
  color: var(--44ui-button-text);
  font: 600 13px/16px var(--44ui-font-app);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

body:is(.theme-dark, .theme-light)
  :is(
    .ui44-button-destructive,
    .os-button-danger,
    .os-button-destructive
  ) {
  background: #f4f3ee;
  color: #151515;
}

body:is(.theme-dark, .theme-light)
  :is(
    .ui44-button-unavailable,
    .ui44-button:disabled,
    .os-button:disabled,
    .os-button-disabled
  ) {
  border-color: transparent;
  background: var(--44ui-control-unavailable);
  color: var(--44ui-control-unavailable-text);
  cursor: not-allowed;
}

body:is(.theme-dark, .theme-light)
  :is(
    .ui44-symbol-button,
    .page-filter-button,
    .page-compose-button,
    .os-topbar-icon-button,
    .os-topbar-back,
    .os-icon-button
  ) {
  box-sizing: border-box;
  display: inline-grid;
  width: var(--44ui-target);
  min-width: var(--44ui-target);
  height: var(--44ui-target);
  min-height: var(--44ui-target);
  flex: 0 0 var(--44ui-target);
  place-items: center;
  padding: 0;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 50%;
  background: var(--44ui-material-glass);
  box-shadow: none;
  color: var(--os-color-ink);
  line-height: 1;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

body:is(.theme-dark, .theme-light)
  :is(
    .ui44-button,
    .os-button,
    .ui44-symbol-button,
    .page-filter-button,
    .page-compose-button,
    .os-topbar-icon-button,
    .os-topbar-back,
    .os-icon-button
  ):focus-visible {
  outline: 2px solid var(--44ui-input-border-focus);
  outline-offset: 2px;
}

body:is(.theme-dark, .theme-light)
  :is(
    .ui44-symbol-button[aria-expanded="true"],
    .ui44-symbol-button-pressed,
    .page-filter-menu-open > .page-filter-button,
    .os-topbar-icon-button-active
  ) {
  background: var(--44ui-interactive-hover);
  border-color: var(--44ui-panel-border);
}

body:is(.theme-dark, .theme-light)
  :is(
    .ui44-symbol-button-active,
    .page-filter-button-active
  ) {
  border-color: var(--os-color-accent);
}

/* Add and filter glyphs retain their semantic identity while open. */
body:is(.theme-dark, .theme-light)
  :is(
    .page-compose-button,
    .studio-create-button,
    .page-filter-menu-open > .studio-create-button
  )
  > span {
  transform: translateY(-1px);
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light)
    :is(.ui44-button, .os-button):hover:not(:disabled) {
    background: var(--44ui-button-background-hover);
    color: var(--44ui-button-text-hover);
  }

  body:is(.theme-dark, .theme-light)
    :is(
      .ui44-button-destructive,
      .os-button-danger,
      .os-button-destructive
    ):hover:not(:disabled) {
    border-color: #e63946;
    background: #e63946;
    color: #fff;
  }

  body:is(.theme-dark, .theme-light)
    :is(
      .ui44-symbol-button,
      .page-filter-button,
      .page-compose-button,
      .os-topbar-icon-button,
      .os-topbar-back,
      .os-icon-button
    ):hover:not(:disabled) {
    background: var(--44ui-interactive-hover);
  }
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) :is(.ui44-button, .os-button) {
    font: 600 17px/22px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    :is(
      .ui44-button-destructive,
      .os-button-danger,
      .os-button-destructive
    ):not(:disabled) {
    border-color: #e63946;
    background: #e63946;
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.theme-dark, .theme-light)
    :is(
      .ui44-button,
      .os-button,
      .ui44-symbol-button,
      .page-filter-button,
      .page-compose-button,
      .os-topbar-icon-button,
      .os-topbar-back,
      .os-icon-button
    ) {
    transition: none;
  }
}

/* Wave 4: form composition and source-owned spacing. Static JSX style
   objects are replaced by semantic classes so creator, settings, auth,
   checkout, Community, and shared status layouts remain responsive through
   the same token relationships. Runtime image, crop, progress, coordinate,
   and selected-color values intentionally remain inline data. */
body:is(.theme-dark, .theme-light) .ui44-loading-shell {
  min-height: 40vh;
}

body:is(.theme-dark, .theme-light) .ui44-route-state {
  padding: 80px var(--44ui-page-inset);
  color: var(--os-color-ink-muted);
  text-align: center;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-text-secondary, .ui44-form-help, .empty-panel-copy) {
  color: var(--os-color-ink-secondary);
}

body:is(.theme-dark, .theme-light) .ui44-text-muted {
  color: var(--os-color-ink-secondary);
}

body:is(.theme-dark, .theme-light) .ui44-min-width-zero {
  min-width: 0;
}

body:is(.theme-dark, .theme-light) .ui44-centered-action {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

body:is(.theme-dark, .theme-light) .ui44-section-gap-before {
  margin-top: 24px;
}

body:is(.theme-dark, .theme-light) .ui44-section-gap-after-small {
  margin-bottom: 16px;
}

body:is(.theme-dark, .theme-light) .ui44-status-block {
  margin-bottom: 20px;
}

body:is(.theme-dark, .theme-light) .ui44-meta-offset {
  margin-top: 8px;
}

body:is(.theme-dark, .theme-light) .ui44-field-error {
  margin-top: 10px;
}

body:is(.theme-dark, .theme-light)
  :is(
    .dashboard-form-note,
    .dashboard-field > .os-type-body-small,
    .dashboard-form-step > .os-type-body-small,
    .settings-field-head > .os-type-body-small,
    .ui44-form-help
  ) {
  color: var(--os-color-ink-secondary);
  font: 400 12px/16px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-form-stack {
  display: grid;
  gap: var(--44ui-panel-content-gap);
}

body:is(.theme-dark, .theme-light) .ui44-form-label {
  margin-bottom: 8px;
}

body:is(.theme-dark, .theme-light) .ui44-form-actions {
  display: flex;
  gap: 12px;
  justify-self: start;
  flex-wrap: wrap;
}

body:is(.theme-dark, .theme-light) .ui44-form-textarea-tall {
  min-height: 200px;
}

body:is(.theme-dark, .theme-light) .community-new-layout {
  display: grid;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  gap: 24px;
}

body:is(.theme-dark, .theme-light) .community-new-surface {
  padding: var(--44ui-panel-inset);
}

body:is(.theme-dark, .theme-light) .checkout-inline-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

body:is(.theme-dark, .theme-light) .checkout-summary-section {
  max-width: none;
}

body:is(.theme-dark, .theme-light) .cart-item-link {
  color: inherit;
  text-decoration: none;
}

body:is(.theme-dark, .theme-light) .ui44-upload-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body:is(.theme-dark, .theme-light) .ui44-upload-button-busy {
  cursor: progress;
}

body:is(.theme-dark, .theme-light) .ui44-file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

body:is(.theme-dark, .theme-light) .ui44-visually-hidden-media {
  display: none;
}

body:is(.theme-dark, .theme-light) .studio-native-short-field {
  min-width: 140px;
}

body:is(.theme-dark, .theme-light) .studio-sample-preview-count-field {
  width: min(360px, 100%);
  margin-top: 16px;
}

body:is(.theme-dark, .theme-light)
  :is(.os-topbar-notification-menu, .os-topbar-account-menu) {
  position: relative;
}

body:is(.theme-dark, .theme-light) .profile-edit-sign-in {
  margin-left: 8px;
}

body:is(.theme-dark, .theme-light) .social-inbox-results-offset {
  margin-top: 18px;
}

body:is(.theme-dark, .theme-light) .ui44-composer-input {
  min-height: 54px;
  flex: 1;
}

body:is(.theme-dark, .theme-light) .social-message-time {
  margin-top: 6px;
  opacity: 0.7;
}

body:is(.theme-dark, .theme-light) .social-action-flush {
  margin-left: 0;
}

body:is(.theme-dark, .theme-light) .item-community-section-header {
  margin-bottom: 28px;
}

body:is(.theme-dark, .theme-light) .item-community-section-title {
  margin: 0;
}

body:is(.theme-dark, .theme-light) .ui44-creator-gate {
  padding: 40px;
}

body:is(.theme-dark, .theme-light) .ui44-creator-gate-compact {
  padding: 28px;
}

body:is(.theme-dark, .theme-light) .ui44-creator-gate-title {
  margin-bottom: 8px;
}

body:is(.theme-dark, .theme-light) .ui44-creator-gate-copy {
  margin-bottom: 18px;
  color: var(--os-color-ink-secondary);
}

body:is(.theme-dark, .theme-light) .ui44-creator-gate-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

body:is(.theme-dark, .theme-light) .thread-row-copy {
  min-width: 0;
}

body:is(.theme-dark, .theme-light) .thread-row-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

body:is(.theme-dark, .theme-light) .thread-row-pinned {
  color: var(--os-color-accent);
}

body:is(.theme-dark, .theme-light) .thread-row-body {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 10px;
  color: var(--os-color-ink-secondary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body:is(.theme-dark, .theme-light) .thread-row-trailing {
  display: grid;
  min-width: 110px;
  gap: 8px;
  justify-items: end;
}

body:is(.theme-dark, .theme-light) .thread-row-metrics {
  display: flex;
  gap: 14px;
  color: var(--os-color-ink-secondary);
}

body:is(.theme-dark, .theme-light) .empty-panel-copy {
  margin-top: 8px;
}

body:is(.theme-dark, .theme-light) .ui44-community-content {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light)
    :is(
      .dashboard-form-note,
      .dashboard-field > .os-type-body-small,
      .dashboard-form-step > .os-type-body-small,
      .settings-field-head > .os-type-body-small,
      .ui44-form-help
    ) {
    font: 400 15px/20px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .ui44-route-state {
    padding: 48px var(--44ui-page-inset);
  }

  body:is(.theme-dark, .theme-light)
    :is(.ui44-creator-gate, .ui44-creator-gate-compact) {
    padding: var(--44ui-panel-inset);
  }

  body:is(.theme-dark, .theme-light) .profile-edit-sign-in {
    margin-left: 0;
  }
}

/* Wave 3D: canonical catalog cards and shelves. Product and profile artifacts
   remain artwork-first domain cards: the link wrapper is transparent and only
   the media carries elevation. Existing aspect-ratio classes retain ownership
   of square, book, portrait, landscape, and wide geometry. */
body:is(.theme-dark, .theme-light) :is(.ui44-catalog-grid, .ui44-catalog-shelf) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  gap: 20px;
}

body:is(.theme-dark, .theme-light) .ui44-catalog-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  filter: none;
  transform: none;
}

body:is(.theme-dark, .theme-light) .ui44-catalog-art {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  border: 0;
  border-radius: 16px;
  outline: 2px solid transparent;
  outline-offset: 3px;
  background: color-mix(in srgb, var(--os-color-ink) 6%, transparent);
  box-shadow: var(--44ui-elevation-raised);
  transform-origin: center;
  transition:
    transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 180ms ease,
    filter 180ms ease,
    outline-color 140ms ease;
}

body:is(.theme-dark, .theme-light) .ui44-catalog-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:is(.theme-dark, .theme-light) .ui44-catalog-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 14px 2px 2px;
}

body:is(.theme-dark, .theme-light) .ui44-catalog-title {
  overflow: hidden;
  color: var(--os-color-ink);
  font: 600 13px/16px var(--44ui-font-app);
  letter-spacing: 0;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body:is(.theme-dark, .theme-light) .ui44-catalog-subheadline {
  overflow: hidden;
  color: var(--44ui-text-secondary, var(--os-color-ink-secondary));
  font: 400 11px/14px var(--44ui-font-app);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:is(.theme-dark, .theme-light) .ui44-catalog-meta {
  overflow: hidden;
  color: var(--44ui-text-secondary, var(--os-color-ink-secondary));
  font: 400 10px/13px var(--44ui-font-app);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:is(.theme-dark, .theme-light) .ui44-catalog-card:focus-visible .ui44-catalog-art {
  outline-color: var(--44ui-input-border-focus);
  box-shadow: var(--44ui-elevation-raised);
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light) .ui44-catalog-card:hover .ui44-catalog-art {
    transform: scale(1.018);
    box-shadow: var(--44ui-elevation-raised);
    filter: saturate(1.035) contrast(1.01);
  }
}

@media (max-width: 1080px) and (min-width: 769px) {
  body:is(.theme-dark, .theme-light) :is(.ui44-catalog-grid, .ui44-catalog-shelf) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) :is(.ui44-catalog-grid, .ui44-catalog-shelf) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  body:is(.theme-dark, .theme-light) .ui44-catalog-art {
    border-radius: 12px;
  }

  body:is(.theme-dark, .theme-light) .ui44-catalog-copy {
    gap: 3px;
    padding: 12px 0 2px;
  }

  body:is(.theme-dark, .theme-light) .ui44-catalog-title {
    font: 600 13px/16px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .ui44-catalog-subheadline {
    font: 400 15px/20px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .ui44-catalog-meta {
    font: 400 13px/18px var(--44ui-font-app);
  }
}

@media (max-width: 420px) {
  body:is(.theme-dark, .theme-light) :is(.ui44-catalog-grid, .ui44-catalog-shelf) {
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.theme-dark, .theme-light) .ui44-catalog-art {
    transition: outline-color 140ms ease;
  }

  @media (hover: hover) and (pointer: fine) {

  body:is(.theme-dark, .theme-light) .ui44-catalog-card:hover .ui44-catalog-art {
    transform: none;
    filter: none;
  }
  }
}

/* Ordinary mobile panels stay inside the page gutter. Canonical panel
   ownership defines their width, margins, border, and radius. */
@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light)
    .community-app-page
    .social-feed-panel.ui44-panel,
body:is(.theme-dark, .theme-light)
    .social-thread-page
    > section
    > .social-feed-list.ui44-panel,
  body:is(.theme-dark, .theme-light)
    .library-achievements-section
    .library-achievement-list.ui44-panel,
  body:is(.theme-dark, .theme-light)
    .view-tracklist-section
    > .view-tracklist.ui44-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    border: 1px solid var(--44ui-panel-border);
    border-radius: 16px;
  }

  body:is(.theme-dark, .theme-light)
    :is(
      .community-app-page .social-feed-panel.ui44-panel,
      .social-thread-page > section > .social-feed-list.ui44-panel,
      .library-achievements-section .library-achievement-list.ui44-panel
    ) {
    background: var(--44ui-material-glass);
    box-shadow: var(--44ui-elevation-flat);
  }
}

/* Family-specific Studio track geometry layered on the canonical panel. */
body:is(.theme-dark, .theme-light)
  .studio-track-panel.ui44-panel.ui44-panel-glass {
  border-radius: var(--44ui-radius-glass);
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
  backdrop-filter: var(--44ui-glass-filter);
  -webkit-backdrop-filter: var(--44ui-glass-filter);
}

body:is(.theme-dark, .theme-light)
  .view-detail-single
  > .view-tracklist-section.view-section {
  padding-top: clamp(36px, 4vw, 56px);
}

body:is(.theme-dark, .theme-light)
  .view-tracklist-section
  > .item-community-header {
  display: flex;
  margin-bottom: 20px;
}

body:is(.theme-dark, .theme-light)
  .view-tracklist-section
  > .item-community-header
  .view-section-title {
  margin: 0;
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light)
    .view-detail-single
    > .view-section {
    padding-inline: var(--os-content-inset);
  }

  body:is(.theme-dark, .theme-light)
    .view-detail-single
    > .view-tracklist-section.view-section {
    padding-top: 32px;
  }

  body:is(.theme-dark, .theme-light)
    :is(
      .community-app-page .social-feed-panel.ui44-panel,
      .social-thread-page > section > .social-feed-list.ui44-panel,
      .library-achievements-section .library-achievement-list.ui44-panel,
      .view-tracklist-section > .view-tracklist.ui44-panel
    ) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    border: 1px solid var(--44ui-panel-border);
    border-radius: 16px;
  }

  body:is(.theme-dark, .theme-light)
    :is(
      .community-app-page .social-feed-panel.ui44-panel-glass,
      .social-thread-page > section > .social-feed-list.ui44-panel-glass,
      .library-achievements-section .library-achievement-list.ui44-panel-glass
    ) {
    background: var(--44ui-material-glass);
    box-shadow: var(--44ui-elevation-flat);
  }

}

/* Wave 2: approved Community post composition. The domain component retains
   real profile links and interaction behavior while consuming the same row,
   identity, type, action, and spacing grammar as the UI reference pages. */
body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  gap: 0;
  padding: 20px 24px;
  border: 0;
}

body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community .ui44-community-copy {
  gap: 8px;
  padding: 0;
}

body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community .ui44-community-author-line {
  gap: 10px;
}

body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community .ui44-community-author-line .social-avatar {
  width: 34px;
  height: 34px;
  border: 1px solid var(--44ui-panel-border);
  font-size: 10px;
}

body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community .social-row-meta {
  gap: 8px;
  font: 400 11px/14px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community .social-author-name {
  font-weight: 700;
}

body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community .ui44-community-body {
  margin: 0;
  color: var(--44ui-text-secondary);
  font: 400 13px/18px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community .ui44-community-actions {
  gap: 4px;
  min-height: 44px;
  margin-block: -3px -7px;
}

body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community .ui44-row-action {
  min-width: 44px;
  min-height: 44px;
  gap: 6px;
  margin: 0;
  padding: 0 10px;
  font: 650 12px/1 var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community .ui44-row-action-icon {
  width: 20px;
  height: 20px;
}

body:is(.theme-dark, .theme-light) .social-feed-panel.ui44-panel > .social-feed-post {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

body:is(.theme-dark, .theme-light) .social-feed-panel.ui44-panel > .social-feed-post + .social-feed-post {
  border-top: 1px solid var(--44ui-panel-border);
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community {
    padding: 16px;
  }

  body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community .social-row-meta {
    font: 400 15px/20px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community .ui44-community-body {
    font: 400 17px/24px var(--44ui-font-app);
  }
}

/* Canonical production panel ownership. Explicit ui44 classes own material,
   geometry, elevation, and overflow behavior at the source boundary. */
body:is(.theme-dark, .theme-light) .ui44-panel.ui44-panel {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--44ui-panel-border);
}

body:is(.theme-dark, .theme-light) .ui44-panel.ui44-panel-glass {
  border-radius: var(--44ui-radius-glass);
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
  backdrop-filter: var(--44ui-glass-filter);
  -webkit-backdrop-filter: var(--44ui-glass-filter);
}

body:is(.theme-dark, .theme-light) .ui44-panel.ui44-panel-overflow-clip {
  overflow: hidden;
}

body:is(.theme-dark, .theme-light) .ui44-panel.ui44-panel-overflow-visible {
  overflow: visible;
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .ui44-panel.ui44-panel-glass {
    border-radius: 16px;
  }
}

/* Canonical production input API. Source markup opts into these classes
   directly; domain selectors below only own composed-field layout. */
body:is(.theme-dark, .theme-light) .ui44-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--44ui-control-height);
  min-height: var(--44ui-control-height);
  padding: 0 16px;
  border: 1px solid var(--44ui-input-border);
  border-radius: var(--44ui-radius-input);
  outline: 1px solid transparent;
  outline-offset: 2px;
  background: var(--44ui-input-background);
  box-shadow: none;
  color: var(--44ui-input-text);
  font: 400 13px/18px var(--44ui-font-app);
  letter-spacing: 0;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    outline-color 140ms ease;
}

body:is(.theme-dark, .theme-light) .ui44-input::placeholder {
  color: var(--44ui-input-placeholder);
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light) .ui44-input:not(.ui44-input-bare):hover {
    background: var(--44ui-input-background-hover);
  }
}

body:is(.theme-dark, .theme-light)
  .ui44-input:not(.ui44-input-bare):is(:focus, :focus-visible) {
  border-color: var(--44ui-input-border);
  outline-color: var(--44ui-input-border-focus);
  background: var(--44ui-input-background-focus);
  box-shadow: none;
}

body:is(.theme-dark, .theme-light) .ui44-textarea:not(.ui44-input-bare) {
  height: auto;
  min-height: 132px;
  padding: 16px;
  resize: vertical;
}

body:is(.theme-dark, .theme-light) .ui44-input.ui44-input-bare {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--44ui-input-text);
}

body:is(.theme-dark, .theme-light) .ui44-input.ui44-input-bare:is(:focus, :focus-visible) {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

body:is(.theme-dark, .theme-light) .ui44-composed-field {
  border: 1px solid var(--44ui-input-border);
  border-radius: var(--44ui-radius-input);
  background: var(--44ui-input-background);
  box-shadow: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    outline-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light) .ui44-composed-field:hover {
    background: var(--44ui-input-background-hover);
  }
}

body:is(.theme-dark, .theme-light) .ui44-composed-field:focus-within {
  border-color: var(--44ui-input-border);
  background: var(--44ui-input-background-focus);
}

body:is(.theme-dark, .theme-light) .ui44-composed-field-search {
  min-height: var(--44ui-control-height);
  border-radius: 999px;
}

body:is(.theme-dark, .theme-light) .ui44-composed-field-editor {
  padding: 14px 16px;
}

body:is(.theme-dark, .theme-light) .ui44-composed-field-editor > .ui44-textarea {
  resize: vertical;
}

body:is(.theme-dark, .theme-light) .ui44-native-input {
  accent-color: var(--os-color-accent);
  color: var(--44ui-input-text);
  font: 400 13px/18px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-native-input:focus-visible {
  outline: 2px solid var(--44ui-input-border-focus);
  outline-offset: 3px;
}

body:is(.theme-dark, .theme-light) .ui44-checkbox-input {
  width: 20px;
  height: 20px;
  min-width: 20px;
}

body:is(.theme-dark, .theme-light) .ui44-range-input {
  min-height: var(--44ui-target);
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .ui44-input {
    border-radius: 12px;
    font: 400 17px/24px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .ui44-input.ui44-input-bare {
    border-radius: 0;
  }

  body:is(.theme-dark, .theme-light) .ui44-composed-field:not(.ui44-composed-field-search) {
    border-radius: 12px;
  }

  body:is(.theme-dark, .theme-light) .ui44-native-input {
    font: 400 17px/24px var(--44ui-font-app);
  }
}

/* Menus size to content and keep highlights inside the panel radius. */
:where(
  .os-popover,
  .page-filter-popover,
  .library-filter-popover,
  .tag-select-menu
) {
  width: max-content;
  min-width: 0;
  max-width: min(320px, calc(100vw - 32px));
  padding: var(--44ui-menu-inset);
}

:where(
  .os-popover-item,
  .page-filter-option,
  .library-filter-option,
  .tag-select-menu button
) {
  min-height: 40px;
  padding-inline: 14px;
  border-radius: var(--44ui-menu-item-radius);
  font: 500 13px/16px var(--44ui-font-app);
  letter-spacing: 0;
  white-space: nowrap;
}

/* Content rows and identity. */
:where(
  .dashboard-list-row,
  .product-review-row,
  .product-update-row,
  .library-achievement-row,
  .social-feed-list .social-row,
  .notification-page-row
) {
  min-height: var(--44ui-target);
  padding: var(--44ui-row-y) var(--44ui-row-x);
}

:where(
  .dashboard-list-row + .dashboard-list-row,
  .product-review-row + .product-review-row,
  .product-update-row + .product-update-row,
  .library-achievement-row + .library-achievement-row,
  .social-feed-list .social-row + .social-row
) {
  border-top: 1px solid var(--44ui-panel-border);
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .dashboard-list-row,
    .library-achievement-row,
    .social-feed-list .social-row
  ):hover {
    background: var(--44ui-interactive-hover);
  }
}

:where(
  .social-avatar:not(.social-avatar-large),
  .product-review-avatar,
  .library-creator-avatar,
  .notification-art-user
) {
  width: var(--44ui-avatar-inline);
  height: var(--44ui-avatar-inline);
  flex: 0 0 var(--44ui-avatar-inline);
  border-radius: 50%;
}

.social-row {
  grid-template-columns: var(--44ui-avatar-inline) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.social-row > a:first-child {
  align-self: start;
}

.social-row-main {
  gap: 6px;
}

.social-row-meta,
.product-review-author {
  min-height: var(--44ui-avatar-inline);
  align-items: center;
}

.social-actions {
  gap: 4px;
}

.social-action {
  padding-inline: 10px;
  border-radius: 999px;
}

/* Community reactions remain easy to hit, but their visual treatment is a
   compact pill rather than a tall square row of controls. */
.social-actions {
  margin-top: 2px;
}

.social-action {
  min-width: 44px;
  min-height: var(--44ui-target);
  padding: 0 10px;
  margin: 0;
}

/* Compact, stable tracklists. */
.view-track-row {
  grid-template-columns: 44px minmax(0, 1fr) 54px;
  gap: 12px;
  min-height: var(--44ui-target);
  padding: 14px 16px;
  border-top-color: var(--44ui-panel-border);
}

.view-track-leading {
  width: 44px;
  height: var(--44ui-target);
}

.view-track-title,
.ui44-overflow-track-title {
  min-width: 0;
  overflow: hidden;
  color: var(--os-color-ink);
  font: 400 13px/16px var(--44ui-font-app);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-track-duration {
  width: 54px;
  color: var(--os-color-ink-secondary);
  font: 400 10px/13px var(--44ui-font-app);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ui44-overflow-track-title-inner {
  display: inline-block;
  min-width: max-content;
}

.ui44-overflow-track-title[data-overflow="true"][data-engaged="true"]
  .ui44-overflow-track-title-inner,
.view-track-row:focus-visible
  .ui44-overflow-track-title[data-overflow="true"]
  .ui44-overflow-track-title-inner {
  animation: ui44-track-title-scroll var(--ui44-track-scroll-duration, 4s)
    ease-in-out infinite alternate;
}

@media (hover: hover) and (pointer: fine) {
  .view-track-row:hover
    .ui44-overflow-track-title[data-overflow="true"]
    .ui44-overflow-track-title-inner {
    animation: ui44-track-title-scroll var(--ui44-track-scroll-duration, 4s)
      ease-in-out infinite alternate;
  }
}

@keyframes ui44-track-title-scroll {
  0%,
  18% {
    transform: translateX(0);
  }
  82%,
  100% {
    transform: translateX(calc(-1 * var(--ui44-track-overflow, 0px)));
  }
}

/* Preserve card geometry; only connect text and elevation to the system. */
.product-tile-title {
  font: 600 13px/16px var(--44ui-font-app);
  letter-spacing: 0;
}

.product-tile-subtitle {
  font: 400 11px/14px var(--44ui-font-app);
  letter-spacing: 0;
}

/* Product cards use a dedicated creator byline. It stays compact without
   changing subtitles used elsewhere in the operating system. */
body:is(.theme-dark, .theme-light) .product-tile-creator.ui44-catalog-subheadline {
  font: 400 12px/16px var(--44ui-font-app);
  letter-spacing: 0;
}

.product-tile-art {
  box-shadow: var(--os-card-shadow);
}

/* Desktop player is intentionally Paper for the present review wave. The
   mobile sheet remains theme-aware below so it still reads as an extension of
   the mini-player and primary mobile navigation. */
@media (min-width: 769px) {
  body:is(.theme-dark, .theme-light) .music-player-sheet {
    border-color: var(--44ui-panel-border);
    box-shadow: var(--44ui-elevation-raised);
  }
}

/* The earlier desktop material layer intentionally has high specificity.
   These are the final canonical overrides for surfaces that have moved onto
   the new system. */
body:is(.theme-dark, .theme-light)
  :is(
    .glass-panel:not(.radio-setup-card),
    .dashboard-form-step,
    .dashboard-list-surface,
    .social-feed-panel,
    .item-community-surface,
    .item-domain-surface,
    .product-review-list-surface,
    .library-achievement-list,
    .calendar-surface,
    .settings-list,
    .social-feed-composer,
    .social-reply-drawer-form,
    .social-compose-panel,
    .social-inbox-list,
    .social-message-list,
    .social-structured-list,
    .social-structured-metrics,
    .search-profile-list,
    .project-thread-surface,
    .project-composer,
    .project-sidebar-card
  ) {
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-glass);
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
  backdrop-filter: var(--44ui-glass-filter);
  -webkit-backdrop-filter: var(--44ui-glass-filter);
}

/* The Community composer is a Glass panel in the approved composition, not a
   raised input. This wins over its older mobile-only material override. */
body:is(.theme-dark, .theme-light) .community-app-page .social-feed-composer {
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-glass);
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
  backdrop-filter: var(--44ui-glass-filter);
  -webkit-backdrop-filter: var(--44ui-glass-filter);
}

/* Paper menus share one material, radius, elevation, and item rhythm. Their
   individual trigger positions and content layouts remain intentionally
   local, but no longer choose their own surface treatment. */
body:is(.theme-dark, .theme-light)
  :is(
    .os-popover,
    .page-filter-popover,
    .library-filter-popover,
    .tag-select-menu,
    .social-mention-list,
    .rich-editor-toolbar-menu
  ) {
  box-sizing: border-box;
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-paper);
  background: var(--44ui-material-paper);
  box-shadow: var(--44ui-elevation-raised);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:is(.theme-dark, .theme-light)
  :is(
    .os-popover,
    .page-filter-popover,
    .library-filter-popover,
    .tag-select-menu
  ) {
  width: max-content;
  min-width: 0;
  max-width: min(320px, calc(100vw - 32px));
  padding: var(--44ui-menu-inset);
}

body:is(.theme-dark, .theme-light)
  :is(
    .os-popover-item,
    .page-filter-option,
    .library-filter-option,
    .tag-select-menu button,
    .social-mention-option
  ) {
  min-height: var(--44ui-target);
  border-radius: var(--44ui-menu-item-radius);
  font: 500 13px/16px var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light)
  :is(
    .os-popover-item,
    .page-filter-option,
    .library-filter-option,
    .tag-select-menu button
  ) {
  padding: 0 14px;
}

body:is(.theme-dark, .theme-light) .social-mention-option {
  padding: 8px 14px;
}

/* Form-heavy filters deliberately have more breathing room than a compact
   command menu. Their select controls otherwise make the Paper surface feel
   visually cramped. */
body:is(.theme-dark, .theme-light)
  .page-filter-popover:has(.store-filter-group) {
  min-width: min(320px, calc(100vw - 32px));
  padding: 14px;
  gap: 12px;
}

/* Notification content benefits from a wider readable measure. Keeping this
   on its trigger wrapper lets the menu expand leftward from the bell instead
   of inheriting the account-menu positioning rules. */
body:is(.theme-dark, .theme-light)
  .os-topbar-notification-menu
  .os-popover-wide {
  width: min(440px, calc(100vw - 32px));
  min-width: 0;
}

/* Symbol triggers retain their icon while open. Open uses the same neutral
   surface acknowledgement as hover; only an actually applied filter carries
   the accent state. */
body:is(.theme-dark, .theme-light)
  :is(
    .page-filter-menu-open > .page-filter-button,
    .os-topbar-icon-button-active
  ) {
  background: var(--44ui-interactive-hover);
  border-color: var(--44ui-panel-border);
  box-shadow: none;
}

body:is(.theme-dark, .theme-light) .page-filter-button.page-filter-button-active {
  border-color: var(--os-color-accent);
  background: color-mix(in srgb, var(--os-color-accent) 18%, var(--44ui-interactive-hover));
  box-shadow: none;
}

body:is(.theme-dark, .theme-light)
  .page-filter-menu-open
  > .studio-create-button
  > span {
  transform: translateY(-1px);
}

/* Account choices benefit from a modestly wider measure than a command menu. */
body:is(.theme-dark, .theme-light)
  .os-topbar-account-menu
  .os-account-popover {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 32px);
}

body:is(.theme-dark, .theme-light) .os-account-menu-item {
  min-height: 58px;
  gap: 12px;
  padding-block: 8px;
}

body:is(.theme-dark, .theme-light) .os-account-menu-item > .os-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--os-color-ink-secondary);
}

body:is(.theme-dark, .theme-light) .os-account-menu-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

body:is(.theme-dark, .theme-light) .os-account-menu-copy strong {
  color: var(--os-color-ink);
  font: 650 14px/18px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .os-account-menu-copy span {
  overflow: hidden;
  color: var(--os-color-ink-secondary);
  font: 400 12px/16px var(--44ui-font-app);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {

body:is(.theme-dark, .theme-light)
  :is(
    .os-popover-item:hover,
    .page-filter-option:hover,
    .library-filter-option:hover,
    .tag-select-menu button:hover,
    .social-mention-option:hover
  ) {
  background: var(--44ui-interactive-hover);
}
}

/* Rich editor swatches are a compact Paper-menu variant. */
body:is(.theme-dark, .theme-light) .rich-editor-toolbar-menu {
  min-width: 200px;
  padding: 12px;
}

/* Searchable tag selection remains an input surface, while its results list
   participates in the shared Paper-menu family above. */
body:is(.theme-dark, .theme-light) .tag-select-control {
  border-color: var(--44ui-input-border);
  border-radius: var(--44ui-radius-input);
  background: var(--44ui-input-background);
  box-shadow: none;
}

body:is(.theme-dark, .theme-light) .tag-select-control:focus-within {
  border-color: var(--44ui-input-border);
  background: var(--44ui-input-background-focus);
  box-shadow: 0 0 0 1px var(--44ui-input-border-focus);
}

/* Canonical production text-entry family. Every ordinary text, date, URL,
   email, password, and textarea surface uses one material, border, and focus
   response. Search and composer shells keep their distinct geometry, but use
   these same surface values. */
body:is(.theme-dark, .theme-light)
  :is(
    .os-input-field,
    .os-input-textarea,
    .profile-edit-input,
    .dashboard-field
      > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .dashboard-field > select,
    .dashboard-field > textarea,
    .social-message-form input,
    .social-message-form textarea,
    .item-community-composer input,
    .item-community-composer textarea,
    .social-feed-composer input,
    .social-feed-composer textarea,
    .social-reply-drawer-form input,
    .social-reply-drawer-form textarea
  ) {
  box-sizing: border-box;
  border-color: var(--44ui-input-border);
  background: var(--44ui-input-background);
  box-shadow: none;
  color: var(--44ui-input-text);
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light)
    :is(
      .os-input-field,
      .os-input-textarea,
      .profile-edit-input,
      .dashboard-field
        > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
      .dashboard-field > select,
      .dashboard-field > textarea,
      .social-message-form input,
      .social-message-form textarea,
      .item-community-composer input,
      .item-community-composer textarea,
      .social-feed-composer input,
      .social-feed-composer textarea,
      .social-reply-drawer-form input,
      .social-reply-drawer-form textarea
    ):hover {
    background: var(--44ui-input-background-hover);
  }
}

body:is(.theme-dark, .theme-light)
  :is(
    .os-input-field,
    .os-input-textarea,
    .profile-edit-input,
    .dashboard-field
      > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .dashboard-field > select,
    .dashboard-field > textarea,
    .social-message-form input,
    .social-message-form textarea,
    .item-community-composer input,
    .item-community-composer textarea,
    .social-feed-composer input,
    .social-feed-composer textarea,
    .social-reply-drawer-form input,
    .social-reply-drawer-form textarea
  ):is(:focus, :focus-visible) {
  border-color: var(--44ui-input-border);
  outline-color: var(--44ui-input-border-focus);
  background: var(--44ui-input-background-focus);
  box-shadow: none;
}

body:is(.theme-dark, .theme-light) .os-input-textarea {
  min-height: 132px;
  padding: 16px;
  border-radius: var(--44ui-radius-input);
  resize: vertical;
}

/* Authentication previously retained transparent, oversized field overrides.
   It now consumes the exact same text-field component as Studio and Settings. */
body:is(.theme-dark, .theme-light) .login-field .os-input-field {
  min-height: var(--44ui-control-height);
  padding-inline: 16px;
  border-radius: var(--44ui-radius-input);
  background: var(--44ui-input-background);
  box-shadow: none;
}

body:is(.theme-dark, .theme-light) .login-field .os-input-field:is(:focus, :focus-visible) {
  border-color: var(--44ui-input-border);
  outline-color: var(--44ui-input-border-focus);
  background: var(--44ui-input-background-focus);
  box-shadow: none;
}

body:is(.theme-dark, .theme-light) .login-creator-request {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  cursor: pointer;
}

body:is(.theme-dark, .theme-light) .login-creator-request > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body:is(.theme-dark, .theme-light) .login-creator-request strong {
  color: var(--44ui-text-primary);
  font: inherit;
  font-weight: 650;
}

body:is(.theme-dark, .theme-light) .login-creator-request small {
  color: var(--44ui-text-secondary);
  font-size: var(--44ui-type-caption-size);
  line-height: var(--44ui-type-caption-line);
}

body:is(.theme-dark, .theme-light)
  :is(
    .page-search-control,
    .library-search-control,
    .os-topbar-search-form,
    .social-compose-to-row,
    .social-inline-composer-box,
    .social-composer-box,
    .item-community-composer-surface
  ) {
  border-color: var(--44ui-input-border);
  background: var(--44ui-input-background);
  box-shadow: none;
}

body:is(.theme-dark, .theme-light)
  :is(
    .page-search-control,
    .library-search-control,
    .os-topbar-search-form,
    .social-compose-to-row,
    .social-inline-composer-box,
    .social-composer-box,
    .item-community-composer-surface
  ):focus-within {
  border-color: var(--44ui-input-border);
  background: var(--44ui-input-background-focus);
  box-shadow: none;
}

/* Composers are one input component: the outer shell owns the canonical
   material and focus state, while the inner multiline editor stays bare. */
body:is(.theme-dark, .theme-light)
  :is(
    .social-inline-composer-box,
    .social-composer-box,
    .item-community-composer-surface
  )
  > textarea {
  min-height: 0;
  padding: 0;
  border-color: transparent;
  outline-color: transparent;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 769px) {
  body.theme-light {
    --os-control-surface-border: rgba(21, 21, 21, 0.16);
    --os-border-divider: rgba(21, 21, 21, 0.14);
    --os-elevation-panel: var(--44ui-elevation-flat);
  }

  body.theme-dark {
    --os-control-surface-border: rgba(255, 255, 255, 0.14);
    --os-border-divider: rgba(255, 255, 255, 0.12);
    --os-elevation-panel: var(--44ui-elevation-flat);
  }

  body:is(.theme-dark, .theme-light)
    :is(
      .os-input-field,
      .os-input-textarea,
      .profile-edit-input,
      .dashboard-field
        > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
      .dashboard-field > select,
      .dashboard-field > textarea,
      .item-community-composer input,
      .item-community-composer textarea,
      .social-feed-composer input,
      .social-feed-composer textarea,
      .social-reply-drawer-form input,
      .social-reply-drawer-form textarea
    ) {
    border-color: var(--44ui-input-border);
    background: var(--44ui-input-background);
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light)
    :is(
      .os-input-field,
      .os-input-textarea,
      .profile-edit-input,
      .dashboard-field
        > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
      .dashboard-field > select,
      .dashboard-field > textarea,
      .item-community-composer input,
      .item-community-composer textarea,
      .social-feed-composer input,
      .social-feed-composer textarea,
      .social-reply-drawer-form input,
      .social-reply-drawer-form textarea
    ):focus-visible {
    border-color: var(--44ui-input-border);
    background: var(--44ui-input-background-focus);
    box-shadow: 0 0 0 1px var(--44ui-input-border-focus);
  }

  /* Composed entry controls read as one input surface without a second
     elevation inside the parent panel. */
  body:is(.theme-dark, .theme-light)
    :is(
      .social-inline-composer-box,
      .social-composer-box,
      .os-topbar-search-form,
      .page-search-control,
      .library-search-control,
      .social-compose-to-row,
      .item-community-composer-surface
    ) {
    border-color: var(--44ui-input-border);
    background: var(--44ui-input-background);
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light)
    :is(
      .social-inline-composer-box,
      .social-composer-box,
      .os-topbar-search-form,
      .page-search-control,
      .library-search-control,
      .social-compose-to-row,
      .item-community-composer-surface
    ):focus-within {
    border-color: var(--44ui-input-border);
    background: var(--44ui-input-background-focus);
    box-shadow: 0 0 0 1px var(--44ui-input-border-focus);
  }

  body:is(.theme-dark, .theme-light) .studio-track-panel {
    padding: 0;
    border-color: var(--44ui-panel-border);
    background: var(--44ui-material-glass);
    box-shadow: var(--44ui-elevation-flat);
  }

  body:is(.theme-dark, .theme-light) .studio-feature-panel {
    padding: 0;
    border-color: var(--44ui-panel-border);
    background: var(--44ui-material-glass);
    box-shadow: var(--44ui-elevation-flat);
  }

  body:is(.theme-dark, .theme-light)
    .studio-track-panel
    .dashboard-track-editor-list {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light)
    .studio-track-panel
    .dashboard-track-editor-row {
    padding: var(--44ui-row-y) var(--44ui-row-x);
    border-color: var(--44ui-panel-border);
  }

  body:is(.theme-dark, .theme-light)
    .studio-feature-panel
    > :is(.external-links-editor, .studio-video-embed-fields) {
    padding: var(--44ui-panel-inset);
  }

  body:is(.theme-dark, .theme-light) .settings-list {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--44ui-panel-border);
    border-radius: var(--44ui-radius-glass);
    background: var(--44ui-material-glass);
    box-shadow: var(--44ui-elevation-flat);
  }

  body:is(.theme-dark, .theme-light) .settings-list > .settings-row {
    padding-inline: var(--44ui-row-x);
  }

  body:is(.theme-dark, .theme-light)
    .settings-list
    > .settings-row
    + .settings-row {
    border-top-color: var(--44ui-panel-border);
  }

  body:is(.theme-dark, .theme-light)
    .settings-two-column
    .settings-theme-field {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body:is(.theme-dark, .theme-light)
    .settings-two-column
    .settings-accent-field {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

body:is(.theme-dark, .theme-light) .music-player-sheet {
  box-shadow: var(--44ui-elevation-raised);
}

@media (max-width: 900px) and (min-width: 769px) {
  .ui44-form-field-short,
  .ui44-form-field-medium,
  .dashboard-form-grid-3 > * {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light)
    .studio-sample-preview-header
    .studio-native-short-field {
    width: 100%;
    min-width: 0;
  }

  :root,
  body.theme-light,
  body.theme-dark {
    --44ui-page-inset: 18px;
    --44ui-section-gap: 40px;
    --44ui-header-content-gap: 16px;
    --44ui-panel-inset: 16px;
    --44ui-panel-content-gap: 16px;
    --44ui-row-x: 16px;
    --44ui-row-y: 16px;
    --44ui-radius-paper: 16px;
    --44ui-menu-item-radius: 12px;
    --44ui-radius-glass: 16px;
    --44ui-radius-input: 12px;
    --44ui-type-page-title-size: 26px;
    --44ui-type-page-title-line: 32px;
    --44ui-type-section-title-size: 22px;
    --44ui-type-section-title-line: 26px;
    --44ui-type-subsection-title-size: 17px;
    --44ui-type-subsection-title-line: 22px;
    --44ui-type-headline-size: 13px;
    --44ui-type-headline-line: 16px;
    --44ui-type-body-size: 13px;
    --44ui-type-body-line: 18px;
    --44ui-type-callout-size: 12px;
    --44ui-type-callout-line: 15px;
    --44ui-type-subheadline-size: 11px;
    --44ui-type-subheadline-line: 14px;
    --44ui-type-meta-size: 10px;
    --44ui-type-meta-line: 13px;
    --44ui-type-caption-size: 10px;
    --44ui-type-caption-line: 13px;
    --44ui-type-field-label-size: 12px;
    --44ui-type-field-label-line: 15px;
    --44ui-type-control-size: 13px;
    --44ui-type-control-line: 16px;
    --os-app-header-pad-top: 20px;
    --os-app-header-pad-bottom: 20px;
    --os-type-display-size: 26px;
    --os-type-display-line: 32px;
    --os-type-page-title-size: 26px;
    --os-type-page-title-line: 32px;
    --os-type-panel-title-size: 22px;
    --os-type-panel-title-line: 26px;
    --os-type-card-title-size: 13px;
    --os-type-card-title-line: 16px;
    --os-type-body-size: 13px;
    --os-type-body-line: 18px;
    --os-type-body-small-size: 12px;
    --os-type-body-small-line: 15px;
    --os-type-meta-size: 10px;
    --os-type-meta-line: 13px;
    --os-type-button-size: 13px;
    --os-type-button-line: 16px;
  }

  .ui44-page-header {
    padding-block: 20px;
  }

  .ui44-form-field-short,
  .ui44-form-field-medium,
  .ui44-form-field-wide,
  .ui44-form-field-full,
  .dashboard-form-grid > *,
  .dashboard-form-grid-2 > *,
  .dashboard-form-grid-3 > *,
  .profile-edit-fields > *,
  .settings-two-column > * {
    grid-column: 1 / -1;
  }

  .dashboard-form-step {
    padding: var(--44ui-panel-inset);
  }

  /* Filter menus always open directly beneath their right-side trigger. The
     panel grows leftward into the available viewport rather than jumping to a
     page-level fixed position. */
  .page-filter-menu {
    position: relative;
  }

  body:is(.theme-dark, .theme-light)
    :is(
      .page-filter-popover:not(.studio-create-popover),
      .library-filter-popover
    ) {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: max-content;
    min-width: 0;
    max-width: min(240px, calc(100vw - (var(--44ui-page-inset) * 2)));
  }

  body:is(.theme-dark, .theme-light)
    .page-filter-popover:has(.store-filter-group) {
    width: min(280px, calc(100vw - (var(--44ui-page-inset) * 2)));
    min-width: 0;
    max-width: calc(100vw - (var(--44ui-page-inset) * 2));
  }

  body:is(.theme-dark, .theme-light)
    .os-topbar-notification-menu
    .os-popover-wide {
    /* The bell lives near the right edge, so a fixed viewport anchor keeps a
       readable notification measure fully on-screen at every phone width. */
    position: fixed;
    top: calc(var(--os-topbar-height) + 8px);
    right: 10px;
    left: auto;
    width: min(320px, calc(100vw - 20px));
    min-width: 0;
    max-width: calc(100vw - 20px);
  }

  body:is(.theme-dark, .theme-light)
    .os-topbar-account-menu
    .os-account-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(142px, calc(100vw - 20px));
    min-width: 0;
    max-width: calc(100vw - 20px);
  }


  body:is(.theme-dark, .theme-light) .settings-two-column .settings-theme-field,
  body:is(.theme-dark, .theme-light)
    .settings-two-column
    .settings-accent-field {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  body:is(.theme-dark, .theme-light) .studio-track-panel {
    padding: 0;
    border-color: var(--44ui-panel-border);
    background: var(--44ui-material-glass);
    box-shadow: var(--44ui-elevation-flat);
  }

  body:is(.theme-dark, .theme-light) .studio-feature-panel {
    padding: 0;
    border-color: var(--44ui-panel-border);
    background: var(--44ui-material-glass);
    box-shadow: var(--44ui-elevation-flat);
  }

  body:is(.theme-dark, .theme-light)
    .studio-track-panel
    .dashboard-track-editor-list {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light)
    .studio-track-panel
    .dashboard-track-editor-row {
    padding: var(--44ui-row-y) var(--44ui-row-x);
    border-color: var(--44ui-panel-border);
  }

  body:is(.theme-dark, .theme-light)
    .studio-feature-panel
    > :is(.external-links-editor, .studio-video-embed-fields) {
    padding: var(--44ui-panel-inset);
  }

  .hub-section-title,
  .store-app-page .hub-section-title,
  .admin-section-panel .hub-section-title,
  .view-detail-single .hub-section-title,
  .view-detail-single .view-section-title,
  .dashboard-form-section > .hub-section-head .hub-section-title {
    font: 700 28px/34px var(--44ui-font-app);
    letter-spacing: 0;
  }

  .dashboard-form-section > .hub-section-head .hub-section-description {
    font: 400 17px/24px var(--44ui-font-app);
  }

  .view-section-title {
    font: 700 28px/34px var(--44ui-font-app);
  }

  :where(.dashboard-row-title, .social-row-title) {
    font: 600 17px/22px var(--44ui-font-app);
  }

  :where(
    .dashboard-row-subtitle,
    .dashboard-row-meta,
    .social-row-meta,
    .product-review-author,
    .product-domain-meta,
    .product-domain-meta-link
  ) {
    font: 400 15px/20px var(--44ui-font-app);
  }

  :where(
    .social-row-body,
    .product-review-copy > p,
    .product-update-row > p,
    .view-description
  ) {
    font: 400 17px/24px var(--44ui-font-app);
  }

  .studio-publication-status {
    font: 400 15px/20px var(--44ui-font-app);
  }

  .social-row {
    grid-template-columns: var(--44ui-avatar-inline) minmax(0, 1fr);
    gap: 12px;
  }

  :where(
    .dashboard-field-label,
    .profile-edit-label,
    .external-link-service-name
  ) {
    font: 600 15px/20px var(--44ui-font-app);
  }

  :where(
    .os-input-field,
    .profile-edit-input,
    .dashboard-field
      > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .dashboard-field > select,
    .dashboard-field > textarea,
    .social-message-form input,
    .social-message-form textarea
  ) {
    font: 400 17px/24px var(--44ui-font-app);
  }

  .os-button,
  .os-button-compact,
  .os-button-large {
    font: 600 17px/22px var(--44ui-font-app);
  }

  :where(
    .os-button.os-button-danger,
    .os-button.os-button-destructive,
    .os-button.os-button-danger:link
  ) {
    background: #e63946;
    color: #fff;
    border-color: #e63946;
  }

  :where(
    .os-popover-item,
    .page-filter-option,
    .library-filter-option,
    .tag-select-menu button
  ) {
    font: 400 16px/21px var(--44ui-font-app);
  }

  :where(
    .social-avatar:not(.social-avatar-large),
    .product-review-avatar,
    .library-creator-avatar,
    .notification-art-user
  ) {
    width: var(--44ui-avatar-inline);
    height: var(--44ui-avatar-inline);
    flex-basis: var(--44ui-avatar-inline);
  }

  .view-track-row {
    grid-template-columns: 38px minmax(0, 1fr) 48px;
    gap: 10px;
    min-height: var(--44ui-target);
    padding: 11px 14px;
  }

  .view-track-leading,
  .view-tracklist-section .view-track-leading {
    width: 38px;
    height: var(--44ui-target);
  }

  .view-track-title,
  .view-tracklist-section .view-track-title,
  .ui44-overflow-track-title {
    font: 400 15px/20px var(--44ui-font-app);
  }

  .view-track-duration,
  .view-tracklist-section .view-track-duration {
    width: 48px;
    min-width: 48px;
    font: 400 13px/18px var(--44ui-font-app);
  }

  /* Mobile Now Playing is a bottom sheet above unchanged primary navigation. */
  .music-player-overlay {
    inset: var(--os-topbar-height) 0
      calc(var(--os-mobile-dock-height) + env(safe-area-inset-bottom)) 0;
    display: grid;
    place-items: end stretch;
    padding: 0 10px;
    pointer-events: none;
  }

  .music-player-scrim {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: auto;
  }

  body:is(.theme-dark, .theme-light) .music-player-sheet {
    position: relative;
    height: auto;
    max-height: calc(
      100dvh - var(--os-topbar-height) - var(--os-mobile-dock-height) -
        env(safe-area-inset-bottom) - 12px
    );
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, auto);
    padding: 10px 18px 18px;
    overflow: hidden;
    border: 1px solid var(--os-shell-border);
    border-bottom: 0;
    pointer-events: auto;
  }

  .music-player-bar-expanded {
    opacity: 0;
    pointer-events: none;
  }

  .music-player-sheet-main {
    width: 100%;
    min-height: 0;
    max-height: calc(
      100dvh - var(--os-topbar-height) - var(--os-mobile-dock-height) -
        env(safe-area-inset-bottom) - 72px
    );
    align-content: start;
    gap: 12px;
    padding: 0 2px 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .music-player-sheet-art {
    width: min(68vw, 290px, 33dvh);
  }

  .music-player-sheet-copy {
    gap: 3px;
  }

  .music-player-sheet-copy h2 {
    font: 700 22px/28px var(--44ui-font-app);
  }

  .music-player-sheet-copy p {
    font: 400 15px/20px var(--44ui-font-app);
  }

  .music-player-sheet-queue-open {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .music-player-sheet-queue-open .music-player-queue {
    min-height: 0;
    max-height: calc(
      100dvh - var(--os-topbar-height) - var(--os-mobile-dock-height) -
        env(safe-area-inset-bottom) - 72px
    );
    overflow: hidden;
  }

  .ui44-elevation-audit-grid {
    grid-template-columns: 1fr;
  }
}

/* Canonical release-track and Sample Pack preview rows. The Glass list owns
   the surface; rows own only interaction, selection, type, and stable
   leading/trailing columns. The domain emitters retain playback, queue,
   context-menu, progress, and download behavior. */
body:is(.theme-dark, .theme-light) .ui44-track-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: var(--44ui-target);
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  outline: 2px solid transparent;
  outline-offset: -3px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, outline-color 140ms ease;
}

body:is(.theme-dark, .theme-light)
  .ui44-track-row
  + .ui44-track-row {
  border-top: 1px solid var(--44ui-panel-border);
}

body:is(.theme-dark, .theme-light) .ui44-track-row-sample {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

body:is(.theme-dark, .theme-light) .ui44-track-leading {
  position: relative;
  display: grid;
  width: 44px;
  height: var(--44ui-target);
  place-items: center;
}

body:is(.theme-dark, .theme-light) .ui44-track-index {
  color: var(--os-color-ink-secondary);
  font: 500 10px/13px var(--44ui-font-app);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-track-title, .ui44-overflow-track-title.ui44-track-title) {
  min-width: 0;
  overflow: hidden;
  color: var(--os-color-ink);
  font: 400 13px/16px var(--44ui-font-app);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:is(.theme-dark, .theme-light) .ui44-track-duration {
  width: 54px;
  min-width: 54px;
  color: var(--os-color-ink-secondary);
  font: 400 10px/13px var(--44ui-font-app);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: right;
}

body:is(.theme-dark, .theme-light) .ui44-track-trailing {
  display: flex;
  min-width: 54px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-track-row-selected, .ui44-track-row[aria-pressed="true"]) {
  background: color-mix(in srgb, var(--os-color-ink) 7%, transparent);
}

body:is(.theme-dark, .theme-light) .ui44-track-row:focus-visible {
  outline-color: var(--44ui-input-border-focus);
  background: var(--44ui-interactive-hover);
}

body:is(.theme-dark, .theme-light)
  .ui44-track-row[aria-disabled="true"] {
  cursor: default;
  opacity: 0.48;
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light)
    .ui44-track-row-interactive:not([aria-disabled="true"]):hover {
    background: var(--44ui-interactive-hover);
  }
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .ui44-track-row {
    grid-template-columns: 38px minmax(0, 1fr) 48px;
    gap: 10px;
    min-height: var(--44ui-target);
    padding: 11px 14px;
  }

  body:is(.theme-dark, .theme-light) .ui44-track-row-sample {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  body:is(.theme-dark, .theme-light) .ui44-track-leading {
    width: 38px;
    height: var(--44ui-target);
  }

  body:is(.theme-dark, .theme-light) .ui44-track-index {
    font: 400 13px/18px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    :is(.ui44-track-title, .ui44-overflow-track-title.ui44-track-title) {
    font: 400 15px/20px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .ui44-track-duration {
    width: 48px;
    min-width: 48px;
    font: 400 13px/18px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .ui44-track-trailing {
    min-width: 48px;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.theme-dark, .theme-light) .ui44-track-row,
  body:is(.theme-dark, .theme-light) .ui44-track-row * {
    transition: none !important;
  }
}

@media (max-width: 420px) {
  :root,
  body.theme-light,
  body.theme-dark {
    --44ui-page-inset: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui44-overflow-track-title-inner,
  .music-player-sheet,
  .music-player-bar {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .ui44-overflow-track-title {
    text-overflow: ellipsis;
  }
}

/* Community composers are intentionally single-surface compositions. The
   composer owns its glass/input treatment; its editable area must never read
   as a second raised field inside that surface. */
body:is(.theme-dark, .theme-light)
  .ui44-composed-field.ui44-composed-field-editor
  > .ui44-textarea.ui44-input.ui44-input-bare {
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--44ui-input-text);
  font: 400 13px/18px var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light) .social-feed-composer-compact > .social-feed-composer-box > textarea {
  min-height: 30px;
}

body:is(.theme-dark, .theme-light) .social-feed-composer-open > .social-feed-composer-box > textarea {
  min-height: 86px;
}

body:is(.theme-dark, .theme-light)
  .ui44-composed-field.ui44-composed-field-editor
  > .ui44-textarea.ui44-input.ui44-input-bare:is(:focus, :focus-visible) {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

body:is(.theme-dark, .theme-light) .ui44-composed-field.ui44-composed-field-editor {
  outline: 1px solid transparent;
  outline-offset: 2px;
  box-shadow: none;
}

body:is(.theme-dark, .theme-light) .ui44-composed-field.ui44-composed-field-editor:focus-within {
  border-color: var(--44ui-input-border);
  outline-color: var(--44ui-input-border-focus);
  background: var(--44ui-input-background-focus);
  box-shadow: none;
}

/* Search and composer owners also define focus behavior. Canonical composed
   fields use one offset outline so the border never reads as a doubled ring. */
body:is(.theme-dark, .theme-light) .ui44-composed-field.ui44-composed-field:focus-within {
  border-color: var(--44ui-input-border);
  outline: 1px solid var(--44ui-input-border-focus);
  outline-offset: 2px;
  background: var(--44ui-input-background-focus);
  box-shadow: none;
}

body:is(.theme-dark, .theme-light)
  .ui44-composer-surface
  .ui44-input.ui44-input-bare {
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

body:is(.theme-dark, .theme-light)
  .community-app-page
  form.social-feed-composer.ui44-composer-surface
  > .social-feed-composer-box
  > textarea.ui44-textarea.ui44-input.ui44-input-bare {
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

body:is(.theme-dark, .theme-light)
  .community-app-page
  form.social-feed-composer.ui44-composer-surface:focus-within {
  border-color: var(--44ui-panel-border);
  outline: 1px solid var(--44ui-input-border-focus);
  outline-offset: 2px;
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
}

/* A canonical field text role. This deliberately wins over older per-page
   font declarations so track names, links, profiles, and text inputs share
   one readable desktop treatment. */
body:is(.theme-dark, .theme-light) :is(
  .os-input-field,
  .os-input-textarea,
  .profile-edit-input,
  .ui44-input,
  .dashboard-field > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .dashboard-field > select,
  .dashboard-field > textarea,
  .social-message-form input,
  .social-message-form textarea
) {
  font: 400 13px/18px var(--44ui-font-app);
  letter-spacing: 0;
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light)
    .community-app-page
    form.social-feed-composer.ui44-composer-surface {
    padding: var(--44ui-panel-inset);
  }

  body:is(.theme-dark, .theme-light) :is(
    .os-input-field,
    .os-input-textarea,
    .profile-edit-input,
    .ui44-input,
    .dashboard-field > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .dashboard-field > select,
    .dashboard-field > textarea,
    .social-message-form input,
    .social-message-form textarea
  ) {
    font: 400 17px/24px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    .ui44-composed-field.ui44-composed-field-editor
    > .ui44-textarea.ui44-input.ui44-input-bare {
    font: 400 17px/24px var(--44ui-font-app);
  }

  /* The primary thread reply is a full-width row. Nested replies keep their
     own indentation; only the main post composer is reset here. */
  body:is(.theme-dark, .theme-light)
    .social-thread-page
    > section
    > .social-feed-list
    > .social-composer-inline-surface {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    margin-inline: 0;
    padding: 16px var(--44ui-page-inset) 20px;
  }

  body:is(.theme-dark, .theme-light)
    .social-thread-page
    > section
    > .social-feed-list
    > .social-composer-inline-surface
    .social-composer-box.ui44-composed-field.ui44-composed-field-editor {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--44ui-input-border);
    border-radius: 12px;
    outline: 1px solid transparent;
    outline-offset: 2px;
    background: var(--44ui-input-background);
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light)
    .social-thread-page
    > section
    > .social-feed-list
    > .social-composer-inline-surface
    .social-composer-box.ui44-composed-field.ui44-composed-field-editor:focus-within {
    border-color: var(--44ui-input-border);
    outline-color: var(--44ui-input-border-focus);
    background: var(--44ui-input-background-focus);
    box-shadow: none;
  }
}

/* Reviewed detail lists, Studio density, Community entry, and specialized
   player variants. Kept last so family-specific behavior remains authoritative. */
body:is(.theme-dark, .theme-light) .ui44-detail-list > .view-row {
  min-height: var(--44ui-target);
  padding: var(--44ui-row-y) var(--44ui-row-x);
  gap: 16px;
}

body:is(.theme-dark, .theme-light) .ui44-detail-list > .view-row:first-child {
  border-top: 0;
}

body:is(.theme-dark, .theme-light) .ui44-detail-list .view-row-label {
  font: 600 13px/16px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-detail-list .view-row-value {
  font: 500 13px/18px var(--44ui-font-app);
}

@media (min-width: 769px) {
  body:is(.theme-dark, .theme-light)
    .dashboard-page
    .dashboard-metric-card.ui44-panel-glass {
    min-height: 112px;
    padding: 20px;
  }

  body:is(.theme-dark, .theme-light) .dashboard-page .studio-item-row {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 20px 24px;
  }

  body:is(.theme-dark, .theme-light) .dashboard-page .studio-item-artwork {
    width: 72px;
    height: 72px;
    border-radius: 16px;
  }

  body:is(.theme-dark, .theme-light)
    .music-player-bar:not(.music-player-bar-expanded) {
    border-radius: 0;
  }

  body:is(.theme-dark, .theme-light) .music-player-sheet {
    width: 100%;
    max-width: none;
    border-radius: 0;
    background: var(--44ui-material-paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .community-app-page .page-compose-button {
    display: grid;
    width: var(--44ui-target);
    height: var(--44ui-target);
    place-items: center;
    padding: 0;
    border: 1px solid var(--44ui-panel-border);
    border-radius: 50%;
    background: var(--44ui-material-glass);
    color: var(--os-color-ink);
    box-shadow: none;
    cursor: pointer;
  }

  body:is(.theme-dark, .theme-light)
    .community-app-page
    .page-compose-button
    > span {
    display: block;
    font-size: 27px;
    font-weight: 360;
    line-height: 1;
    transform: translateY(-1px);
  }

  body:is(.theme-dark, .theme-light)
    .community-app-page
    > .social-feed-composer-compact {
    display: none;
  }

  .music-player-overlay {
    padding-inline: 0;
  }

  .music-player-scrim {
    background: transparent;
  }

  body:is(.theme-dark, .theme-light) .music-player-sheet {
    width: 100%;
    max-width: none;
    border-inline: 0;
    border-radius: 0;
    background: var(--44ui-material-paper);
    box-shadow: var(--44ui-elevation-raised);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body:is(.theme-dark, .theme-light) .ui44-detail-list > .view-row {
    padding: 16px;
    align-items: flex-start;
  }

  body:is(.theme-dark, .theme-light)
    .product-details-section
    .ui44-list-row.ui44-list-row-detail {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }

  body:is(.theme-dark, .theme-light)
    .product-details-section
    :is(.view-row-label, .view-row-value) {
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body:is(.theme-dark, .theme-light) .ui44-detail-list .view-row-label,
  body:is(.theme-dark, .theme-light) .ui44-detail-list .view-row-value {
    font-size: 15px;
    line-height: 20px;
  }
}

/* Wave 3C: production list/row grammar. Source rows declare whether the
   entire row is interactive; informational rows never inherit hover merely
   because they share dashboard markup with links. */
body:is(.theme-dark, .theme-light) .ui44-list-surface {
  display: grid;
  min-width: 0;
  gap: 0;
}

body:is(.theme-dark, .theme-light) .ui44-list-row {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--44ui-target);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: var(--44ui-row-y) var(--44ui-row-x);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--44ui-font-app);
  text-align: left;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}

body:is(.theme-dark, .theme-light)
  .ui44-list-row
  + .ui44-list-row {
  border-top: 1px solid var(--44ui-panel-border);
}

body:is(.theme-dark, .theme-light) .ui44-list-row-interactive {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {

body:is(.theme-dark, .theme-light)
  .ui44-list-row:not(.ui44-list-row-interactive):hover {
  background: transparent;
}
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light)
    .ui44-list-row-interactive:hover,
  body:is(.theme-dark, .theme-light)
    .social-structured-clickable:hover
    > .ui44-list-row-interactive {
    background: var(--44ui-interactive-hover);
  }
}

body:is(.theme-dark, .theme-light)
  .ui44-list-row-interactive:focus-visible,
body:is(.theme-dark, .theme-light)
  .social-structured-clickable:focus-visible {
  outline: 2px solid var(--44ui-input-border-focus);
  outline-offset: -3px;
  background: var(--44ui-interactive-hover);
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-selected, .ui44-list-row[aria-selected="true"], .ui44-list-row[aria-current="true"]) {
  background: color-mix(in srgb, var(--os-color-accent) 12%, transparent);
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row[aria-disabled="true"], .ui44-list-row:disabled) {
  cursor: default;
  opacity: 0.48;
}

body:is(.theme-dark, .theme-light) .ui44-list-row-leading,
body:is(.theme-dark, .theme-light) .ui44-list-row-trailing {
  display: inline-grid;
  min-width: 0;
  place-items: center;
}

body:is(.theme-dark, .theme-light) .ui44-list-row-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

body:is(.theme-dark, .theme-light) .ui44-list-row-title {
  color: var(--os-color-ink);
  font: 600 13px/16px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-list-row-secondary,
body:is(.theme-dark, .theme-light) .ui44-list-row-body,
body:is(.theme-dark, .theme-light) .ui44-row-status {
  color: var(--os-color-ink-secondary);
  font: 400 11px/14px var(--44ui-font-app);
}

/* Production rows retain their domain markup while consuming the same type
   roles as Ui44ListRow. Achievements stay isolated for their dedicated wave. */
body:is(.theme-dark, .theme-light)
  .ui44-list-row:not(.ui44-list-row-achievement)
  :is(
    .dashboard-row-title,
    .view-row-value,
    .checkout-summary-title,
    .social-author-name,
    .product-review-author,
    .product-domain-head h3,
    .social-structured-title,
    .profile-event-row strong
  ) {
  color: var(--os-color-ink);
  font: 600 13px/16px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light)
  .ui44-list-row:not(.ui44-list-row-achievement)
  :is(
    .dashboard-row-subtitle,
    .dashboard-row-meta,
    .view-row-label,
    .product-domain-meta,
    .social-handle,
    .social-note,
    .social-structured-metrics,
    .profile-event-row time,
    .profile-event-row span
  ) {
  color: var(--os-color-ink-secondary);
  font: 400 11px/14px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light)
  .ui44-list-row:not(.ui44-list-row-achievement)
  :is(.social-row-body, .product-domain-body, .profile-event-row p) {
  color: var(--os-color-ink);
  font: 400 13px/18px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light)
  :is(
    .ui44-list-row-dashboard,
    .ui44-list-row-settings,
    .ui44-list-row-detail,
    .ui44-list-row-wide-actions,
    .ui44-list-row-event
  ) {
  grid-template-columns: minmax(0, 1fr) auto;
}

body:is(.theme-dark, .theme-light) .ui44-list-row-radio {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

body:is(.theme-dark, .theme-light) .ui44-list-row-notification {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 14px;
}

body:is(.theme-dark, .theme-light)
  .settings-list
  > .ui44-list-row-settings {
  min-height: var(--44ui-target);
  padding: var(--44ui-row-y) var(--44ui-row-x);
}

body:is(.theme-dark, .theme-light)
  .ui44-list-row-notification
  .notification-art {
  width: 44px;
  height: 44px;
}

body:is(.theme-dark, .theme-light) .ui44-list-row-profile {
  grid-template-columns: var(--44ui-avatar-inline) minmax(0, 1fr);
  gap: 14px;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-update, .ui44-list-row-review, .ui44-list-row-structured-item) {
  grid-template-columns: minmax(0, 1fr);
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-reply, .ui44-list-row-social-structured) {
  grid-template-columns: var(--44ui-avatar-inline) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

body:is(.theme-dark, .theme-light) .ui44-list-row-cart {
  grid-template-columns: minmax(0, 1fr) auto 44px;
}

body:is(.theme-dark, .theme-light) .ui44-list-row-checkout {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  padding: 14px 0;
}

body:is(.theme-dark, .theme-light) .ui44-list-row-inbox {
  grid-template-columns: minmax(0, 1fr);
  color: inherit;
}

body:is(.theme-dark, .theme-light)
  .ui44-list-row-inbox
  > .ui44-profile-row {
  width: 100%;
  min-height: 0;
  grid-template-columns: var(--44ui-avatar-inline) minmax(0, 1fr);
  gap: 14px;
  padding: 0;
  border: 0;
}

body:is(.theme-dark, .theme-light) .social-profile-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body:is(.theme-dark, .theme-light) .ui44-list-row-structured-item {
  gap: 8px;
  border-radius: 0;
}

body:is(.theme-dark, .theme-light)
  .ui44-list-row-structured-item
  + .ui44-list-row-structured-item {
  border-top: 1px solid var(--44ui-panel-border);
}

body:is(.theme-dark, .theme-light) .notification-page-remove {
  width: var(--44ui-target);
  height: var(--44ui-target);
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .ui44-list-row {
    gap: 14px;
    padding: 16px;
  }

  body:is(.theme-dark, .theme-light) .ui44-list-row-title {
    font: 600 17px/22px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .ui44-list-row-secondary,
  body:is(.theme-dark, .theme-light) .ui44-list-row-body,
  body:is(.theme-dark, .theme-light) .ui44-row-status {
    font: 400 15px/20px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    .ui44-list-row:not(.ui44-list-row-achievement)
    :is(
      .dashboard-row-title,
      .view-row-value,
      .checkout-summary-title,
      .social-author-name,
      .product-review-author,
      .product-domain-head h3,
      .social-structured-title,
      .profile-event-row strong
    ) {
    font: 600 17px/22px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    .ui44-list-row:not(.ui44-list-row-achievement)
    :is(
      .dashboard-row-subtitle,
      .dashboard-row-meta,
      .view-row-label,
      .product-domain-meta,
      .social-handle,
      .social-note,
      .social-structured-metrics,
      .profile-event-row time,
      .profile-event-row span
    ) {
    font: 400 15px/20px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    .ui44-list-row:not(.ui44-list-row-achievement)
    :is(.social-row-body, .product-domain-body, .profile-event-row p) {
    font: 400 17px/24px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    :is(.ui44-list-row-wide-actions, .ui44-list-row-event) {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  body:is(.theme-dark, .theme-light)
    :is(.ui44-list-row-wide-actions, .ui44-list-row-event)
    .dashboard-row-actions,
  body:is(.theme-dark, .theme-light)
    .ui44-list-row-event
    .calendar-entry-actions {
    width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  body:is(.theme-dark, .theme-light) .ui44-list-row-notification {
    grid-template-columns: 40px minmax(0, 1fr) 44px;
  }

  body:is(.theme-dark, .theme-light)
    .settings-list
    > .ui44-list-row-settings {
    min-height: var(--44ui-target);
    padding: 16px;
  }

  body:is(.theme-dark, .theme-light)
    .ui44-list-row-notification
    .notification-art {
    width: 40px;
    height: 40px;
  }

  body:is(.theme-dark, .theme-light) .ui44-list-row-checkout {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: 12px 0;
  }
}

/* Wave 3F: canonical achievement display, selection, glyph, and toast
   grammar. Library rows stay static; Studio choice rows retain their real
   checkbox behavior. Dynamic glyph mask URLs remain the one required inline
   value and are not converted into static CSS. */
body:is(.theme-dark, .theme-light) .ui44-achievement-list {
  display: grid;
  overflow: hidden;
}

body:is(.theme-dark, .theme-light) .ui44-achievement-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: var(--44ui-target);
  padding: var(--44ui-row-y) var(--44ui-row-x);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

body:is(.theme-dark, .theme-light)
  .ui44-achievement-row
  + .ui44-achievement-row {
  border-top: 1px solid var(--44ui-panel-border);
}

body:is(.theme-dark, .theme-light) .ui44-achievement-icon {
  position: relative;
  display: grid;
  overflow: hidden;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 12px;
  background: var(--44ui-input-background);
  color: var(--os-color-ink);
  font: 700 11px/14px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-achievement-glyph {
  display: block;
  color: currentColor;
}

body:is(.theme-dark, .theme-light) .ui44-achievement-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
  text-align: left;
}

body:is(.theme-dark, .theme-light) .ui44-achievement-title {
  min-width: 0;
  color: var(--os-color-ink);
  font: 600 13px/16px var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light) .ui44-achievement-secondary {
  min-width: 0;
  color: var(--os-color-ink-secondary);
  font: 400 11px/14px var(--44ui-font-app);
  letter-spacing: 0;
}

body:is(.theme-dark, .theme-light) .ui44-achievement-row-locked .ui44-achievement-icon {
  opacity: 0.48;
  color: var(--os-color-ink-muted);
}

body:is(.theme-dark, .theme-light) .ui44-achievement-row-unlocked .ui44-achievement-icon {
  border-color: color-mix(in srgb, var(--os-color-accent) 34%, var(--44ui-panel-border));
  background: color-mix(in srgb, var(--os-color-accent) 12%, var(--44ui-input-background));
  color: var(--os-color-accent);
  opacity: 1;
}

body:is(.theme-dark, .theme-light) .ui44-achievement-check {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: var(--44ui-panel-border);
  color: var(--os-color-canvas);
  font: 600 15px/1 var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-achievement-row-choice {
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -3px;
  transition: background-color 140ms ease, outline-color 140ms ease;
}

body:is(.theme-dark, .theme-light) .ui44-achievement-row-choice:focus-within {
  outline-color: var(--44ui-input-border-focus);
  background: var(--44ui-interactive-hover);
}

body:is(.theme-dark, .theme-light) .ui44-achievement-control {
  display: grid;
  min-width: var(--44ui-target);
  min-height: var(--44ui-target);
  place-items: center;
  padding: 0;
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light) .ui44-achievement-row-choice:hover {
    background: var(--44ui-interactive-hover);
  }
}

body:is(.theme-dark, .theme-light) .ui44-achievement-toast {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 16px;
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
  backdrop-filter: var(--44ui-glass-filter);
  -webkit-backdrop-filter: var(--44ui-glass-filter);
}

body:is(.theme-dark, .theme-light) .ui44-achievement-toast-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--44ui-panel-border);
  background: var(--44ui-input-background);
  color: var(--os-color-ink);
}

body:is(.theme-dark, .theme-light) .ui44-achievement-toast-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body:is(.theme-dark, .theme-light) .ui44-achievement-toast-eyebrow {
  margin: 0;
  color: var(--os-color-accent);
  font: 500 10px/13px var(--44ui-font-app);
  letter-spacing: 0;
  text-transform: none;
}

body:is(.theme-dark, .theme-light) .ui44-achievement-toast-title {
  color: var(--os-color-ink);
  font: 600 13px/16px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-achievement-toast-body {
  margin: 0;
  color: var(--os-color-ink-secondary);
  font: 400 11px/14px var(--44ui-font-app);
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .ui44-achievement-row {
    gap: 14px;
    padding: 16px;
  }

  body:is(.theme-dark, .theme-light) .ui44-achievement-title {
    font: 600 17px/22px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .ui44-achievement-secondary {
    font: 400 15px/20px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .ui44-achievement-toast {
    top: calc(var(--os-topbar-height) + 12px);
    right: 14px;
    left: 14px;
    width: auto;
    padding: 14px;
    border-radius: 14px;
  }

  body:is(.theme-dark, .theme-light) .ui44-achievement-toast-eyebrow {
    font: 500 12px/16px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .ui44-achievement-toast-title {
    font: 600 17px/22px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .ui44-achievement-toast-body {
    font: 400 15px/20px var(--44ui-font-app);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.theme-dark, .theme-light) .ui44-achievement-toast,
  body:is(.theme-dark, .theme-light) .ui44-achievement-row-choice {
    animation: none !important;
    transition: none !important;
  }
}

/* Wave 4 final cascade lock: historical field-label selectors carry higher
   specificity than the shared :where() grammar above. */
body:is(.theme-dark, .theme-light)
  :is(.dashboard-field-label, .profile-edit-label, .external-link-service-name) {
  font: 600 12px/15px var(--44ui-font-app);
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light)
    :is(.dashboard-field-label, .profile-edit-label, .external-link-service-name) {
    font: 600 15px/20px var(--44ui-font-app);
  }
}

/* Wave 5: Paper is restricted to menus, popovers, and floating selection
   lists. Local trigger positioning remains with the owning component while
   material, inset, item geometry, selection, focus, and responsive clamping
   are canonical here. */
body:is(.theme-dark, .theme-light) .ui44-paper-menu {
  box-sizing: border-box;
  min-width: 0;
  max-width: min(440px, calc(100vw - 32px));
  padding: var(--44ui-menu-inset);
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-paper);
  background: var(--44ui-material-paper);
  box-shadow: var(--44ui-elevation-raised);
  color: var(--os-color-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:is(.theme-dark, .theme-light) .ui44-paper-menu-item {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: var(--44ui-target);
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--44ui-menu-item-radius);
  background: transparent;
  color: inherit;
  font: 500 13px/16px var(--44ui-font-app);
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-paper-menu-item-selected, .ui44-paper-menu-item[aria-selected="true"]) {
  background: var(--44ui-interactive-hover);
}

body:is(.theme-dark, .theme-light) .ui44-paper-menu-item-danger {
  color: #e63946;
}

body:is(.theme-dark, .theme-light) .ui44-paper-menu-item:focus-visible {
  outline: 2px solid var(--44ui-input-border-focus);
  outline-offset: -2px;
  background: var(--44ui-interactive-hover);
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light) .ui44-paper-menu-item:hover:not(:disabled) {
    background: var(--44ui-interactive-hover);
  }

  body:is(.theme-dark, .theme-light) .ui44-paper-menu-item-danger:hover:not(:disabled) {
    background: #e63946;
    color: #fff;
  }
}

/* Status toasts are floating Glass, never Paper dropdowns. */
body:is(.theme-dark, .theme-light) .ui44-floating-toast {
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-glass);
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
  backdrop-filter: var(--44ui-glass-filter);
  -webkit-backdrop-filter: var(--44ui-glass-filter);
}

body:is(.theme-dark, .theme-light) .ui44-segmented {
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--44ui-input-border);
  border-radius: 16px;
  background: var(--44ui-input-background);
}

body:is(.theme-dark, .theme-light) .ui44-segmented-item {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  min-height: var(--44ui-target);
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--os-color-ink-secondary);
  font: 600 13px/16px var(--44ui-font-app);
  text-align: center;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-segmented-item-active, .ui44-segmented-item[aria-checked="true"]) {
  background: var(--44ui-button-background);
  color: var(--44ui-button-text);
}

body:is(.theme-dark, .theme-light) .ui44-segmented-item:focus-visible {
  outline: 2px solid var(--44ui-input-border-focus);
  outline-offset: 1px;
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light)
    .ui44-segmented-item:hover:not(.ui44-segmented-item-active) {
    background: var(--44ui-interactive-hover);
    color: var(--os-color-ink);
  }
}

body:is(.theme-dark, .theme-light) .ui44-segmented-tabs {
  display: flex;
  min-width: 0;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--44ui-input-border);
  border-radius: 16px;
  background: var(--44ui-input-background);
  overflow-x: auto;
  scrollbar-width: none;
}

body:is(.theme-dark, .theme-light) .ui44-segmented-tabs::-webkit-scrollbar {
  display: none;
}

body:is(.theme-dark, .theme-light) .ui44-segmented-tabs > [role="tab"] {
  min-height: var(--44ui-target);
  flex: 0 0 auto;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--os-color-ink-secondary);
  font: 600 13px/16px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light)
  .ui44-segmented-tabs
  > [role="tab"][aria-selected="true"] {
  background: var(--44ui-button-background);
  color: var(--44ui-button-text);
}

body:is(.theme-dark, .theme-light)
  .ui44-segmented-tabs
  > [role="tab"]:focus-visible {
  outline: 2px solid var(--44ui-input-border-focus);
  outline-offset: 1px;
}

body:is(.theme-dark, .theme-light) .ui44-disclosure-trigger {
  min-height: var(--44ui-target);
}

body:is(.theme-dark, .theme-light) .ui44-disclosure-trigger:focus-visible,
body:is(.theme-dark, .theme-light) .ui44-disclosure-content button:focus-visible {
  outline: 2px solid var(--44ui-input-border-focus);
  outline-offset: 2px;
}

body:is(.theme-dark, .theme-light) .ui44-disclosure-content {
  display: grid;
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .ui44-paper-menu {
    max-width: calc(100vw - 28px);
    border-radius: 16px;
  }

  body:is(.theme-dark, .theme-light) .ui44-paper-menu-item {
    border-radius: 12px;
    font: 500 17px/22px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .ui44-segmented {
    border-radius: 14px;
  }

  body:is(.theme-dark, .theme-light) .ui44-segmented-item,
  body:is(.theme-dark, .theme-light) .ui44-segmented-tabs > [role="tab"] {
    padding-inline: 12px;
    border-radius: 10px;
    font: 600 15px/20px var(--44ui-font-app);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.theme-dark, .theme-light)
    :is(.ui44-paper-menu-item, .ui44-segmented-item, .ui44-disclosure-trigger) {
    transition: none;
  }
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light)
    .ui44-paper-menu
    .ui44-paper-menu-item {
    font: 500 17px/22px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    .os-topbar-account-menu
    .ui44-paper-menu.os-account-popover {
    width: min(280px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
  }
}

/* Wave 6: specialized player composition. The compact desktop player uses
   Sidebar-tint Glass; expanded desktop Now Playing sits directly on the real App
   Shell with route content hidden. Mobile retains its existing full-screen
   treatment and safe-area ownership. */
body:is(.theme-dark, .theme-light) .ui44-player-overlay .music-player-scrim {
  background: transparent;
}

body:is(.theme-dark, .theme-light) .ui44-player-sheet {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  border-radius: 0;
  background: var(--44ui-material-paper);
  box-shadow: var(--44ui-elevation-raised);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:is(.theme-dark, .theme-light)
  .ui44-player-sheet
  :is(
    .music-player-sheet-minimize,
    .music-player-sheet-button,
    .music-player-queue-remove
  ) {
  min-width: var(--44ui-target);
  min-height: var(--44ui-target);
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-player-bar, .ui44-player-sheet)
  :is(button, a, input):focus-visible {
  outline: 2px solid var(--44ui-input-border-focus);
  outline-offset: 2px;
}

body:is(.theme-dark, .theme-light) .ui44-player-sheet .music-player-queue-row {
  min-height: 56px;
}

body:is(.theme-dark, .theme-light) .ui44-player-sheet .music-player-sheet-art,
body:is(.theme-dark, .theme-light) .radio-page .radio-hero-cover {
  box-shadow: none;
}

body:is(.theme-dark, .theme-light)
  .os-topbar-cart-button.ui44-symbol-button {
  width: auto;
  min-width: 74px;
  max-width: none;
  height: var(--os-topbar-control-size);
  min-height: var(--os-topbar-control-size);
  grid-template-columns: 20px minmax(26px, auto);
  grid-auto-flow: column;
  gap: 6px;
  padding: 0 8px 0 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

body:is(.theme-dark, .theme-light)
  .os-topbar-cart-button.ui44-symbol-button
  > svg {
  width: 20px;
  height: 20px;
}

body:is(.theme-dark, .theme-light)
  .os-topbar-cart-button.ui44-symbol-button
  .os-topbar-cart-count {
  box-sizing: border-box;
  min-width: 26px;
  height: 26px;
  padding-inline: 7px;
}

@media (min-width: 769px) {
  body.music-player-expanded:is(.theme-dark, .theme-light) .app-main-content {
    visibility: hidden;
  }

  body.music-player-expanded:is(.theme-dark, .theme-light)
    .music-player-bar-expanded {
    display: none;
  }

  body:is(.theme-dark, .theme-light) .ui44-player-overlay {
    background: transparent;
  }

  body:is(.theme-dark, .theme-light)
    .ui44-player-bar:not(.music-player-bar-expanded) {
    border-radius: 0;
    background: var(--44ui-material-glass);
    box-shadow: var(--44ui-elevation-flat);
    backdrop-filter: var(--44ui-glass-filter);
    -webkit-backdrop-filter: var(--44ui-glass-filter);
  }

  body:is(.theme-dark, .theme-light) .ui44-player-sheet {
    height: 100%;
    border: 0;
    background: transparent;
    box-shadow: var(--44ui-elevation-flat);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body:is(.theme-dark, .theme-light)
    .ui44-player-sheet
    .music-player-sheet-minimize {
    top: var(--os-topbar-edge-inset);
    right: calc(
      var(--os-app-frame-inset) + 1px + var(--os-topbar-edge-inset)
    );
    width: var(--os-topbar-control-size);
    height: var(--os-topbar-control-size);
  }

  body:is(.theme-dark, .theme-light)
    .ui44-player-sheet.music-player-sheet-queue-open {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
  }

  body:is(.theme-dark, .theme-light)
    .ui44-player-sheet.music-player-sheet-queue-open
    .ui44-player-queue {
    border-left: 1px solid var(--44ui-panel-border);
    padding: 12px clamp(22px, 3vw, 48px) 0;
  }
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light)
    .os-topbar
    :is(
      .os-topbar-back,
      .os-topbar-icon-button:not(.os-topbar-cart-button),
      .os-topbar-avatar
    ) {
    box-sizing: border-box;
    width: var(--os-topbar-control-size);
    min-width: var(--os-topbar-control-size);
    max-width: var(--os-topbar-control-size);
    height: var(--os-topbar-control-size);
    min-height: var(--os-topbar-control-size);
    max-height: var(--os-topbar-control-size);
    flex: 0 0 var(--os-topbar-control-size);
  }

  body:is(.theme-dark, .theme-light) .os-topbar .os-topbar-avatar {
    border: 0;
    box-shadow: inset 0 0 0 1px
      color-mix(in srgb, var(--os-color-ink) 12%, transparent);
  }

  body:is(.theme-dark, .theme-light) .app-sidebar {
    position: relative;
    z-index: 220;
    height: var(--os-mobile-shell-bottom);
    border-top: 1px solid var(--44ui-panel-border);
    background: var(--44ui-material-paper);
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light) .sidebar-nav-mobile {
    border: 0;
    background: var(--44ui-material-paper);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body:is(.theme-dark, .theme-light) .ui44-player-bar {
    bottom: var(--os-mobile-shell-bottom);
  }

  body:is(.theme-dark, .theme-light) .ui44-player-overlay {
    inset: var(--os-topbar-height) 0
      var(--os-mobile-shell-bottom) 0;
    padding-inline: 0;
  }

  body:is(.theme-dark, .theme-light) .ui44-player-sheet {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-inline: 0;
    border-radius: 0;
  }

  body:is(.theme-dark, .theme-light)
    .ui44-player-sheet
    .music-player-sheet-header {
    position: static;
    min-height: var(--os-topbar-control-size);
  }

  body:is(.theme-dark, .theme-light)
    .ui44-player-sheet
    .music-player-sheet-minimize {
    position: absolute;
    top: var(--os-topbar-edge-inset);
    right: var(--os-topbar-edge-inset);
    width: var(--os-topbar-control-size);
    min-width: var(--os-topbar-control-size);
    max-width: var(--os-topbar-control-size);
    height: var(--os-topbar-control-size);
    min-height: var(--os-topbar-control-size);
    max-height: var(--os-topbar-control-size);
  }

  body:is(.theme-dark, .theme-light)
    .ui44-player-sheet
    .music-player-sheet-main {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
  }

  body:is(.theme-dark, .theme-light)
    .ui44-player-sheet
    :is(
      .music-player-sheet-progress,
      .music-player-sheet-times,
      .music-player-sheet-progress input
    ) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body:is(.theme-dark, .theme-light)
    .ui44-player-sheet
    .music-player-sheet-progress input {
    display: block;
    margin: 0;
  }

  body:is(.theme-dark, .theme-light)
    .ui44-player-sheet
    .music-player-sheet-times
    > span {
    min-width: 0;
  }

  body:is(.theme-dark, .theme-light)
    .ui44-player-sheet.music-player-sheet-queue-open {
    grid-template-rows: var(--os-topbar-control-size) minmax(0, 1fr);
  }

  body:is(.theme-dark, .theme-light)
    .ui44-player-sheet.music-player-sheet-queue-open
    .ui44-player-queue {
    grid-column: 1;
    grid-row: 2;
    height: 100%;
    max-height: none;
    padding: 4px var(--os-page-pad) 0;
  }

  body:is(.theme-dark, .theme-light) .ui44-player-queue .music-player-queue-list {
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
}

/* Account is the personal destination in both shells. Mobile opens it from the
   fifth dock item; desktop opens the same role-aware hub from the avatar-backed
   Account item at the bottom of the Sidebar. */
body:is(.theme-dark, .theme-light) .you-page {
  width: min(100%, 760px);
  margin-inline: auto;
}

body:is(.theme-dark, .theme-light) .you-navigation-copy {
  display: grid;
  min-width: 0;
}

body:is(.theme-dark, .theme-light) .you-mobile-identity {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-top: 16px;
  text-align: center;
}

body:is(.theme-dark, .theme-light) .you-mobile-avatar-link {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  color: var(--os-color-ink);
  text-decoration: none;
}

body:is(.theme-dark, .theme-light)
  .you-mobile-avatar-link
  .social-avatar {
  width: 56px;
  min-width: 56px;
  height: 56px;
  border: 1px solid var(--44ui-panel-border);
  font-size: 16px;
}

body:is(.theme-dark, .theme-light) .you-mobile-identity h1 {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--os-color-ink);
  font: 700 26px/32px var(--44ui-font-app);
  letter-spacing: -0.025em;
  text-align: center;
}

body:is(.theme-dark, .theme-light) .you-navigation {
  overflow: hidden;
}

body:is(.theme-dark, .theme-light)
  .you-navigation
  .you-navigation-row {
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  gap: 14px;
  min-height: 72px;
  padding: 13px 16px;
}

body:is(.theme-dark, .theme-light) .you-navigation-icon {
  width: 22px;
  height: 22px;
  color: var(--os-color-ink-secondary);
}

body:is(.theme-dark, .theme-light) .you-navigation-copy {
  gap: 2px;
}

body:is(.theme-dark, .theme-light) .you-navigation-copy strong {
  overflow: hidden;
  color: var(--os-color-ink);
  font: 650 15px/20px var(--44ui-font-app);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:is(.theme-dark, .theme-light) .you-navigation-copy span {
  overflow: hidden;
  color: var(--os-color-ink-secondary);
  font: 400 13px/18px var(--44ui-font-app);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:is(.theme-dark, .theme-light) .you-navigation-chevron {
  color: var(--os-color-ink-muted);
  font: 300 26px/1 var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .you-logout-action {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

body:is(.theme-dark, .theme-light) .you-logout-action .os-button {
  min-width: 120px;
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .you-page {
    width: 100%;
    gap: 20px;
  }

  body:is(.theme-dark, .theme-light)
    .you-navigation
    .you-navigation-row {
    min-height: 70px;
  }

}

@media (prefers-reduced-motion: reduce) {
  body:is(.theme-dark, .theme-light)
    :is(.ui44-player-bar, .ui44-player-sheet, .ui44-player-queue, .ui44-player-sheet *) {
    animation: none !important;
    transition: none !important;
  }
}

/* Desktop owner-review corrections — July 15, 2026. This is the final
   authoritative cascade layer for the reviewed families and does not alter
   the environment artwork. */
body:is(.theme-dark, .theme-light)
  :is(.settings-theme-field, .settings-landing-field)
  .settings-segment,
body:is(.theme-dark, .theme-light) .social-profile-tabs {
  border-radius: 999px;
}

body:is(.theme-dark, .theme-light)
  :is(.settings-theme-field, .settings-landing-field)
  .settings-segment-item,
body:is(.theme-dark, .theme-light) .social-profile-tabs > [role="tab"] {
  border-radius: 999px;
}

body:is(.theme-dark, .theme-light) .profile-edit-actions {
  width: 100%;
  margin-left: 0;
  justify-content: flex-start;
}

body:is(.theme-dark, .theme-light) .os-popover-footer-link.ui44-paper-menu-item {
  justify-content: center;
  text-align: center;
}

body:is(.theme-dark, .theme-light) .ui44-track-list.ui44-panel-glass {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-glass);
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
  backdrop-filter: var(--44ui-glass-filter);
  -webkit-backdrop-filter: var(--44ui-glass-filter);
}

body:is(.theme-dark, .theme-light)
  .social-row.ui44-list-row-community
  .ui44-community-actions,
body:is(.theme-dark, .theme-light) .ui44-list-row-reply .social-actions {
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {

body:is(.theme-dark, .theme-light)
  .social-action:not(.social-action-danger):not(.social-action-reply-label):hover:not(:disabled) {
  background: transparent;
}
}

@media (hover: hover) and (pointer: fine) {

body:is(.theme-dark, .theme-light)
  .social-action:not(.social-action-danger):hover:not(:disabled)
  .social-action-icon {
  fill: none;
  stroke: currentColor;
}
}

@media (hover: hover) and (pointer: fine) {

body:is(.theme-dark, .theme-light) .social-action-reply-label:hover:not(:disabled) {
  background: transparent;
}
}

body:is(.theme-dark, .theme-light) .social-action-reply-label .social-action-label {
  background: transparent;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-row-action-delete, .social-action-danger, .product-review-delete) {
  margin-left: auto;
}

body:is(.theme-dark, .theme-light)
  .social-row.ui44-list-row-community
  .ui44-row-action.ui44-row-action-delete {
  margin-left: auto;
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light)
    .social-row.ui44-list-row-community
    .ui44-row-action:not(.social-action-reply-label):hover::before {
    background: var(--44ui-interactive-hover);
  }

  body:is(.theme-dark, .theme-light)
    .social-row.ui44-list-row-community
    .ui44-row-action:not(.social-action-danger):hover
    .ui44-row-action-icon {
    fill: none;
    stroke: currentColor;
  }
}

body:is(.theme-dark, .theme-light) .product-review-avatar {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
}

body:is(.theme-dark, .theme-light) .product-review-delete {
  flex: 0 0 44px;
  justify-content: center;
}

body:is(.theme-dark, .theme-light) .external-item-flat-link {
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--os-color-ink-secondary);
  font: 500 13px/18px var(--44ui-font-app);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: none;
}

@media (hover: hover) and (pointer: fine) {

body:is(.theme-dark, .theme-light) .external-item-flat-link:hover {
  border: 0;
  background: transparent;
  color: var(--os-color-ink-secondary);
  box-shadow: none;
  transform: none;
}
}

@media (hover: hover) and (pointer: fine) {

body:is(.theme-dark, .theme-light)
  .external-link-actions-list-item
  .external-profile-icon-link:hover {
  background: transparent;
  color: inherit;
  transform: none;
}
}

body.theme-dark .ui44-achievement-row-locked .library-achievement-icon.ui44-achievement-icon {
  color: #fff;
  opacity: 1;
}

body.theme-light .ui44-achievement-row-locked .library-achievement-icon.ui44-achievement-icon {
  color: #111;
  opacity: 1;
}

body:is(.theme-dark, .theme-light)
  .ui44-achievement-row-unlocked
  .library-achievement-icon.ui44-achievement-icon {
  border-color: color-mix(in srgb, var(--os-color-accent) 34%, var(--44ui-panel-border));
  background: color-mix(in srgb, var(--os-color-accent) 12%, var(--44ui-input-background));
  color: var(--os-color-accent);
  opacity: 1;
}

body.theme-dark
  :is(.ui44-achievement-row-unlocked, .ui44-achievement-row-locked)
  .studio-achievement-icon.ui44-achievement-icon {
  border-color: var(--44ui-panel-border);
  background: var(--44ui-input-background);
  color: #fff;
  opacity: 1;
}

body.theme-light
  :is(.ui44-achievement-row-unlocked, .ui44-achievement-row-locked)
  .studio-achievement-icon.ui44-achievement-icon {
  border-color: var(--44ui-panel-border);
  background: var(--44ui-input-background);
  color: #111;
  opacity: 1;
}

@media (min-width: 769px) {
  body:is(.theme-dark, .theme-light) .music-player-mini-skip,
  body:is(.theme-dark, .theme-light) .music-player-mini-queue {
    display: none;
  }

  body:is(.theme-dark, .theme-light) .ui44-player-bar .music-player-actions {
    justify-content: flex-end;
  }

  body:is(.theme-dark, .theme-light) .os-topbar-notification-menu .os-popover-wide {
    width: 340px;
    min-width: 340px;
    max-width: min(340px, calc(100vw - 32px));
  }

  body:is(.theme-dark, .theme-light)
    .view-track-leading:not(.view-track-leading-current)
    .view-track-play {
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light)
    .view-tracklist-section
    > .ui44-track-list.ui44-panel-glass {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    border: 1px solid var(--44ui-panel-border);
    border-radius: 16px;
    background: var(--44ui-material-glass);
    box-shadow: var(--44ui-elevation-flat);
  }
}

/* Final authoritative tail for the families resolved after the consolidated
   route pass. These rules intentionally follow the review-correction layer. */
body:is(.theme-dark, .theme-light)
  :is(.ui44-button, .os-button, .os-button.os-button-compact, .os-button.os-button-large) {
  height: var(--44ui-target) !important;
  min-height: var(--44ui-target) !important;
}

body:is(.theme-dark, .theme-light) .ui44-type.ui44-type-page-title {
  font: 700 var(--44ui-type-page-title-size)/var(--44ui-type-page-title-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-type.ui44-type-section-title {
  font: 700 var(--44ui-type-section-title-size)/var(--44ui-type-section-title-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-type.ui44-type-subsection-title {
  font: 700 var(--44ui-type-subsection-title-size)/var(--44ui-type-subsection-title-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-type.ui44-type-headline {
  font: 600 var(--44ui-type-headline-size)/var(--44ui-type-headline-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-type.ui44-type-body {
  font: 400 var(--44ui-type-body-size)/var(--44ui-type-body-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-type.ui44-type-callout {
  font: 500 var(--44ui-type-callout-size)/var(--44ui-type-callout-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-type.ui44-type-subheadline {
  font: 400 var(--44ui-type-subheadline-size)/var(--44ui-type-subheadline-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-type.ui44-type-meta {
  font: 400 var(--44ui-type-meta-size)/var(--44ui-type-meta-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-type.ui44-type-caption {
  font: 500 var(--44ui-type-caption-size)/var(--44ui-type-caption-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-type.ui44-type-field-label {
  font: 600 var(--44ui-type-field-label-size)/var(--44ui-type-field-label-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-type.ui44-type-control {
  font: 600 var(--44ui-type-control-size)/var(--44ui-type-control-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .ui44-media-preview {
  overflow: hidden;
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-input);
  background: var(--44ui-input-background);
  box-shadow: none;
}

body:is(.theme-dark, .theme-light) .ui44-media-preview-image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:is(.theme-dark, .theme-light) .ui44-dialog-overlay {
  background: var(--44ui-scrim);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body:is(.theme-dark, .theme-light) .ui44-dialog-scrim {
  background: var(--44ui-scrim);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body:is(.theme-dark, .theme-light) .ui44-dialog-surface.ui44-panel {
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-glass);
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
  color: var(--44ui-text-primary);
  backdrop-filter: var(--44ui-glass-filter);
  -webkit-backdrop-filter: var(--44ui-glass-filter);
}

body:is(.theme-dark, .theme-light) .ui44-dialog-actions {
  border-top: 1px solid var(--44ui-panel-border);
  background: transparent;
}

body:is(.theme-dark, .theme-light)
  .dashboard-status-pill.studio-publication-status {
  display: block;
  width: fit-content;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: 400 var(--44ui-type-subheadline-size)/var(--44ui-type-subheadline-line)
    var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light)
  :where(
    a[href],
    button,
    input:not(.ui44-input-bare):not(.ui44-file-input-hidden),
    select,
    textarea:not(.ui44-input-bare),
    summary,
    [role="button"],
    [role="link"],
    [role="tab"],
    [role="menuitem"],
    [role="radio"],
    [role="switch"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
  outline: 2px solid var(--44ui-input-border-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

body:is(.theme-dark, .theme-light) .ui44-composed-field:focus-within {
  outline: 2px solid var(--44ui-input-border-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light)
    :is(.ui44-type.ui44-type-callout, .ui44-type.ui44-type-caption, .os-type-body-small) {
    font-weight: 400;
  }

  body:is(.theme-dark, .theme-light) .ui44-dialog-surface {
    border-radius: 16px;
  }

  body:is(.theme-dark, .theme-light) .profile-crop-dialog.ui44-dialog-surface {
    border-radius: 16px 16px 0 0;
  }
}

/* Readability lock: field-identifying text always uses primary ink. The
   quieter ink role remains reserved for descriptions and input placeholders. */
body:is(.theme-dark, .theme-light)
  :is(
    .ui44-type.ui44-type-field-label,
    .ui44-form-label,
    .dashboard-field-label,
    .profile-edit-label,
    .external-link-service-name,
    .store-filter-label,
    .social-new-message-label,
    .social-compose-to-label,
    .profile-crop-controls label
  ),
body:is(.theme-dark, .theme-light) .ui44-panel-content-form-field > span {
  color: var(--os-color-ink);
}

/* Product-detail rows lead with their label and quiet the corresponding
   value, matching the same hierarchy in both Store and Library. */
body:is(.theme-dark, .theme-light)
  :is(
    .ui44-detail-list
      .ui44-list-row.ui44-list-row-detail
      .view-row-label,
    .ui44-list-row.ui44-list-row-detail .ui44-detail-label
  ) {
  color: var(--os-color-ink);
  font-weight: 600;
}

body:is(.theme-dark, .theme-light)
  :is(
    .ui44-detail-list
      .ui44-list-row.ui44-list-row-detail
      .view-row-value,
    .ui44-list-row.ui44-list-row-detail .ui44-detail-value
  ) {
  color: var(--os-color-ink-secondary);
  font-weight: 400;
}

/* Empty choice controls use placeholder ink until the user supplies a value. */
body:is(.theme-dark, .theme-light) .ui44-input.ui44-input-empty {
  color: var(--44ui-input-placeholder);
  -webkit-text-fill-color: var(--44ui-input-placeholder);
}

/* Legacy form selectors carry several :not() clauses, so date-like controls
   inside those forms need the semantic empty state at matching specificity. */
body:is(.theme-dark, .theme-light)
  :is(.dashboard-field, .ui44-form-field)
  > input.ui44-input.ui44-input-empty:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  color: var(--44ui-input-placeholder);
  -webkit-text-fill-color: var(--44ui-input-placeholder);
}

body:is(.theme-dark, .theme-light)
  select.ui44-input.ui44-input-empty
  option:not([value=""]) {
  color: var(--os-color-ink);
  -webkit-text-fill-color: var(--os-color-ink);
}

/* Community feed and thread identity rows use one Threads-style alignment:
   avatar rail on the left, username/body/actions in one full-width column. */
body:is(.theme-dark, .theme-light) .ui44-community-author-line,
body:is(.theme-dark, .theme-light) .ui44-reply-author-line {
  width: 100%;
  align-items: center;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-community-avatar-link, .ui44-reply-avatar-link) {
  display: flex;
  width: var(--44ui-avatar-inline);
  height: var(--44ui-avatar-inline);
  flex: 0 0 auto;
  align-items: center;
  align-self: start;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-community-avatar-link, .ui44-reply-avatar-link)
  .social-avatar {
  width: var(--44ui-avatar-inline);
  min-width: var(--44ui-avatar-inline);
  height: var(--44ui-avatar-inline);
  border: 1px solid var(--44ui-panel-border);
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-community-author-line, .ui44-reply-author-line)
  .social-row-meta {
  align-items: center;
  align-self: center;
}

body:is(.theme-dark, .theme-light) .social-row.ui44-list-row-community,
body:is(.theme-dark, .theme-light) .ui44-list-row-reply {
  grid-template-columns: var(--44ui-avatar-inline) minmax(0, 1fr);
  gap: 14px;
}

/* Reply rows use the canonical inset at every breakpoint so their avatar
   center and connector center are always derived from the same geometry. */
body:is(.theme-dark, .theme-light)
  .social-thread-page
  .ui44-list-row-reply {
  padding: var(--44ui-row-y) var(--44ui-row-x);
}

body:is(.theme-dark, .theme-light) .ui44-list-row-reply .ui44-reply-copy {
  gap: 8px;
  width: 100%;
  padding: 0;
}

body:is(.theme-dark, .theme-light) .social-thread-page .social-reply-group,
body:is(.theme-dark, .theme-light) .social-thread-page .social-reply-item {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

body:is(.theme-dark, .theme-light) .social-thread-page .social-reply-group {
  border-top: 1px solid var(--44ui-panel-border);
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: 0;
}

/* A focused reply becomes the page root. Its former parent is intentionally
   absent, so the page starts with the reply itself rather than a divider or
   an incoming connector. Only replies beneath it receive connectors. */
body:is(.theme-dark, .theme-light)
  .social-thread-page
  .social-reply-group.social-reply-group-focused {
  border-top: 0;
}

body:is(.theme-dark, .theme-light) .social-thread-page .social-reply-item {
  margin: 0;
  padding: 0;
  border-top: 0;
}

body:is(.theme-dark, .theme-light)
  .social-thread-page
  .ui44-list-row-reply.social-reply-connect-before::before,
body:is(.theme-dark, .theme-light)
  .social-thread-page
  .ui44-list-row-reply.social-reply-connect-after::after {
  position: absolute;
  z-index: 0;
  left: calc(var(--44ui-row-x) + (var(--44ui-avatar-inline) / 2));
  width: 1px;
  background: var(--44ui-panel-border);
  content: '';
  pointer-events: none;
  transform: translateX(-50%);
}

body:is(.theme-dark, .theme-light)
  .social-thread-page
  .ui44-list-row-reply.social-reply-connect-before::before {
  top: 0;
  height: var(--44ui-row-y);
}

body:is(.theme-dark, .theme-light)
  .social-thread-page
  .ui44-list-row-reply.social-reply-connect-after::after {
  top: calc(var(--44ui-row-y) + var(--44ui-avatar-inline));
  bottom: 0;
}

/* Draft composers are not part of the posted conversation graph. Keep the
   connector hidden until the reply exists as a real row. */
body:is(.theme-dark, .theme-light)
  .social-thread-page
  :is(
    .social-reply-group > .social-inline-composer,
    .social-reply-item > .social-inline-composer
  )::before {
  content: none;
}

body:is(.theme-dark, .theme-light)
  .social-thread-page
  .social-reply-group
  > * {
  position: relative;
  z-index: 1;
}

body:is(.theme-dark, .theme-light)
  .social-thread-page
  .social-reply-group
  > .ui44-list-row-reply,
body:is(.theme-dark, .theme-light)
  .social-thread-page
  .social-reply-item
  > .ui44-list-row-reply {
  border: 0;
}

/* Reply composers use the same safe inset and full content width as posts. */
body:is(.theme-dark, .theme-light)
  .social-thread-page
  > section
  > .social-feed-list
  > .social-composer-inline-surface,
body:is(.theme-dark, .theme-light)
  .social-thread-page
  .social-reply-group
  > .social-inline-composer,
body:is(.theme-dark, .theme-light)
  .social-thread-page
  .social-reply-item
  .social-inline-composer {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin-inline: 0;
  padding: var(--os-row-inset-y) var(--os-row-inset-x);
}

body:is(.theme-dark, .theme-light)
  .social-thread-page
  :is(.social-composer-box, .social-inline-composer-box) {
  width: 100%;
  min-width: 0;
}

/* Community posts and replies share one action geometry. The reaction slot is
   stable whether or not a count exists, so Reply never shifts horizontally. */
body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-community, .ui44-list-row-reply)
  .social-actions {
  --44ui-community-action-gap: 2px;
  --44ui-community-like-slot: 60px;
  gap: var(--44ui-community-action-gap);
  flex-wrap: nowrap;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-community, .ui44-list-row-reply)
  .social-action-like {
  width: var(--44ui-community-like-slot);
  min-width: var(--44ui-community-like-slot);
  flex: 0 0 var(--44ui-community-like-slot);
  justify-content: flex-start;
}

body:is(.theme-dark, .theme-light) .social-thread-page .social-reply-view-all {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  align-items: center;
  padding: 8px var(--os-row-inset-x) 14px
    calc(var(--os-row-inset-x) + var(--44ui-avatar-inline) + 14px);
  color: var(--os-color-ink);
  font-size: var(--os-font-size-body);
  font-weight: 600;
  text-decoration: none;
}

/* Post actions share one neutral ink and one hover surface. A heart is the
   only action that can become filled, and only after it has been selected. */
body:is(.theme-dark, .theme-light) .social-action-danger {
  color: var(--os-color-ink);
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-community, .ui44-list-row-reply)
  .social-action {
  color: var(--os-color-ink);
  background: transparent;
}

body:is(.theme-dark, .theme-light) .social-action-like[data-liked="true"] {
  color: var(--os-color-ink);
  background: transparent;
}

body:is(.theme-dark, .theme-light)
  .social-action-like[data-liked="true"]
  .social-action-icon {
  fill: currentColor;
  stroke: currentColor;
}

/* The like control reserves one stable slot so the Reply icon never shifts.
   Its inner hit surface wraps the visible content: circle without a count,
   pill with a count. */
body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-community, .ui44-list-row-reply)
  .social-action-like {
  padding: 0 4px;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-community, .ui44-list-row-reply)
  .social-action-like::before {
  content: none;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-community, .ui44-list-row-reply)
  .social-action-like-hit {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 50%;
  background: transparent;
  transition: background-color 140ms ease;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-community, .ui44-list-row-reply)
  .social-action-like-hit-count {
  width: auto;
  min-width: 32px;
  padding: 0 6px;
  border-radius: 999px;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-community, .ui44-list-row-reply)
  .social-action-danger::before {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light) .social-action-danger:hover:not(:disabled) {
    color: var(--os-color-ink);
    background: var(--44ui-interactive-hover);
  }

  body:is(.theme-dark, .theme-light)
    :is(.ui44-list-row-community, .ui44-list-row-reply)
    .social-author-name:hover {
    color: var(--os-color-accent);
  }

  body:is(.theme-dark, .theme-light)
    :is(.ui44-list-row-community, .ui44-list-row-reply)
    .social-action:hover:not(:disabled) {
    color: var(--os-color-ink);
    background: transparent;
  }

  body:is(.theme-dark, .theme-light)
    :is(.ui44-list-row-community, .ui44-list-row-reply)
    .social-action:hover:not(:disabled)::before {
    background: var(--44ui-interactive-hover);
  }

  body:is(.theme-dark, .theme-light)
    :is(.ui44-list-row-community, .ui44-list-row-reply)
    button.social-action-like:hover:not(:disabled)
    .social-action-like-hit {
    background: var(--44ui-interactive-hover);
  }

  body:is(.theme-dark, .theme-light)
    :is(.ui44-list-row-community, .ui44-list-row-reply)
    .social-action-like:hover:not(:disabled):not([data-liked="true"])
    .social-action-icon {
    fill: none;
    stroke: currentColor;
  }

  body:is(.theme-dark, .theme-light)
    :is(.ui44-list-row-community, .ui44-list-row-reply)
    .social-action:not(.social-action-like):hover:not(:disabled)
    .social-action-icon {
    fill: none;
    stroke: currentColor;
  }

  body:is(.theme-dark, .theme-light)
    :is(.ui44-list-row-community, .ui44-list-row-reply)
    .social-action-like[data-liked="true"]:hover:not(:disabled)
    .social-action-icon {
    fill: currentColor;
    stroke: currentColor;
  }
}

/* Profile navigation follows the content-rail model: identity first, fixed
   actions preserved, then flat scrollable tabs bounded by hairline dividers. */
body:is(.theme-dark, .theme-light) .social-profile-page {
  gap: 16px;
}

body:is(.theme-dark, .theme-light) .social-profile-page .social-profile-head {
  gap: 16px;
  padding-bottom: 0;
}

body:is(.theme-dark, .theme-light) .social-profile-page .social-profile-main {
  padding-top: 16px;
}

body:is(.theme-dark, .theme-light) .social-profile-page .social-profile-identity {
  gap: 16px;
}

body:is(.theme-dark, .theme-light) .social-profile-page .social-profile-text {
  gap: 6px;
}

body:is(.theme-dark, .theme-light)
  .social-profile-page
  .social-profile-external-links {
  gap: 10px;
  margin-top: 0;
}

body:is(.theme-dark, .theme-light)
  .social-profile-page
  .external-profile-icon-link {
  width: 28px;
  height: 28px;
  border-radius: 0;
  transition: none;
}

body:is(.theme-dark, .theme-light) .social-profile-page .social-profile-link-row {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 10px;
}

body:is(.theme-dark, .theme-light)
  .social-profile-page
  .social-profile-link-row
  .social-profile-actions {
  width: auto;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 0;
}

@media (min-width: 769px) {
  body:is(.theme-dark, .theme-light)
    .social-profile-page
    .social-profile-avatar-button,
  body:is(.theme-dark, .theme-light)
    .social-profile-page
    .social-profile-identity
    .social-avatar-large {
    width: 108px;
    height: 108px;
  }

  body:is(.theme-dark, .theme-light)
    .social-profile-page
    .social-profile-link-row
    .social-profile-actions {
    order: 1;
    margin-left: 0;
  }

  body:is(.theme-dark, .theme-light)
    .social-profile-page
    .social-profile-link-row
    .social-profile-external-links {
    order: 2;
    margin-left: auto;
  }
}

body:is(.theme-dark, .theme-light) .social-profile-page .social-profile-toolbar {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 4px;
  border-top: 1px solid var(--44ui-panel-border);
  border-bottom: 1px solid var(--44ui-panel-border);
}

body:is(.theme-dark, .theme-light)
  .social-profile-page
  .social-profile-toolbar
  .social-profile-tabs {
  display: flex;
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 100%;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scroll-padding-inline: 0;
}

body:is(.theme-dark, .theme-light)
  .social-profile-page
  .social-profile-tabs::-webkit-scrollbar {
  display: none;
}

body:is(.theme-dark, .theme-light)
  .social-profile-page
  .social-profile-tabs
  > [role="tab"] {
  position: relative;
  min-width: max-content;
  min-height: 56px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--os-color-ink-secondary);
  font: 600 14px/18px var(--44ui-font-app);
  white-space: nowrap;
  cursor: pointer;
  transition: color 140ms ease;
}

body:is(.theme-dark, .theme-light)
  .social-profile-page
  .social-profile-tabs
  > [role="tab"][aria-selected="true"] {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--os-color-ink);
}

body:is(.theme-dark, .theme-light)
  .social-profile-page
  .social-profile-tabs
  > [role="tab"][aria-selected="true"]::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--os-color-ink);
  content: '';
}

body:is(.theme-dark, .theme-light)
  .social-profile-page
  .social-profile-posts.ui44-panel {
  display: grid;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-glass);
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
}

body:is(.theme-dark, .theme-light)
  .social-profile-page
  .social-profile-posts
  > .ui44-list-row-community
  + .ui44-list-row-community {
  border-top: 1px solid var(--44ui-panel-border);
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light)
    .social-profile-page
    :is(.external-profile-icon-link, .social-profile-tabs > [role="tab"]):hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  body:is(.theme-dark, .theme-light)
    .social-profile-page
    .social-profile-tabs
    > [role="tab"]:hover {
    color: var(--os-color-ink);
  }
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .social-profile-page {
    gap: 12px;
  }

  body:is(.theme-dark, .theme-light) .social-profile-page .social-profile-head {
    gap: 14px;
  }

  body:is(.theme-dark, .theme-light) .social-profile-page .social-profile-main {
    gap: 14px;
    padding-top: 12px;
  }

  body:is(.theme-dark, .theme-light) .social-profile-page .social-profile-identity {
    column-gap: 12px;
    row-gap: 2px;
  }

  body:is(.theme-dark, .theme-light)
    .social-profile-page
    .social-profile-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-column: 1 / -1;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    gap: 14px;
    margin-top: 12px;
  }

  body:is(.theme-dark, .theme-light)
    .social-profile-page
    .social-profile-link-row
    .social-profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    gap: 10px;
    margin: 0;
  }

  body:is(.theme-dark, .theme-light)
    .social-profile-page
    .social-profile-link-row
    .social-profile-actions
    .os-button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
  }

  body:is(.theme-dark, .theme-light)
    .social-profile-page
    .social-profile-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 0;
    border: 0;
  }

  body:is(.theme-dark, .theme-light)
    .social-profile-page
    .social-profile-toolbar
    .social-profile-tabs {
    order: 2;
    width: calc(100% + (2 * var(--os-content-inset)));
    max-width: none;
    align-self: stretch;
    margin-inline: calc(-1 * var(--os-content-inset));
    padding-inline: var(--os-content-inset);
    border-top: 1px solid var(--44ui-panel-border);
    border-bottom: 1px solid var(--44ui-panel-border);
    scroll-padding-inline: var(--os-content-inset);
  }

  body:is(.theme-dark, .theme-light)
    .social-profile-page
    .social-profile-tabs
    > [role="tab"] {
    min-width: 112px;
    min-height: 52px;
    flex: 1 0 112px;
    padding-inline: 16px;
    font-size: 15px;
  }

  body:is(.theme-dark, .theme-light)
    .social-profile-page
    .social-profile-posts.ui44-panel {
    border-radius: 16px;
  }
}

/* Social-feed body copy is compact by design. The shared post row carries
   this class in Community, thread pages, profiles, and search results. */
@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light)
    .social-post-row.ui44-list-row-community
    .social-row-body {
    font: 400 15px/21px var(--44ui-font-app);
  }
}

/* A conversation is a dedicated messaging canvas, not a Glass panel. These
   route-scoped rules intentionally outrank canonical panel and textarea
   defaults without changing composers elsewhere. */
body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-message-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-message-form {
  background: var(--os-color-bg);
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-message-form
  textarea.ui44-textarea.os-input-textarea.ui44-composer-input {
  height: 44px;
  min-height: 44px;
  max-height: 116px;
  padding: 10px 14px;
  border-radius: 22px;
  resize: none;
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-message-thread-header.ui44-list-row-profile {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px 12px;
  border-bottom: 1px solid var(--44ui-panel-border);
  text-align: center;
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-message-thread-header
  .social-message-profile-link {
  grid-column: 1;
  display: grid;
  width: 100%;
  justify-items: center;
  gap: 6px;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-message-thread-header {
  position: relative;
  z-index: 3;
  background: var(--os-color-bg);
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-message-form {
  display: block;
  position: relative;
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-message-form
  textarea.ui44-textarea.os-input-textarea.ui44-composer-input {
  width: 100%;
  padding-right: 52px;
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-message-form
  .social-message-send {
  position: absolute;
  right: 16px;
  top: 50%;
  display: grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--os-color-accent);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-message-form
  .social-message-send
  svg {
  display: block;
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-message-form
  .social-message-send:disabled {
  opacity: 0.45;
  cursor: default;
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-compose-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-compose-to-row {
  box-sizing: border-box;
  width: calc(100% - 24px);
  margin: 12px;
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-compose-results {
  min-height: 0;
  align-content: start;
  grid-auto-rows: max-content;
  overflow-y: auto;
  padding: 8px 12px 12px;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-compose-result {
  align-self: start;
  width: 100%;
  min-height: 0;
  padding: 12px 0;
  border-radius: 0;
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light)
    .social-inbox-conversation-route
    .social-compose-result:hover {
    background: transparent;
  }
}

body:is(.theme-dark, .theme-light)
  .social-inbox-conversation-route
  .social-message-form-compose {
  grid-row: 4;
  align-self: end;
}

/* Mobile header tools share the same geometry and trailing columns as the
   topbar controls. A single plus glyph is reused by Community, Studio, Inbox,
   and Reviews so route context cannot change its visual weight. */
@media (max-width: 768px) {
  :root {
    --os-topbar-control-size: var(--44ui-target);
  }

  body:is(.theme-dark, .theme-light)
    :is(.os-topbar-icon-button, .os-topbar-back, .os-topbar-avatar) {
    width: var(--44ui-target);
    min-width: var(--44ui-target);
    height: var(--44ui-target);
    min-height: var(--44ui-target);
    flex: 0 0 var(--44ui-target);
  }

  body:is(.theme-dark, .theme-light) .os-topbar-right,
  body:is(.theme-dark, .theme-light) .page-header-tools {
    gap: 10px;
  }

  body:is(.theme-dark, .theme-light) .app-header .page-header-tools {
    margin-right: 0;
  }

  body:is(.theme-dark, .theme-light)
    .social-title-row
    > .page-compose-button {
    margin-right: 0;
  }

  body:is(.theme-dark, .theme-light)
    .social-inbox-index
    .ui44-list-row-inbox
    > .ui44-profile-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  body:is(.theme-dark, .theme-light) .social-conversation-page {
    position: fixed;
    z-index: 10;
    top: var(--os-topbar-height);
    right: var(--os-content-inset);
    bottom: var(--os-mobile-dock-height);
    left: var(--os-content-inset);
    width: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
}

/* 44OS 1.1 Community root: one audience, four intent lenses, one composer. */
body:is(.theme-dark, .theme-light) .community-v11-page {
  gap: 24px;
}

body:is(.theme-dark, .theme-light) .community-v11-opening {
  display: grid;
  min-width: 0;
}

body:is(.theme-dark, .theme-light) .community-intent-rail {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  border-bottom: 0;
  scrollbar-width: none;
}

@media (min-width: 769px) {
  body:is(.theme-dark, .theme-light) .community-v11-opening {
    gap: 18px;
  }

  body:is(.theme-dark, .theme-light)
    .community-v11-opening
    > .ui44-page-header {
    align-items: center;
  }

  body:is(.theme-dark, .theme-light)
    .community-v11-opening
    .page-header-tools {
    gap: 8px;
    transform: translateX(calc(
      max(
        0px,
        (
          100vw - (2 * var(--os-app-frame-inset)) - 2px
          - var(--os-active-sidebar-width) - var(--os-content-readable)
        ) / 2
      ) - 2px
    ));
  }

  body:is(.theme-dark, .theme-light)
    .community-v11-opening
    .community-intent-tab {
    min-height: 42px;
    padding-inline: 18px;
    font: 600 14px/18px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    .community-v11-opening
    .community-intent-tab:first-child {
    padding-left: 0;
  }

  body:is(.theme-dark, .theme-light)
    .community-v11-opening
    .community-intent-tab[aria-current="page"]::after {
    right: 18px;
    left: 18px;
  }

  body:is(.theme-dark, .theme-light)
    .community-v11-opening
    .community-intent-tab:first-child[aria-current="page"]::after {
    left: 0;
  }
}

body:is(.theme-dark, .theme-light) .community-intent-rail::-webkit-scrollbar {
  display: none;
}

body:is(.theme-dark, .theme-light) .community-intent-tab {
  position: relative;
  display: inline-flex;
  min-width: max-content;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: var(--os-color-ink-secondary);
  font: 600 13px/16px var(--44ui-font-app);
  text-decoration: none;
}

body:is(.theme-dark, .theme-light) .community-intent-tab:first-child {
  padding-left: 0;
}

body:is(.theme-dark, .theme-light) .community-intent-tab[aria-current="page"] {
  color: var(--os-color-accent);
}

body:is(.theme-dark, .theme-light) .community-intent-tab[aria-current="page"]::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

body:is(.theme-dark, .theme-light)
  .community-intent-tab:first-child[aria-current="page"]::after {
  left: 0;
}

body:is(.theme-dark, .theme-light) .community-intent-tab:focus-visible {
  border-radius: var(--44ui-radius-pill);
  outline: 2px solid var(--os-color-accent);
  outline-offset: -2px;
}

body:is(.theme-dark, .theme-light) .community-v11-composer {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 20px;
  overflow: visible;
}

body:is(.theme-dark, .theme-light) .community-v11-composer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body:is(.theme-dark, .theme-light) .community-v11-composer-heading h2 {
  margin: 0;
  color: var(--os-color-ink);
  font: 700 22px/26px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-v11-composer-close {
  display: grid;
  width: var(--44ui-target);
  min-width: var(--44ui-target);
  height: var(--44ui-target);
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--os-color-ink-secondary);
  font: 300 28px/1 var(--44ui-font-app);
  cursor: pointer;
}

body:is(.theme-dark, .theme-light) .community-v11-composer > textarea {
  width: 100%;
  min-width: 0;
  min-height: 120px;
  padding: 14px 16px;
  resize: vertical;
  border: 1px solid var(--44ui-input-border);
  border-radius: var(--44ui-radius-input);
  background: var(--44ui-input-background);
  color: var(--os-color-ink);
  font: 400 16px/23px var(--44ui-font-app);
  box-shadow: var(--44ui-elevation-input);
}

body:is(.theme-dark, .theme-light) .community-composer-intents {
  display: flex;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

body:is(.theme-dark, .theme-light) .community-composer-intents::-webkit-scrollbar {
  display: none;
}

body:is(.theme-dark, .theme-light) .community-composer-intent {
  display: inline-flex;
  min-width: max-content;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--44ui-input-border);
  border-radius: var(--os-radius-pill);
  background: var(--44ui-input-background);
  color: var(--os-color-ink-secondary);
  font: 600 13px/16px var(--44ui-font-app);
  cursor: pointer;
}

body:is(.theme-dark, .theme-light) .community-composer-intent[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--os-color-accent) 38%, var(--44ui-input-border));
  background: color-mix(in srgb, var(--os-color-accent) 13%, var(--44ui-input-background));
  color: var(--os-color-accent);
}

body:is(.theme-dark, .theme-light) .community-composer-intent:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

body:is(.theme-dark, .theme-light) .community-composer-helper,
body:is(.theme-dark, .theme-light) .community-composer-audience {
  margin: 0;
  color: var(--os-color-ink-muted);
  font: 500 12px/16px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-v11-composer-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body:is(.theme-dark, .theme-light) .community-reference-menu {
  max-height: min(360px, 48dvh);
  overflow-y: auto;
}

body:is(.theme-dark, .theme-light) .community-reference-menu-caret {
  position: absolute;
  z-index: 30;
  box-sizing: border-box;
  max-width: calc(100% - 24px);
  background: var(--os-paper-bg);
  box-shadow: var(--os-elevation-floating);
}

body:is(.theme-dark, .theme-light) .community-reference-group {
  display: grid;
}

body:is(.theme-dark, .theme-light) .community-reference-group + .community-reference-group {
  border-top: 1px solid var(--44ui-panel-border);
}

body:is(.theme-dark, .theme-light) .community-reference-group-label {
  padding: 9px 12px 5px;
  color: var(--os-color-ink-muted);
  font: 700 11px/14px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-reference-option {
  grid-template-columns: 36px minmax(0, 1fr);
}

body:is(.theme-dark, .theme-light) .community-reference-image,
body:is(.theme-dark, .theme-light) .community-reference-option .social-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

body:is(.theme-dark, .theme-light) .community-reference-option[data-reference-kind="item"] .community-reference-image {
  border-radius: 8px;
}

body:is(.theme-dark, .theme-light) .community-reference-image-empty {
  border: 1px solid var(--44ui-panel-border);
  background: var(--44ui-input-background);
}

body:is(.theme-dark, .theme-light) .community-intent-label {
  color: var(--os-color-accent);
  font: 700 11px/14px var(--44ui-font-app);
  white-space: nowrap;
}

body:is(.theme-dark, .theme-light) .social-rich-reference[data-reference-kind="item"] {
  color: var(--os-color-accent);
  text-decoration: none;
}

body:is(.theme-dark, .theme-light) .social-rich-link {
  color: var(--os-color-ink);
}

body:is(.theme-dark, .theme-light) .social-rich-reference[data-reference-kind="person"] {
  color: var(--os-color-ink);
  text-decoration: none;
}

body:is(.theme-dark, .theme-light) .social-row-meta-trailing {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
}

body:is(.theme-dark, .theme-light) .social-more-button {
  display: grid;
  width: 36px;
  min-width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--os-color-ink-muted);
  cursor: pointer;
}

body:is(.theme-dark, .theme-light) .social-more-button svg {
  width: 20px;
  height: 20px;
}

body:is(.theme-dark, .theme-light) .social-action-more-mobile {
  display: none;
}

/* Community metadata keeps one structure at every viewport: intent followed
   by timestamp above, and the public options menu in the trailing action slot
   below. Owners continue to see Edit and Delete in that same slot. */
body:is(.theme-dark, .theme-light)
  :is(.community-v11-page, .community-thread-v11)
  .social-row-meta {
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}

body:is(.theme-dark, .theme-light)
  :is(.community-v11-page, .community-thread-v11)
  :is(.social-dot, .social-time, .community-intent-label) {
  flex: 0 0 auto;
}

body:is(.theme-dark, .theme-light)
  :is(.community-v11-page, .community-thread-v11)
  .social-time-dot {
  display: none;
  order: 9;
}

body:is(.theme-dark, .theme-light)
  :is(.community-v11-page, .community-thread-v11)
  .social-row-meta-has-meta
  .social-time-dot {
  display: block;
}

body:is(.theme-dark, .theme-light)
  :is(.community-v11-page, .community-thread-v11)
  .social-meta-dot {
  display: none;
}

body:is(.theme-dark, .theme-light)
  :is(.community-v11-page, .community-thread-v11)
  .social-time {
  order: 10;
  margin-left: auto;
}

body:is(.theme-dark, .theme-light)
  :is(.community-v11-page, .community-thread-v11)
  .social-row-meta-trailing {
  display: none;
}

body:is(.theme-dark, .theme-light)
  :is(.community-v11-page, .community-thread-v11)
  .social-action-more-mobile {
  display: flex;
  margin-left: auto;
}

body:is(.theme-dark, .theme-light)
  :is(.community-v11-page, .community-thread-v11)
  .community-edited-label
  + .social-action-more-mobile {
  margin-left: 0;
}

@media (min-width: 769px) {
  body:is(.theme-dark, .theme-light)
    .community-v11-page
    .social-feed-post
    > .social-row
    > .ui44-community-copy,
  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-root
    > .social-row
    > .ui44-community-copy,
  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-reply
    > .ui44-reply-copy {
    display: contents;
  }

  body:is(.theme-dark, .theme-light)
    .community-v11-page
    .social-feed-post
    > .social-row
    .ui44-community-author-line,
  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-root
    > .social-row
    .ui44-community-author-line,
  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-reply
    .ui44-reply-author-line {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  body:is(.theme-dark, .theme-light)
    .community-v11-page
    .social-feed-post
    > .social-row
    :is(.ui44-community-content, .ui44-community-actions),
  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    :is(.community-thread-root > .social-row, .community-thread-reply)
    :is(.community-thread-reply-context, .ui44-community-content, .social-actions) {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions {
    --44ui-community-like-slot: 44px;
    gap: 4px;
    margin-top: 0;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions
    .ui44-row-action {
    min-width: 44px;
    padding-inline: 0;
    justify-content: flex-start;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions
    .social-action-like {
    width: 44px;
    min-width: 44px;
    flex-basis: 44px;
    padding-inline: 0;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions
    :is(.social-action-like-hit, .social-action-like-hit-count) {
    min-width: 0;
    padding-inline: 0;
    justify-content: flex-start;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-action-more-mobile
    .social-more-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    justify-items: end;
  }
}

@media (hover: hover) and (pointer: fine) {
  body:is(.theme-dark, .theme-light) .social-more-button:hover {
    background: var(--44ui-row-hover);
    color: var(--os-color-ink);
  }
}

body:is(.theme-dark, .theme-light) .community-inline-editor {
  display: grid;
  gap: 10px;
}

body:is(.theme-dark, .theme-light) .community-inline-editor-input {
  width: 100%;
  min-height: 112px;
  resize: vertical;
}

body:is(.theme-dark, .theme-light) .community-inline-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-community, .ui44-list-row-reply)
  .ui44-row-action.ui44-row-action-edit {
  margin-left: auto;
}

body:is(.theme-dark, .theme-light)
  :is(.ui44-list-row-community, .ui44-list-row-reply)
  .ui44-row-action.ui44-row-action-edit
  + .ui44-row-action.ui44-row-action-delete {
  margin-left: 0;
}

/* Mobile top-level destinations use the 44 brand mark and one Search action.
   Detail destinations replace the mark with Back while retaining Search. */
body:is(.theme-dark, .theme-light) .os-topbar-mobile-search-trigger,
body:is(.theme-dark, .theme-light) .os-mobile-search-overlay {
  display: none;
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .os-topbar {
    padding-inline: var(--os-content-inset);
  }

  body:is(.theme-dark, .theme-light) .os-topbar-mode-search .os-topbar-left {
    display: flex;
  }

  body:is(.theme-dark, .theme-light) .os-mobile-logo.os-mobile-brand-logo {
    display: flex;
    width: var(--os-topbar-control-size);
    height: var(--os-topbar-control-size);
    flex: 0 0 var(--os-topbar-control-size);
    align-items: center;
    justify-content: center;
  }

  body:is(.theme-dark, .theme-light) .os-mobile-brand-logo img {
    display: block;
    width: var(--os-topbar-control-size);
    height: var(--os-topbar-control-size);
    object-fit: contain;
    object-position: center;
  }

  body.theme-light .os-mobile-brand-logo img {
    filter: invert(1);
  }

  body:is(.theme-dark, .theme-light)
    :is(.os-topbar-mode-back, .os-topbar-mode-search-back)
    .os-mobile-brand-logo {
    display: none;
  }

  body:is(.theme-dark, .theme-light) .os-topbar-mobile-search-trigger {
    display: grid;
    width: var(--os-topbar-control-size);
    min-width: var(--os-topbar-control-size);
    height: var(--os-topbar-control-size);
    flex: 0 0 var(--os-topbar-control-size);
  }

  /* Back and Search are paired top-bar controls. Keep their material recipe
     explicit here so route state cannot make Back appear unfilled. */
  body:is(.theme-dark, .theme-light)
    .os-topbar
    :is(.os-topbar-back, .os-topbar-mobile-search-trigger) {
    border: 1px solid var(--44ui-panel-border);
    background: var(--44ui-material-glass);
    box-shadow: none;
    color: var(--os-color-ink);
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-overlay {
    position: fixed;
    z-index: 1000;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    min-height: 100dvh;
    flex-direction: column;
    overflow: hidden;
    background: var(--os-paper-bg);
    color: var(--os-color-ink);
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-overlay-bar {
    display: grid;
    min-width: 0;
    min-height: var(--os-topbar-height);
    grid-template-columns: var(--os-topbar-control-size) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding:
      var(--os-safe-area-top)
      var(--os-content-inset)
      0
      calc(var(--os-content-inset) - 4px);
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-overlay-back {
    display: grid;
    width: var(--os-topbar-control-size);
    height: var(--os-topbar-control-size);
    place-items: center;
    padding: 0;
    border: 1px solid var(--44ui-panel-border);
    border-radius: 50%;
    background: var(--44ui-material-glass);
    box-shadow: none;
    color: var(--os-color-ink);
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-overlay-field {
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    height: var(--os-topbar-control-size);
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--44ui-panel-border) !important;
    border-radius: var(--os-radius-pill);
    background: var(--os-control-surface-bg);
    box-shadow: var(--os-elevation-input);
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-overlay-field:focus-within {
    border-color: var(--44ui-panel-border) !important;
    background: var(--os-input-bg-focus-neutral);
    box-shadow: var(--os-elevation-input), var(--os-elevation-focus);
    outline: none !important;
    outline-offset: 0 !important;
  }

  body:is(.theme-dark, .theme-light) .os-topbar-search-mobile,
  body:is(.theme-dark, .theme-light) .os-topbar-search-mobile:focus-within {
    border: 1px solid var(--44ui-panel-border) !important;
    outline: none !important;
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light) .search-page > .app-header {
    position: static;
    width: auto;
    height: auto;
    padding: 18px 0 16px;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--44ui-panel-border);
    clip: auto;
    clip-path: none;
    white-space: normal;
  }

  body:is(.theme-dark, .theme-light)
    .search-page
    > .app-header
    .app-header-copy
    > p {
    display: none;
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-overlay-field .os-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--os-color-ink-secondary);
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-overlay-field input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    appearance: none;
    background: transparent;
    color: var(--os-color-ink);
    font: 500 16px/22px var(--44ui-font-app);
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light)
    .os-mobile-search-overlay-field
    input::-webkit-search-cancel-button {
    display: none;
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-suggestions {
    min-height: 0;
    overflow-y: auto;
    padding: 12px var(--os-content-inset) max(24px, env(safe-area-inset-bottom));
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-suggestion {
    display: grid;
    width: 100%;
    min-height: 52px;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border: 0;
    border-bottom: 1px solid var(--os-color-hairline);
    background: transparent;
    color: var(--os-color-ink);
    font: 500 16px/22px var(--44ui-font-app);
    text-align: left;
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-suggestion .os-icon {
    width: 20px;
    height: 20px;
    color: var(--os-color-ink-secondary);
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-suggestion-label {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 7px;
    overflow: hidden;
    white-space: nowrap;
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-suggestion-label > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-suggestion-secondary {
    flex: 0 1 auto;
    color: var(--os-color-ink-muted);
    font-weight: 500;
  }

  body:is(.theme-dark, .theme-light) .os-mobile-search-status {
    padding: 18px 4px;
    color: var(--os-color-ink-muted);
    font: 500 14px/20px var(--44ui-font-app);
  }
}

body:is(.theme-dark, .theme-light) .community-edited-label {
  align-self: center;
  margin-left: auto;
  color: var(--os-color-ink-muted);
  font: 500 11px/14px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-report-overlay {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

body:is(.theme-dark, .theme-light) .community-report-overlay > .ui44-dialog-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
}

body:is(.theme-dark, .theme-light) .community-report-dialog {
  position: relative;
  width: min(480px, 100%);
  overflow: hidden;
  background: var(--os-paper-bg);
}

body:is(.theme-dark, .theme-light) .community-report-body {
  display: grid;
  gap: 16px;
  padding: 22px;
}

body:is(.theme-dark, .theme-light) .community-report-body h2,
body:is(.theme-dark, .theme-light) .community-report-body p {
  margin: 0;
}

body:is(.theme-dark, .theme-light) .community-report-body h2 {
  color: var(--os-color-ink);
  font: 700 22px/27px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-report-body p,
body:is(.theme-dark, .theme-light) .community-report-body label > span {
  color: var(--os-color-ink-secondary);
  font: 500 13px/18px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-report-body label {
  display: grid;
  gap: 7px;
}

body:is(.theme-dark, .theme-light) .community-report-body small {
  color: var(--os-color-ink-muted);
  font: inherit;
}

body:is(.theme-dark, .theme-light) .community-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
}

body:is(.theme-dark, .theme-light) .social-row-body-clamped {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

body:is(.theme-dark, .theme-light) .social-row-show-more {
  justify-self: start;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--os-color-ink);
  font: 700 13px/16px var(--44ui-font-app);
  cursor: pointer;
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .community-v11-page {
    gap: 0;
  }

  body:is(.theme-dark, .theme-light) .community-v11-page .app-header .ui44-type-page-title {
    font: 700 32px/36px var(--44ui-font-app);
    letter-spacing: -0.025em;
  }

  body:is(.theme-dark, .theme-light) .community-intent-rail {
    width: calc(100% + (2 * var(--os-content-inset)));
    margin-inline: calc(-1 * var(--os-content-inset));
    padding-inline: var(--os-content-inset);
    border-bottom: 0;
    scroll-padding-inline: var(--os-content-inset);
  }

  body:is(.theme-dark, .theme-light) .community-v11-page > .ui44-status,
  body:is(.theme-dark, .theme-light) .community-v11-page > .community-v11-composer {
    margin-top: 18px;
    margin-bottom: 18px;
  }

  body:is(.theme-dark, .theme-light)
    .community-app-page.community-v11-page
    > .social-feed-panel.ui44-panel {
    width: calc(100% + (2 * var(--os-content-inset)));
    max-width: none;
    margin-top: 32px;
    margin-inline: calc(-1 * var(--os-content-inset));
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light)
    .community-app-page.community-v11-page
    > .social-feed-panel
    > .social-feed-post {
    padding-inline: 16px;
    -webkit-tap-highlight-color: transparent;
  }

  body:is(.theme-dark, .theme-light)
    .community-app-page.community-v11-page
    > .social-feed-panel
    > .social-feed-post
    > .social-row {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    min-height: 0;
    padding: 16px 0;
    -webkit-tap-highlight-color: transparent;
  }

  body:is(.theme-dark, .theme-light)
    .community-app-page.community-v11-page
    > .social-feed-panel
    > .social-feed-post
    > .social-row
    > .ui44-community-avatar-link {
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    height: 32px;
  }

  body:is(.theme-dark, .theme-light)
    .community-app-page.community-v11-page
    > .social-feed-panel
    > .social-feed-post
    > .social-row
    > .ui44-community-copy {
    display: contents;
  }

  body:is(.theme-dark, .theme-light)
    .community-app-page.community-v11-page
    > .social-feed-panel
    > .social-feed-post
    > .social-row
    .ui44-community-author-line {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  body:is(.theme-dark, .theme-light)
    .item-community-posts
    > .social-feed-post
    > .social-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
  }

  body:is(.theme-dark, .theme-light)
    .item-community-posts
    > .social-feed-post
    > .social-row
    > .ui44-community-avatar-link {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
  }

  body:is(.theme-dark, .theme-light)
    .item-community-posts
    > .social-feed-post
    > .social-row
    > .ui44-community-copy {
    display: contents;
  }

  body:is(.theme-dark, .theme-light)
    .item-community-posts
    > .social-feed-post
    > .social-row
    .ui44-community-author-line {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  body:is(.theme-dark, .theme-light)
    .item-community-posts
    > .social-feed-post
    > .social-row
    :is(.ui44-community-content, .ui44-community-actions) {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body:is(.theme-dark, .theme-light)
    .community-app-page.community-v11-page
    > .social-feed-panel
    > .social-feed-post
    > .social-row
    :is(.ui44-community-content, .ui44-community-actions) {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body:is(.theme-dark, .theme-light)
    .community-app-page.community-v11-page
    > .social-feed-panel
    > .social-feed-post
    > .social-row.ui44-list-row-interactive:focus-visible {
    background: transparent;
  }

  body:is(.theme-dark, .theme-light)
    .community-app-page.community-v11-page
    > .social-feed-panel
    > .social-feed-post:hover,
  body:is(.theme-dark, .theme-light)
    .community-app-page.community-v11-page
    > .social-feed-panel
    > .social-feed-post
    > .social-row.ui44-list-row-interactive:hover {
    background: transparent;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-avatar {
    width: 32px;
    min-width: 32px;
    height: 32px;
    font-size: 11px;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-row-meta {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 4px;
    font: 400 13px/18px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-app-page.community-v11-page, .community-thread-v11)
    .social-row.ui44-list-row-community
    .social-author-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font: 600 13px/18px var(--44ui-font-app);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    :is(.social-dot, .social-time, .community-intent-label) {
    flex: 0 0 auto;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-time-dot {
    display: none;
    order: 9;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-row-meta-has-meta
    .social-time-dot {
    display: block;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-meta-dot {
    display: none;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-time {
    order: 10;
    flex: 0 0 auto;
    margin-left: auto;
    font: 400 13px/18px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .community-intent-label {
    margin-left: 0;
    font: 600 13px/18px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    .ui44-list-row-community
    .social-row-meta-trailing {
    display: none;
  }

  body:is(.theme-dark, .theme-light)
    .ui44-list-row-community
    .social-action-more-mobile {
    display: flex;
    margin-left: auto;
  }

  body:is(.theme-dark, .theme-light)
    .ui44-list-row-community
    .community-edited-label
    + .social-action-more-mobile {
    margin-left: 0;
  }

  body:is(.theme-dark, .theme-light)
    .ui44-list-row-community
    .social-action-more-mobile
    .social-more-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    justify-items: end;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-app-page.community-v11-page, .community-thread-v11)
    .social-row.ui44-list-row-community
    .ui44-community-body {
    font: 400 15px/21px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    .community-app-page.community-v11-page
    .social-row-body-clamped {
    -webkit-line-clamp: 3;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-app-page.community-v11-page, .community-thread-v11)
    .social-row.ui44-list-row-community
    .social-actions
    .ui44-row-action {
    font: 400 13px/18px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions
    .ui44-row-action-icon,
  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-action-more-mobile
    .social-more-button
    svg {
    width: 24px;
    height: 24px;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .ui44-community-body {
    margin-top: 0;
    color: var(--os-color-ink);
    font: 400 16px/23px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions {
    --44ui-community-like-slot: 44px;
    gap: 4px;
    margin-top: 0;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions
    .ui44-row-action {
    min-width: 44px;
    padding-inline: 0;
    justify-content: flex-start;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions
    .social-action-like {
    width: 44px;
    min-width: 44px;
    flex-basis: 44px;
    padding-inline: 0;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions
    .social-action-like-hit {
    justify-content: flex-start;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions
    .social-action-like-hit-count {
    min-width: 0;
    padding-inline: 0;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions
    .ui44-row-action::before {
    content: none;
  }

  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions
    .ui44-row-action:hover,
  body:is(.theme-dark, .theme-light)
    :is(.community-v11-page, .community-thread-v11)
    .social-actions
    button.social-action-like:hover
    .social-action-like-hit {
    background: transparent;
  }

  body:is(.theme-dark, .theme-light) .community-v11-composer {
    padding: 16px;
    border-radius: 16px;
  }

  body:is(.theme-dark, .theme-light) .community-v11-composer-actions {
    align-items: center;
  }
}

/* 44OS 1.1 Community threads: one root conversation, shallow branches, and
   one persistent reply composer. */
body:is(.theme-dark, .theme-light) .community-thread-v11 {
  padding-bottom: 116px;
}

body:is(.theme-dark, .theme-light) .community-thread-conversation {
  display: grid;
  gap: 24px;
}

body:is(.theme-dark, .theme-light) .community-thread-root {
  overflow: hidden;
}

body:is(.theme-dark, .theme-light) .community-thread-root > .social-row {
  padding: 24px;
}

body:is(.theme-dark, .theme-light) .community-thread-replies-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-inline: 4px;
}

body:is(.theme-dark, .theme-light) .community-thread-replies-heading h1 {
  margin: 0;
  color: var(--os-color-ink);
  font: 700 24px/29px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-thread-replies-heading span {
  color: var(--os-color-ink-muted);
  font: 600 13px/18px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-thread-reply-list {
  overflow: hidden;
  border: 1px solid var(--44ui-panel-border);
  border-radius: var(--44ui-radius-glass);
  background: var(--44ui-material-glass);
  box-shadow: var(--44ui-elevation-flat);
}

body:is(.theme-dark, .theme-light) .community-thread-branch {
  position: relative;
  min-width: 0;
  animation: community-reply-enter 180ms ease both;
}

body:is(.theme-dark, .theme-light)
  .community-v11-page
  .social-feed-post {
  animation: community-reply-enter 180ms ease both;
}

body:is(.theme-dark, .theme-light) .community-thread-branch + .community-thread-branch {
  border-top: 1px solid var(--os-border-divider);
}

body:is(.theme-dark, .theme-light) .community-thread-reply.ui44-list-row-reply {
  position: relative;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

body:is(.theme-dark, .theme-light) .community-thread-reply .social-avatar {
  width: 44px;
  min-width: 44px;
  height: 44px;
}

body:is(.theme-dark, .theme-light) .community-thread-reply-context {
  color: var(--os-color-accent);
  font: 600 12px/16px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-thread-reply .social-row-body {
  margin: 0;
  color: var(--os-color-ink);
  font: 400 15px/22px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-thread-reply-highlighted {
  background: color-mix(in srgb, var(--os-color-accent) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--os-color-accent);
}

body:is(.theme-dark, .theme-light) .community-thread-branch-replies {
  margin-left: 62px;
  border-left: 1px solid var(--44ui-panel-border);
}

body:is(.theme-dark, .theme-light)
  .community-thread-branch-replies
  .community-thread-reply {
  grid-template-columns: 36px minmax(0, 1fr);
  padding-left: 16px;
}

body:is(.theme-dark, .theme-light)
  .community-thread-branch-replies
  .community-thread-reply
  .social-avatar {
  width: 36px;
  min-width: 36px;
  height: 36px;
}

@media (min-width: 769px) {
  body:is(.theme-dark, .theme-light)
    .community-thread-reply-list
    > .community-thread-branch
    > .community-thread-reply.ui44-list-row-reply {
    grid-template-columns: var(--44ui-avatar-inline) minmax(0, 1fr);
    padding: 24px;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-reply-list
    > .community-thread-branch
    > .community-thread-reply
    > .ui44-reply-avatar-link,
  body:is(.theme-dark, .theme-light)
    .community-thread-reply-list
    > .community-thread-branch
    > .community-thread-reply
    > .ui44-reply-avatar-link
    .social-avatar {
    width: var(--44ui-avatar-inline);
    min-width: var(--44ui-avatar-inline);
    height: var(--44ui-avatar-inline);
  }
}

body:is(.theme-dark, .theme-light) .community-thread-branch-controls,
body:is(.theme-dark, .theme-light) .community-thread-pagination {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

body:is(.theme-dark, .theme-light) .community-thread-branch-controls {
  padding: 0 20px 14px 78px;
}

body:is(.theme-dark, .theme-light) .community-thread-branch-controls button {
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--os-color-ink-secondary);
  font: 650 12px/16px var(--44ui-font-app);
  cursor: pointer;
}

body:is(.theme-dark, .theme-light) .community-thread-pagination {
  justify-content: center;
  flex-wrap: wrap;
}

body:is(.theme-dark, .theme-light) .community-thread-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 28px;
  text-align: center;
}

body:is(.theme-dark, .theme-light) .community-thread-empty strong {
  color: var(--os-color-ink);
  font: 700 17px/22px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-thread-empty span {
  margin-bottom: 8px;
  color: var(--os-color-ink-muted);
  font: 400 14px/20px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-thread-permalink {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--os-color-ink-muted);
  font: 600 11px/14px var(--44ui-font-app);
  text-decoration: none;
}

body:is(.theme-dark, .theme-light) .community-thread-composer-shell {
  position: sticky;
  z-index: 24;
  bottom: 18px;
  box-sizing: border-box;
  width: min(760px, calc(100% - 40px));
  margin: 24px auto 0;
  padding: 8px;
  border: 1px solid var(--44ui-panel-border);
  border-radius: 18px;
  background: var(--os-paper-bg);
  box-shadow: var(--os-elevation-floating);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

body:is(.theme-dark, .theme-light) .community-thread-composer {
  display: grid;
  min-width: 0;
  gap: 6px;
}

body:is(.theme-dark, .theme-light) .community-thread-composer-context {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 8px;
  color: var(--os-color-ink);
  font: 600 12px/16px var(--44ui-font-app);
}

body:is(.theme-dark, .theme-light) .community-thread-composer-target {
  color: var(--os-color-accent);
}

body:is(.theme-dark, .theme-light) .community-thread-composer-context button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--os-color-ink-secondary);
  font: 400 20px/1 var(--44ui-font-app);
  cursor: pointer;
}

body:is(.theme-dark, .theme-light) .community-thread-composer-row {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  gap: 8px;
}

body:is(.theme-dark, .theme-light)
  .community-thread-composer-input.ui44-textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  max-height: 112px;
  padding: 11px 14px;
  resize: none;
  overflow-y: auto;
  border: 1px solid var(--44ui-input-border);
  border-radius: 14px;
  background: var(--44ui-input-background);
  color: var(--os-color-ink);
  font: 400 15px/21px var(--44ui-font-app);
  box-shadow: var(--44ui-elevation-input);
}

body:is(.theme-dark, .theme-light) .community-thread-composer-submit {
  min-width: 76px;
  height: 44px;
}

body:is(.theme-dark, .theme-light) .community-thread-composer-gate {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--os-color-ink);
  font: 650 13px/18px var(--44ui-font-app);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

@keyframes community-reply-enter {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  body:is(.theme-dark, .theme-light) .community-thread-v11 {
    width: 100%;
    max-width: none;
    padding-top: 0;
    padding-bottom: 132px;
  }

  body:is(.theme-dark, .theme-light) .community-thread-conversation {
    gap: 0;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-root.ui44-panel {
    width: calc(100% + (2 * var(--os-content-inset)));
    max-width: none;
    margin-inline: calc(-1 * var(--os-content-inset));
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-root
    > .social-row {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding: 16px;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-root
    .social-avatar {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  body:is(.theme-dark, .theme-light) .community-thread-replies-heading {
    width: calc(100% + (2 * var(--os-content-inset)));
    min-height: 72px;
    align-items: flex-start;
    margin-inline: calc(-1 * var(--os-content-inset));
    padding: 18px 16px 12px;
    border-top: 1px solid var(--os-border-divider);
    border-bottom: 0;
  }

  body:is(.theme-dark, .theme-light) .community-thread-replies-heading h1 {
    font: 700 19px/24px var(--44ui-font-app);
  }

  body:is(.theme-dark, .theme-light) .community-thread-reply-list {
    width: calc(100% + (2 * var(--os-content-inset)));
    max-width: none;
    margin-inline: calc(-1 * var(--os-content-inset));
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-reply.ui44-list-row-reply {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    row-gap: 10px;
    padding: 16px;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-root
    > .social-row
    > .ui44-community-copy,
  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-reply
    > .ui44-reply-copy {
    display: contents;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-root
    > .social-row
    .ui44-community-author-line,
  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-reply
    .ui44-reply-author-line {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-root
    > .social-row
    :is(.ui44-community-content, .ui44-community-actions),
  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-reply
    :is(.community-thread-reply-context, .ui44-community-content, .social-actions) {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-reply-list
    > .community-thread-branch
    + .community-thread-branch {
    border-top: 1px solid var(--44ui-panel-border);
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-branch
    > .community-thread-reply {
    border-bottom: 1px solid var(--44ui-panel-border);
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-reply
    .social-avatar {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  body:is(.theme-dark, .theme-light) .community-thread-branch-replies {
    margin-left: 40px;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-branch-replies
    .community-thread-reply {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding-left: 12px;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    .community-thread-branch-replies
    .community-thread-reply
    .social-avatar {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  body:is(.theme-dark, .theme-light) .community-thread-branch-controls {
    padding: 0 12px 12px 52px;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    :is(.community-thread-root, .community-thread-reply)
    .social-actions {
    --44ui-community-like-slot: 44px;
    gap: 4px;
    margin-top: 0;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    :is(.community-thread-root, .community-thread-reply)
    .social-actions
    .ui44-row-action {
    min-width: 44px;
    padding-inline: 0;
    justify-content: flex-start;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    :is(.community-thread-root, .community-thread-reply)
    .social-actions
    .social-action-like {
    width: 44px;
    min-width: 44px;
    flex-basis: 44px;
    padding-inline: 0;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    :is(.community-thread-root, .community-thread-reply)
    .social-actions
    .social-action-like-hit {
    justify-content: flex-start;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-v11
    :is(.community-thread-root, .community-thread-reply)
    .social-actions
    .social-action-like-hit-count {
    min-width: 0;
    padding-inline: 0;
  }

  body:is(.theme-dark, .theme-light) .community-thread-pagination {
    padding: 18px 16px 0;
  }

  body:is(.theme-dark, .theme-light) .community-thread-composer-shell {
    position: fixed;
    right: 0;
    bottom: calc(
      var(--os-mobile-dock-height)
      + env(safe-area-inset-bottom, 0px)
      + var(--community-keyboard-inset, 0px)
    );
    left: 0;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-top: 1px solid var(--os-border-divider);
    border-radius: 0;
    background: var(--os-paper-bg);
    box-shadow: 0 -10px 28px color-mix(in srgb, #000 17%, transparent);
    transition: none;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-composer-shell[data-keyboard-open="true"] {
    bottom: max(
      var(--community-keyboard-inset, 0px),
      env(safe-area-inset-bottom, 0px)
    );
  }

  body:is(.theme-dark, .theme-light) .community-thread-composer {
    position: relative;
  }

  body:is(.theme-dark, .theme-light) .community-thread-composer-context {
    position: absolute;
    right: -12px;
    bottom: calc(100% + 8px);
    left: -12px;
    min-height: 40px;
    padding: 5px 20px;
    border-top: 1px solid var(--os-border-divider);
    border-bottom: 1px solid var(--os-border-divider);
    background: var(--os-paper-bg);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
  }

  body:has(.community-thread-composer-shell[data-keyboard-open="true"])
    .sidebar-nav-mobile {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
  }

  body:is(.theme-dark, .theme-light) .community-thread-composer-row {
    gap: 7px;
  }

  body:is(.theme-dark, .theme-light)
    .community-thread-composer-input.ui44-textarea {
    font-size: 16px;
  }

  body:is(.theme-dark, .theme-light) .community-thread-composer-submit {
    min-width: 70px;
  }

  body:is(.theme-dark, .theme-light) .community-thread-error {
    margin: 12px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.theme-dark, .theme-light) .community-thread-branch,
  body:is(.theme-dark, .theme-light)
    .community-v11-page
    .social-feed-post {
    animation: none;
  }

  body:is(.theme-dark, .theme-light) .community-thread-reply,
  body:is(.theme-dark, .theme-light) .community-thread-composer-shell,
  body:has(.community-thread-composer-shell[data-keyboard-open="true"])
    .sidebar-nav-mobile {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}