/* Default themes retain their type, icons and layout. The five opted-in themes own these refinements. */
[data-ui-preview="academy"] { --preview-font: "Planner-academy", "SimSun", serif; --preview-accent: #226349; }
[data-ui-preview="paper"] { --preview-font: "Planner-paper", "KaiTi", serif; --preview-accent: #9c472c; }
[data-ui-preview="graphite"] { --preview-font: "Planner-graphite", "Microsoft YaHei", sans-serif; --preview-accent: #303946; }
[data-ui-preview="coast"] { --preview-font: "Planner-coast", "SimSun", serif; --preview-accent: #096d87; }
[data-ui-preview="prism"] { --preview-font: "Planner-prism", "KaiTi", cursive; --preview-accent: #7043aa; }
.ui-theme-picker { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: 88dvh; padding: 0; border: 1px solid #d5dce5; border-radius: 20px; background: #fff; color: #26334a; box-shadow: 0 30px 100px #0d203a40; font: 14px/1.5 system-ui, "Microsoft YaHei", sans-serif; }
.ui-theme-picker::backdrop { background: #10213a88; backdrop-filter: blur(4px); }
.ui-theme-picker > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px; border-bottom: 1px solid #e2e7ee; }
.ui-theme-picker > header small { color: #6b778d; letter-spacing: .15em; font-size: 11px; }
.ui-theme-picker h2 { margin: 4px 0 8px; color: #26334a; font: 700 24px/1.4 system-ui, "Microsoft YaHei", sans-serif !important; }
.ui-theme-picker p { margin: 0; color: #6b778d; font-family: system-ui, "Microsoft YaHei", sans-serif !important; }
.ui-theme-picker [data-close-theme-picker] { width: 40px; height: 40px; border: 1px solid #dce2ea; border-radius: 50%; color: #475569; background: #f7f9fc; font-size: 26px; }
.ui-theme-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 20px 24px 24px; }
.ui-theme-picker [data-desktop-theme-choice] { display: grid; grid-template-columns: 36px 1fr; gap: 6px 12px; align-items: center; min-width: 0; padding: 18px; text-align: left; border: 1px solid #dce2ea; border-radius: 12px; background: #fafbfd; color: #26334a; cursor: pointer; }
.ui-theme-picker [data-desktop-theme-choice] > .ph { grid-row: 1 / 4; color: var(--preview-accent, #175ba2); font-size: 30px; }
.ui-theme-picker.ui-theme-picker [data-desktop-theme-choice][data-ui-preview] > strong { color: var(--preview-accent, #26334a); font: 500 22px/1.4 var(--preview-font, system-ui) !important; }
.ui-theme-picker [data-desktop-theme-choice] > small { color: #697487; font: 12px/1.6 system-ui, "Microsoft YaHei", sans-serif !important; }
.ui-theme-picker [aria-pressed="true"] { border: 2px solid var(--preview-accent, #1767bc); background: #f4f7fb; padding: 17px; }
.ui-theme-choice-status { color: var(--preview-accent, #1767bc); font: 12px/1.5 system-ui, "Microsoft YaHei", sans-serif; }
.ui-theme-picker button:focus-visible { outline: 3px solid #86afe7; outline-offset: 3px; }
.mobile-ui-theme-option.mobile-ui-theme-option[data-ui-preview] strong { font-family: var(--preview-font, inherit) !important; font-size: 20px; font-weight: 500; }

@media (min-width: 769px) {
  body[data-desktop-design="academy"] { --design-body-font: "Planner-academy", "SimSun", serif; --design-display-font: var(--design-body-font); }
  body[data-desktop-design="paper"] { --design-body-font: "Planner-paper", "KaiTi", serif; --design-display-font: var(--design-body-font); }
  body[data-desktop-design="graphite"] { --design-body-font: "Planner-graphite", "Microsoft YaHei", sans-serif; --design-display-font: var(--design-body-font); }
  body[data-desktop-design="coast"] { --design-body-font: "Planner-coast", "SimSun", serif; --design-display-font: var(--design-body-font); }
  body[data-desktop-design="prism"] { --design-body-font: "Planner-graphite", "Microsoft YaHei", sans-serif; --design-display-font: "Planner-prism", "KaiTi", cursive; }
  html[data-desktop-theme] body[data-desktop-design]:not([data-desktop-design=""]),
  html[data-desktop-theme] body[data-desktop-design]:not([data-desktop-design=""]) :is(button, input, select, textarea, label, p, td, th, small, strong) { font-family: var(--design-body-font) !important; }
  html[data-desktop-theme] body[data-desktop-design]:not([data-desktop-design=""]) :is(h1, h2, h3) { font-family: var(--design-display-font) !important; }
}
@media (min-width: 901px) {
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) #institutionalPortalHome { --institutional-content: min(1416px, calc(100vw - 80px)); }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) #institutionalPortalHome .institutional-portal-copy {
    width: var(--institutional-content) !important; margin: 0 auto !important; padding: 44px 0 92px !important;
  }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) #institutionalPortalHome .institutional-portal-copy h2 { font-family: var(--design-display-font) !important; font-size: clamp(30px, 2.8vw, 46px); line-height: 1.45; font-weight: 500; }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) #institutionalPortalHome .institutional-portal-copy p { line-height: 1.8; font-size: 17px; }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) #institutionalPortalHome .institutional-portal-actions { flex-wrap: wrap; }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) #institutionalPortalHome :is(.institutional-home-main, .institutional-home-sections):not([hidden]) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: var(--institutional-content); margin: 32px auto; gap: 24px;
    background: transparent; border: 0; align-items: start;
  }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) #institutionalPortalHome .institutional-home-card { padding: 28px; min-width: 0; }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) #institutionalPortalHome .institutional-home-metrics strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) .tabs {
    position: relative !important; inset: auto !important; width: min(1416px, calc(100vw - 80px)) !important;
    margin: 0 auto; padding: 0; height: auto; min-height: 56px; justify-content: flex-start; gap: 8px 16px;
    flex-wrap: wrap; overflow-x: auto;
  }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) .tabs .tab { gap: 8px; font-size: 14px; padding-inline: 12px; }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) .tabs .tab > i.ph { display: inline-block; font-size: 19px; order: 1; }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) .tabs .tab::before { order: 2; }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) .tabs :is(.tab[data-view="dashboard"], .tab[data-view="cases"], .tab[data-view="plans"]) .desktop-tab-label { font-size: 0; }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) .tabs .tab { justify-content: flex-start; }
  html[data-desktop-theme] body.desktop-theme-institutional[data-desktop-design]:not([data-desktop-design=""]) .tabs .tab.active::after { background: var(--design-accent); }
  body[data-desktop-design="academy"] .institutional-home-major-grid .ph { padding: 9px; border: 1px solid var(--design-highlight); font-size: 42px; }
  body[data-desktop-design="paper"] .institutional-home-major-grid .ph { padding: 6px; border-bottom: 1px dashed currentColor; font-size: 40px; }
  body[data-desktop-design="graphite"] .institutional-home-major-grid .ph { font-size: 36px; }
  body[data-desktop-design="coast"] .institutional-home-major-grid .ph { padding: 10px; border-radius: 50%; background: #d9f2f6; font-size: 44px; }
  body[data-desktop-design="prism"] .institutional-home-major-grid .ph { padding: 8px; border-radius: 10px; background: #ebe1fa; font-size: 44px; }
}
@media (min-width: 1200px) {
  html[data-desktop-theme] body.desktop-theme-institutional:is([data-desktop-design="academy"], [data-desktop-design="paper"]) #institutionalPortalHome .institutional-portal-copy :is(h2, p) { max-width: 49% !important; }
}
@media (max-width: 768px) {
  body[data-mobile-design="academy"] { --design-body-font: "Planner-academy", "SimSun", serif; --design-display-font: var(--design-body-font); }
  body[data-mobile-design="paper"] { --design-body-font: "Planner-paper", "KaiTi", serif; --design-display-font: var(--design-body-font); }
  body[data-mobile-design="graphite"] { --design-body-font: "Planner-graphite", "Microsoft YaHei", sans-serif; --design-display-font: var(--design-body-font); }
  body[data-mobile-design="coast"] { --design-body-font: "Planner-coast", "SimSun", serif; --design-display-font: var(--design-body-font); }
  body[data-mobile-design="prism"] { --design-body-font: "Planner-graphite", "Microsoft YaHei", sans-serif; --design-display-font: "Planner-prism", "KaiTi", cursive; }
  body[data-mobile-design]:not([data-mobile-design=""]),
  body[data-mobile-design]:not([data-mobile-design=""]) :is(button, input, select, textarea, p, td, th, label, small, strong) { font-family: var(--design-body-font) !important; }
  body[data-mobile-design]:not([data-mobile-design=""]) :is(h1, h2, h3),
  body[data-mobile-design]:not([data-mobile-design=""]) .miqm-institutional-showcase__brand strong { font-family: var(--design-display-font) !important; }
  body[data-mobile-design]:not([data-mobile-design=""]) .miqm-institutional-showcase__hero :is(h1, h2) { font-size: 30px; line-height: 1.5; font-weight: 500; }
  body[data-mobile-design]:not([data-mobile-design=""]) .miqm-institutional-content .ph { font-size: 26px; color: var(--design-accent); }
}