/**
 * BABAHOMEWORK Design System — Phase 1-A
 * Apple Vision glass + children's learning product.
 *
 * OPT-IN ONLY: classes under .ds-* / [class^="ds-"] apply when used explicitly.
 * Do not globally restyle existing portals. Avoid forced specificity hammers.
 *
 * Cascade position: after themes/default.css, before page CSS.
 * Legacy glass.css remains for current pages until Phase 1-B+ migration.
 */

/* -------------------------------------------------------------------------- */
/* 1. Design tokens                                                            */
/* -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --ds-brand-primary: var(--color-primary, #f58220);
  --ds-brand-primary-dark: var(--color-primary-dark, #e86e00);
  --ds-brand-primary-light: var(--color-primary-light, #ff9a3c);
  --ds-brand-secondary: var(--color-secondary, #2b78e4);

  /* Page atmosphere (gradient + soft glows live on site-bg layers) */
  --ds-bg-start: var(--page-bg-start, #fffdf9);
  --ds-bg-middle: var(--page-bg-middle, #fffaf0);
  --ds-bg-end: var(--page-bg-end, #f7faff);
  --ds-glow-a: var(--page-glow-a, rgba(255, 208, 92, 0.18));
  --ds-glow-b: var(--page-glow-b, rgba(104, 164, 255, 0.12));

  /* Glass material */
  --ds-glass-bg: var(--glass-fill, rgba(255, 252, 248, 0.18));
  --ds-glass-gradient: var(
    --glass-gradient,
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.12) 48%,
      rgba(255, 250, 245, 0.08) 100%
    )
  );
  --ds-glass-border: var(--glass-border-color, rgba(255, 255, 255, 0.62));
  --ds-glass-blur: var(--glass-backdrop, blur(18px) saturate(1.35) brightness(1.08));
  --ds-glass-radius: var(--glass-radius, 20px);

  /* Elevation */
  --ds-shadow-soft: var(
    --glass-shadow,
    0 18px 48px rgba(62, 36, 18, 0.16),
    0 4px 14px rgba(62, 36, 18, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78)
  );
  --ds-shadow-float: 0 22px 56px rgba(62, 36, 18, 0.2), 0 8px 20px rgba(62, 36, 18, 0.1);
  --ds-shadow-btn: 0 8px 20px rgba(245, 130, 32, 0.28), 0 2px 0 rgba(0, 0, 0, 0.06);

  /* Text */
  --ds-text-primary: var(--color-text, #30343b);
  --ds-text-secondary: var(--color-muted, #68707b);
  --ds-text-on-brand: #ffffff;
  --ds-text-disabled: rgba(48, 52, 59, 0.42);

  /* Shape & space */
  --ds-radius-sm: 12px;
  --ds-radius-md: 16px;
  --ds-radius-lg: var(--ds-glass-radius);
  --ds-radius-pill: 999px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;

  /* Type scale */
  --ds-font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    system-ui, sans-serif;
  --ds-font-title-xl: clamp(1.75rem, 2.4vw, 2.125rem);
  --ds-font-title: clamp(1.35rem, 1.8vw, 1.625rem);
  --ds-font-subtitle: 1.125rem;
  --ds-font-body: 1rem;
  --ds-font-caption: 0.8125rem;

  /* Full-width glass navbar (Phase 1-B Revision)
     bar height = logo height × 1.15 (logo asset is tight-cropped)
     Inner pages use a shared header logo size; home/auth may stay larger as hero. */
  --ds-logo-height-header: clamp(48px, 5vw, 64px);
  --ds-navbar-height: calc(var(--ds-logo-height-header) * 1.15);
  /* 可选紧凑顶栏（首页驾驶舱等场景按需覆盖） */
  --ds-logo-height-header-compact: 40px;
  --ds-navbar-height-compact: 50px;
  /* 内容区相对固定顶栏的避让高度（全站统一） */
  --ds-navbar-clearance: calc(var(--ds-navbar-height) + var(--ds-space-5, 20px));
  --ds-navbar-inline-pad: clamp(16px, 2.5vw, 28px);
  --ds-navbar-bar-bg: rgba(255, 255, 255, 0.28);
  --ds-navbar-bar-border: rgba(255, 255, 255, 0.55);
  --ds-navbar-bar-shadow:
    0 12px 40px rgba(62, 36, 18, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 0 0 1px rgba(255, 255, 255, 0.18);
  /* 顶栏玻璃：中性白雾，避免透出暖色底而发黄 */
  --ds-navbar-bar-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.2) 55%,
    rgba(255, 255, 255, 0.14) 100%
  );
  --ds-navbar-bar-blur: blur(30px) saturate(1.15);

  /* Scene / photo background — 全站统一标准
     上：固定顶栏下沿；左/右/下：贴齐视口满屏；允许拉伸 */
  --ds-scene-bg-top: var(--ds-navbar-height);
  --ds-scene-bg-size: 100% 100%;
  --ds-scene-bg-position: center center;
  --ds-scene-bg-repeat: no-repeat;

  --ds-line-tight: 1.25;
  --ds-line-body: 1.55;

  /* Motion */
  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-duration: 0.22s;
  --ds-duration-slow: 0.35s;

  /* Logo (future shell use) */
  --ds-logo-width-header: clamp(108px, 8vw, 132px);
  --ds-logo-width-hero: clamp(150px, 10vw, 205px);

  /* Icon spec (Phase 1-A: tokens only — do not batch-replace assets) */
  --ds-icon-stroke: 1.75;
  --ds-icon-size-sm: 18px;
  --ds-icon-size-md: 22px;
  --ds-icon-size-lg: 28px;
  --ds-icon-color: var(--ds-text-primary);
  --ds-icon-color-muted: var(--ds-text-secondary);
}

/* -------------------------------------------------------------------------- */
/* 2. Motion utilities                                                         */
/* -------------------------------------------------------------------------- */

.ds-transition {
  transition:
    transform var(--ds-duration) var(--ds-ease),
    box-shadow var(--ds-duration) var(--ds-ease),
    background-color var(--ds-duration) var(--ds-ease),
    border-color var(--ds-duration) var(--ds-ease),
    opacity var(--ds-duration) var(--ds-ease),
    filter var(--ds-duration) var(--ds-ease);
}

.ds-fade-in {
  animation: ds-fade-in var(--ds-duration-slow) var(--ds-ease) both;
}

.ds-float:hover,
.ds-float:focus-visible {
  transform: translateY(-2px);
}

@keyframes ds-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-transition,
  .ds-button-primary,
  .ds-button-secondary,
  .ds-button-ghost,
  .ds-card,
  .ds-navbar {
    transition: none;
  }

  .ds-fade-in {
    animation: none;
  }

  .ds-float:hover,
  .ds-float:focus-visible,
  .ds-button-primary:hover,
  .ds-button-primary:focus-visible,
  .ds-button-secondary:hover,
  .ds-button-secondary:focus-visible,
  .ds-card--interactive:hover {
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* 3. Glass primitive                                                          */
/* -------------------------------------------------------------------------- */

.ds-glass {
  background-color: var(--ds-glass-bg);
  background-image: var(--ds-glass-gradient);
  background-repeat: no-repeat;
  -webkit-backdrop-filter: var(--ds-glass-blur);
  backdrop-filter: var(--ds-glass-blur);
  border: 1.3px solid var(--ds-glass-border);
  border-radius: var(--ds-glass-radius);
  box-shadow: var(--ds-shadow-soft);
}

.ds-glass--dense {
  --ds-glass-bg: rgba(255, 252, 248, 0.42);
  --ds-glass-blur: blur(14px) saturate(1.2) brightness(1.04);
}

.ds-glass--airy {
  --ds-glass-bg: rgba(255, 252, 248, 0.12);
  --ds-glass-blur: blur(22px) saturate(1.4) brightness(1.1);
}

/* -------------------------------------------------------------------------- */
/* 3b. Scene photo background (全站标准)                                       */
/* 上：顶栏下沿；左/右/下：满屏；background-size 允许拉伸                         */
/* -------------------------------------------------------------------------- */

.ds-scene-bg {
  position: absolute;
  top: var(--ds-scene-bg-top);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: var(--ds-scene-bg-repeat);
  background-size: var(--ds-scene-bg-size);
  background-position: var(--ds-scene-bg-position);
}

.ds-scene-bg--fixed {
  position: fixed;
}

/* -------------------------------------------------------------------------- */
/* 4. Card primitive                                                           */
/* -------------------------------------------------------------------------- */

.ds-card {
  display: block;
  box-sizing: border-box;
  padding: var(--ds-space-5);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-glass-bg);
  background-image: var(--ds-glass-gradient);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  backdrop-filter: var(--ds-glass-blur);
  border: 1.3px solid var(--ds-glass-border);
  box-shadow: var(--ds-shadow-soft);
  color: var(--ds-text-primary);
  transition:
    transform var(--ds-duration) var(--ds-ease),
    box-shadow var(--ds-duration) var(--ds-ease),
    border-color var(--ds-duration) var(--ds-ease);
}

.ds-card--interactive {
  cursor: pointer;
  text-decoration: none;
}

.ds-card--interactive:hover,
.ds-card--interactive:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow-float);
  border-color: rgba(255, 255, 255, 0.78);
  outline: none;
}

.ds-card--compact {
  padding: var(--ds-space-4);
  border-radius: var(--ds-radius-md);
}

/* -------------------------------------------------------------------------- */
/* 5. Button primitives                                                        */
/* -------------------------------------------------------------------------- */

.ds-button-primary,
.ds-button-secondary,
.ds-button-ghost {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.65em 1.35em;
  border-radius: var(--ds-radius-pill);
  border: 1.5px solid transparent;
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-body);
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--ds-duration) var(--ds-ease),
    box-shadow var(--ds-duration) var(--ds-ease),
    background var(--ds-duration) var(--ds-ease),
    border-color var(--ds-duration) var(--ds-ease),
    color var(--ds-duration) var(--ds-ease),
    opacity var(--ds-duration) var(--ds-ease);
}

.ds-button-primary::after,
.ds-button-secondary::after,
.ds-button-ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 45%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform var(--ds-duration-slow) var(--ds-ease);
  pointer-events: none;
}

.ds-button-primary:hover::after,
.ds-button-primary:focus-visible::after,
.ds-button-secondary:hover::after,
.ds-button-secondary:focus-visible::after,
.ds-button-ghost:hover::after,
.ds-button-ghost:focus-visible::after {
  transform: translateX(120%);
}

.ds-button-primary {
  color: var(--ds-text-on-brand);
  background: linear-gradient(
    135deg,
    var(--ds-brand-primary-light) 0%,
    var(--ds-brand-primary) 55%,
    var(--ds-brand-primary-dark) 100%
  );
  border-color: transparent;
  box-shadow: var(--ds-shadow-btn);
}

.ds-button-primary:hover,
.ds-button-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(245, 130, 32, 0.36);
  outline: none;
}

.ds-button-secondary {
  color: var(--ds-text-primary);
  background-color: var(--ds-glass-bg);
  background-image: var(--ds-glass-gradient);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  backdrop-filter: var(--ds-glass-blur);
  border-color: var(--ds-glass-border);
  box-shadow: var(--ds-shadow-soft);
}

.ds-button-secondary:hover,
.ds-button-secondary:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(245, 130, 32, 0.45);
  outline: none;
}

.ds-button-ghost {
  color: var(--ds-brand-primary-dark);
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(245, 130, 32, 0.28);
  box-shadow: none;
}

.ds-button-ghost:hover,
.ds-button-ghost:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(245, 130, 32, 0.5);
  outline: none;
}

.ds-button-primary:disabled,
.ds-button-secondary:disabled,
.ds-button-ghost:disabled,
.ds-button-primary.is-disabled,
.ds-button-secondary.is-disabled,
.ds-button-ghost.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

.ds-button-primary:disabled::after,
.ds-button-secondary:disabled::after,
.ds-button-ghost:disabled::after {
  display: none;
}

.ds-button--sm {
  min-height: 36px;
  padding: 0.4em 0.95em;
  font-size: 0.85rem;
}

/* -------------------------------------------------------------------------- */
/* 6. Navigation — full-width Apple Vision glass bar (Phase 1-B Revision)      */
/* header = full-bleed glass; .navbar-inner = max-width content row            */
/* -------------------------------------------------------------------------- */

.glass-navbar,
.ds-navbar {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  transform: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
  background-color: var(--ds-navbar-bar-bg);
  background-image: var(--ds-navbar-bar-gradient);
  background-repeat: no-repeat;
  -webkit-backdrop-filter: var(--ds-navbar-bar-blur);
  backdrop-filter: var(--ds-navbar-bar-blur);
  border: none;
  border-bottom: 1px solid var(--ds-navbar-bar-border);
  border-radius: 0;
  box-shadow: var(--ds-navbar-bar-shadow);
  transition:
    box-shadow var(--ds-duration) var(--ds-ease),
    background-color var(--ds-duration) var(--ds-ease);
}

.navbar-inner,
.ds-navbar__inner {
  /* Full-bleed row: logo flush left, actions flush right (only small edge pad) */
  width: 100%;
  max-width: none;
  height: var(--ds-navbar-height);
  min-height: var(--ds-navbar-height);
  margin: 0;
  padding: 0 var(--ds-navbar-inline-pad);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--ds-space-4);
}

.glass-navbar.is-open .navbar-inner,
.ds-navbar.is-open .ds-navbar__inner,
.glass-navbar.is-open .ds-navbar__inner {
  height: auto;
  min-height: var(--ds-navbar-height);
}

.glass-navbar__logo,
.ds-navbar__logo {
  display: block;
  line-height: 0;
  flex-shrink: 0;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.glass-navbar__logo img,
.ds-navbar__logo img {
  display: block;
  height: var(--ds-logo-height-header);
  width: auto;
  max-height: var(--ds-logo-height-header);
  object-fit: contain;
}

.glass-navbar__nav,
.ds-navbar__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

.glass-navbar__link,
.ds-navbar__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-primary);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition:
    background-color var(--ds-duration) var(--ds-ease),
    border-color var(--ds-duration) var(--ds-ease),
    color var(--ds-duration) var(--ds-ease);
}

.glass-navbar__link:hover,
.glass-navbar__link:focus-visible,
.ds-navbar__link:hover,
.ds-navbar__link:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
}

.glass-navbar__link.is-active,
.glass-navbar__link[aria-current="page"],
.ds-navbar__link.is-active,
.ds-navbar__link[aria-current="page"] {
  color: var(--ds-brand-primary-dark);
  background: rgba(255, 255, 255, 0.36);
  border-color: rgba(255, 255, 255, 0.5);
}

.glass-navbar__user,
.ds-navbar__user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-space-2);
  min-width: 0;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

/* Student avatar account menu (IA V2.2 Phase A) */
.ds-nav-avatar {
  position: relative;
  display: flex;
  align-items: center;
}

.ds-nav-avatar__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 10px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color: var(--ds-text-primary, #2b211c);
  cursor: pointer;
  font: inherit;
}

.ds-nav-avatar__img,
.ds-nav-avatar__fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ds-nav-avatar__fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 130, 32, 0.2);
  font-weight: 800;
  font-size: 0.85rem;
}

.ds-nav-avatar__meta,
.ds-nav-avatar__trigger .student-home-nav__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  min-width: 0;
}

.ds-nav-avatar__name,
.ds-nav-avatar__trigger .student-home-nav__name {
  font-size: 0.86rem;
  font-weight: 800;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-nav-avatar__grade,
.ds-nav-avatar__trigger .student-home-nav__grade {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--ds-text-secondary, #6b5b52);
}

.ds-nav-avatar__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 220;
  min-width: 168px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 14px 32px rgba(62, 36, 18, 0.14);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-nav-avatar__menu[hidden] {
  display: none !important;
}

.ds-nav-avatar__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--ds-text-primary, #2b211c);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 750;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ds-nav-avatar__item:hover,
.ds-nav-avatar__item:focus-visible {
  background: rgba(245, 130, 32, 0.12);
  outline: none;
}

.ds-nav-avatar__form {
  margin: 0;
}

@media (max-width: 720px) {
  .ds-nav-avatar__meta,
  .ds-nav-avatar__trigger .student-home-nav__identity {
    display: none;
  }

  .ds-nav-avatar__trigger {
    padding: 4px;
  }
}

/* Parent density */
.glass-navbar--parent .glass-navbar__nav,
.ds-navbar--parent .ds-navbar__nav,
.ds-navbar--parent .glass-navbar__nav {
  justify-content: flex-start;
  gap: 4px;
}

.glass-navbar--parent .glass-navbar__link,
.ds-navbar--parent .ds-navbar__link,
.ds-navbar--parent .glass-navbar__link {
  padding: 8px 12px;
  font-size: 0.86rem;
  border-radius: var(--ds-radius-sm);
  gap: 8px;
}

.glass-navbar__link-icon,
.ds-navbar__link-icon {
  width: var(--ds-icon-size-sm);
  height: var(--ds-icon-size-sm);
  object-fit: contain;
}

/* 家长主导航图标：相对默认 18px 放大 4× → 72px */
.glass-navbar--parent .glass-navbar__link-icon,
.ds-navbar--parent .ds-navbar__link-icon,
.ds-navbar--parent .glass-navbar__link-icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

/* Learning / practice breadcrumbs */
.glass-navbar__breadcrumb,
.ds-navbar__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--ds-text-secondary);
  grid-column: 2;
  grid-row: 1;
}

.glass-navbar__breadcrumb a,
.ds-navbar__breadcrumb a {
  color: var(--ds-text-primary);
  text-decoration: none;
  font-weight: 700;
}

.glass-navbar__breadcrumb a:hover,
.glass-navbar__breadcrumb a:focus-visible,
.ds-navbar__breadcrumb a:hover,
.ds-navbar__breadcrumb a:focus-visible {
  color: var(--ds-brand-primary-dark);
  outline: none;
}

.glass-navbar__breadcrumb-sep,
.ds-navbar__breadcrumb-sep {
  opacity: 0.45;
}

.glass-navbar__breadcrumb-current,
.ds-navbar__breadcrumb-current {
  color: var(--ds-text-secondary);
  font-weight: 650;
}

.glass-navbar__toggle,
.ds-navbar__toggle {
  display: none;
  appearance: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-navbar-bar-border);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
}

.glass-navbar__toggle-bar,
.ds-navbar__toggle-bar {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--ds-text-primary);
  transition: transform var(--ds-duration) var(--ds-ease), opacity var(--ds-duration) var(--ds-ease);
}

.glass-navbar.is-open .glass-navbar__toggle-bar:nth-child(1),
.ds-navbar.is-open .ds-navbar__toggle-bar:nth-child(1),
.glass-navbar.is-open .ds-navbar__toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.glass-navbar.is-open .glass-navbar__toggle-bar:nth-child(2),
.ds-navbar.is-open .ds-navbar__toggle-bar:nth-child(2),
.glass-navbar.is-open .ds-navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}
.glass-navbar.is-open .glass-navbar__toggle-bar:nth-child(3),
.ds-navbar.is-open .ds-navbar__toggle-bar:nth-child(3),
.glass-navbar.is-open .ds-navbar__toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 720px) {
  .navbar-inner,
  .ds-navbar__inner {
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    gap: var(--ds-space-2) var(--ds-space-3);
    height: var(--ds-navbar-height);
    min-height: var(--ds-navbar-height);
    padding: 0 var(--ds-navbar-inline-pad);
  }

  .glass-navbar.is-open .navbar-inner,
  .ds-navbar.is-open .navbar-inner {
    height: auto;
  }

  .glass-navbar__toggle,
  .ds-navbar__toggle {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
  }

  .glass-navbar__user,
  .ds-navbar__user {
    grid-column: 3;
    grid-row: 1;
  }

  .glass-navbar:not(.is-open) .navbar-inner .glass-navbar__nav,
  .glass-navbar:not(.is-open) .navbar-inner .glass-navbar__breadcrumb,
  .glass-navbar:not(.is-open) .navbar-inner .ds-navbar__nav,
  .glass-navbar:not(.is-open) .navbar-inner .ds-navbar__breadcrumb,
  .ds-navbar:not(.is-open) .navbar-inner .glass-navbar__nav,
  .ds-navbar:not(.is-open) .navbar-inner .ds-navbar__nav,
  .ds-navbar:not(.is-open) .navbar-inner .ds-navbar__breadcrumb {
    display: none;
  }

  .glass-navbar.is-open .navbar-inner .glass-navbar__nav,
  .glass-navbar.is-open .navbar-inner .glass-navbar__breadcrumb,
  .glass-navbar.is-open .navbar-inner .ds-navbar__nav,
  .glass-navbar.is-open .navbar-inner .ds-navbar__breadcrumb,
  .ds-navbar.is-open .navbar-inner .glass-navbar__nav,
  .ds-navbar.is-open .navbar-inner .ds-navbar__nav,
  .ds-navbar.is-open .navbar-inner .ds-navbar__breadcrumb {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    padding-top: var(--ds-space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    margin-top: var(--ds-space-1);
  }
}

/* Page shell: offset for fixed full-width bar + centered content container
   标准：正文从固定顶栏下沿开始（不被遮挡）。
   场景照片背景（.site-bg / .ds-scene-bg）：亦从顶栏下沿起，左/右/下满屏，可拉伸。 */
.ds-page-with-navbar {
  padding-top: var(--ds-navbar-clearance);
  box-sizing: border-box;
  width: 100%;
}

.ds-page-container {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 var(--ds-space-4) var(--ds-space-6);
  box-sizing: border-box;
}

/* 全站：页面内含固定顶栏（含提升前）→ 给 .page 正文避让
   !important：压过各业务页 .page--* { padding: 0 } 简写
   背景仍画满 padding（不使用 background-clip），避免栏下出现白缝 */
.page:has([data-ds-navbar]),
.page-content:has([data-ds-navbar]) {
  padding-top: var(--ds-navbar-clearance) !important;
  box-sizing: border-box;
}

/* 全站：JS 将顶栏提升到 body 后 → 仍给主内容区避让 */
body:has(> [data-ds-navbar]) > .page,
body:has(> [data-ds-navbar]) > .page-content {
  padding-top: var(--ds-navbar-clearance) !important;
  box-sizing: border-box;
}

/* 全幅背景页（首页等）：取消 page 顶 padding，由内部内容区避让；
   场景照片从顶栏下沿铺满左/右/下（见 --ds-scene-bg-*） */
.page--home:has([data-ds-navbar]),
.page--home-student:has([data-ds-navbar]),
body:has(> [data-ds-navbar]) > .page--home,
body:has(> [data-ds-navbar]) > .page--home-student {
  padding-top: 0 !important;
}

/* 页面级已避让时，避免 .ds-page-with-navbar 再叠加一层顶栏高度 */
.page:has([data-ds-navbar]) .ds-page-with-navbar,
.page-content:has([data-ds-navbar]) .ds-page-with-navbar,
body:has(> [data-ds-navbar]) .ds-page-with-navbar {
  padding-top: 0;
}

/* 首页全幅：内部内容用顶栏高度避让 */
.page--home .home-hero__body.ds-page-with-navbar,
.page--home .student-home__body.ds-page-with-navbar,
.page--home-student .student-home__body.ds-page-with-navbar,
body:has(> [data-ds-navbar]) .page--home .home-hero__body.ds-page-with-navbar,
body:has(> [data-ds-navbar]) .page--home .student-home__body.ds-page-with-navbar {
  padding-top: calc(var(--ds-navbar-height) + var(--ds-space-3, 12px));
}

/* 学生驾驶舱：内容避让与其它页同一套 navbar token */
body.site-body--home:has(.page--home-student) .student-home__body.ds-page-with-navbar,
.page--home-student .student-home__body.ds-page-with-navbar {
  padding-top: calc(var(--ds-navbar-height) + 48px);
}

/* 兼容旧选择器：导航后的首个兄弟（未使用 ds-page-with-navbar 时） */
.page > [data-ds-navbar] + *:not(.ds-page-with-navbar),
.page-content > [data-ds-navbar] + *:not(.ds-page-with-navbar) {
  /* 页面级已有 clearance，此处不再重复 */
  margin-top: 0;
}

@media (max-width: 720px) {
  :root {
    --ds-navbar-clearance: calc(var(--ds-navbar-height) + var(--ds-space-4, 16px));
  }

  .ds-page-container {
    padding: 0 16px 24px;
  }
}

/* Unify logo size inside glass navbar */
.glass-navbar .glass-navbar__logo img,
.glass-navbar .glass-navbar__logo-img,
.glass-navbar .ds-navbar__logo img,
header.ds-navbar .ds-navbar__logo img,
header.ds-navbar .glass-navbar__logo-img {
  height: var(--ds-logo-height-header);
  width: auto;
  max-height: var(--ds-logo-height-header);
  max-width: none;
  object-fit: contain;
}

/* -------------------------------------------------------------------------- */
/* 7. Typography                                                               */
/* -------------------------------------------------------------------------- */

.ds-title-xl,
.ds-title,
.ds-subtitle,
.ds-body,
.ds-caption {
  font-family: var(--ds-font-family);
  color: var(--ds-text-primary);
  margin: 0;
}

.ds-title-xl {
  font-size: var(--ds-font-title-xl);
  font-weight: 850;
  line-height: var(--ds-line-tight);
  letter-spacing: -0.02em;
}

.ds-title {
  font-size: var(--ds-font-title);
  font-weight: 800;
  line-height: var(--ds-line-tight);
}

.ds-subtitle {
  font-size: var(--ds-font-subtitle);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ds-text-secondary);
}

.ds-body {
  font-size: var(--ds-font-body);
  font-weight: 500;
  line-height: var(--ds-line-body);
}

.ds-caption {
  font-size: var(--ds-font-caption);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ds-text-secondary);
}

/* -------------------------------------------------------------------------- */
/* 8. Icon contract (tokens + sizing helpers only)                             */
/* -------------------------------------------------------------------------- */

/*
 * Icon system contract (Phase 1-A):
 * - Prefer SF Symbols–like linear, rounded, uniform stroke.
 * - Do not use emoji as primary UI icons.
 * - Asset migration deferred; use --ds-icon-* when wiring new markup.
 */
.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-icon-size-md);
  height: var(--ds-icon-size-md);
  color: var(--ds-icon-color);
  flex-shrink: 0;
}

.ds-icon--sm {
  width: var(--ds-icon-size-sm);
  height: var(--ds-icon-size-sm);
}

.ds-icon--lg {
  width: var(--ds-icon-size-lg);
  height: var(--ds-icon-size-lg);
}

.ds-icon img,
.ds-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}