:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #172033;
  --muted: #68748a;
  --border: #e3e8f0;
  --primary: #6558f5;
  --primary-strong: #5145dc;
  --primary-soft: #eeecff;
  --success: #16a36a;
  --warning: #e79a25;
  --danger: #e45b69;
  --sidebar: #11182a;
  --sidebar-text: #aeb8cc;
  --shadow: 0 12px 32px rgba(22, 34, 57, 0.08);
  --radius: 18px;
  --transition: 180ms ease;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1220;
  --surface: #151c2d;
  --surface-2: #1a2235;
  --text: #edf1f8;
  --muted: #98a4bb;
  --border: #263149;
  --primary: #8b80ff;
  --primary-strong: #a39aff;
  --primary-soft: #28254c;
  --sidebar: #090e19;
  --sidebar-text: #9ca8bf;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

* {
  box-sizing: border-box;
}

/* The `hidden` attribute is how this app hides things: every filter sets
   `element.hidden = true`, and the auth gate hides its fallback sign-in button
   once Google's real button paints. The browser's own `[hidden] {display:none}`
   lives in the user-agent stylesheet, so ANY author rule that sets `display`
   silently beats it — a `.portfolio-card {display:flex}` card stays on screen
   while claiming to be hidden. Keep this rule, and keep the !important. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  transition: background var(--transition), color var(--transition);
}

.startup-error {
  width: min(620px, calc(100% - 40px));
  margin: 15vh auto;
  padding: 28px;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.startup-error p {
  color: var(--muted);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  width: 260px;
  flex-direction: column;
  background: var(--sidebar);
  color: white;
  padding: 26px 18px 20px;
  transition: transform 240ms ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 28px;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #897eff, #5a49e8);
  box-shadow: 0 8px 20px rgba(101, 88, 245, 0.35);
}

.brand-mark svg {
  width: 21px;
  height: 21px;
}

.nav-label {
  padding: 0 12px 10px;
  color: #69758d;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 45px;
  padding: 0 13px;
  border-radius: 11px;
  color: var(--sidebar-text);
  font-size: 0.9rem;
  font-weight: 550;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: white;
  transform: translateX(2px);
}

.nav-link.active {
  background: linear-gradient(90deg, rgba(111, 96, 255, 0.24), rgba(111, 96, 255, 0.1));
  color: #fff;
}

.nav-link svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.sidebar-footer {
  margin-top: auto;
  padding: 18px 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #748096;
  font-size: 0.73rem;
}

.main {
  min-height: 100vh;
  margin-left: 260px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  height: 78px;
  align-items: center;
  gap: 20px;
  padding: 0 34px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(16px);
}

.mobile-menu {
  display: none;
}

.icon-button {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

.icon-button:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.icon-button svg {
  width: 19px;
  height: 19px;
}

.notification-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--danger);
}

.search {
  position: relative;
  width: min(440px, 46vw);
}

.search svg {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transform: translateY(-50%);
}

.search input {
  width: 100%;
  height: 43px;
  padding: 0 16px 0 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: var(--surface-2);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

.auth-state {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.auth-hint {
  color: var(--muted);
  font-size: 0.78rem;
}

/* ---------- Google sign-in ----------
   Google's rendered button only supports its own handful of theme options, so
   it can't be made to match this app. Instead the app's own gradient button is
   what you see, and Google's real button sits transparently on top of it: the
   click lands on Google's button (full account chooser, "Use another account"),
   the styling is ours. The overlay is click-through until Google actually
   paints, so the fallback button underneath still works on its own. */
.google-signin {
  position: relative;
  display: inline-flex;
  width: 280px;
  max-width: 100%;
}

.google-signin .auth-button {
  width: 100%;
  gap: 10px;
}

.google-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: #fff;
  border-radius: 50%;
  padding: 2px;
  box-sizing: content-box;
}

.google-signin-real {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.google-signin.google-ready .google-signin-real {
  pointer-events: auto;
}

/* Stretch whatever Google renders (div or iframe) over the whole button so
   every part of it is clickable, not just the middle. */
.google-signin-real > div,
.google-signin-real iframe,
.google-signin-real [role="button"] {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.support-notice {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.9rem;
}

.avatar {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #21b68a, #087e68);
  color: white;
  font-size: 0.78rem;
  font-weight: 750;
}

.profile-copy {
  display: grid;
  line-height: 1.25;
}

.profile-copy strong {
  font-size: 0.82rem;
}

.profile-copy span {
  color: var(--muted);
  font-size: 0.7rem;
}

.content {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 38px 34px 52px;
  animation: page-fade-in 220ms ease both;
}

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

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--primary);
  font-size: 0.73rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  letter-spacing: -0.045em;
  line-height: 1.12;
}

.page-description {
  max-width: 660px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.date-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.date-chip svg {
  width: 17px;
  height: 17px;
  color: var(--primary);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  grid-column: span 4;
  min-height: 158px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: rise 480ms ease both;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* Anchor the progress bar to the bottom so cards read as full, not top-heavy. */
.card .progress-track {
  margin-top: auto;
}

.card:nth-child(2) { animation-delay: 50ms; }
.card:nth-child(3) { animation-delay: 100ms; }
.card:nth-child(4) { animation-delay: 150ms; }
.card:nth-child(5) { animation-delay: 200ms; }
.card:nth-child(6) { animation-delay: 250ms; }

.card:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: 0 16px 40px rgba(22, 34, 57, 0.12);
  transform: translateY(-3px);
}

.card-featured {
  grid-column: span 6;
  background:
    radial-gradient(120% 140% at 100% 0, color-mix(in srgb, var(--primary) 16%, transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), var(--surface));
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.card-featured .metric {
  font-size: 2.5rem;
}

.card-featured .card-icon {
  background: var(--grad, linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef));
  color: #fff;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
}

.card-icon.success { background: rgba(22, 163, 106, 0.12); color: var(--success); }
.card-icon.warning { background: rgba(231, 154, 37, 0.12); color: var(--warning); }
.card-icon.danger { background: rgba(228, 91, 105, 0.12); color: var(--danger); }

.card-icon svg {
  width: 21px;
  height: 21px;
}

.trend {
  padding: 5px 8px;
  border-radius: 20px;
  background: rgba(22, 163, 106, 0.1);
  color: var(--success);
  font-size: 0.68rem;
  font-weight: 700;
}

.card-label {
  margin: 16px 0 4px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.metric {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.metric small {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0;
}

.progress-track {
  height: 8px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-2);
}

.progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #8e83ff);
  transition: width 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.7rem;
}

.placeholder-panel {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  padding: 46px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.placeholder-panel::after {
  position: absolute;
  top: -100px;
  right: -70px;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-soft), transparent 68%);
  content: "";
  pointer-events: none;
}

.placeholder-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 17px;
  background: var(--primary-soft);
  color: var(--primary);
}

.placeholder-icon svg {
  width: 28px;
  height: 28px;
}

.placeholder-panel h2 {
  margin: 0 0 10px;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
}

.placeholder-panel p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
}

.coming-soon {
  display: inline-flex;
  margin-top: 28px;
  padding: 8px 12px;
  border-radius: 20px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: none;
  background: rgba(3, 8, 20, 0.58);
  backdrop-filter: blur(3px);
}

h2 {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}

.profile-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
  box-shadow: var(--shadow);
}

.profile-summary div {
  display: grid;
  gap: 5px;
  padding: 18px 22px;
  background: var(--surface);
}

.profile-summary span,
.field > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.profile-summary strong {
  font-size: 1rem;
}

.section-block {
  margin-top: 32px;
}

.portfolio-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.portfolio-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.portfolio-badge {
  flex: 0 0 auto;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portfolio-story {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.portfolio-story h3,
.portfolio-story h4 {
  margin: 0;
}

.portfolio-story p,
.portfolio-story li {
  color: var(--muted);
}

.portfolio-story ul {
  margin: 0;
  padding-left: 1.05rem;
  display: grid;
  gap: 6px;
}

.portfolio-columns {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 15px;
}

.quick-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.notification-feed {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.dashboard-notification {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 11px 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-soft) 48%, var(--surface));
}

.dashboard-notification.success {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.dashboard-notification.achievement {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.dashboard-notification p {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 650;
}

.notification-marker {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 13%, transparent);
}

.dashboard-notification.success .notification-marker { background: var(--success); }
.dashboard-notification.achievement .notification-marker { background: var(--warning); }

.velocity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.velocity-card {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 142px;
  padding: 18px;
}

.velocity-card > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.velocity-card > strong {
  margin-top: 6px;
  font-size: 1.28rem;
  letter-spacing: -0.035em;
}

.velocity-card > p {
  margin: 3px 0 0;
  font-size: 0.75rem !important;
}

.readiness-panel {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.readiness-overall,
.achievement-count {
  padding: 6px 10px;
  border-radius: 20px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
}

.readiness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}

.readiness-item > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.8rem;
  font-weight: 650;
}

.readiness-item strong {
  color: var(--primary);
  font-size: 0.75rem;
}

.readiness-track {
  height: 10px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}

.readiness-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #8f84ff 64%, var(--success));
  transition: width 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dashboard-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
}

.recommendation-list,
.achievement-grid {
  display: grid;
  gap: 10px;
}

.recommendation-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: border-color var(--transition), transform var(--transition);
}

.recommendation-item:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  transform: translateX(2px);
}

.recommendation-item > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
}

.recommendation-item strong {
  font-size: 0.82rem;
}

.recommendation-item p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.recommendation-item b {
  color: var(--primary);
}

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

.achievement-badge {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.achievement-badge.locked {
  opacity: 0.56;
  filter: grayscale(0.75);
}

.achievement-badge.unlocked {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}

.achievement-symbol {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.achievement-badge.unlocked .achievement-symbol {
  background: linear-gradient(135deg, #ffcf66, #e79a25);
  color: #3a2600;
  box-shadow: 0 7px 16px rgba(231, 154, 37, 0.24);
}

.achievement-badge strong {
  font-size: 0.78rem;
}

.achievement-badge p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--primary);
  border-radius: 11px;
  background: var(--primary);
  color: white;
  cursor: pointer;
  font-weight: 700;
  transition: transform var(--transition), background var(--transition);
}

.button:hover {
  background: var(--primary-strong);
  transform: translateY(-1px);
}

.button-secondary {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}

.button-danger {
  border-color: var(--danger);
  background: var(--danger);
}

.timeline {
  width: min(720px, 100%);
  margin: 0 auto;
}

.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.timeline-step.in-progress { border-color: var(--warning); }
.timeline-step.completed { border-color: var(--success); }
.timeline-step.current { border-color: var(--primary); }
.timeline-step.upcoming { opacity: 0.76; }

.timeline-marker {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.timeline-step.completed .timeline-marker {
  background: rgba(22, 163, 106, 0.14);
  color: var(--success);
}

.timeline-step.current .timeline-marker {
  background: var(--primary);
  color: white;
}

.timeline-status {
  display: inline-flex;
  margin-top: 10px;
  padding: 4px 9px;
  border-radius: 20px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 750;
}

.timeline-step .field {
  max-width: 250px;
  margin-top: 15px;
}

.timeline-arrow {
  display: block;
  padding: 6px 0;
  color: var(--primary);
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
}

.week-list {
  display: grid;
  gap: 12px;
}

.learning-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
  box-shadow: var(--shadow);
}

.learning-summary div {
  display: grid;
  gap: 4px;
  padding: 15px;
  background: var(--surface);
}

.learning-summary span {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 700;
}

.learning-summary strong {
  font-size: 1rem;
}

.planner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.phase-group {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.phase-header {
  padding: 4px 2px;
}

.week-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(22, 34, 57, 0.04);
}

.week-card.current-week {
  border-color: var(--primary);
}

.week-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
}

.week-card summary::-webkit-details-marker { display: none; }
.week-card summary > span:first-child { display: grid; }
.week-card summary small { color: var(--primary); font-weight: 750; }

.week-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 0.78rem;
}

.status-pill,
.priority,
.completion-pill {
  padding: 5px 9px;
  border-radius: 20px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 750;
}

.completion-pill {
  background: rgba(22, 163, 106, 0.12);
  color: var(--success);
}

.expand-label {
  min-width: 48px;
  color: var(--primary);
  font-weight: 700;
}

.week-body {
  padding: 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.week-body > .field { max-width: 260px; }

.week-controls {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(150px, 0.6fr);
  gap: 12px;
  max-width: 500px;
}

.deliverable-list {
  margin: 0 0 18px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.85rem;
}

.task-list {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.task {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.task input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.task input:checked + span {
  color: var(--muted);
  text-decoration: line-through;
}

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.course-filters {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
}

.skill-tags span {
  padding: 4px 8px;
  border-radius: 20px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.67rem;
  font-weight: 700;
}

.plan-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
}

.plan-columns > div,
.mini-project {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}

.plan-columns h3,
.week-body > h3 {
  margin: 0 0 8px;
  font-size: 0.85rem;
}

.plan-columns ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.82rem;
}

.mini-project {
  display: grid;
  gap: 3px;
  margin-bottom: 18px;
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.mini-project span {
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.data-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.data-card > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 0.88rem;
}

.card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.facts div {
  padding: 10px;
  border-radius: 9px;
  background: var(--surface-2);
}

.facts dt {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.facts dd {
  margin: 3px 0 0;
  font-size: 0.79rem;
  font-weight: 650;
}

.field {
  display: grid;
  gap: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 41px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
  background: var(--surface-2);
  color: var(--text);
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 0.55fr 0.7fr;
  gap: 10px;
  margin: 17px 0 12px;
}

.stacked-fields {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.text-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 750;
}

.range-field {
  display: grid;
  grid-template-columns: 1fr 46px;
  align-items: center;
  gap: 10px;
}

.range-field input {
  padding: 0;
  accent-color: var(--primary);
}

.range-field output {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 750;
  text-align: right;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.danger-zone {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.file-button input { display: none; }
.empty-state { color: var(--muted); text-align: center; }

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--sidebar);
  color: white;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition);
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

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

.calendar-month {
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.calendar-month h3 {
  margin: 0 0 12px;
  font-size: 0.88rem;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day,
.calendar-label {
  display: grid;
  min-height: 32px;
  place-items: center;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.65rem;
}

.calendar-label {
  min-height: 20px;
  font-weight: 800;
}

.calendar-day small {
  font-size: 0.48rem;
  font-weight: 800;
}

.calendar-day.current {
  background: var(--primary);
  color: white;
}

.calendar-day.completed {
  background: rgba(22, 163, 106, 0.16);
  color: var(--success);
  font-weight: 800;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1050px) {
  .card,
  .card-featured {
    grid-column: span 6;
  }

  .portfolio-columns {
    grid-template-columns: 1fr;
  }

  .profile-copy {
    display: none;
  }

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

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

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

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

  .dashboard-detail-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 780px) {
  .sidebar {
    transform: translateX(-100%);
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .sidebar {
    transform: translateX(0);
  }

  body.nav-open .sidebar-overlay {
    display: block;
  }

  .main {
    margin-left: 0;
  }

  .mobile-menu {
    display: grid;
  }

  .topbar {
    height: 70px;
    padding: 0 20px;
  }

  .search {
    flex: 1;
    width: auto;
  }

  .profile {
    display: none;
  }

  .content {
    padding: 30px 20px 42px;
  }
}

@media (max-width: 570px) {
  .topbar {
    gap: 10px;
    padding: 0 15px;
  }

  .search input {
    padding-right: 8px;
  }

  .topbar-actions {
    gap: 7px;
  }

  .topbar-actions .icon-button:first-child {
    display: none;
  }

  /* The topbar is a fixed-height, non-wrapping row, so anything that refuses
     to shrink pushes the whole document wider than the viewport and every page
     gains a horizontal scrollbar. Let the flexible parts actually shrink, and
     drop the two labels that are already shown elsewhere: the program name
     appears in the page-header eyebrow and the sidebar footer, and the signed-in
     name/email is one tap away behind the avatar. */
  .topbar > * {
    min-width: 0;
  }

  .topbar-program {
    display: none;
  }

  .auth-state .profile-copy {
    display: none;
  }

  .auth-pill {
    padding: 4px;
  }

  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .date-chip {
    display: none;
  }

  .dashboard-grid {
    gap: 15px;
  }

  .card,
  .card-featured {
    grid-column: 1 / -1;
  }

  .placeholder-panel {
    min-height: 360px;
    padding: 30px 24px;
  }

  .profile-summary,
  .content-grid,
  .compact-grid,
  .settings-grid,
  .filters {
    grid-template-columns: 1fr;
  }

  .plan-columns {
    grid-template-columns: 1fr;
  }

  .learning-summary,
  .calendar-grid,
  .week-controls {
    grid-template-columns: 1fr;
  }

  .week-card summary,
  .week-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .week-meta {
    gap: 7px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .readiness-grid,
  .achievement-grid {
    grid-template-columns: 1fr;
  }

  .readiness-panel {
    padding: 20px;
  }

  .readiness-panel .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

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

/* ---------- Topbar Features link ---------- */
.topbar-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.topbar-link:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ---------- Reference / document launcher ----------
   Source documents are full standalone pages (their own tabs, search and
   read-aloud), so they are linked, never embedded — an iframe squeezed a
   1500px layout into a scrolling box and made them unreadable. */
.doc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-card .button-row {
  margin-top: auto;
  align-items: center;
}

.doc-card-primary {
  border-left: 3px solid var(--primary);
}

.reference-empty {
  max-width: 720px;
}

/* ---------- Offline document links ----------
   One row of "Answers / PDF" links, reused on roadmap phases, unit cards,
   course cards and exam cards. */
.doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.timeline-step .doc-links {
  margin-top: 10px;
}

/* Long URLs in prose (recommended resources, notes) must wrap inside their
   card instead of pushing it wide — these strings are data, not layout. */
.portfolio-story li,
.deliverable-list li,
.data-card p {
  overflow-wrap: anywhere;
}

.text-link {
  overflow-wrap: anywhere;
}

/* ---------- Subject / unit planner ---------- */
.subject-group .phase-header {
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.subject-meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.subject-progress {
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.subject-progress small {
  color: var(--muted);
  font-size: 0.76rem;
}

.subject-progress-bar {
  height: 7px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}

.subject-progress-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.25s ease;
}

@media (max-width: 720px) {
  .subject-meta {
    margin-left: 0;
    align-items: flex-start;
    width: 100%;
  }
}

/* ---------- Topbar active-program indicator ---------- */
.topbar-program {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-program > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-program-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--program-accent, var(--primary));
}

@media (max-width: 720px) {
  .topbar-program { display: none; }
}

/* ---------- Program catalog (multi-course switcher) ---------- */
.program-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.program-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--program-accent, var(--primary)), color-mix(in srgb, var(--program-accent, var(--primary)) 45%, #ec4899));
  opacity: 0.85;
}

.program-card[data-select-program]:hover,
.program-card[data-select-program]:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--program-accent, var(--primary)) 55%, var(--border));
  box-shadow: 0 22px 48px -20px color-mix(in srgb, var(--program-accent, var(--primary)) 60%, transparent);
  outline: none;
}

.program-card.active {
  border-color: color-mix(in srgb, var(--program-accent, var(--primary)) 60%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--program-accent, var(--primary)) 35%, transparent), var(--shadow);
  background:
    radial-gradient(120% 80% at 100% 0, color-mix(in srgb, var(--program-accent, var(--primary)) 12%, transparent), transparent 60%),
    var(--surface);
}

.program-card.coming-soon {
  cursor: default;
  opacity: 0.62;
}

.program-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--program-accent, var(--primary)), color-mix(in srgb, var(--program-accent, var(--primary)) 55%, #7c3aed));
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--program-accent, var(--primary)) 70%, transparent);
}

.program-card h3 {
  margin: 4px 0 0;
  font-size: 1.05rem;
  color: var(--text);
}

.program-card .program-tagline {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

.program-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.program-card .program-status {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--program-accent, var(--primary)) 78%, var(--text));
}

.program-card.coming-soon .program-status {
  color: var(--muted);
}

/* ============================================================
   Next-gen gradient system
   ============================================================ */

/* Gradient primary buttons + brand */
.button:not(.button-secondary):not(.button-danger),
.auth-button:not(.button-secondary) {
  border: none;
  color: #fff;
  background-image: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
  box-shadow: 0 10px 24px -12px rgba(124, 58, 237, 0.75);
}

.button:not(.button-secondary):not(.button-danger):hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.brand-mark {
  background-image: linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef) !important;
  color: #fff !important;
}

/* Featured metric cards get a gradient number */
.card-featured .metric {
  background: linear-gradient(120deg, var(--primary), #d946ef);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Program hero (dashboard) ---------- */
.program-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 26px;
  padding: 30px 34px;
  border-radius: 24px;
  color: #fff;
  isolation: isolate;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--program-accent, var(--primary)) 90%, #312e81) 0%,
      color-mix(in srgb, var(--program-accent, var(--primary)) 60%, #7c3aed) 55%,
      color-mix(in srgb, var(--program-accent, var(--primary)) 50%, #db2777) 100%);
  box-shadow: 0 26px 60px -26px color-mix(in srgb, var(--program-accent, var(--primary)) 60%, transparent);
}

.program-hero-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(700px 240px at 100% -20%, rgba(255, 255, 255, 0.28), transparent 60%),
    radial-gradient(500px 200px at 0 120%, rgba(255, 255, 255, 0.12), transparent 60%);
  pointer-events: none;
}

.program-hero-top {
  display: flex;
  align-items: center;
  gap: 18px;
}

.program-hero-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 16px;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
}

.program-hero-eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.program-hero-name {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
}

.program-hero-tagline {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.98rem;
}

.program-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.program-hero-stats > div {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.program-hero-stats span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.program-hero-stats strong {
  font-size: 1.02rem;
  color: #fff;
}

/* Gradient section eyebrows for a cohesive next-gen accent */
.section-heading .eyebrow {
  background: linear-gradient(120deg, var(--primary), #d946ef);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 720px) {
  .program-hero { padding: 24px 20px; }
  .program-hero-stats { grid-template-columns: 1fr; }
}