/* 靛蓝 · 创作学院. A light, tactile alternative to the civic photographic theme.
   All overrides are scoped; course and mentor content geometry stays intact. */
html[data-ui-theme="cobalt"] {
  --ink: #242941;
  --deep: #242941;
  --muted: #62677e;
  --line: #e0e2ee;
  --action: #4654cf;
  --green: #4654cf;
  --blue: #3944ae;
  --mint: #eeeffc;
  --warm: #bb5a48;
  --yellow: #bb5a48;
  --danger: #a63d42;
  --danger-bg: #fff0f0;
  --color-primary: #4654cf;
  --color-secondary: #3944ae;
  --color-background: #f6f6fc;
  --color-foreground: #242941;
  --color-border: #e0e2ee;
  --color-ring: #4654cf;
  background: #f6f6fc;
}
html[data-ui-theme="cobalt"] body { background: #f6f6fc; color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; }
html[data-ui-theme="cobalt"] .site-header { background: #fff; border-bottom: 1px solid #e8e9f1; box-shadow: none; }
html[data-ui-theme="cobalt"] .brand-symbol { background: #4654cf; border-radius: 12px 12px 12px 3px; color: #fff; box-shadow: 0 4px 10px #4654cf1a; }
html[data-ui-theme="cobalt"] .brand strong { color: #252c55; }
html[data-ui-theme="cobalt"] .brand small { color: #62677e; }
html[data-ui-theme="cobalt"] .main-nav { gap: 5px; }
html[data-ui-theme="cobalt"] .main-nav a { position: relative; padding-inline: 13px; border: 0; border-radius: 10px; color: #51566e; }
html[data-ui-theme="cobalt"] .main-nav a.active { color: #3944ae; background: #eeeffc; }
html[data-ui-theme="cobalt"] .main-nav a.active::after { content: none; }
html[data-ui-theme="cobalt"] .main-nav a:hover { color: #3944ae; background: #f3f3fd; }
html[data-ui-theme="cobalt"] .header-actions :is(.account-link, .admin-link) { border-radius: 9px; }
html[data-ui-theme="cobalt"] .header-actions .admin-link { background: #f0f1fc; border-color: #e0e2f5; color: #3944ae; }

/* The hero is a bright editorial split, with photography in a separate tile. */
html[data-ui-theme="cobalt"] .hero { display: block; min-height: 0; color: var(--ink); background: linear-gradient(115deg, #f0f1ff 0%, #fafaff 65%); border-bottom: 1px solid #e6e7f4; }
html[data-ui-theme="cobalt"] .hero::before { content: none; }
html[data-ui-theme="cobalt"] .hero-inner { position: relative; isolation: isolate; padding-block: 52px 42px; min-height: 432px; }
html[data-ui-theme="cobalt"] .hero-inner::before { content: none; }
html[data-ui-theme="cobalt"] .hero-inner::after { content: ""; position: absolute; z-index: -1; inset: 32px 0 32px auto; width: 43%; border-radius: 100px 22px 22px 22px; background: #dfe2ed url('/assets/community-learning-hero.png') 63% center / cover no-repeat; box-shadow: 0 14px 32px #303a6f13; pointer-events: none; }
html[data-ui-theme="cobalt"] .hero h1 { width: 52%; max-width: none; margin: 0 0 11px; color: #252c55; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.35; letter-spacing: -.03em; text-shadow: none; }
html[data-ui-theme="cobalt"] .hero .hero-statement { width: 52%; max-width: none; color: #4654cf; font-size: clamp(18px, 1.65vw, 23px); line-height: 1.5; text-shadow: none; }
html[data-ui-theme="cobalt"] .hero p { width: 50%; max-width: none; color: #62677e; font-size: 15px; line-height: 1.8; text-shadow: none; }
html[data-ui-theme="cobalt"] .hero-search { width: 52%; max-width: 590px; min-height: 58px; height: auto; margin-block: 24px 10px; border: 1px solid #d6d9ef; border-radius: 14px; padding: 5px; box-shadow: 0 8px 20px #3944ae0b; }
html[data-ui-theme="cobalt"] .hero-search input { min-height: 46px; font-size: 15px; }
html[data-ui-theme="cobalt"] .hero-search button { min-height: 46px; border-radius: 9px; background: #4654cf; padding-inline: 19px; }
html[data-ui-theme="cobalt"] .hero-search button:hover { background: #3541b4; }
html[data-ui-theme="cobalt"] .hero .button-row { width: 52%; flex-wrap: wrap; gap: 8px 22px; }
html[data-ui-theme="cobalt"] .hero-link { display: inline-flex; align-items: center; min-height: 44px; color: #3944ae; border: 0; }
html[data-ui-theme="cobalt"] .hero-link:hover { color: #293389; text-decoration: underline; text-underline-offset: 4px; }
html[data-ui-theme="cobalt"] .hero .btn { background: #4654cf; border-color: #4654cf; color: #fff; }
html[data-ui-theme="cobalt"] .hero .btn.secondary { color: #3944ae; border-color: #d6d9ef; background: #fff; }
html[data-ui-theme="cobalt"] .hero-stats { width: 52%; margin-top: 24px; gap: 12px 0; color: #62677e; }
html[data-ui-theme="cobalt"] .hero-stats span { flex: 1; max-width: none; padding-inline: 12px; border-left-color: #d5d8eb; }
html[data-ui-theme="cobalt"] .hero-stats span:first-child { padding-left: 0; }
html[data-ui-theme="cobalt"] .hero-stats strong { color: #3944ae; font-size: 14px; }

/* Soft modular surfaces, with a consistent 44px action target. */
html[data-ui-theme="cobalt"] .section-alt { background: #eeeff9; }
html[data-ui-theme="cobalt"] .section-head { margin-bottom: 24px; }
html[data-ui-theme="cobalt"] .section-head h2 { color: #252c55; font-size: 23px; letter-spacing: -.02em; }
html[data-ui-theme="cobalt"] .page-intro h1 { color: #252c55; font-weight: 800; letter-spacing: -.025em; }
html[data-ui-theme="cobalt"] .page-intro { padding-block: 38px 26px; }
html[data-ui-theme="cobalt"] :is(.card, .event-card, .quick-link, .resource, .feed-post, .task-row) { border-color: #e0e2ee; border-radius: 16px; background-color: #fff; }
html[data-ui-theme="cobalt"] :is(.card, .event-card) { overflow: hidden; box-shadow: 0 4px 18px #343b6f06; transition: border-color 180ms ease, box-shadow 180ms ease; }
html[data-ui-theme="cobalt"] :is(.card, .event-card):hover { border-color: #bfc4ed; box-shadow: 0 10px 24px #343b6f12; }
html[data-ui-theme="cobalt"] .quick-link { min-height: 92px; border: 1px solid #e0e2ee; padding: 18px 20px; box-shadow: none; }
html[data-ui-theme="cobalt"] .quick-link:hover { border-color: #aeb6eb; background: #fff; box-shadow: 0 5px 16px #4654cf0c; }
html[data-ui-theme="cobalt"] .quick-link .arrow { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #eeeffc; color: #4654cf; }
html[data-ui-theme="cobalt"] .level-row > * { border-radius: 12px; border-color: #dce0f1; background: #fff; }
html[data-ui-theme="cobalt"] .level-row > :nth-child(2n) { background: #f2f3fd; }
html[data-ui-theme="cobalt"] :is(.btn, .hero .btn) { min-height: 44px; border-radius: 10px; box-shadow: none; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
html[data-ui-theme="cobalt"] .btn:hover { transform: none; background: #3541b4; border-color: #3541b4; box-shadow: 0 3px 10px #4654cf22; }
html[data-ui-theme="cobalt"] .btn.secondary { background: #fff; color: #3944ae; border-color: #ccd1ed; }
html[data-ui-theme="cobalt"] .btn.secondary:hover { background: #eeeffc; border-color: #aeb6eb; }
html[data-ui-theme="cobalt"] .btn.ghost { color: #3944ae; background: #f5f5fd; border-color: #e0e2ee; }
html[data-ui-theme="cobalt"] :is(.filter-bar, .v2-event-filters) { border: 1px solid #e0e2ee; border-radius: 14px; padding: 16px; background: #fff; box-shadow: 0 3px 12px #343b6f04; }
html[data-ui-theme="cobalt"] :is(.field input, .field select, .field textarea, .filter-bar input, .filter-bar select, .search-large, .v2-event-filters input, .v2-event-filters select) { border-color: #ccd0e3; border-radius: 9px; background: #fff; }
html[data-ui-theme="cobalt"] :is(.field input, .field select, .field textarea, .filter-bar input, .filter-bar select, .search-large):focus { border-color: #4654cf; box-shadow: 0 0 0 3px #4654cf16; }
html[data-ui-theme="cobalt"] .tabs { gap: 6px; border: 0; padding: 5px; border-radius: 12px; background: #eceef8; }
html[data-ui-theme="cobalt"] .tabs :is(a, button) { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 8px; }
html[data-ui-theme="cobalt"] .tabs :is(a, button).active { color: #3944ae; background: #fff; box-shadow: 0 2px 5px #343b6f0c; }
html[data-ui-theme="cobalt"] .tabs :is(a, button):hover { color: #3944ae; background: #f8f8ff; }
html[data-ui-theme="cobalt"] :is(.status.blue, .tag) { background: #eeeffc; color: #3944ae; border-color: #d8dcf4; border-radius: 6px; }
html[data-ui-theme="cobalt"] .status.orange { background: #fff0e9; color: #9a4936; }
html[data-ui-theme="cobalt"] :is(.notice, .v2-learning-intents, .v2-home-learning-map-link) { border-color: #daddf1; background: #f0f1fc; border-radius: 12px; }

/* Images retain the accepted proportions and the directory's accepted density. */
html[data-ui-theme="cobalt"] :is(#course-grid .card-image, .v2-published-course .card-image, .v2-path-course-image) { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background-size: cover; }
html[data-ui-theme="cobalt"] .v2-mentor-card { border-radius: 16px; overflow: hidden; }
html[data-ui-theme="cobalt"] .v2-mentor-card-body { padding: 0; gap: 0; }
html[data-ui-theme="cobalt"] .v2-mentor-card-portrait { display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0; }
html[data-ui-theme="cobalt"] .v2-mentor-card-copy .card-footer { border-color: #e6e7f2; }
html[data-ui-theme="cobalt"] .v2-teacher-public-profile { border-radius: 18px; overflow: hidden; background: #fff; border-color: #e0e2ee; }
html[data-ui-theme="cobalt"] :is(.aside-panel, .detail-section, .learn-chapters) { border-color: #e0e2ee; border-radius: 14px; }
html[data-ui-theme="cobalt"] .detail-visual { border-radius: 16px; }
html[data-ui-theme="cobalt"] .feed-post { padding: 22px; }
html[data-ui-theme="cobalt"] .feed-post .post-tools { border-color: #e6e7f2; }
html[data-ui-theme="cobalt"] .side-menu :is(button, a).active { color: #3944ae; background: #eeeffc; border-radius: 9px; }
html[data-ui-theme="cobalt"] .v2-event-date-block { color: #3944ae; background: #eeeffc; border-radius: 12px; }
html[data-ui-theme="cobalt"] .v2-event-date-block strong { color: #4654cf; }
html[data-ui-theme="cobalt"] .v2-event-viewbar nav { gap: 8px; }
html[data-ui-theme="cobalt"] .v2-event-viewbar nav a { border-radius: 9px; padding-inline: 14px; }
html[data-ui-theme="cobalt"] .v2-event-viewbar nav a[aria-current="page"] { background: #eeeffc; color: #3944ae; border-color: transparent; }
html[data-ui-theme="cobalt"] .v2-month-calendar { border-radius: 16px; border-color: #e0e2ee; overflow: hidden; }

/* The desk uses a purple-tinted navigation rail and white working panels. */
html[data-ui-theme="cobalt"] body[data-page="admin"] { background: #f4f4fb; }
html[data-ui-theme="cobalt"] .dash-side { padding: 14px; border: 1px solid #dce0f2; background: #f0f1fc; border-radius: 16px; }
html[data-ui-theme="cobalt"] .dash-side nav a { color: #555d7b; border-radius: 9px; }
html[data-ui-theme="cobalt"] .dash-side nav a.active { background: #fff; color: #3944ae; box-shadow: 0 2px 7px #3944ae0a; }
html[data-ui-theme="cobalt"] .dash-side nav a:hover { background: #fff; color: #3944ae; }
html[data-ui-theme="cobalt"] body[data-page="admin"] .dash-side { border-radius: 16px; background: #f0f1fc; border-color: #dce0f2; }
html[data-ui-theme="cobalt"] body[data-page="admin"] .dash-side nav a { border-radius: 9px; }
html[data-ui-theme="cobalt"] body[data-page="admin"] .dash-side nav a.active { color: #3944ae; background: #fff; }
html[data-ui-theme="cobalt"] body[data-page="admin"] .role-switch { display: flex; gap: 5px; padding: 5px; width: fit-content; max-width: 100%; border: 1px solid #dfe2f0; border-radius: 12px; background: #eaecf8; }
html[data-ui-theme="cobalt"] body[data-page="admin"] .role-switch a { padding: 9px 14px; margin: 0; border: 0; border-radius: 8px; color: #555d7b; }
html[data-ui-theme="cobalt"] body[data-page="admin"] .role-switch a.active { background: #fff; color: #3944ae; box-shadow: 0 2px 6px #3944ae10; }
html[data-ui-theme="cobalt"] body[data-page="admin"] .stat { padding: 18px; border: 1px solid #e0e2ee; border-top: 0; border-radius: 14px; background: #fff; }
html[data-ui-theme="cobalt"] body[data-page="admin"] .stat strong { color: #3944ae; }
html[data-ui-theme="cobalt"] :is(.table-wrap, .v2-admin-form, .v2-admin-record, .v2-school-queue-link, .v2-school-quick-link, .team-panel, .growth-panel, .v2-ops-panel) { border-radius: 12px; border-color: #e0e2ee; }
html[data-ui-theme="cobalt"] .data-table th { background: #eeeff9; color: #535b7a; }
html[data-ui-theme="cobalt"] body[data-page="admin"] .data-table th { background: #eeeff9; color: #535b7a; }
html[data-ui-theme="cobalt"] .data-table tbody tr:hover { background: #fafaff; }
html[data-ui-theme="cobalt"] body[data-page="admin"] .v2-school-overview-head { border-left: 0; border-radius: 16px; background: #e9ebfc; }
html[data-ui-theme="cobalt"] body[data-page="admin"] :is(.v2-school-queue-link, .v2-school-quick-link):hover { background: #fff; border-color: #aeb6eb; }
html[data-ui-theme="cobalt"] .proto-banner { background: #eeeff9; color: #555d7b; }
html[data-ui-theme="cobalt"] :is(dialog, .v2-review-dialog) { border-color: #dce0ef; border-radius: 18px; box-shadow: 0 24px 80px #262c5b26; }
html[data-ui-theme="cobalt"] .site-footer { background: #eeeff8; color: #62677e; border-color: #e0e2ee; }
html[data-ui-theme="cobalt"] .mobile-nav { background: #fff; border-top-color: #e0e2ee; box-shadow: 0 -4px 16px #3944ae06; }
html[data-ui-theme="cobalt"] .mobile-nav a.active { color: #3944ae; background: #f0f1fc; }
html[data-ui-theme="cobalt"] :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #4654cf; outline-offset: 3px; }
html[data-ui-theme="cobalt"] .hero-search:focus-within { outline-color: #4654cf; }

@media (max-width: 1100px) {
  html[data-ui-theme="cobalt"] .main-nav { min-width: 0; flex: 1; overflow-x: auto; }
  html[data-ui-theme="cobalt"] .main-nav a { padding-inline: 9px; }
  html[data-ui-theme="cobalt"] .hero-inner::after { width: 40%; }
  html[data-ui-theme="cobalt"] .hero h1 { font-size: 32px; }
}
@media (max-width: 850px) {
  html[data-ui-theme="cobalt"] .hero-inner { padding-block: 36px 30px; min-height: 0; }
  html[data-ui-theme="cobalt"] .hero-inner::after { width: 37%; border-radius: 60px 18px 18px 18px; inset-block: 28px; }
  html[data-ui-theme="cobalt"] .hero :is(h1, .hero-statement, p, .hero-search, .button-row, .hero-stats) { width: 58%; }
  html[data-ui-theme="cobalt"] .hero h1 { font-size: 29px; }
  html[data-ui-theme="cobalt"] .hero .hero-statement { font-size: 19px; }
  html[data-ui-theme="cobalt"] .hero-stats span { flex: 0 0 100%; border: 0; padding: 0; }
  html[data-ui-theme="cobalt"] .hero-stats strong { display: inline; margin-right: 8px; }
}
@media (max-width: 640px) {
  html[data-ui-theme="cobalt"] .hero-inner { padding-block: 28px 24px; }
  html[data-ui-theme="cobalt"] .hero :is(h1, .hero-statement, p, .hero-search, .button-row, .hero-stats) { width: 100%; }
  html[data-ui-theme="cobalt"] .hero h1 { font-size: 29px; max-width: 100%; line-height: 1.35; }
  html[data-ui-theme="cobalt"] .hero .hero-statement { font-size: 19px; max-width: 100%; }
  html[data-ui-theme="cobalt"] .hero p { font-size: 14px; }
  html[data-ui-theme="cobalt"] .hero-inner::after { position: relative; display: block; z-index: 0; inset: auto; width: 100%; height: 180px; margin-top: 24px; border-radius: 44px 14px 14px 14px; background-position: center 45%; box-shadow: none; }
  html[data-ui-theme="cobalt"] .hero-search { margin-top: 18px; min-height: 56px; }
  html[data-ui-theme="cobalt"] .hero-search input { font-size: 14px; padding-inline: 10px; }
  html[data-ui-theme="cobalt"] .hero-search button { padding-inline: 14px; font-size: 14px; }
  html[data-ui-theme="cobalt"] .hero-stats { margin-top: 18px; }
  html[data-ui-theme="cobalt"] .quick-link { min-height: 82px; padding: 16px; border-radius: 12px; }
  html[data-ui-theme="cobalt"] .page-intro { padding-block: 27px 20px; }
  html[data-ui-theme="cobalt"] .page-intro h1 { font-size: 26px; }
  html[data-ui-theme="cobalt"] .section-head h2 { font-size: 21px; }
  html[data-ui-theme="cobalt"] :is(.card, .event-card, .v2-mentor-card) { border-radius: 12px; }
  html[data-ui-theme="cobalt"] .tabs :is(a, button) { padding-inline: 12px; }
  html[data-ui-theme="cobalt"] .feed-post { padding: 16px; }
  html[data-ui-theme="cobalt"] body[data-page="admin"] .role-switch a { padding: 9px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui-theme="cobalt"] *, html[data-ui-theme="cobalt"] *::before, html[data-ui-theme="cobalt"] *::after { scroll-behavior: auto; transition-duration: 0ms; animation-duration: 0ms; }
}