/* Shared visual identity for the Keyouji AI knowledge and teaching workspace. */
:root {
 --app-header-height: 80px; --kyj-color-brand: #7956ba; --kyj-color-action-primary: #7956ba;
 --kyj-color-text-primary: #2d2940; --kyj-color-text-secondary: #817b91;
 --kyj-color-text-accessible: #6c667c; --kyj-color-page: #f7f7fb; --kyj-color-border-panel: #ebe8f2;
 --kyj-color-border-control: #e1dce9; --kyj-color-focus: #7956ba;
 --kyj-color-surface-selected: #f0eafa; --kyj-color-surface-hover: #f5f1fb;
 --kyj-color-action-hover: #6744a4; --kyj-shadow-panel: 0 4px 24px #3c285006;
 --kyj-font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
 --kyj-radius-panel: 20px;
}
body { -webkit-font-smoothing: antialiased; }
.app-header { padding: 0 28px; gap: 28px; background: #fffffff5; border-bottom: 1px solid #ece9f2; box-shadow: 0 2px 16px #30244403; }
.app-brand { display: flex; align-items: center; gap: 16px; text-align: left; padding: 0; }
.app-brand:hover { background: transparent; }
.kyj-brand-logo { display: block; width: 153px; height: auto; }
.kyj-brand-caption { border-left: 1px solid #e5e0ed; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; color: #514860; font-size: 12px; letter-spacing: .4px; }
.kyj-brand-caption small { color: #9991a6; font-size: 10px; letter-spacing: .2px; }
#feature-nav { flex: 1; min-width: 0; align-self: center; justify-content: center; align-items: center; gap: 4px; }
#feature-nav button { display: inline-flex; align-items: center; gap: 7px; padding: 11px 13px; min-height: 42px; border-radius: 11px; color: #7e778c; font-size: 13px; transition: color .16s,background .16s; }
#feature-nav button svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.7; fill: none; flex-shrink: 0; }
#feature-nav button:hover { color: #6f48aa; background: #f6f2fc; }
#feature-nav button[aria-current] { color: #704aad; background: #f0e9fa; font-weight: 600; }
#feature-nav button[aria-current]::after { display: none; }
.app-demo-label { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; margin-left: 0; padding: 8px 12px; border: 1px solid #e9e4ef; border-radius: 10px; background: #faf8fd; font-size: 11px; color: #746b85; }
.kyj-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #81b394; }
.kyj-demo-avatar { width: 28px; height: 28px; border-radius: 8px; background: #e8e0f3; color: #735497; display: grid; place-items: center; font-weight: 600; font-size: 11px; }
.ct-dashboard { --ct-text: #393346; --ct-muted: #8c8498; --ct-blue: #7956ba; --ct-bright: #9a7ac9; background: #f7f7fb; color: var(--ct-text); font-size: 14px; }
.ct-content { max-width: 1560px; padding: 0 32px 36px; }
.ct-content[data-view="interventions"] { max-width: 1840px; padding: 0 32px 32px; }
.ct-class-header, .ct-content[data-view="interventions"] .ct-class-header { padding: 22px 0 16px; border-bottom: 1px solid #ebe7f0; }
.ct-class-heading { gap: 16px; }
.ct-class-header h1, .ct-content[data-view="interventions"] .ct-class-header h1 { font-size: 19px; line-height: 28px; letter-spacing: -.3px; font-weight: 600; }
.ct-class-heading p { color: #9890a4; margin-top: 3px; font-size: 11px; }
.ct-class-heading > .ct-button { background: #fff; color: #8e819f; border-color: #e6e0ed; font-size: 11px; min-height: 34px; border-radius: 9px; }
.ct-class-meta { padding: 6px 11px; background: #fff; border: 1px solid #ece8f2; border-radius: 8px; color: #8b8199; }
.ct-section-heading { padding: 24px 0 18px; justify-content: space-between; gap: 16px; align-items: center; }
.ct-dashboard .ct-section-heading h2 { font-size: 28px; line-height: 38px; color: #30293e; font-weight: 650; letter-spacing: -.6px; }
.kyj-eyebrow { color: #a395b3; font-size: 10px; letter-spacing: 1.5px; margin: 0 0 3px !important; }
.ct-dashboard .kyj-page-description { font-size: 12px; color: #9a91a5; margin: 5px 0 0; line-height: 1.7; }
.ct-content[data-view="interventions"] .ct-section-heading { padding: 18px 0; }
.r902-tabs { gap: 8px; border-bottom: 0; margin-bottom: 12px; }
.r902-tabs button { padding: 9px 16px; min-height: 38px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; color: #9a90a6; }
.r902-tabs button[aria-selected=true] { color: #7956ba; background: #fff; border-color: #e9e1f3; box-shadow: 0 2px 7px #57367806; }
.r902-tabs button:hover { background: #f0eaf8; color: #7956ba; }
.ct-filterbar { gap: 14px 24px; padding: 6px 0 20px; min-height: 52px; }
.ct-filter { font-size: 12px; color: #958a9f; }
.ct-dashboard select, .ct-dashboard input:not([type=checkbox]) { border-color: #e5dfec; border-radius: 9px; min-height: 38px; color: #5e526c; padding: 7px 11px; box-shadow: 0 1px 3px #3b255403; }
.ct-dashboard input::placeholder { color: #b0a7ba; }
.ct-dashboard :where(input,select):hover { border-color: #cdbbe3; }
.ct-dashboard .ct-button { border-color: #e3dcec; background: white; color: #756282; border-radius: 9px; min-height: 38px; padding: 8px 14px; font-size: 12px; }
.ct-dashboard .ct-button:hover { background: #f7f2fc; color: #7956ba; border-color: #cdb8e5; }
.ct-dashboard .ct-button.main { color: #fff; background: #7956ba; border-color: #7956ba; box-shadow: 0 3px 9px #7956ba1b; }
.ct-dashboard .ct-button.main:hover { background: #6844a4; border-color: #6844a4; }
.ct-link { color: #7956ba; font-weight: 500; }
.ct-panel { border: 1px solid #ece8f2; border-radius: 18px; padding: 24px; box-shadow: 0 3px 16px #3a264903; margin-bottom: 22px; }
.ct-panel-heading { margin-bottom: 18px; }
.ct-panel-heading h2 { font-size: 16px; color: #4b3d5c; font-weight: 600; }
.ct-panel-heading h2::before { content: ''; display: inline-block; width: 3px; height: 14px; background: #bba2d8; border-radius: 3px; margin-right: 10px; vertical-align: -2px; }
.ct-kpis { gap: 18px; margin-bottom: 22px; }
.ct-kpis > div { position: relative; border: 1px solid #e8e1f0; padding: 20px 24px; border-radius: 16px; background: linear-gradient(120deg,#fff 50%,#faf7ff); box-shadow: 0 3px 12px #4b2b6404; }
.ct-kpis > div:nth-child(2) { background: linear-gradient(120deg,#fff 50%,#f5faf8); border-color: #e4eee9; }
.ct-kpis > div:nth-child(3) { background: linear-gradient(120deg,#fff 50%,#fff9f3); border-color: #f0e7df; }
.ct-kpis > div::after { content: ''; position: absolute; top: 22px; right: 22px; width: 32px; height: 32px; border-radius: 10px; background: #eee5f8; opacity: .8; }
.ct-kpis > div:nth-child(2)::after { background: #def0e7; }
.ct-kpis > div:nth-child(3)::after { background: #f9eadb; }
.ct-kpis span { font-size: 12px; color: #9b8fa6; }
.ct-kpis strong { font-size: 35px; line-height: 44px; font-weight: 650; color: #72519f; letter-spacing: -.8px; margin: 10px 0 3px; font-variant-numeric: tabular-nums; }
.ct-kpis > div:nth-child(2) strong { color: #5f9d80; }.ct-kpis > div:nth-child(3) strong { color: #c49060; }
.ct-kpis small { color: #aaa0b2; font-size: 11px; }
.ct-panel .ct-kpis > div { border: 0; background: transparent; padding: 10px 8px; box-shadow: none; }.ct-panel .ct-kpis > div::after { display: none; }
.ct-table { font-size: 13px; }
.ct-table thead th { color: #9b90a6; background: #faf9fd; font-size: 11px; padding: 14px 16px; border-bottom: 1px solid #eee9f4; }
.ct-table td,.ct-table tbody th { padding: 11px 16px; border-bottom: 1px solid #f0edf5; color: #70657c; }
.ct-table tbody tr:nth-child(even) { background: #fcfbfe; }.ct-table tbody tr:hover { background: #f7f2fc; }
.ct-table .ct-link { color: #615070; font-weight: 550; }
.ct-table-wrap { border-radius: 10px; }
.ct-table .r902-rate { display: inline-block; font-size: 12px; padding: 3px 8px; border-radius: 6px; }.ct-table .r902-rate.green { background: #edf6ef; color: #659172; }.ct-table .r902-rate.yellow { background: #fbf4e7; color: #b18c42; }.ct-table .r902-rate.red { background: #fbebee; color: #bb7083; }
.r902-matrix-scroll { border-color: #ebe4f2; border-radius: 14px; }
.r902-matrix .ct-average > :is(td,th) { background: #f0eaf7; color: #7c628f; }
.r902-matrix .ct-sticky,.r902-matrix thead th { color: #8a7b98; }.r902-matrix tr:nth-child(even) .ct-sticky { background: #f9f6fc; }
.r902-cell.red { background: #f3cdd7; }.r902-cell.yellow { background: #f5e3ac; }.r902-cell.green { background: #c3e1cb; }.r902-cell.missing { background: #f0edf4; }
.r902-rate.red { color: #ba7083; }.r902-rate.yellow { color: #b09453; }.r902-rate.green { color: #5f9474; }
.r902-distribution { border-radius: 10px; }.r902-distribution .red { background: #efc4d0; }.r902-distribution .yellow { background: #f1dd9a; }.r902-distribution .green { background: #b8d9c2; }.r902-distribution .missing { background: #ece6f3; }
.r902-unit-comparison>button.active { background: #f7f1fc; border-color: #e4d4f1; }.r902-compare-row b { background: #ac8fca; }.r902-compare-row.grade b { background: #d0c6db; }
.r902-advice { color: #84728f; }.r902-advice h3 { color: #6d4e8a; }.r902-advice ol { list-style: none; counter-reset: step; padding-left: 0; }.r902-advice li { counter-increment: step; background: #faf7fd; border: 1px solid #eee5f6; padding: 14px 18px; border-radius: 10px; display: flex; align-items: baseline; gap: 13px; }.r902-advice li::before { content: counter(step,decimal-leading-zero); color: #b89bd0; font-size: 13px; font-weight: 600; }
.r902-resource-grid .ct-button { border-color: #e8e0f1; background: #faf8fd; min-height: 78px; border-radius: 12px; }.r902-resource-grid .ct-button:hover { background: #f2eaf9; }
.r902-intervention-toolbar { gap: 16px; margin-bottom: 16px; }.r902-student-picker select { border-color: #e2d7ec; color: #72518c; background: #fff; }
.r902-intervention-map { border-color: #e8e0f0; box-shadow: 0 4px 24px #4b2b6905; border-radius: 20px; padding: 22px; }
.r902-map-heading h2 { color: #523a69; font-size: 22px; letter-spacing: -.4px; }.r902-map-heading p { color: #a08faa; }
.r902-map-legend { color: #9b8fa6; }.r902-map-legend b { color: #7a668b; }
.r902-map-canvas { border-color: #ebe5f1; border-radius: 16px; background: #f8f6fc; }
.r902-map-sidebar { background: #fcfaff; border-color: #eee7f5; padding: 18px 14px 0; border-radius: 16px; }.r902-map-sidebar h3 { color: #7b5c93; }.r902-map-sidebar>p { color: #ab99b6; }
.r902-intervention-map .r902-evidence-list button { padding: 14px 9px; border-bottom-color: #eee7f5; }.r902-intervention-map .r902-evidence-list button:hover { background: #f1eaf9; }.r902-intervention-map .r902-evidence-list strong { color: #776287; }.r902-intervention-map .r902-evidence-list small { color: #aa9ab4; }
.r902-map-notes { color: #a293ac; }
.r902-empty { border-color: #e7dcee; background: #fcf9ff; color: #aa98b6; border-radius: 12px; }
.r902-modal-overlay { background: #25143555; backdrop-filter: blur(5px); }.r902-modal { background: #faf8fd; border: 1px solid #eee8f5; border-radius: 20px; box-shadow: 0 24px 90px #33204333; }.r902-modal>header { padding: 12px 20px; border-bottom-color: #ede6f5; }.r902-modal-body { padding: 26px; }.r902-modal-body>h2 { color: #694c80; letter-spacing: -.3px; }
.r902-preview { border-color: #e3d7ed; border-radius: 12px; }.r902-modal .ct-profile-identity { border: 1px solid #e9e0f1; background: #fff; }.ct-profile-avatar { background: #f4eefc; border-color: #baa0d6; outline-color: #eee3f8; color: #846298; }.r902-modal details { border-bottom-color: #ece4f4; }.r902-modal summary { color: #8961aa; }
.circle-shell { --graph-detail-width: 440px; }.circle-shell #app,.circle-shell #universe { background: #f8f7fc; }
.selection.detail-prototype { border-left-color: #e9e2f0; box-shadow: -8px 0 30px #3c265607; }.detail-prototype .detail-header { background: #fcfaff; border-bottom: 1px solid #f0e8f7; padding: 24px 22px 20px; }.detail-prototype #detail-heading { color: #624879; }.detail-prototype #detail-tabs { background: #fff; }.detail-prototype #detail-tabs button[aria-selected=true] { color: #7956ba; }
#loading { color: #9c81b5; background: #f8f6fc; }.learning-graph-embed #loading { display: none; }
@media (max-width: 1380px) { .kyj-brand-caption { display: none; }.app-header { gap: 22px; }#feature-nav button { padding: 11px 12px; }.app-demo-label { display: none; } }
@media (min-width: 768px) { .ct-content[data-view="interventions"] > .r902-tabs { margin-bottom: 0; align-self: center; }.ct-content[data-view="interventions"] .ct-section-heading { padding: 20px 0; }.ct-content[data-view="interventions"] .kyj-eyebrow { display: none; } }
@media (max-width: 1000px) { .app-header { padding: 0 20px; gap: 20px; }#feature-nav { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }#feature-nav button { flex-shrink: 0; } }
@media (max-width: 767px) {
 :root { --app-header-height: 122px; }.app-header { flex-direction: column; align-items: flex-start; justify-content: center; padding: 12px 16px 8px; gap: 10px; }.app-brand { min-height: 32px; }.kyj-brand-logo { width: 135px; }.kyj-brand-caption { display: flex; font-size: 10px; padding-left: 12px; }.kyj-brand-caption small { font-size: 9px; }
 #feature-nav { width: 100%; align-self: stretch; min-height: 40px; flex-shrink: 0; gap: 3px; overflow-x: auto; }#feature-nav button { min-height: 38px; padding: 9px 11px; font-size: 12px; }#feature-nav button svg { width: 15px; height: 15px; }
 .ct-content,.ct-content[data-view="interventions"] { padding: 0 14px 24px; }.ct-class-header,.ct-content[data-view="interventions"] .ct-class-header { padding: 16px 0; }.ct-class-header h1,.ct-content[data-view="interventions"] .ct-class-header h1 { font-size: 17px; }.ct-class-heading> .ct-button { display: none; }
 .ct-section-heading,.ct-content[data-view="interventions"] .ct-section-heading { padding: 18px 0 14px; }.ct-dashboard .ct-section-heading h2 { font-size: 25px; line-height: 32px; }.ct-dashboard .kyj-page-description { font-size: 11px; }
 .r902-tabs { gap: 4px; }.r902-tabs button { padding: 8px 12px; }.ct-filterbar { gap: 10px; }.ct-filterbar input { width: 150px; }
 .ct-panel { padding: 17px; border-radius: 14px; }.ct-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }.ct-kpis>div { padding: 14px 12px; border-radius: 12px; }.ct-kpis>div::after { display: none; }.ct-kpis strong { font-size: 27px; line-height: 34px; }.ct-kpis span,.ct-kpis small { font-size: 10px; }
 .r902-intervention-map { padding: 14px; border-radius: 15px; }.r902-map-heading h2 { font-size: 18px; }.r902-map-heading p { font-size: 11px; }.r902-map-legend { gap: 10px 12px; font-size: 11px; }.r902-map-sidebar { padding: 14px 12px 0; }
 .r902-modal-body { padding: 16px; }.r902-modal { border-radius: 12px; }.circle-shell { --graph-detail-width: 100vw; }.r902-intervention-shortcut .ct-button { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { #feature-nav button { transition: none; } }
/* Keep the soft surfaces while maintaining readable labels and controls. */
.ct-dashboard { --ct-muted: #80718b; }
.ct-dashboard small,.ct-filter,.ct-kpis span,.ct-kpis small,.ct-class-heading p,.ct-dashboard .kyj-page-description,.ct-subtle,.ct-footnote { color: #80718b; }
.ct-table thead th,.ct-table thead button { color: #82718c; }
.r902-map-heading p,.r902-map-sidebar>p,.r902-map-sidebar>header>span,.r902-intervention-map .r902-evidence-list small,.r902-map-notes,.r902-map-legend { color: #897492; }
.kyj-eyebrow { color: #9175a5; }
.ct-kpis > div::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23967ab4' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Cpath d='M6 19v-1a6 6 0 0 1 12 0v1M5 8a2 2 0 0 0-1 4m15-4a2 2 0 0 1 1 4'/%3E%3C/svg%3E"); background-size: 20px; background-position: center; background-repeat: no-repeat; }
.ct-kpis > div:nth-child(2)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23749c86' stroke-width='1.6'%3E%3Cpath d='M4 4v16h16M8 16v-5m5 5V7m5 9V4'/%3E%3C/svg%3E"); }
.ct-kpis > div:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c69b70' stroke-width='1.6'%3E%3Cpath d='M6 3h9l4 4v14H6V3Zm9 0v5h4M9 12h7m-7 4h5'/%3E%3C/svg%3E"); }
@media(min-width:768px){.ct-content[data-view="interventions"] .ct-class-header{padding:16px 0 12px}.ct-content[data-view="interventions"] .ct-section-heading{padding:16px 0}.ct-content[data-view="interventions"] .ct-section-heading h2{font-size:26px}.ct-content[data-view="interventions"] .r902-intervention-toolbar{margin-bottom:12px}.ct-content[data-view="interventions"] .r902-intervention-map{padding:18px}.ct-content[data-view="interventions"] .r902-map-heading p{font-size:12px;margin-top:2px}}
.ct-dashboard { --r902-red: #f3cdd7; --r902-yellow: #f5e3ac; --r902-green: #c3e1cb; --r902-missing: #f0edf4; }
.ct-dashboard small,.ct-filter,.ct-kpis span,.ct-kpis small,.ct-class-heading p,.ct-dashboard .kyj-page-description,.ct-subtle,.ct-footnote { color: #796a85; }
.r902-map-heading p,.r902-map-sidebar>p,.r902-map-sidebar>header>span,.r902-intervention-map .r902-evidence-list small,.r902-map-notes,.r902-map-legend { color: #816b8a; }