@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --ink: #f2f4f7;
  --muted: #a1a6af;
  --line: rgba(237, 241, 248, .14);
  --soft: #11151c;
  --paper: #050608;
  --accent: #9bb8ff;
  --accent-dark: #7195e4;
  --white: #f7f8fa;
  --display: 'Instrument Serif', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 18px;
}
html { color-scheme: dark; background: #050608; scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse at 8% 12%, rgba(54, 78, 124, .12), transparent 38%),
    radial-gradient(ellipse at 91% 82%, rgba(43, 59, 93, .10), transparent 34%),
    #050608;
  color: #f2f4f7;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.shell { background: transparent; color: var(--ink); }
h1, h2, h3 { color: var(--ink); font-family: var(--sans); letter-spacing: -.045em; }
p, label, small, li { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid #a8c1ff !important; outline-offset: 3px; }

.top {
  border: 1px solid rgba(255,255,255,.12);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: rgba(8,10,14,.86);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
}
.wordmark, .top a, .top nav a { color: #f3f5f8; }
.top nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.text-btn { color: #f3f5f8; }
.nav-count { background: #9bb8ff; color: #080b10; }

.button, .login-submit-btn, .parent-access-btn, .how-primary {
  border: 1px solid #f4f5f7;
  background: #f4f5f7;
  color: #080a0e;
  box-shadow: 0 8px 30px rgba(0,0,0,.22);
}
.button:hover, .login-submit-btn:hover, .parent-access-btn:hover, .how-primary:hover {
  border-color: #bed0ff;
  background: #bed0ff;
  color: #080a0e;
}
.button.secondary, .parent-access-btn-secondary {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  color: #f2f4f7;
}
.button.secondary:hover, .parent-access-btn-secondary:hover { background: rgba(255,255,255,.10); }
.card, .path, .opportunity, .curriculum-list li, .mission-row,
.submission-strip, .course-card, .dashboard-stats article,
.dashboard-feature > div, .parent-summary, .parent-student-chip,
.parent-code-reveal, .path-option, .guide-note, .feedback,
.guide-shell .message, .demo-role-section, .signup-terms {
  border-color: rgba(255,255,255,.13);
  background: linear-gradient(145deg, rgba(21,24,31,.96), rgba(10,12,16,.96));
  color: #eef1f6;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.path, .parent-student-chip { color: #eef1f6; }
.path:hover, .path-option:hover, .parent-student-chip:hover { border-color: rgba(155,184,255,.52); background: #111722; }
.path p, .muted, .card .muted, .login-note, .field-helper,
.parent-student-chip small, .linked-parent small,
.parent-stats p, .parent-profile p:not(.kicker),
.how-page .how-steps li p, .how-page .how-path-row p {
  color: #a1a6af;
}
.progress, .mission-quota div { background: rgba(255,255,255,.12); }
.progress i, .mission-quota b { background: #9bb8ff; }
.stat-row, .stat, .steps, .section, .admin-nav, .table th, .table td,
.mission-submit, .submission-strip, .mission-row, .parent-stats,
.parent-progress-list, .family-access { border-color: rgba(255,255,255,.14); }
.stat strong, .dashboard-stats strong, .profile-mark { color: #f4f6fa; }
.profile-mark, .badge, .progress-mark { background: #182131; color: #dbe5ff; }
.progress-mark.done { background: #9bb8ff; color: #080b10; }
.table { color: #edf0f5; }
.table td, .table th { border-color: rgba(255,255,255,.13); }
.field input, .field textarea, .field select, .login-input,
.parent-auth .signup-form .field input, .guide-form textarea {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: #0c0f14;
  color: #f4f6f8;
  caret-color: #bed0ff;
}
.field input::placeholder, .field textarea::placeholder, .login-input::placeholder,
.guide-form textarea::placeholder { color: #818792; }
.field input:focus, .field textarea:focus, .field select:focus, .login-input:focus {
  border-color: #9bb8ff;
  background: #0c0f14;
  box-shadow: 0 0 0 3px rgba(155,184,255,.14);
}
.notice, .login-error-notice {
  border: 1px solid rgba(255,130,151,.26);
  border-left: 4px solid #ff8297;
  border-radius: 12px;
  background: rgba(95,27,42,.22);
  color: #ffdce2;
}
.feedback { border-left: 3px solid #9bb8ff; }
.guide-shell .message.user { background: #182131; }
.prompt-row button { border-color: rgba(255,255,255,.24); border-radius: 999px; background: #10141b; color: #f1f3f7; }
.prompt-row button:hover { border-color: #9bb8ff; background: #171f2e; }
.tabs, .staff-tabs {
  border-color: rgba(255,255,255,.14);
  background: rgba(7,9,13,.94);
  color: #f2f4f7;
  box-shadow: 0 -12px 36px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}
.tabs a, .staff-tabs a { color: #c7ccd6; }
.tabs a[aria-current="page"], .staff-tabs a[aria-current="page"] { color: #fff; }
.admin-nav { gap: 10px; }
.admin-nav a { color: #cfd4de; }
.admin-nav a:hover { color: #fff; }

.login-page-wrap { background: transparent; }
.login-page-wrap .ambient-glow-1 {
  background: radial-gradient(circle, rgba(116,151,225,.17), transparent 70%);
}
.login-page-wrap .ambient-glow-2 {
  background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
}
.login-card {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: rgba(12,14,19,.88);
  color: #f2f4f7;
  box-shadow: 0 30px 90px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.06);
}
.login-title, .login-brand-logo, .login-field-label, .login-card-footer a { color: #f4f5f7; }
.login-subtitle, .login-nav-right, .login-card-footer, .parent-access > p { color: #a1a6af; }
.login-tagline-badge { color: #bcd0ff; border-color: rgba(155,184,255,.25); background: rgba(155,184,255,.09); }
.login-tagline-badge .pulse-dot { background: #9bb8ff; }
.demo-role-section { border-radius: 14px; }
.demo-role-header span { color: #a1a6af; }
.demo-role-header small { color: #bcd0ff; }
.role-pill { border-color: rgba(255,255,255,.18); background: #10141b; color: #e9edf4; }
.role-pill:hover, .role-pill.active { border-color: #9bb8ff; background: #9bb8ff; color: #080b10; }
.login-input { color: #f4f6f8; }
.password-toggle-btn { color: #a1a6af; }
.password-toggle-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.login-card-footer, .parent-access { border-color: rgba(255,255,255,.13); }
.back-home-btn {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #f2f4f7;
  box-shadow: none;
}
.back-home-btn:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); }
.bottom-home-link { color: #a1a6af; }
.signup-terms { color: #dfe4ed; }
.path-option:has(input:checked) { border-color: #9bb8ff; background: #151d2b; box-shadow: inset 0 0 0 1px rgba(155,184,255,.24); }
.path-option strong { color: #f2f4f7; }
.path-option small { color: #a1a6af; }
.parent-access-btn { color: #080a0e; }
.parent-access-btn-secondary { color: #f2f4f7; }
.password-toggle-btn:focus-visible, .button:focus-visible { outline-color: #bed0ff !important; }

.how-page {
  --how-ink: #f1f3f7;
  --how-muted: #a1a6af;
  --how-sage: #121722;
  --how-paper: #050608;
  color: #f1f3f7;
}
.how-page .how-nav { border-color: rgba(255,255,255,.14); }
.how-page .how-nav a { color: #d2d7e0; }
.how-page .how-nav a:hover, .how-page .how-footer a:hover { color: #bed0ff; }
.how-page .how-hero {
  background: radial-gradient(ellipse at 82% 22%, rgba(79,105,164,.30), transparent 40%),
              radial-gradient(ellipse at 12% 88%, rgba(255,255,255,.07), transparent 42%),
              linear-gradient(130deg, #0b0d12, #07090d 65%, #101521);
}
.how-page .how-hero.has-calm-image {
  background-image: linear-gradient(90deg,rgba(5,6,8,.92),rgba(5,6,8,.66) 54%,rgba(5,6,8,.25)),url('/assets/images/nota-learning-background.jpg');
}
.how-page .how-hero-copy>p:not(.how-kicker) { color: #c3c8d1; }
.how-page .how-hero-note { border-color: rgba(255,255,255,.18); color: #c9ced8; }
.how-page .how-steps, .how-page .how-paths, .how-page .how-your-work { border-color: rgba(255,255,255,.14); }
.how-page .how-steps ol, .how-page .how-path-list { border-color: rgba(255,255,255,.22); }
.how-page .how-steps li, .how-page .how-path-row { border-color: rgba(255,255,255,.13); }
.how-page .how-steps li>span, .how-page .how-path-number { color: #9bb8ff; }
.how-page .how-footer { color: #b4bac4; }
.how-page .how-primary { color: #080a0e !important; }
.how-page .how-primary:hover { color: #080a0e !important; }

.landing-home, .story-page, .story-site-footer { color: #f2f4f7; }
.landing-site-footer, .story-site-footer { background: #050608; }
.landing-site-footer { border-color: rgba(255,255,255,.12); }
@media (max-width: 700px) {
  .login-card { padding: 30px 22px; }
  .signup-row { grid-template-columns: 1fr; gap: 0; }
  .parent-access-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Keep dashboard and progress states in the same dark visual system. */
.dashboard-profile span { border: 1px solid rgba(155,184,255,.24); background: #182131; color: #dbe5ff; }
.dashboard-feature aside { border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: linear-gradient(145deg,#171e2b,#0d1118); color: #f1f3f7; }
.dashboard-bottom > div, .friendly-empty, .profile-project {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: linear-gradient(145deg,rgba(21,24,31,.96),rgba(10,12,16,.96));
  color: #eef1f6;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.weekly-progress, .course-progress-mini, .course-progress-bar { background: #171b23; }
.weekly-progress b, .course-progress-mini b { background: linear-gradient(90deg,#7799e6,#b1c6ff); }
.admin-nav a, .staff-tabs a {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.035);
  color: #dce1ea;
}
.admin-nav a:hover, .staff-tabs a:hover { border-color: rgba(155,184,255,.45); background: rgba(155,184,255,.10); color: #fff; }
.dashboard-goal, .in-app-course-note {
  border: 1px solid rgba(155,184,255,.20);
  border-left: 3px solid #9bb8ff;
  border-radius: 0 14px 14px 0;
  background: rgba(18,25,38,.88);
  color: #e9edf5;
}
.tabs a, .staff-tabs a { text-decoration: none; }

/* Match the homepage's white 555 mark in every shared navigation and account header. */
.nota-brand-icon { width: 34px !important; height: 17px !important; }
.nota-brand-icon img { width: 100% !important; height: 100% !important; object-fit: contain; filter: brightness(0) invert(1) !important; }

/* Shared landing-style footer for pages without a custom footer. */
.notta-global-footer {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 2.5rem clamp(1.25rem,5vw,4.75rem) 1.25rem;
  background: #050608;
  color: #f2f4f7;
}
.notta-global-footer .landing-footer-main {
  display: grid;
  width: min(1200px,100%);
  grid-template-columns: 1.5fr repeat(3,minmax(0,1fr));
  gap: 2rem;
  margin: 0 auto;
  padding-bottom: 2.5rem;
}
.notta-global-footer .landing-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #fafafa;
  text-decoration: none;
}
.notta-global-footer .landing-footer-brand img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.notta-global-footer .landing-footer-brand strong { color: #fafafa; font-size: 20px; font-weight: 700; letter-spacing: -.06em; }
.notta-global-footer .landing-footer-brand-block p { margin: .8rem 0 0; color: #8b8f98; font-size: 12px; line-height: 1.7; }
.notta-global-footer .landing-footer-nav-group { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.notta-global-footer .landing-footer-nav-group > span { margin-bottom: .25rem; color: #8b8f98; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.notta-global-footer .landing-footer-nav-group a { color: #c4c8d0; font-size: 12px; text-decoration: none; transition: color 180ms ease; }
.notta-global-footer .landing-footer-nav-group a:hover { color: #fff; }
.notta-global-footer .landing-footer-bottom {
  display: flex;
  width: min(1200px,100%);
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 1.1rem;
  color: #777b84;
  font-size: 10px;
}
@media(max-width:700px) {
  .notta-global-footer { padding: 2rem 1.25rem 1rem; }
  .notta-global-footer .landing-footer-main { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; padding-bottom: 1.75rem; }
  .notta-global-footer .landing-footer-brand-block { grid-column: 1/-1; }
}
@media(max-width:360px) {
  .notta-global-footer .landing-footer-main { gap: 1.5rem 1rem; }
  .notta-global-footer .landing-footer-nav-group a { font-size: 11px; }
}