/* 2027 premium system — final visual layer. Keeps the existing product logic intact. */
:root {
  --bg: #050506;
  --bg-2: #08090b;
  --panel: #0c0d10;
  --panel-2: #101216;
  --glass: rgba(255, 255, 255, 0.035);
  --stroke: rgba(255, 255, 255, 0.075);
  --stroke-strong: rgba(255, 255, 255, 0.13);
  --text: #f5f2eb;
  --soft: #c5c0b6;
  --muted: #7f858f;
  --gold: #ddb96f;
  --gold-2: #f2d99f;
  --orange: #c9954f;
  --green: #91d7a7;
  --red: #ef918d;
  --shadow: 0 18px 52px rgba(0, 0, 0, 0.34);
  --radius: 22px;
  --radius-sm: 14px;
}

html {
  background: var(--bg) !important;
  scroll-padding-bottom: 112px !important;
}

body {
  background:
    radial-gradient(circle at 50% -8%, rgba(221, 185, 111, 0.10), transparent 30%),
    linear-gradient(180deg, #070708 0%, #050506 45%, #040405 100%) !important;
  color: var(--text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
  letter-spacing: -0.006em;
}

body::before {
  opacity: 0.18 !important;
  background-size: 64px 64px !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 58%) !important;
}

.bg-glow-1 {
  width: 340px !important;
  height: 340px !important;
  right: -180px !important;
  top: -140px !important;
  background: rgba(221, 185, 111, 0.13) !important;
  opacity: 0.45 !important;
  filter: blur(110px) !important;
}

.bg-glow-2 {
  display: none !important;
}

.app-shell {
  width: min(760px, calc(100vw - 28px)) !important;
  padding-top: 12px !important;
  padding-bottom: calc(106px + env(safe-area-inset-bottom, 0px)) !important;
}

.card {
  background: linear-gradient(180deg, rgba(16, 17, 20, 0.97), rgba(10, 11, 13, 0.985)) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(18px) !important;
}

.card::after {
  display: none !important;
}

h1,
h2,
h3 {
  color: #f7f4ee !important;
  text-wrap: balance;
}

h2 {
  font-size: clamp(28px, 5vw, 36px) !important;
  font-weight: 720 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.04 !important;
}

h3 {
  font-weight: 690 !important;
  letter-spacing: -0.028em !important;
}

.eyebrow {
  margin-bottom: 9px !important;
  color: #b79a62 !important;
  font-size: 9px !important;
  font-weight: 720 !important;
  letter-spacing: 0.22em !important;
}

.eyebrow::before {
  width: 5px !important;
  height: 5px !important;
  background: var(--gold) !important;
  box-shadow: 0 0 12px rgba(221, 185, 111, 0.3) !important;
}

/* Compact app chrome instead of a second hero. */
.topbar.card {
  min-height: 0 !important;
  margin-bottom: 12px !important;
  padding: 13px 15px !important;
  align-items: center !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  background: rgba(10, 11, 13, 0.74) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.20) !important;
}

.topbar .eyebrow {
  display: none !important;
}

.topbar h1 {
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
  font-weight: 740 !important;
  letter-spacing: -0.028em !important;
}

.topbar p {
  margin-top: 3px !important;
  color: rgba(245, 242, 235, 0.43) !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
}

.badge {
  min-height: 30px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #9da29f !important;
  font-size: 9.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.8;
}

.badge.ok {
  color: #99cbaa !important;
  border-color: rgba(145, 215, 167, 0.13) !important;
  background: rgba(145, 215, 167, 0.045) !important;
}

.badge.error {
  color: #e6a09c !important;
  border-color: rgba(239, 145, 141, 0.13) !important;
  background: rgba(239, 145, 141, 0.045) !important;
}

/* Home: account data is quiet, continuation is the hero. */
.screen[data-screen-panel="profile"] > .hero-panel {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  background: rgba(11, 12, 14, 0.86) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22) !important;
}

.screen[data-screen-panel="profile"] > .hero-panel .hero-left {
  display: none !important;
}

.screen[data-screen-panel="profile"] > .hero-panel .hero-right {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.screen[data-screen-panel="profile"] .profile-mini,
.screen[data-screen-panel="profile"] .sub-box {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.screen[data-screen-panel="profile"] .profile-mini {
  min-width: 0;
}

.screen[data-screen-panel="profile"] .avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: #15171b !important;
  border: 1px solid rgba(221, 185, 111, 0.16) !important;
  color: var(--gold-2) !important;
  font-size: 13px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.screen[data-screen-panel="profile"] .profile-name {
  font-size: 14px !important;
  font-weight: 680 !important;
}

.screen[data-screen-panel="profile"] .profile-mini .muted {
  margin-top: 2px;
  color: #6f747c !important;
  font-size: 9.5px !important;
}

.screen[data-screen-panel="profile"] .sub-box {
  min-width: 126px !important;
  text-align: right;
}

.screen[data-screen-panel="profile"] .sub-label {
  margin: 0 0 3px !important;
  color: #6d727a !important;
  font-size: 8.5px !important;
}

.screen[data-screen-panel="profile"] .sub-value {
  color: #d8d4cb !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
}

.screen[data-screen-panel="profile"] .sub-days {
  margin-top: 2px !important;
  color: #9a8256 !important;
  font-size: 9.5px !important;
  font-weight: 620 !important;
}

.home-resume-card {
  position: relative;
  margin: 0 0 12px !important;
  padding: 24px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 22px !important;
  overflow: hidden !important;
  border-color: rgba(221, 185, 111, 0.16) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(221, 185, 111, 0.10), transparent 36%),
    linear-gradient(150deg, #111214, #0a0b0d 72%) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32) !important;
}

.home-resume-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 2px;
  border-radius: 99px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: 0.75;
}

.home-resume-card .eyebrow {
  margin-bottom: 10px !important;
}

.home-resume-card h3 {
  max-width: 520px;
  margin-bottom: 8px !important;
  font-size: clamp(24px, 5vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}

.home-resume-card p {
  color: #858a91 !important;
  font-size: 11.5px !important;
}

.home-resume-progress {
  height: 3px !important;
  margin-top: 16px !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

.home-resume-progress .progress-fill {
  background: linear-gradient(90deg, #c7a45f, #edd090) !important;
  box-shadow: none !important;
}

.program-invite-card {
  margin: 0 0 12px !important;
  padding: 18px 20px !important;
  gap: 14px !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: linear-gradient(180deg, #0e0f11, #0a0b0d) !important;
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.24) !important;
}

.program-invite-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: #141519 !important;
  border-color: rgba(221, 185, 111, 0.13) !important;
  color: #ceb274 !important;
  box-shadow: none !important;
}

.program-invite-copy h3 {
  font-size: 17px !important;
  font-weight: 670 !important;
}

.program-invite-copy p {
  color: #7f848b !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

/* Section headers become editorial, not another heavy card. */
.section-hero.card {
  margin: 0 0 14px !important;
  padding: 20px 4px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.section-hero h2 {
  font-size: clamp(30px, 6vw, 38px) !important;
  font-weight: 700 !important;
}

.section-hero .hero-text {
  max-width: 600px !important;
  margin-top: 8px !important;
  color: #8b9097 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Learning catalog: calm filters, editorial cards. */
.screen[data-screen-panel="materials"] .filter-panel {
  margin-bottom: 12px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  background: rgba(10, 11, 13, 0.72) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16) !important;
}

.screen[data-screen-panel="materials"] .filter-panel > .eyebrow {
  display: none !important;
}

.chip-row {
  gap: 6px !important;
  padding: 0 0 8px !important;
}

.chip,
.segment {
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
  background: #101115 !important;
  color: #858a92 !important;
  font-size: 10.5px !important;
  font-weight: 610 !important;
  box-shadow: none !important;
}

.chip.active,
.segment.active {
  border-color: rgba(221, 185, 111, 0.20) !important;
  background: rgba(221, 185, 111, 0.075) !important;
  color: #e5ca91 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.segmented-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 0 !important;
}

.materials-list {
  gap: 10px !important;
}

.material-card {
  padding: 18px 18px 16px !important;
  border-radius: 20px !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: linear-gradient(180deg, #0f1013, #0a0b0d) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24) !important;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease !important;
}

.material-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(221, 185, 111, 0.16) !important;
  background: linear-gradient(180deg, #111216, #0b0c0e) !important;
}

.material-head {
  margin-bottom: 12px !important;
}

.material-status {
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #858a91 !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  letter-spacing: 0.02em !important;
}

.material-status.status-new,
.material-status.status-progress,
.material-status.status-done {
  color: #bca269 !important;
  border-color: rgba(221, 185, 111, 0.10) !important;
  background: rgba(221, 185, 111, 0.035) !important;
}

.material-actions {
  gap: 6px !important;
}

.progress-value {
  color: #8d929a !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

.favorite-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #5f646c !important;
  box-shadow: none !important;
}

.favorite-btn.active {
  border-color: rgba(221, 185, 111, 0.15) !important;
  background: rgba(221, 185, 111, 0.055) !important;
  color: #d8b96f !important;
}

.material-card h3 {
  margin-bottom: 7px !important;
  color: #f2efe9 !important;
  font-size: 20px !important;
  font-weight: 680 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.03em !important;
}

.material-card p {
  max-width: 620px;
  color: #8c9198 !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

.material-meta {
  margin: 12px 0 11px !important;
  color: #696e76 !important;
  font-size: 9.5px !important;
  font-weight: 590 !important;
}

.material-card .progress-track {
  height: 3px !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.material-card .progress-fill {
  background: linear-gradient(90deg, #b99550, #e6c77f) !important;
  box-shadow: none !important;
}

.open-material-btn {
  min-height: 40px !important;
  margin-top: 13px !important;
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: #111216 !important;
  color: #d9d6d0 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.open-material-btn.start,
.open-material-btn.continue {
  border-color: rgba(221, 185, 111, 0.16) !important;
  background: rgba(221, 185, 111, 0.065) !important;
  color: #e7cd95 !important;
}

/* Reader: editorial focus mode. */
.material-modal {
  padding: 18px !important;
  background: rgba(1, 1, 2, 0.86) !important;
  backdrop-filter: blur(18px) !important;
}

.material-modal-card {
  width: min(760px, 100%) !important;
  max-height: 94dvh !important;
  padding: 0 30px 38px !important;
  border-radius: 26px !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
  background: #090a0c !important;
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.62) !important;
}

.material-modal-topbar {
  margin: 0 -30px 24px !important;
  padding: 12px 30px !important;
  top: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
  background: rgba(9, 10, 12, 0.97) !important;
  backdrop-filter: blur(24px) !important;
}

.material-modal-topbar::before,
.material-modal-topbar::after {
  display: none !important;
}

.reader-progress-sticky {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.reader-progress-sticky .reader-progress-top {
  margin-bottom: 7px !important;
  color: #767b83 !important;
  font-size: 9px !important;
}

.reader-progress-sticky .reader-progress-top strong {
  color: #bda267 !important;
}

.reader-progress-sticky .progress-track {
  height: 2px !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.reader-progress-sticky .progress-fill {
  background: #d5b36b !important;
  box-shadow: none !important;
}

.material-modal-topbar .modal-close {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  background: #111216 !important;
  color: #9a9fa6 !important;
  font-size: 20px !important;
  box-shadow: none !important;
}

#materialModalCategory,
#materialModalTitle,
.material-modal-description,
.material-modal-body,
.reaction-box {
  width: min(100%, 620px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#materialModalCategory {
  margin-bottom: 12px !important;
}

#materialModalTitle {
  font-size: clamp(30px, 6vw, 42px) !important;
  font-weight: 710 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.047em !important;
}

.material-modal-description {
  margin-top: 12px !important;
  color: #9a9fa6 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.material-modal-body {
  margin-top: 26px !important;
  color: #dedbd5 !important;
  font-size: 16.5px !important;
  line-height: 1.82 !important;
}

.material-modal-body p {
  margin-bottom: 20px !important;
  line-height: 1.82 !important;
}

.material-modal-body h2,
.material-modal-body h3 {
  margin: 34px 0 12px !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
}

.reaction-box {
  margin-top: 34px !important;
  padding: 15px !important;
  border-radius: 16px !important;
  background: #0e0f12 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Practices: utility cards, not colorful feature banners. */
.core-functions-grid {
  gap: 9px !important;
}

.core-function-card {
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  min-height: 92px !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  background: linear-gradient(180deg, #0f1013, #0a0b0d) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.20) !important;
  transform: none !important;
}

.core-function-card:hover,
.core-function-card:focus-visible {
  border-color: rgba(221, 185, 111, 0.14) !important;
  background: linear-gradient(180deg, #111216, #0b0c0e) !important;
}

.core-function-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(221, 185, 111, 0.10) !important;
  background: #141519 !important;
  color: #c3a768 !important;
  box-shadow: none !important;
}

.core-function-icon svg {
  width: 21px !important;
  height: 21px !important;
}

.core-function-copy {
  min-width: 0;
}

.core-function-copy small {
  margin-bottom: 4px !important;
  color: #6e737b !important;
  font-size: 8.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
}

.core-function-copy strong {
  color: #ece9e3 !important;
  font-size: 15px !important;
  font-weight: 670 !important;
  line-height: 1.2 !important;
}

.core-function-copy em {
  margin-top: 4px !important;
  color: #7f848c !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}

.core-function-state {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  min-height: 28px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #777c84 !important;
  font-size: 8.5px !important;
  font-weight: 640 !important;
  white-space: nowrap;
}

/* Professor: quiet, focused workspace. */
#assistantPanel.assistant-panel.card:not(.hidden) {
  min-height: min(650px, calc(100dvh - 150px)) !important;
  margin: 0 0 10px !important;
  padding: 18px !important;
  gap: 14px !important;
  border-radius: 22px !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: #090a0c !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.34) !important;
}

#assistantPanel .assistant-detail-toolbar {
  display: none !important;
}

#assistantPanel .assistant-head {
  align-items: flex-start !important;
  gap: 12px !important;
  padding-bottom: 2px;
}

#assistantPanel .assistant-head h3 {
  margin: 2px 0 5px !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}

#assistantPanel .assistant-head p {
  max-width: 560px !important;
  color: #858a92 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

#assistantPanel .assistant-limit {
  min-height: 30px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 10px !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  background: #111216 !important;
  color: #8b9097 !important;
  font-size: 9px !important;
  font-weight: 650 !important;
}

#assistantPanel .assistant-messages {
  padding: 14px !important;
  border-radius: 18px !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  background: #07080a !important;
}

#assistantPanel .assistant-empty {
  color: #737880 !important;
}

#assistantPanel .assistant-empty strong {
  color: #c7c3bb !important;
  font-weight: 650 !important;
}

#assistantPanel .assistant-message {
  border-radius: 16px !important;
  box-shadow: none !important;
}

#assistantPanel .assistant-message.professor {
  background: #111216 !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
}

#assistantPanel .assistant-message.user {
  background: rgba(221, 185, 111, 0.08) !important;
  border-color: rgba(221, 185, 111, 0.12) !important;
}

#assistantPanel .assistant-form {
  gap: 8px !important;
}

#assistantPanel .assistant-form textarea,
input,
select,
textarea {
  border-color: rgba(255, 255, 255, 0.07) !important;
  background: #0f1013 !important;
  color: #ece9e3 !important;
  box-shadow: none !important;
}

#assistantPanel .assistant-form textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(221, 185, 111, 0.22) !important;
  box-shadow: 0 0 0 3px rgba(221, 185, 111, 0.035) !important;
  outline: none !important;
}

/* Buttons: gold is reserved for the main action. */
.btn {
  min-height: 42px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 670 !important;
  box-shadow: none !important;
}

.btn-primary {
  border: 1px solid rgba(242, 217, 159, 0.10) !important;
  background: linear-gradient(180deg, #e7c982, #cda75d) !important;
  color: #15120d !important;
  box-shadow: 0 8px 24px rgba(205, 167, 93, 0.13) !important;
}

.btn-primary:hover {
  filter: brightness(1.025);
}

.btn-secondary,
.text-button {
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: #101115 !important;
  color: #a8a49d !important;
}

/* Bottom navigation: compact floating dock with one restrained active state. */
.menu-tabs {
  width: min(520px, calc(100vw - 18px)) !important;
  max-width: 520px !important;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 3px !important;
  padding: 5px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  background: rgba(9, 10, 12, 0.92) !important;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  backdrop-filter: blur(28px) saturate(120%) !important;
}

.menu-tabs::before {
  display: none !important;
}

.menu-tab {
  min-height: 52px !important;
  gap: 3px !important;
  border-radius: 16px !important;
  color: #626770 !important;
  font-size: 9.5px !important;
  font-weight: 620 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  color: #6f747d !important;
  background: transparent !important;
  transform: none !important;
}

.nav-icon svg {
  width: 19px !important;
  height: 19px !important;
}

.nav-icon path {
  stroke-width: 1.75 !important;
}

.menu-tab.active {
  position: relative;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #e8e4dd !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.menu-tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 12px;
  height: 1.5px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #d8b66f;
  box-shadow: 0 0 10px rgba(216, 182, 111, 0.26);
}

.menu-tab.active .nav-icon {
  color: #d9b970 !important;
  background: transparent !important;
  transform: none !important;
}

/* Toasts and empty states follow the quieter visual system. */
.app-toast {
  bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  border-color: rgba(221, 185, 111, 0.15) !important;
  border-radius: 13px !important;
  background: rgba(13, 14, 16, 0.96) !important;
  color: #d8d4cb !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42) !important;
}

.empty-card {
  border-style: solid !important;
  color: #767b83 !important;
}

@media (max-width: 560px) {
  .app-shell {
    width: min(100% - 16px, 560px) !important;
    padding-top: 8px !important;
    padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .topbar.card {
    margin-bottom: 9px !important;
    padding: 11px 12px !important;
    border-radius: 17px !important;
  }

  .topbar h1 {
    font-size: 15px !important;
  }

  .topbar p {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9.5px !important;
  }

  .badge {
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 8.5px !important;
  }

  .screen[data-screen-panel="profile"] > .hero-panel {
    padding: 11px 12px !important;
    border-radius: 17px !important;
  }

  .screen[data-screen-panel="profile"] .avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }

  .screen[data-screen-panel="profile"] .sub-box {
    min-width: 106px !important;
  }

  .home-resume-card {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 15px !important;
    border-radius: 20px !important;
  }

  .home-resume-card::before {
    top: 22px;
    bottom: 22px;
  }

  .home-resume-card h3 {
    font-size: 25px !important;
  }

  .home-resume-button {
    width: 100% !important;
  }

  .program-invite-card {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .section-hero.card {
    padding: 16px 4px 10px !important;
  }

  .section-hero h2 {
    font-size: 31px !important;
  }

  .section-hero .hero-text {
    font-size: 12.5px !important;
  }

  .screen[data-screen-panel="materials"] .filter-panel {
    padding: 9px !important;
    border-radius: 16px !important;
  }

  .segmented-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .chip,
  .segment {
    min-height: 34px !important;
    font-size: 10px !important;
  }

  .material-card {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .material-card h3 {
    font-size: 19px !important;
  }

  .material-modal {
    align-items: end !important;
    padding: 0 !important;
  }

  .material-modal-card {
    width: 100% !important;
    max-height: 96dvh !important;
    padding: 0 18px 34px !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: 0 !important;
  }

  .material-modal-topbar {
    margin: 0 -18px 22px !important;
    padding: 10px 18px !important;
  }

  #materialModalTitle {
    font-size: 31px !important;
  }

  .material-modal-body {
    font-size: 16px !important;
    line-height: 1.78 !important;
  }

  .core-functions-grid {
    grid-template-columns: 1fr !important;
  }

  .core-function-card {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    min-height: 84px !important;
    padding: 12px !important;
    border-radius: 17px !important;
  }

  .core-function-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
  }

  .core-function-copy strong {
    font-size: 14px !important;
  }

  .core-function-copy em {
    font-size: 10px !important;
  }

  .core-function-state {
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 8px !important;
  }

  #assistantPanel.assistant-panel.card:not(.hidden) {
    min-height: calc(100dvh - 124px) !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  #assistantPanel .assistant-head h3 {
    font-size: 23px !important;
  }

  #assistantPanel .assistant-form {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }

  #assistantPanel .assistant-form textarea,
  #assistantPanel .assistant-send,
  #assistantPanel .assistant-form button[type="submit"] {
    min-height: 48px !important;
    height: 48px !important;
  }

  #assistantPanel .assistant-send,
  #assistantPanel .assistant-form button[type="submit"] {
    width: 48px !important;
    min-width: 48px !important;
  }

  .menu-tabs {
    width: calc(100vw - 12px) !important;
    gap: 2px !important;
    padding: 4px !important;
    border-radius: 20px !important;
  }

  .menu-tab {
    min-height: 50px !important;
    border-radius: 14px !important;
    font-size: 9px !important;
  }

  .nav-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (max-width: 360px) {
  .topbar p {
    display: none !important;
  }

  .badge {
    font-size: 8px !important;
  }

  .core-function-state {
    display: none !important;
  }

  .core-function-card {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .menu-tab {
    font-size: 8.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Final QA adjustments after mobile render. */
.topbar.card {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.program-invite-card .btn-primary {
  border-color: rgba(221, 185, 111, 0.12) !important;
  background: rgba(221, 185, 111, 0.055) !important;
  color: #d7bb80 !important;
  box-shadow: none !important;
}

@media (max-width: 560px) {
  .topbar.card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .screen[data-screen-panel="materials"] .chip-row {
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding-bottom: 6px !important;
  }

  #assistantPanel.assistant-panel.card:not(.hidden) {
    height: calc(100dvh - 188px) !important;
    min-height: 540px !important;
    max-height: calc(100dvh - 188px) !important;
    overflow: hidden !important;
  }

  #assistantPanel .assistant-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
  }

  #assistantPanel .assistant-form {
    flex: 0 0 auto !important;
  }
}