:root {
  --bg: #e9faf6;
  --card: rgba(255, 255, 255, .9);
  --card-soft: rgba(227, 250, 244, .88);
  --mint: #9ce8d7;
  --mint-strong: #39b9a6;
  --lavender: #d7e4e3;
  --lavender-strong: #78918e;
  --ink: #173d42;
  --soft-ink: #456268;
  --line: #b9d8d5;
  --line-2: #d7e9e7;
  --cream: #f9fffd;
  --navy: #173d42;
  --navy-2: #28696c;
  --shadow: 0 18px 42px rgba(25, 111, 104, .12), 0 3px 10px rgba(103, 153, 149, .08);
}

body {
  background: radial-gradient(circle at 8% 2%, #fff, transparent 25rem), radial-gradient(circle at 96% 8%, rgba(141,239,224,.32), transparent 32rem), linear-gradient(145deg, #fbfffe 0%, #ddfaf4 55%, #edf7f6 100%);
  background-attachment: fixed;
  color: var(--ink);
}

.preview-shell, .path-intro-shell, .workspace { background: transparent; }

.preview-top, .flowstate-family, .preview-hero, .preview-grid article, .preview-advisor, .preview-about, .auth-card, .path-intro-main, .path-intro-footer, .panel, .topbar, .portal-view-toolbar, .mini-card, .hero, .hero-panel {
  border-color: rgba(139, 184, 181, .72);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(224,248,242,.82));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px) saturate(1.15);
}

.preview-top, .topbar, .portal-view-toolbar { border-top: 1px solid rgba(255,255,255,.96); }

.preview-top img, .preview-about-mark img, .path-intro-brand img, .brand-logo, .about-university-heading img {
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 24%;
  box-shadow: 0 16px 34px rgba(33,65,69,.2), 0 0 0 4px rgba(117,220,205,.15);
}

.preview-hero h1, .preview-about h2, .preview-advisor h2, .hero h2, .portal-view-heading h1, .panel h2, .panel h3 {
  color: #173d42;
  text-shadow: 0 1px 0 #fff;
}

.eyebrow, .metric-label, .preview-grid article > span, .nav-group > p { color: #257e78; letter-spacing: .13em; }

.preview-actions a, .hero-actions a, .auth-actions button, .preview-advisor-form button, .enrollment-actions button, .path-intro-footer button, .reset-actions button, .portal-dashboard-button, .mobile-account-toggle, .flowstate-import-trigger, #installCampusButton, #exportStudentDataButton {
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  border-color: #8fd9ce;
  background: linear-gradient(180deg, #f8fffd, #bff3e8);
  color: #174f51;
  box-shadow: 0 8px 18px rgba(57,164,151,.16), inset 0 1px 0 #fff;
  text-shadow: none;
}

.preview-actions a:hover, .hero-actions a:hover, .auth-actions button:hover, .preview-advisor-form button:hover, .enrollment-actions button:hover, .path-intro-footer button:hover { filter: brightness(1.06) saturate(1.08); transform: translateY(-1px); }

input, select, textarea {
  border-color: #a9cfcb !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.92) !important;
  color: #173d42 !important;
  box-shadow: inset 0 1px 4px rgba(34,87,83,.06);
}

input:focus, select:focus, textarea:focus { border-color: #31a796 !important; outline: 3px solid rgba(65,195,177,.2) !important; }

.sidebar {
  border-right: 1px solid #b6ddd8;
  background: radial-gradient(circle at 25% 6%, rgba(255,255,255,.94), transparent 18rem), linear-gradient(170deg, #f8fffd 0%, #d9f8f1 57%, #edf7f6 118%);
  color: #173d42;
  box-shadow: 14px 0 38px rgba(51,124,117,.1);
}

.sidebar .brand-extension, .sidebar .nav-group > p, .sidebar .mini-card span, .sidebar .mini-card .eyebrow { color: #347c78; }
.nav-list a { border: 1px solid transparent; border-radius: 12px; color: #244f53; }
.nav-list a:hover, .nav-list a:focus-visible { border-color: #b2e8de; background: rgba(255,255,255,.78); }
.nav-list a.active { border-color: #8ed8cd; background: linear-gradient(135deg, #d1f8f0, #fafffe); color: #174f51; box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(56,145,135,.12); }
.sidebar .mini-card { border-color: #b8e2dc; background: rgba(255,255,255,.68); color: #173d42; box-shadow: 0 10px 24px rgba(48,125,118,.08); }

.preview-grid article, .reset-choice-grid button, .reset-comfort-menu li { border-color: #b8dcd7; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(220,247,240,.8)); box-shadow: 0 10px 24px rgba(30,93,87,.1); }
.extension-strip, .flowstate-family, .institutional-bar { border-color: rgba(116,181,176,.62); }
.meter, .reset-progress { background: rgba(90,143,139,.16); }
.meter span, .reset-progress span { background: linear-gradient(90deg, #9aebdc, #5bcbbb, #b7d3d0); }

.disclaimer-modal, .account-delete-modal, .flowstate-connect-modal { background: rgba(223,249,244,.86); backdrop-filter: blur(14px); }
.disclaimer-card, .account-delete-card, .flowstate-connect-card { border-color: #a8d8d1; border-radius: 24px; background: linear-gradient(145deg, #fff, #eafff9); box-shadow: 0 30px 80px rgba(73,149,141,.18); }

@media (max-width: 760px) {
  body { background: linear-gradient(160deg, #fff, #dcfaf4 64%, #edf7f6); }
  .preview-top, .preview-hero, .preview-advisor, .preview-about, .panel, .topbar, .portal-view-toolbar, .hero { border-radius: 18px; }
}

/* Readability and interaction safeguards */
body, button, input, select, textarea { line-height: 1.5; }

p, li, dd, small, .portal-view-heading > p, .panel > p, .preview-hero > div > p, .preview-about > div > p {
  color: #405f64;
}

strong, h1, h2, h3, h4, h5, h6, dt, label {
  color: #173d42;
}

a {
  color: #176d68;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

button, [role="button"], .preview-actions a, .hero-actions a {
  min-height: 44px;
  font-weight: 850;
}

button:not(.danger-button),
.lesson-assignment-button,
.lesson-sequence-actions button,
.advisor-chat-header button,
.elective-catalog-status button,
.topbar-actions button,
.topbar-actions a {
  border-color: #8fd9ce;
  background: linear-gradient(180deg, #ffffff, #c9f5ec);
  color: #174f51;
  text-shadow: none;
}

.topbar-actions span {
  border-color: #b7ddd8;
  background: rgba(255,255,255,.78);
  color: #244f53;
}

button:hover:not(:disabled),
[role="button"]:hover,
.topbar-actions a:hover {
  border-color: #55b9ac;
  filter: brightness(1.02) saturate(1.04);
}

:focus-visible {
  outline: 3px solid #16877d !important;
  outline-offset: 3px !important;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  opacity: .68 !important;
  color: #526b6f !important;
}

.auth-message,
.account-delete-message,
[role="alert"] {
  color: #7a2f35;
  font-weight: 750;
}

::placeholder {
  color: #667f82;
  opacity: 1;
}

::selection {
  background: #9de9dc;
  color: #123f42;
}

.theme-toggle {
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid #8fd9ce;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #c9f5ec);
  color: #174f51;
  padding: 0 16px;
  font-weight: 850;
  white-space: nowrap;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #071f24;
  --card: #10343a;
  --card-soft: #123c42;
  --mint: #276f69;
  --mint-strong: #76d9ca;
  --ink: #f2fffc;
  --soft-ink: #c2dbd8;
  --line: #3b7172;
  --line-2: #28585c;
  --cream: #0e3035;
  --navy: #f2fffc;
  --navy-2: #a9d8d3;
  --shadow: 0 18px 42px rgba(0, 12, 15, .34), 0 3px 10px rgba(0, 8, 10, .24);
}

html[data-theme="dark"] body {
  background: radial-gradient(circle at 8% 2%, rgba(61,145,136,.18), transparent 26rem), radial-gradient(circle at 96% 8%, rgba(43,109,108,.18), transparent 30rem), linear-gradient(145deg, #061b20, #0a292e 55%, #0d3438);
  color: #f2fffc;
}

html[data-theme="dark"] .preview-top,
html[data-theme="dark"] .flowstate-family,
html[data-theme="dark"] .preview-hero,
html[data-theme="dark"] .preview-grid article,
html[data-theme="dark"] .preview-advisor,
html[data-theme="dark"] .preview-about,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .path-intro-main,
html[data-theme="dark"] .path-intro-footer,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .portal-view-toolbar,
html[data-theme="dark"] .mini-card,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .reset-choice-grid button,
html[data-theme="dark"] .reset-comfort-menu li {
  border-color: #3b7172;
  background: linear-gradient(145deg, rgba(18,58,64,.98), rgba(11,43,49,.96));
  box-shadow: var(--shadow);
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] dd,
html[data-theme="dark"] small,
html[data-theme="dark"] .portal-view-heading > p,
html[data-theme="dark"] .panel > p,
html[data-theme="dark"] .preview-hero > div > p,
html[data-theme="dark"] .preview-about > div > p {
  color: #c2dbd8;
}

html[data-theme="dark"] strong,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] dt,
html[data-theme="dark"] label,
html[data-theme="dark"] .preview-hero h1,
html[data-theme="dark"] .preview-about h2,
html[data-theme="dark"] .preview-advisor h2,
html[data-theme="dark"] .hero h2,
html[data-theme="dark"] .portal-view-heading h1,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .panel h3 {
  color: #f2fffc;
  text-shadow: none;
}

html[data-theme="dark"] a,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .preview-grid article > span,
html[data-theme="dark"] .nav-group > p {
  color: #8fe7da;
}

html[data-theme="dark"] .sidebar {
  border-color: #35686a;
  background: radial-gradient(circle at 25% 6%, rgba(81,173,162,.16), transparent 18rem), linear-gradient(170deg, #09262b, #10373c 62%, #0b2d33);
  color: #f2fffc;
}

html[data-theme="dark"] .sidebar .brand-extension,
html[data-theme="dark"] .sidebar .nav-group > p,
html[data-theme="dark"] .sidebar .mini-card span,
html[data-theme="dark"] .sidebar .mini-card .eyebrow {
  color: #9cded5;
}

html[data-theme="dark"] .nav-list a { color: #e9faf7; }
html[data-theme="dark"] .nav-list a:hover,
html[data-theme="dark"] .nav-list a:focus-visible { border-color: #477d7c; background: rgba(126,213,201,.09); }
html[data-theme="dark"] .nav-list a.active { border-color: #68bdb3; background: linear-gradient(135deg, #18544f, #123e43); color: #fff; }
html[data-theme="dark"] .sidebar .mini-card { border-color: #3b7172; background: rgba(19,60,66,.9); color: #f2fffc; }

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  border-color: #4f8988 !important;
  background: #0c2d33 !important;
  color: #f2fffc !important;
}

html[data-theme="dark"] ::placeholder { color: #a8c5c3; }

html[data-theme="dark"] button:not(.danger-button),
html[data-theme="dark"] [role="button"],
html[data-theme="dark"] .preview-actions a,
html[data-theme="dark"] .hero-actions a,
html[data-theme="dark"] .topbar-actions a {
  border-color: #4c8f8b;
  background: linear-gradient(180deg, #1d5655, #123f43);
  color: #effffb;
  box-shadow: 0 8px 18px rgba(0,12,15,.22), inset 0 1px 0 rgba(255,255,255,.1);
}

html[data-theme="dark"] .topbar-actions span { border-color: #396f70; background: #10343a; color: #d5ece9; }
html[data-theme="dark"] .meter,
html[data-theme="dark"] .reset-progress { background: #163f44; }
html[data-theme="dark"] .meter span,
html[data-theme="dark"] .reset-progress span { background: linear-gradient(90deg, #4bb8aa, #7bd9cc, #a6c6c3); }

html[data-theme="dark"] .disclaimer-modal,
html[data-theme="dark"] .account-delete-modal,
html[data-theme="dark"] .flowstate-connect-modal { background: rgba(2,19,23,.88); }
html[data-theme="dark"] .disclaimer-card,
html[data-theme="dark"] .account-delete-card,
html[data-theme="dark"] .flowstate-connect-card { border-color: #477d7c; background: linear-gradient(145deg, #123b41, #0a2a30); }

html[data-theme="dark"] :focus-visible { outline-color: #84e7d8 !important; }

@media (max-width: 760px) {
  .preview-top .theme-toggle { width: 100%; }
  html[data-theme="dark"] body { background: linear-gradient(160deg, #061b20, #0a292e 64%, #0d3438); }
}

/* Marisa's dedicated CBIC a-IPC preparation path */
.path-choice-marisa {
  background: linear-gradient(145deg, #f2fffb, #dff8f1) !important;
  border-color: #63b9a3 !important;
}

.aipc-prep-panel {
  display: grid;
  gap: 1.35rem;
  background: linear-gradient(145deg, #ffffff 0%, #effcf8 52%, #e4f6f2 100%);
  border: 1px solid #9bd5c6;
}

.aipc-hero,
.aipc-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.aipc-hero h2,
.aipc-section-heading h3 {
  margin: .15rem 0 .55rem;
  color: #173f3b;
}

.aipc-hero p,
.aipc-section-heading p {
  max-width: 70ch;
}

.aipc-owner {
  flex: 0 0 auto;
  padding: .55rem .8rem;
  border-radius: 999px;
  color: #174d45;
  background: #cef2e8;
  border: 1px solid #86cbb9;
  font-weight: 800;
}

.aipc-mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  padding: .4rem;
  border-radius: 16px;
  background: #dff4ee;
}

.aipc-mode-tabs button,
.aipc-practice-actions button,
.aipc-submit-test {
  min-height: 46px;
  border: 1px solid #84c6b5;
  border-radius: 12px;
  color: #17463f;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.aipc-mode-tabs button.active,
.aipc-submit-test {
  color: #fff;
  background: #236f61;
  border-color: #236f61;
}

.aipc-mode {
  display: grid;
  gap: 1rem;
}

.aipc-mode.hidden { display: none; }

.aipc-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.aipc-module-grid button {
  display: grid;
  gap: .25rem;
  min-height: 128px;
  padding: 1rem;
  text-align: left;
  color: #244d47;
  background: rgba(255,255,255,.84);
  border: 1px solid #a9d8cc;
  border-radius: 16px;
  cursor: pointer;
}

.aipc-module-grid button.active {
  outline: 3px solid #59aa97;
  background: #fff;
}

.aipc-module-grid button > span,
.aipc-learning-card > span,
.aipc-practice-card > span {
  color: #247666;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.aipc-module-grid small { line-height: 1.4; }

.aipc-learning-card,
.aipc-practice-card {
  padding: 1.3rem;
  border-radius: 18px;
  border: 1px solid #9dd3c6;
  background: #fff;
  box-shadow: 0 12px 30px rgba(26, 87, 75, .08);
}

.aipc-learning-card h4,
.aipc-practice-card h4 {
  margin: .45rem 0 .7rem;
  color: #173f3b;
  font-size: 1.25rem;
}

.aipc-learning-card li { margin: .55rem 0; }
.aipc-learning-card > strong { display: block; margin-top: 1rem; color: #1d6256; }

.aipc-practice-card { min-height: 190px; }
.aipc-practice-card > div { margin-top: 1rem; padding: 1rem; border-radius: 12px; background: #eaf8f4; }
.aipc-practice-actions { display: flex; gap: .75rem; }
.aipc-practice-actions button { padding: .7rem 1rem; }

.aipc-test-list { display: grid; gap: 1rem; }
.aipc-test-list fieldset { margin: 0; padding: 1rem; border: 1px solid #a9d8cc; border-radius: 16px; background: rgba(255,255,255,.88); }
.aipc-test-list legend { padding: 0 .4rem; color: #173f3b; font-weight: 800; }
.aipc-test-list legend span { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-right: .55rem; border-radius: 50%; color: #fff; background: #287666; }
.aipc-test-list label { display: flex; align-items: flex-start; gap: .65rem; margin: .55rem 0; padding: .65rem; border-radius: 10px; color: #254b46; background: #f4fbf9; cursor: pointer; }
.aipc-test-list input { margin-top: .2rem; accent-color: #236f61; }
.aipc-question-review { margin: .75rem 0 0; padding: .75rem; border-radius: 10px; color: #713e15; background: #fff0dc; }
.aipc-question-review.correct { color: #18594d; background: #dbf5ed; }
.aipc-submit-test { margin-top: 1rem; padding: .75rem 1rem; }
.aipc-test-result { display: grid; gap: .25rem; padding: 1rem; border-radius: 14px; color: #173f3b; background: #dff4ee; }
.aipc-test-result:empty { display: none; }

.aipc-mastery-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.aipc-mastery-summary > div {
  display: grid;
  gap: .3rem;
  padding: 1rem;
  border: 1px solid #9dd3c6;
  border-radius: 14px;
  color: #244d47;
  background: rgba(255,255,255,.88);
}

.aipc-mastery-summary span,
.aipc-question-topic {
  color: #247666;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.aipc-mastery-summary small { line-height: 1.45; }
.aipc-question-topic { margin: .35rem 0 .7rem; }
.aipc-retry-missed { min-height: 46px; padding: .75rem 1rem; border: 1px solid #236f61; border-radius: 12px; color: #fff; background: #236f61; font-weight: 800; cursor: pointer; }

.aipc-final-intro { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.aipc-final-intro > div { display: grid; gap: .25rem; padding: 1rem; border: 1px solid #9dd3c6; border-radius: 14px; background: #fff; }
.aipc-final-intro > div span { color: #247666; font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.aipc-final-intro > p, .aipc-final-intro > button { grid-column: 1 / -1; }
.aipc-final-intro > button, .aipc-final-runner button, .aipc-final-results button { min-height: 48px; padding: .75rem 1rem; border: 0; border-radius: 12px; color: #fff; background: #236f61; font-weight: 900; cursor: pointer; }
.aipc-final-runner { display: grid; gap: 1rem; }
.aipc-final-runner > header { display: flex; justify-content: space-between; gap: 1rem; font-weight: 900; }
.aipc-final-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #cce8e1; }
.aipc-final-progress span { display: block; height: 100%; background: #236f61; }
.aipc-final-runner fieldset { display: grid; gap: .7rem; padding: 1.2rem; border: 1px solid #9dd3c6; border-radius: 16px; background: #fff; }
.aipc-final-runner legend { color: #173f3b; font-size: 1.15rem; font-weight: 900; }
.aipc-final-runner label { display: flex; gap: .65rem; padding: .75rem; border-radius: 10px; background: #eff9f6; }
.aipc-final-results > div { display: grid; gap: .55rem; margin: 1rem 0; }
.aipc-final-results section { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; padding: .75rem; border-bottom: 1px solid #acd7cc; }
[data-theme="dark"] .aipc-final-intro > div, [data-theme="dark"] .aipc-final-runner fieldset { color: #e4f5f0; background: #173b36; border-color: #477f74; }
[data-theme="dark"] .aipc-final-runner legend { color: #effbf7; }
[data-theme="dark"] .aipc-final-runner label { background: #20443e; }

.aipc-disclaimer {
  padding: 1rem;
  border-left: 4px solid #4b9e8b;
  color: #315c55;
  background: #f7fffc;
}

.aipc-disclaimer p { margin: .35rem 0 0; }

[data-theme="dark"] .path-choice-marisa,
[data-theme="dark"] .aipc-prep-panel {
  color: #e9faf5;
  background: linear-gradient(145deg, #173b36, #102c29) !important;
  border-color: #4b8f81 !important;
}

[data-theme="dark"] .aipc-hero h2,
[data-theme="dark"] .aipc-section-heading h3,
[data-theme="dark"] .aipc-learning-card h4,
[data-theme="dark"] .aipc-practice-card h4,
[data-theme="dark"] .aipc-test-list legend { color: #effbf7; }
[data-theme="dark"] .aipc-mode-tabs { background: #204a43; }
[data-theme="dark"] .aipc-module-grid button,
[data-theme="dark"] .aipc-learning-card,
[data-theme="dark"] .aipc-practice-card,
[data-theme="dark"] .aipc-test-list fieldset { color: #ddf3ed; background: #173b36; border-color: #477f74; }
[data-theme="dark"] .aipc-test-list label { color: #e4f5f0; background: #20443e; }
[data-theme="dark"] .aipc-practice-card > div,
[data-theme="dark"] .aipc-disclaimer { color: #e4f5f0; background: #214942; }
[data-theme="dark"] .aipc-test-result { color: #e9faf5; background: #245249; }
[data-theme="dark"] .aipc-mastery-summary > div { color: #e4f5f0; background: #173b36; border-color: #477f74; }

@media (max-width: 820px) {
  .aipc-module-grid { grid-template-columns: 1fr 1fr; }
  .aipc-mode-tabs, .aipc-final-intro { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .aipc-hero,
  .aipc-section-heading { display: block; }
  .aipc-owner { display: inline-block; margin-top: .5rem; }
  .aipc-module-grid { grid-template-columns: 1fr; }
  .aipc-practice-actions { flex-direction: column; }
  .aipc-mastery-summary { grid-template-columns: 1fr; }
  .aipc-mode-tabs, .aipc-final-intro { grid-template-columns: 1fr; }
  .aipc-final-results section { grid-template-columns: 1fr; }
}

.college-credit-intro,
.college-credit-planner {
  margin: 24px 0;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid color-mix(in srgb, var(--accent, #168b80) 28%, white);
  border-radius: 28px;
  background: linear-gradient(135deg, #f4fffd 0%, #ffffff 55%, #eefaf7 100%);
  color: #173a3a;
  box-shadow: 0 18px 48px rgba(24, 105, 96, 0.1);
}

.college-credit-intro h2,
.college-credit-planner h4 { color: #123f3d; }
.college-credit-intro a,
.college-credit-resources a { color: #086f68; font-weight: 800; }
.college-credit-intro ol,
.college-credit-plan ol { display: grid; gap: 12px; padding-left: 22px; }
.college-credit-intro li span { display: block; margin-top: 3px; }

.college-credit-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.college-credit-fields label { display: grid; gap: 7px; font-weight: 800; }
.college-credit-fields input {
  width: 100%; min-height: 48px; padding: 11px 13px;
  border: 1px solid #83c7bf; border-radius: 12px;
  background: #fff; color: #123331; font: inherit;
}
.college-credit-planner > button {
  min-height: 46px; padding: 10px 18px; border: 0; border-radius: 999px;
  background: #087c72; color: #fff; font-weight: 900; cursor: pointer;
}
.college-credit-plan {
  margin-top: 18px; padding: 18px; border-radius: 18px;
  background: #fff; border: 1px solid #b7ded9; color: #173a3a;
}
.college-credit-plan-summary { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.college-credit-plan-summary span { color: #4f6e6b; font-weight: 700; }
.college-credit-warning { padding: 12px; border-left: 4px solid #d38b16; background: #fff8e8; }
.college-credit-resources { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }

[data-theme="dark"] .college-credit-intro,
[data-theme="dark"] .college-credit-planner {
  background: linear-gradient(135deg, #173634, #102725);
  border-color: #3f817a; color: #ecfffc;
}
[data-theme="dark"] .college-credit-intro h2,
[data-theme="dark"] .college-credit-planner h4 { color: #fff; }
[data-theme="dark"] .college-credit-intro a,
[data-theme="dark"] .college-credit-resources a { color: #79e3d6; }
[data-theme="dark"] .college-credit-fields input,
[data-theme="dark"] .college-credit-plan { background: #0d201f; color: #f1fffd; border-color: #4a8982; }
[data-theme="dark"] .college-credit-warning { background: #362b14; color: #fff5d7; }

@media (max-width: 760px) {
  .college-credit-fields { grid-template-columns: 1fr; }
  .college-credit-plan-summary { grid-template-columns: 1fr; }
}
.about-goals-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin-top: 22px; padding: 11px 20px;
  border-radius: 999px; background: #087c72; color: #fff !important;
  font-weight: 900; text-decoration: none;
}