:root {
  --dash-cream: var(--ry-cream, #fff8f4);
  --dash-ink: var(--ry-ink, #163038);
  --dash-muted: var(--ry-muted, #3d5c66);
  --shell-max: 1440px;
  --shell-gutter: clamp(16px, 3.2vw, 36px);
  --shell-top: 0px;
  --dock-space: 84px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--dash-ink);
  font-family: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--shell-top) var(--shell-gutter) calc(var(--dock-space) + env(safe-area-inset-bottom));
  overflow-x: clip;
}

.account-stage {
  flex: 1 1 auto;
  width: min(100%, var(--shell-max));
  max-width: var(--shell-max);
}

.status-bar,
.top-brand,
.stat,
.profile-id,
.progress-kicker,
.profile-chips,
.tabs,
.tabs-row,
.panel-head,
.homework-controls,
.homework-card-head,
.homework-meta,
.bottom-dock,
.bottom-nav,
.bottom-nav a {
  display: flex;
  align-items: center;
}

.stat::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 8px;
  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.16);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.stat.fire::before {
  background-color: var(--ry-orange, #ff8a00);
  background-image: url("/assets/stat-icons/flame.svg");
}

.stat.gem::before {
  background-color: var(--ry-blue, #1cb0f6);
  background-image: url("/assets/stat-icons/gem.svg");
}

.stat.heart::before {
  background-color: var(--ry-red, #ff4b4b);
  background-image: url("/assets/stat-icons/heart.svg");
}

.cream-card,
body.room-account .cream-card,
body.room-account .tab-panel.active {
  background: var(--dash-cream);
  border-radius: 28px;
  box-shadow: 0 10px 28px rgba(22, 48, 56, 0.08);
}

.profile-card,
.recommendation-panel,
.quick-stats article,
.homework-panel,
.detail-panel,
.profile-panel,
.completed-panel {
  background: var(--dash-cream);
}

.profile-card {
  display: grid;
  gap: 22px;
  padding: 28px 32px 24px;
}

.profile-card > .ry-label,
.recommend-copy .ry-label,
.panel-head .ry-label,
.progress-kicker .ry-label {
  margin: 0;
}

.profile-id {
  gap: 18px;
}

.profile-id > div {
  min-width: 0;
  flex: 1;
}

.avatar-card {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  overflow: hidden;
  color: #7a5500;
  border-radius: 22px;
  background: #ffc400;
  box-shadow: inset 0 -4px rgba(114, 80, 0, 0.16);
  font-size: 1.7rem;
  font-weight: 900;
}

.profile-card .ry-auth-note {
  display: block;
  max-width: 42ch;
}

.profile-card h1,
.panel-head h2,
.panel p,
.profile-panel dl,
.completed-panel ul {
  margin: 0;
}

.profile-card h1 {
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.profile-card strong {
  display: block;
  margin-top: 4px;
  color: var(--dash-muted);
  font-size: 1rem;
  font-weight: 800;
}

.profile-card span {
  display: block;
  color: #6b8490;
  font-weight: 700;
}

.profile-progress {
  display: grid;
  gap: 8px;
}

.progress-kicker {
  justify-content: space-between;
}

.progress-kicker span {
  color: var(--dash-muted);
  font-size: 0.92rem;
  font-weight: 800;
}

.progress-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #efe4dc;
}

body.room-account .progress-track span,
.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #fc5b62;
}

.profile-chips {
  flex-wrap: wrap;
  gap: 18px 28px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: var(--dash-muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.profile-chips li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-chips li::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 8px;
  background: center / 12px 12px no-repeat;
  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.16);
}

.profile-chips li.chip-fire::before {
  background-color: var(--ry-orange, #ff8a00);
  background-image: url("/assets/stat-icons/flame.svg");
}

.profile-chips li.chip-gem::before {
  background-color: var(--ry-blue, #1cb0f6);
  background-image: url("/assets/stat-icons/gem.svg");
}

.profile-chips li.chip-heart::before {
  background-color: var(--ry-red, #ff4b4b);
  background-image: url("/assets/stat-icons/heart.svg");
}

.profile-chips li.chip-badge::before {
  background-color: var(--ry-amber, #ffc400);
  background-image: url("/assets/stat-icons/star.svg");
}

.profile-chips strong {
  display: inline;
  margin: 0;
  color: var(--dash-ink);
  font-size: 0.95rem;
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.quick-stats article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 18px 18px 16px;
  border-radius: 24px;
}

.quick-stats span,
.quick-stats small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dash-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quick-stats strong {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tile-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #3fa4b3 center / 10px 10px no-repeat;
}

.tile-book {
  background-image: url("../assets/stat-icons/book.svg");
}

.tile-chart {
  background-image: url("../assets/stat-icons/chart.svg");
}

.tile-clip {
  background-image: url("../assets/stat-icons/mail.svg");
}

.tabs-row,
.panel {
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tabs-row {
  padding: 0;
}

.tabs {
  gap: 10px;
}

.tab,
.homework-controls button,
.primary-action,
.homework-card button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 800;
}

.tab,
.homework-controls button {
  padding: 10px 22px;
  color: var(--dash-ink);
  background: var(--dash-cream);
  box-shadow: 0 6px 16px rgba(22, 48, 56, 0.06);
}

body.room-account .tab.active,
body.room-account .homework-controls button.active {
  color: #fff !important;
  background: #fc5b62 !important;
  box-shadow: 0 3px 0 #c4333b !important;
}

.tab-panel {
  display: grid;
  gap: 16px;
}

.tab-panel:not(.active),
.tab-panel[hidden] {
  display: none !important;
}

.recommendation-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 280px;
  padding: 28px 28px 26px;
}

.recommend-copy {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

.panel-head {
  justify-content: space-between;
  gap: 14px;
}

.panel-head h2,
.recommend-copy h2 {
  margin: 6px 0 0;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.xp-pill {
  color: #2d8593;
  font-size: 0.92rem;
  font-weight: 800;
  white-space: nowrap;
}

.recommend-copy p,
.detail-panel p {
  margin: 0;
  max-width: 36ch;
  color: var(--dash-muted);
  font-weight: 700;
  line-height: 1.45;
}

.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  justify-self: start;
  min-width: 188px;
  padding: 12px 22px;
  color: #fff;
  background: #fc5b62;
  box-shadow: 0 4px 0 #c4333b;
  text-decoration: none;
}

.primary-action:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #c4333b;
}

.recommend-zero {
  display: grid;
  place-items: end;
  width: min(220px, 28vw);
}

.recommend-zero .zero-figure--dash .zero-sprite,
.zero-figure--dash .zero-sprite {
  width: min(200px, 26vw);
  filter: none;
}

.homework-panel,
.profile-panel,
.detail-panel,
.completed-panel {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 24px;
}

.pill {
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  color: #1f6a76;
  border-radius: 999px;
  background: #c5eef3;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.homework-controls {
  gap: 8px;
}

.homework-list {
  display: grid;
  gap: 10px;
}

.homework-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--dash-cream) 70%, #ffd4d6);
}

.homework-card.selected {
  box-shadow: 0 0 0 2px #fc5b62;
}

.homework-card.done {
  opacity: 0.76;
}

.homework-card-head {
  justify-content: space-between;
  gap: 12px;
}

.homework-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
}

.unit-badge {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 40px;
  color: #fff;
  border-radius: 50%;
  background: #3fa4b3;
  box-shadow: inset 0 -5px rgba(0, 0, 0, 0.16);
  font-size: 0.72rem;
  font-weight: 900;
}

.homework-meta {
  flex-wrap: wrap;
  gap: 6px;
}

.homework-meta span {
  padding: 5px 8px;
  color: #c4333b;
  border-radius: 999px;
  background: #ffd4d6;
  font-size: 0.68rem;
  font-weight: 900;
}

.homework-card button {
  padding: 9px 14px;
  color: #fff;
  background: #fc5b62;
  box-shadow: 0 3px 0 #c4333b;
}

.homework-card.done button {
  background: #9aa5b1;
  box-shadow: none;
}

.profile-panel dl {
  display: grid;
  gap: 10px;
}

.profile-panel div,
.completed-panel li {
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  font-weight: 800;
}

.profile-panel dt {
  color: var(--dash-muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-panel dd {
  margin: 4px 0 0;
}

.completed-panel ul {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

body.room-account .dash-board--account {
  display: grid;
  gap: 18px;
  padding: 8px 8px 16px;
}

@media (min-width: 1100px) {
  body.room-account .dash-board--account {
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.92fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "profile stats"
      "profile main"
      "tabs main";
    align-items: stretch;
    min-height: calc(100dvh - 72px - var(--dock-space));
    padding: 4px 12px 12px;
  }

  body.room-account .dash-board--account .profile-card { grid-area: profile; }
  body.room-account .dash-board--account .quick-stats { grid-area: stats; }
  body.room-account .dash-board--account .tabs-row { grid-area: tabs; }
  body.room-account .dash-board--account .tab-panel.active { grid-area: main; }

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

  #homeworkPanel.active,
  #profilePanel.active {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-content: start;
  }
}

@media (max-width: 1099px) {
  .recommendation-panel {
    grid-template-columns: 1fr;
  }

  .recommend-zero {
    justify-self: end;
  }

  .tab-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 880px) {
  .app-shell {
    --shell-gutter: 12px;
    --dock-space: 92px;
    padding: 0 12px calc(var(--dock-space) + env(safe-area-inset-bottom));
  }

  .profile-card,
  .recommendation-panel {
    padding: 20px;
  }
}

@media (max-width: 560px) {
  .profile-id,
  .quick-stats {
    grid-template-columns: 1fr;
    display: grid;
  }

  .quick-stats {
    gap: 10px;
  }

  .profile-chips {
    gap: 12px 16px;
  }
}

@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;
  }
}