:root {
  --parent-primary: #FF9F29;
  --parent-primary-deep: #E87F12;
  --parent-primary-light: #FFB347;
  --parent-bg: #FFF9F0;
  --card-bg: #FFFFFF;
  --admin-bg: #FAFAFA;
  --warm-brown: #33291F;
  --text-title: #1F1F1F;
  --text-body: #3D3D3D;
  --text-muted: #8A8178;
  --text-inverse: #FFFFFF;
  --border-soft: rgba(0, 0, 0, 0.06);
  --border-bold: 2px solid var(--warm-brown);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-pop: 3px 3px 0 rgba(51, 41, 31, 0.12);
  --icon-teal: #2EC4B6;
  --icon-gold: #FFB627;
  --icon-coral: #FF6B6B;
  --warning: #FF6B35;
  --progress-track: #F4E8DA;
  --soft-orange-bg: #FFF1DC;
  --muted-card-bg: #F7F3EE;
  --toast-bg: rgba(31, 31, 31, 0.88);
  --toast-card-bg: #FFFFFF;
  --profile-gradient: linear-gradient(135deg, var(--parent-primary-light) 0%, var(--parent-primary) 100%);
  --bubble-white: rgba(255, 255, 255, 0.28);
  --stat-bg-orange: #FFF1DC;
  --stat-bg-teal: #E5FAF7;
  --stat-bg-gold: #FFF5D6;
  --hours-progress: 75%;
  --phone-width: 415px;
  --narrow-screen: 360px;
  --nav-height: 72px;
  --border-width: 1px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-dot: 2px;
  --space-bar: 3px;
  --avatar-size: 56px;
  --study-pill-width: 88px;
  --status-bar-height: 32px;
  --mini-title-height: 48px;
  --capsule-width: 88px;
  --capsule-height: 32px;
  --status-wifi-size: 18px;
  --status-battery-width: 28px;
  --status-battery-height: 14px;
  --menu-item-height: 56px;
  --feature-icon-size: 52px;
  --banner-bubble-lg: 96px;
  --banner-bubble-md: 56px;
  --banner-bubble-sm: 28px;
  --profile-banner-min-height: 128px;
  --course-cover-width: 96px;
  --course-cover-height: 112px;
  --course-cover-compact-width: 88px;
  --radius-container: 16px;
  --radius-inner: 10px;
  --radius-pill: 999px;
  --font-title: 22px;
  --font-section: 18px;
  --font-body: 15px;
  --font-note: 12px;
  --font-grade: 30px;
  --font-stat: 32px;
  --line-base: 1.6;
  --line-tight: 1.2;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --disabled-opacity: 0.62;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--parent-bg);
  color: var(--text-body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--font-body);
  line-height: var(--line-base);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--parent-bg);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

button,
[role="button"] {
  font: inherit;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.app-shell {
  width: min(var(--phone-width), 100%);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--parent-bg);
  padding: var(--space-6) var(--space-4) calc(var(--nav-height) + var(--space-6));
  position: relative;
}

.card {
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-soft);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-soft);
}

.section-title {
  margin: 0;
  color: var(--text-title);
  font-size: var(--font-section);
  font-weight: 700;
  line-height: var(--line-base);
  position: relative;
  padding-left: var(--space-4);
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--parent-primary);
  box-shadow: var(--shadow-pop);
  transform: translateY(-50%);
}

.muted {
  color: var(--text-muted);
  font-size: var(--font-note);
}

.inline-icon {
  display: block;
  width: var(--space-6);
  height: var(--space-6);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.parent-home {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.parent-schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.parent-growth {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.parent-me {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.phone-status {
  height: var(--status-bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-title);
  font-size: var(--font-note);
  font-weight: 700;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.status-signal {
  display: flex;
  align-items: end;
  gap: var(--space-dot);
  height: var(--space-3);
}

.status-signal span {
  width: var(--space-bar);
  border-radius: var(--radius-pill);
  background: var(--text-title);
}

.status-signal span:nth-child(1) {
  height: var(--space-1);
}

.status-signal span:nth-child(2) {
  height: var(--space-2);
}

.status-signal span:nth-child(3) {
  height: var(--space-3);
}

.status-wifi,
.status-battery {
  color: var(--text-title);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--space-dot);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-wifi {
  width: var(--status-wifi-size);
  height: var(--status-wifi-size);
}

.status-battery {
  width: var(--status-battery-width);
  height: var(--status-battery-height);
}

.status-battery path:last-child {
  fill: currentColor;
  stroke: none;
}

.mini-titlebar {
  height: var(--mini-title-height);
  display: grid;
  grid-template-columns: var(--capsule-width) 1fr var(--capsule-width);
  align-items: center;
  margin-bottom: var(--space-2);
}

.parent-home .mini-titlebar {
  margin-bottom: var(--space-4);
}

.mini-title {
  margin: 0;
  color: var(--text-title);
  font-size: var(--font-section);
  font-weight: 800;
  line-height: var(--line-base);
  text-align: center;
}

.mini-capsule {
  grid-column: 3;
  justify-self: end;
  width: var(--capsule-width);
  height: var(--capsule-height);
  border: var(--border-width) solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  box-shadow: var(--shadow-soft);
}

.capsule-dot {
  width: var(--space-1);
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--text-title);
  box-shadow: var(--space-2) 0 0 var(--text-title), calc(var(--space-2) * -1) 0 0 var(--text-title);
}

.capsule-divider {
  width: var(--border-width);
  height: var(--space-4);
  background: var(--border-soft);
}

.capsule-circle {
  width: var(--space-5);
  height: var(--space-5);
  border: var(--space-dot) solid var(--text-title);
  border-radius: var(--radius-pill);
}

.profile-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  min-height: var(--profile-banner-min-height);
  background: var(--profile-gradient);
  border: 0;
  box-shadow: var(--shadow-soft);
  color: var(--text-inverse);
}

.profile-card::before,
.profile-card::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-pill);
  background: var(--bubble-white);
  pointer-events: none;
}

.profile-card::before {
  width: var(--banner-bubble-lg);
  height: var(--banner-bubble-lg);
  right: calc(var(--space-6) * -1);
  top: calc(var(--space-4) * -1);
}

.profile-card::after {
  width: var(--banner-bubble-md);
  height: var(--banner-bubble-md);
  right: var(--space-8);
  bottom: calc(var(--space-5) * -1);
}

.profile-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}

.profile-main::after {
  content: "";
  position: absolute;
  width: var(--banner-bubble-sm);
  height: var(--banner-bubble-sm);
  left: var(--space-8);
  top: calc(var(--space-4) * -1);
  border-radius: var(--radius-pill);
  background: var(--bubble-white);
  pointer-events: none;
}

.avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--parent-primary);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
}

.avatar .inline-icon {
  width: var(--space-8);
  height: var(--space-8);
}

.profile-name {
  margin: 0;
  color: var(--text-inverse);
  font-size: var(--font-title);
  font-weight: 800;
  line-height: var(--line-base);
}

.profile-note {
  margin: var(--space-2) 0 0;
  color: var(--text-inverse);
  font-size: var(--font-note);
}

.study-days {
  min-width: var(--study-pill-width);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--parent-primary-deep);
  text-align: center;
  font-size: var(--font-note);
  font-weight: 800;
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
  transform: rotate(-3deg);
  position: relative;
  z-index: 1;
}

.grid-card {
  padding: var(--space-5) var(--space-4);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5) var(--space-2);
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-body);
}

.feature-item:active {
  transform: scale(0.98);
}

.feature-icon {
  width: var(--feature-icon-size);
  height: var(--feature-icon-size);
  border-radius: var(--radius-inner);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
  display: grid;
  place-items: center;
  color: var(--text-inverse);
}

.feature-label {
  width: 100%;
  color: var(--text-body);
  font-size: var(--font-note);
  text-align: center;
  line-height: var(--line-base);
  white-space: nowrap;
}

.bg-orange {
  background: var(--parent-primary);
}

.bg-blue {
  background: var(--icon-teal);
}

.bg-green {
  background: var(--icon-gold);
}

.bg-pink {
  background: var(--icon-coral);
}

.bg-cyan {
  background: var(--parent-primary);
}

.bg-yellow {
  background: var(--icon-teal);
}

.bg-red {
  background: var(--icon-gold);
}

.bg-violet {
  background: var(--icon-coral);
}

.bg-teal {
  background: var(--icon-teal);
}

.class-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.course-card {
  display: grid;
  grid-template-columns: var(--course-cover-width) 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  align-items: center;
  position: relative;
  overflow: hidden;
}

.course-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--space-1);
  background: var(--parent-primary);
}

.course-cover {
  min-height: var(--course-cover-height);
  border-radius: var(--radius-inner);
  background: var(--parent-primary);
  color: var(--text-inverse);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cover-mark {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--parent-primary);
  display: grid;
  place-items: center;
}

.cover-mark .inline-icon {
  width: var(--space-5);
  height: var(--space-5);
}

.cover-title {
  margin: 0;
  font-size: var(--font-grade);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.remaining-line {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--font-note);
}

.remaining-count {
  color: var(--warning);
  font-weight: 800;
  line-height: var(--line-base);
}

.week-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
}

.week-tab {
  min-height: var(--space-8);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: var(--font-body);
  font-weight: 700;
}

.week-tab.active {
  background: var(--parent-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-pop);
  transform: rotate(-2deg);
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.schedule-card {
  display: grid;
  grid-template-columns: var(--space-8) 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  align-items: start;
}

.schedule-card.is-today {
  border-color: var(--parent-primary);
  background: var(--soft-orange-bg);
  box-shadow: var(--shadow-pop);
}

.schedule-card.is-done {
  background: var(--muted-card-bg);
  opacity: var(--disabled-opacity);
}

.schedule-day {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-inner);
  background: var(--parent-bg);
  color: var(--parent-primary-deep);
  display: grid;
  place-items: center;
  font-size: var(--font-note);
  font-weight: 800;
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
  transform: rotate(-2deg);
}

.schedule-main {
  min-width: 0;
}

.schedule-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.schedule-title {
  margin: 0;
  color: var(--text-title);
  font-size: var(--font-section);
  font-weight: 800;
  line-height: var(--line-base);
}

.schedule-time {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-note);
}

.schedule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-body);
  font-size: var(--font-note);
}

.schedule-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

.status-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-soft);
  color: var(--text-muted);
  background: var(--card-bg);
  font-size: var(--font-note);
  font-weight: 700;
  white-space: nowrap;
}

.status-badge .inline-icon {
  width: var(--space-4);
  height: var(--space-4);
}

.status-badge.today {
  color: var(--parent-primary-deep);
  border-color: var(--parent-primary);
  background: var(--card-bg);
  box-shadow: var(--shadow-pop);
}

.status-badge.pending {
  color: var(--text-body);
}

.leave-button {
  min-height: var(--space-8);
  border: var(--border-bold);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--parent-primary-deep);
  padding: 0 var(--space-4);
  font-size: var(--font-note);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-pop);
}

.leave-button:active {
  transform: scale(0.98);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + var(--space-6));
  z-index: 20;
  max-width: calc(min(var(--phone-width), 100%) - var(--space-8));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--toast-bg);
  color: var(--text-inverse);
  font-size: var(--font-note);
  line-height: var(--line-base);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--space-4));
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

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

.toast.center-toast {
  top: 50%;
  bottom: auto;
  background: var(--toast-card-bg);
  color: var(--text-title);
  border: var(--border-width) solid var(--border-soft);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-soft);
  transform: translate(-50%, calc(-50% + var(--space-4)));
}

.toast.center-toast.show {
  transform: translate(-50%, -50%);
}

.attendance-card {
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}

.attendance-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--space-1);
  background: var(--parent-primary);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.stat-item {
  border-radius: var(--radius-inner);
  background: var(--stat-bg-orange);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  border: var(--border-width) solid var(--border-soft);
}

.stat-item:nth-child(2) {
  background: var(--stat-bg-teal);
}

.stat-item:nth-child(3) {
  background: var(--stat-bg-gold);
}

.stat-number {
  display: block;
  color: var(--parent-primary);
  font-size: var(--font-stat);
  font-weight: 800;
  line-height: var(--line-tight);
}

.stat-label {
  display: block;
  color: var(--text-muted);
  font-size: var(--font-note);
}

.growth-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.comment-card {
  padding: var(--space-4);
}

.comment-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.teacher-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-pill);
  background: var(--soft-orange-bg);
  color: var(--parent-primary-deep);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: var(--font-section);
  font-weight: 800;
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
}

.teacher-name {
  margin: 0;
  color: var(--text-title);
  font-size: var(--font-body);
  font-weight: 800;
  line-height: var(--line-base);
}

.teacher-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.course-tag {
  border-radius: var(--radius-pill);
  background: var(--soft-orange-bg);
  color: var(--parent-primary-deep);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-note);
  font-weight: 700;
  line-height: var(--line-base);
  border: var(--border-width) solid var(--border-soft);
}

.comment-date {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--font-note);
}

.comment-text {
  margin: 0;
  color: var(--text-body);
  font-size: var(--font-body);
  line-height: var(--line-base);
}

.homework-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.homework-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
}

.homework-title {
  margin: 0;
  color: var(--text-title);
  font-size: var(--font-body);
  font-weight: 700;
  line-height: var(--line-base);
}

.homework-status {
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-note);
  font-weight: 700;
}

.homework-status.done {
  color: var(--icon-teal);
  background: var(--card-bg);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
}

.homework-status.todo {
  color: var(--warning);
  background: var(--card-bg);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
}

.me-profile-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  min-height: var(--profile-banner-min-height);
  background: var(--profile-gradient);
  border: 0;
  color: var(--text-inverse);
}

.me-profile-card::before,
.me-profile-card::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-pill);
  background: var(--bubble-white);
  pointer-events: none;
}

.me-profile-card::before {
  width: var(--banner-bubble-lg);
  height: var(--banner-bubble-lg);
  right: calc(var(--space-6) * -1);
  top: calc(var(--space-4) * -1);
}

.me-profile-card::after {
  width: var(--banner-bubble-md);
  height: var(--banner-bubble-md);
  right: var(--space-8);
  bottom: calc(var(--space-5) * -1);
}

.me-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--parent-primary);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
  position: relative;
  z-index: 1;
}

.me-avatar .inline-icon {
  width: var(--space-8);
  height: var(--space-8);
}

.me-name {
  margin: 0;
  color: var(--text-inverse);
  font-size: var(--font-title);
  font-weight: 800;
  line-height: var(--line-base);
  position: relative;
  z-index: 1;
}

.me-phone {
  margin: var(--space-1) 0 0;
  color: var(--text-inverse);
  font-size: var(--font-note);
  position: relative;
  z-index: 1;
}

.child-card {
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}

.child-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--space-1);
  background: var(--parent-primary);
}

.child-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.child-name {
  margin: 0;
  color: var(--text-title);
  font-size: var(--font-section);
  font-weight: 800;
  line-height: var(--line-base);
}

.child-class {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--font-note);
}

.child-hours {
  border-radius: var(--radius-pill);
  background: var(--soft-orange-bg);
  color: var(--parent-primary-deep);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-note);
  font-weight: 800;
  white-space: nowrap;
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
  transform: rotate(2deg);
}

.menu-list {
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--menu-item-height);
  padding: 0 var(--space-4);
  background: var(--card-bg);
}

.menu-item + .menu-item {
  border-top: var(--border-width) solid var(--border-soft);
}

.menu-item:active {
  background: var(--parent-bg);
}

.menu-icon {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-inner);
  display: grid;
  place-items: center;
  color: var(--text-inverse);
  flex: 0 0 auto;
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
}

.menu-icon .inline-icon {
  width: var(--space-5);
  height: var(--space-5);
}

.menu-main {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.menu-title {
  color: var(--text-title);
  font-size: var(--font-body);
  font-weight: 700;
}

.menu-extra {
  color: var(--text-muted);
  font-size: var(--font-note);
  white-space: nowrap;
}

.menu-arrow {
  width: var(--space-5);
  height: var(--space-5);
  color: var(--text-muted);
  flex: 0 0 auto;
}

.course-info {
  min-width: 0;
}

.course-name {
  margin: 0;
  color: var(--text-title);
  font-size: var(--font-section);
  font-weight: 800;
  line-height: var(--line-base);
}

.course-desc {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--font-note);
}

.progress {
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--progress-track);
}

.progress-bar {
  width: var(--hours-progress);
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--parent-primary);
}

.course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
  gap: var(--space-2);
}

.primary-pill {
  border-radius: var(--radius-pill);
  background: var(--parent-primary);
  color: var(--text-inverse);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-note);
  font-weight: 800;
  white-space: nowrap;
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
}

.primary-pill:active {
  transform: scale(0.98);
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 10;
  width: min(var(--phone-width), 100%);
  height: var(--nav-height);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--card-bg);
  border-top: var(--border-width) solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-note);
  position: relative;
}

.nav-tab .inline-icon {
  width: var(--space-5);
  height: var(--space-5);
}

.nav-tab.active {
  color: var(--parent-primary);
  font-weight: 700;
  transform: scale(1.04);
}

.nav-tab.active::after {
  content: "";
  width: var(--space-1);
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--parent-primary);
  box-shadow: var(--shadow-pop);
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
}

.nav-tab:active {
  transform: scale(0.98);
}

@media (max-width: 360px) {
  .app-shell {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  .profile-card {
    padding: var(--space-4);
  }

  .course-card {
    grid-template-columns: var(--course-cover-compact-width) 1fr;
  }
}