:root { --ink:#17232d; --muted:#526174; --line:#dce4e9; --paper:#fff; --bg:#f1f4f7; --nav:#19243b; --nav-muted:#bfc8dc; --green:#5966c9; --green-soft:#eef0ff; --orange:#dd8a43; --orange-soft:#fff2e4; --blue:#4d7ac5; --blue-soft:#ebf1fc; --purple:#8a67bc; --purple-soft:#f2edfa; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif; font-size:16px; line-height:1.65; }
button { border:0; font:inherit; cursor:pointer; }
.auth-screen { min-height:100vh; display:grid; place-items:center; padding:24px; background:#eef3f2; }.auth-screen[hidden] { display:none; }.auth-card { width:min(430px,100%); padding:30px; border:1px solid #dce6e3; border-radius:10px; background:#fff; box-shadow:0 18px 50px #18342a12; }.auth-brand { padding:0 0 27px; }.auth-copy h1 { margin:0; color:#20313a; font-size:24px; }.auth-copy p:not(.kicker) { margin:8px 0 0; color:#526174; font-size:14px; line-height:1.7; }.auth-form { margin-top:22px; }.auth-form[hidden] { display:none; }.auth-form .button { width:100%; min-height:40px; }.auth-error { min-height:18px; margin:0; color:#c36e61; font-size:14px; }.role-pill { display:inline-flex; align-items:center; margin-left:7px; padding:3px 6px; border-radius:4px; color:#237e68; background:#e8f6f1; font-size:13px; font-weight:600; }.user-list { margin-top:13px; border-top:1px solid #edf1f1; }.user-row { display:flex; align-items:center; gap:9px; padding:11px 0; border-bottom:1px solid #edf1f1; }.user-row > div:nth-child(2) { flex:1; }.user-row strong,.user-row small { display:block; }.user-row strong { color:#46565d; font-size:14px; }.user-row small { margin-top:3px; color:#526174; font-size:13px; }.user-status { padding:3px 6px; border-radius:4px; color:#28886e; background:#e9f7f2; font-size:13px; }.user-status.off { color:#526174; background:#fff1ee; }.user-actions { display:flex; gap:5px; }.user-actions button { padding:4px; color:#25856b; background:none; font-size:13px; }.settings-section-title { display:flex; align-items:center; justify-content:space-between; margin-top:20px; color:#52626a; font-size:14px; font-weight:600; }.settings-section-title .text-button { font-size:13px; }
.empty-state { margin:0; padding:18px 12px; color:#526174; font-size:14px; text-align:center; }
.app-shell { display:none; min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:3; width:246px; display:flex; flex-direction:column; padding:27px 15px 17px; color:#fff; background:var(--nav); }
.brand-block { display:flex; align-items:center; gap:11px; padding:0 13px 29px; }
.brand-mark { width:35px; height:35px; display:grid; place-items:center; border-radius:9px; color:#fff; background:#2e967b; font-weight:800; font-size:17px; box-shadow:0 4px 12px #07111655; }
.brand-block strong { display:block; font-size:17px; letter-spacing:.02em; }.brand-block span { display:block; margin-top:2px; color:#526174; font-size:14px; }
.side-class { padding:0 9px 22px; border-bottom:1px solid #ffffff14; }.eyebrow,.nav-label { display:block; color:#526174; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }.class-switcher { width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:9px; padding:10px 11px; border:1px solid #ffffff1c; border-radius:8px; color:#fff; background:#ffffff09; text-align:left; }.class-switcher b { display:block; font-size:15px; font-weight:600; }.class-switcher small { display:block; margin-top:3px; color:#526174; font-size:14px; }.chevron { color:#526174; font-size:18px; }
.nav-list { flex:1; padding-top:22px; }.nav-label { padding:0 13px; margin:0 0 8px; }.secondary-label { margin-top:26px; }.nav-item { width:100%; display:flex; align-items:center; gap:12px; padding:10px 13px; margin:2px 0; border-radius:7px; color:#526174; background:transparent; text-align:left; font-size:15px; transition:.18s ease; }.nav-item:hover { color:#fff; background:#ffffff0c; }.nav-item.active { color:#e6fff8; background:#237b68; box-shadow:inset 3px 0 #92e4cb; }.nav-icon { width:16px; color:inherit; font-size:17px; line-height:1; text-align:center; }.nav-item em { margin-left:auto; min-width:20px; padding:2px 5px; border-radius:10px; color:#ffc68f; background:#794a29; font-size:13px; font-style:normal; text-align:center; }.sidebar-bottom { padding-top:14px; border-top:1px solid #ffffff14; }.teacher-card { display:flex; align-items:center; gap:9px; margin:17px 5px 0; padding:12px 8px 2px; border-top:1px solid #ffffff12; }.teacher-card strong,.teacher-card span { display:block; }.teacher-card strong { color:#dce4e7; font-size:14px; font-weight:600; }.teacher-card span { margin-top:3px; color:#526174; font-size:13px; }.more-button { margin-left:auto; color:#526174; background:none; font-size:15px; }
.main-content { width:calc(100% - 246px); margin-left:246px; }.topbar { height:69px; display:flex; align-items:center; justify-content:space-between; padding:0 42px; border-bottom:1px solid var(--line); background:#fff; }.breadcrumb { display:flex; gap:10px; align-items:center; color:#526174; font-size:14px; }.breadcrumb b { color:#526174; font-weight:400; }.breadcrumb strong { color:#3e4c55; font-weight:600; }.top-actions { display:flex; align-items:center; gap:7px; }.icon-button { position:relative; width:34px; height:34px; display:grid; place-items:center; border-radius:7px; color:#526174; background:transparent; font-size:19px; }.icon-button:hover { background:#f1f4f4; color:var(--ink); }.icon-button.has-dot:after { content:''; position:absolute; top:6px; right:6px; width:5px; height:5px; border:2px solid #fff; border-radius:50%; background:#e37d59; }.top-date { display:flex; flex-direction:column; margin-left:13px; padding-left:18px; border-left:1px solid var(--line); color:#526174; font-size:13px; }.top-date strong { margin-top:2px; color:#53616a; font-size:14px; font-weight:600; }
.content-wrap { max-width:1440px; margin:0 auto; padding:38px 42px 55px; }.view { display:none; }.view.active { display:block; }.welcome-row,.view-title { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }.kicker { margin:0 0 8px; color:var(--green); font-size:14px; font-weight:700; letter-spacing:.08em; }.welcome-row h1,.view-title h1 { margin:0; color:#1b2933; font-size:26px; line-height:1.35; letter-spacing:-.01em; }.welcome-row h1 span { font-size:21px; }.subtitle { margin:8px 0 0; color:var(--muted); font-size:15px; }.header-actions { display:flex; gap:9px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:37px; padding:0 15px; border-radius:6px; font-size:14px; font-weight:600; transition:.18s ease; }.button-primary { color:#fff; background:var(--green); box-shadow:0 4px 10px #16846622; }.button-primary:hover { background:#106d55; transform:translateY(-1px); }.button-ghost { border:1px solid #dce3e4; color:#53616a; background:#fff; }.button-ghost:hover { border-color:#b6cbc6; background:#f8fbfa; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:32px; }.metric-card { min-height:161px; position:relative; overflow:hidden; padding:18px 19px 15px; border:1px solid var(--line); border-top:3px solid; border-radius:8px; background:#fff; box-shadow:0 3px 12px #18342a04; }.accent-green { border-top-color:#54b697; }.accent-orange { border-top-color:#e4a06a; }.accent-blue { border-top-color:#7899d1; }.accent-purple { border-top-color:#a487ca; }.metric-top,.metric-foot { display:flex; align-items:center; justify-content:space-between; }.metric-top { color:#526174; font-size:14px; }.metric-icon { width:23px; height:23px; display:grid; place-items:center; border-radius:6px; font-size:15px; font-weight:700; }.accent-green .metric-icon { color:var(--green); background:var(--green-soft); }.accent-orange .metric-icon { color:var(--orange); background:var(--orange-soft); }.accent-blue .metric-icon { color:var(--blue); background:var(--blue-soft); }.accent-purple .metric-icon { color:var(--purple); background:var(--purple-soft); }.metric-value { margin-top:12px; color:#22313a; font-size:30px; font-weight:800; letter-spacing:-.04em; }.metric-value span { margin-left:3px; color:#526174; font-size:14px; font-weight:500; letter-spacing:0; }.metric-foot { justify-content:flex-start; gap:8px; margin-top:6px; color:#526174; font-size:13px; }.trend { font-weight:700; }.trend.up { color:#269879; }.trend.down { color:#db8650; }.trend.neutral { color:#8969b4; }.progress { height:4px; margin-top:14px; overflow:hidden; border-radius:3px; background:#ebf2ef; }.progress i { display:block; height:100%; border-radius:inherit; background:#55b697; }.progress.purple { background:#f1ecf8; }.progress.purple i { background:#a083c7; }.mini-avatars { display:flex; margin-top:11px; }.mini-avatars span { width:21px; height:21px; display:grid; place-items:center; margin-right:-3px; border:2px solid #fff; border-radius:50%; color:#9a5d37; background:#f3ceb1; font-size:13px; }.mini-avatars span:nth-child(2){color:#526174;background:#c9dfc5}.mini-avatars span:nth-child(3){color:#4f6996;background:#cad9f0}.sparkline { height:19px; display:flex; align-items:end; gap:3px; margin-top:11px; }.sparkline i { width:16px; border-radius:2px 2px 0 0; background:#bed0eb; }.sparkline i:nth-child(1){height:7px}.sparkline i:nth-child(2){height:11px}.sparkline i:nth-child(3){height:8px}.sparkline i:nth-child(4){height:14px}.sparkline i:nth-child(5){height:10px}.sparkline i:nth-child(6){height:16px;background:#7c9bd0}.sparkline i:nth-child(7){height:18px;background:#5c83c5}
.dashboard-grid,.lower-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:14px; margin-top:17px; }.panel { padding:21px 22px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 3px 12px #18342a04; }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.panel-heading h2 { margin:0; color:#26343d; font-size:15px; }.panel-heading p { margin:5px 0 0; color:#526174; font-size:14px; }.text-button { padding:3px 0; color:var(--green); background:none; font-size:14px; }.text-button span { margin-left:3px; font-size:15px; }.attendance-summary { display:flex; align-items:center; gap:11px; margin-top:22px; }.attendance-summary strong { font-size:22px; letter-spacing:-.03em; }.attendance-summary small { color:#526174; font-size:14px; font-weight:500; letter-spacing:0; }.status-pill { padding:5px 8px; border-radius:12px; font-size:13px; }.status-pill.green { color:#238265; background:#eaf7f1; }.attendance-bar { height:5px; margin:12px 0 9px; overflow:hidden; border-radius:4px; background:#eef2f1; }.attendance-bar i { display:block; height:100%; border-radius:inherit; background:#52b492; }.attendance-row { min-height:51px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #eff2f2; }.avatar { width:29px; height:29px; display:grid; flex:0 0 auto; place-items:center; border-radius:50%; font-size:14px; font-weight:700; }.teacher-avatar { width:29px; height:29px; color:#b8eadc; background:#286452; }.avatar-green { color:#2b8068; background:#d5eee6; }.avatar-yellow { color:#997043; background:#f7e7c5; }.avatar-red { color:#ae5f58; background:#f6d9d5; }.avatar-blue { color:#5875a6; background:#dae4f5; }.student-name { flex:1; min-width:0; }.student-name strong { display:block; color:#42515a; font-size:14px; font-weight:600; }.student-name span { display:block; margin-top:2px; color:#526174; font-size:13px; }.attendance-status { padding:4px 7px; border-radius:4px; font-size:13px; white-space:nowrap; }.present { color:#27866b; background:#ecf8f3; }.late { color:#b17638; background:#fff5e8; }.absent { color:#b76058; background:#fff0ef; }.leave { color:#5d7eb4; background:#eef3fc; }.row-action { padding:4px; color:#526174; background:none; letter-spacing:2px; }.full-button { width:100%; height:34px; margin-top:15px; border:1px dashed #b7d9cf; border-radius:5px; color:var(--green); background:#f5fbf8; font-size:14px; }.full-button:hover { background:#eaf7f1; }.full-button.muted { border-color:#e3e8e8; color:#526174; background:#fafbfb; }.count-badge { min-width:21px; padding:2px 7px; border-radius:11px; color:#b55b4f; background:#ffefec; font-size:13px; text-align:center; }.todo-list { margin-top:17px; }.todo-item { display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-bottom:1px solid #eff2f2; cursor:pointer; }.todo-item input { position:absolute; opacity:0; }.checkmark { width:16px; height:16px; flex:0 0 auto; margin-top:1px; border:1px solid #cbd5d5; border-radius:4px; background:#fff; }.todo-item input:checked + .checkmark { border-color:var(--green); background:var(--green); }.todo-item input:checked + .checkmark:after { content:'✓'; display:block; color:white; font-size:14px; line-height:14px; text-align:center; }.todo-item input:checked ~ .todo-copy { text-decoration:line-through; opacity:.55; }.todo-copy { flex:1; }.todo-copy strong { display:block; color:#44535b; font-size:14px; font-weight:600; }.todo-copy small { display:block; margin-top:5px; color:#526174; font-size:13px; }.todo-priority { padding:3px 6px; border-radius:4px; font-size:13px; }.todo-priority.high { color:#bf674e; background:#fff0eb; }.todo-priority.normal { color:#526174; background:#f2f4f4; }
.dashboard-column { min-width:0; display:flex; flex-direction:column; gap:14px; }
.activity-list { margin-top:14px; }.activity-item { min-height:59px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #eff2f2; }.activity-item:last-child { border:0; }.activity-icon { width:27px; height:27px; display:grid; flex:0 0 auto; place-items:center; border-radius:7px; font-size:15px; }.activity-icon.green { color:#258b6f; background:#e6f5ef; }.activity-icon.blue { color:#5c7fbe; background:#edf2fb; }.activity-icon.orange { color:#cc8050; background:#fff1e4; }.activity-item p { margin:0; color:#526174; font-size:14px; }.activity-item p strong { color:#36454e; }.activity-item p b { color:#24896e; font-weight:600; }.activity-item span { display:block; margin-top:4px; color:#526174; font-size:13px; }.score-up { margin-left:auto; color:#269b79 !important; font-size:14px !important; font-weight:700; }.activity-tag { margin-left:auto; padding:3px 6px; border-radius:4px; color:#5b7bb3 !important; background:#edf2fb; }.review-link { margin-left:auto; padding:5px; color:var(--green); background:none; font-size:13px; }.schedule-list { margin-top:15px; }.schedule-item { min-height:52px; position:relative; display:flex; align-items:center; gap:10px; }.schedule-item + .schedule-item { border-top:1px solid #eff2f2; }.time { width:49px; color:#526174; font-size:13px; line-height:1.45; }.time small { color:#526174; font-size:13px; }.course-dot { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#cbd8d4; }.schedule-item.current .course-dot { background:#42ad8c; box-shadow:0 0 0 4px #e3f4ef; }.course { min-width:0; flex:1; padding-left:2px; }.course strong { display:block; color:#485760; font-size:14px; font-weight:600; }.course span { display:block; overflow:hidden; margin-top:4px; color:#526174; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.schedule-item em { padding:4px 6px; border-radius:4px; color:#268a6e; background:#e9f7f2; font-size:13px; font-style:normal; }.icon-button.small { width:28px; height:28px; font-size:14px; }
.placeholder-view,.workspace-view { min-height:0; }.view-title { align-items:flex-end; }.empty-panel { min-height:355px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-top:28px; padding:36px; border:1px solid var(--line); border-radius:8px; background:#fff; text-align:center; }.empty-icon { width:54px; height:54px; display:grid; place-items:center; margin-bottom:15px; border-radius:15px; color:var(--green); background:var(--green-soft); font-size:25px; }.blue-icon { color:var(--blue); background:var(--blue-soft); }.star-icon { color:var(--purple); background:var(--purple-soft); }.purple-icon { color:var(--purple); background:var(--purple-soft); }.orange-icon { color:var(--orange); background:var(--orange-soft); }.empty-panel h2 { margin:0; color:#36464f; font-size:17px; }.empty-panel p { margin:8px 0 20px; color:#526174; font-size:14px; }
.workspace-view { min-height:600px; }.workspace-toolbar { display:flex; align-items:flex-end; gap:12px; margin-top:25px; padding:13px 16px; border:1px solid var(--line); border-radius:8px; background:#fff; }.field { display:flex; flex-direction:column; gap:5px; color:#526174; font-size:13px; }.field input,.field select,.select-field select,.small-select { min-height:34px; padding:0 10px; border:1px solid #dfe6e6; border-radius:5px; outline:0; color:#4b5b64; background:#fff; font:inherit; font-size:14px; }.field input:focus,.field select:focus,.search-field:focus-within,.select-field select:focus { border-color:#8bcbb9; box-shadow:0 0 0 3px #e7f6f1; }.compact-field input { min-width:142px; }.compact-field select { min-width:175px; }.toolbar-spacer { flex:1; }.search-field { min-width:240px; display:flex; align-items:center; gap:7px; min-height:34px; padding:0 10px; border:1px solid #dfe6e6; border-radius:5px; color:#526174; background:#fff; }.search-field input { width:100%; border:0; outline:0; color:#52616a; background:transparent; font:inherit; font-size:14px; }.select-field select { min-width:116px; }.result-count { color:#526174; font-size:14px; }.quick-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }.quick-stat { padding:13px 16px; border:1px solid var(--line); border-left:3px solid #b9c6c8; border-radius:7px; background:#fff; }.quick-stat span { display:block; color:#526174; font-size:14px; }.quick-stat strong { display:block; margin-top:5px; color:#40515a; font-size:22px; }.quick-stat small { color:#526174; font-size:13px; font-weight:500; }.green-stat { border-left-color:#51ad90; }.orange-stat { border-left-color:#e2a169; }.red-stat { border-left-color:#da857c; }.table-panel { margin-top:14px; padding:0; overflow:hidden; }.table-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding:20px 22px 15px; }.table-heading h2 { margin:0; color:#2f3f48; font-size:15px; }.table-heading p { margin:5px 0 0; color:#526174; font-size:14px; }.saved-label { padding:4px 8px; border-radius:4px; color:#ae7a3e; background:#fff4e3; font-size:13px; }.saved-label.saved { color:#26866b; background:#e8f7f1; }.table-wrap { overflow:auto; }.data-table { width:100%; border-collapse:collapse; white-space:nowrap; }.data-table th { padding:10px 22px; border-top:1px solid #eff2f2; border-bottom:1px solid #eff2f2; color:#526174; background:#fbfcfc; font-size:13px; font-weight:500; text-align:left; }.data-table td { padding:12px 22px; border-bottom:1px solid #eff2f2; color:#526174; font-size:14px; }.data-table tbody tr:last-child td { border-bottom:0; }.data-table tbody tr:hover { background:#fbfdfc; }.table-student { display:flex; align-items:center; gap:9px; }.table-student strong { display:block; color:#40515a; font-weight:600; }.table-student small { display:block; margin-top:3px; color:#526174; font-size:13px; }.tag { display:inline-block; margin-right:4px; padding:3px 6px; border-radius:4px; color:#617c9c; background:#eef3f9; font-size:13px; }.tag.green-tag { color:#2c896e; background:#e8f6f1; }.tag.orange-tag { color:#aa7541; background:#fff2e2; }.score-cell { color:#278a6f; font-weight:700; }.score-cell.negative { color:#c77769; }.inline-select { min-height:29px; padding:0 7px; border:1px solid #dfe7e6; border-radius:4px; color:#526174; background:#fff; font:inherit; font-size:13px; }.inline-input { width:110px; min-height:29px; padding:0 7px; border:1px solid #e2e8e8; border-radius:4px; outline:0; color:#526174; font:inherit; font-size:13px; }.row-link { color:var(--green); background:none; font-size:13px; }.table-footer { display:flex; align-items:center; justify-content:space-between; padding:13px 22px; border-top:1px solid #eff2f2; color:#526174; font-size:13px; }.behavior-layout,.notice-layout,.schedule-layout { display:grid; grid-template-columns:1.3fr .9fr; gap:14px; margin-top:25px; }.behavior-layout .panel,.notice-layout .panel,.schedule-layout .panel { margin-top:0; }.behavior-summary { min-height:230px; }.score-total { color:#268a6e; font-size:22px; font-weight:800; }.score-total small { color:#526174; font-size:13px; font-weight:500; }.bars { height:128px; display:flex; align-items:flex-end; justify-content:space-around; gap:10px; margin:12px 22px 0; border-bottom:1px solid #e8eeee; }.bars i { position:relative; width:11%; max-width:32px; min-height:15px; border-radius:4px 4px 0 0; background:#72bea8; }.bars i:nth-child(3n) { background:#9dcfc0; }.bars i b { position:absolute; top:calc(100% + 8px); width:100%; color:#526174; font-size:13px; font-weight:500; text-align:center; }.legend { display:flex; gap:18px; margin:19px 22px 0; color:#526174; font-size:13px; }.legend span { display:flex; align-items:center; gap:5px; }.legend-dot { width:7px; height:7px; border-radius:50%; background:#72bea8; }.legend-dot.caution { background:#e5ab70; }.focus-panel h2 { margin:0; color:#2f3f48; font-size:15px; }.focus-panel > p { margin:5px 0 12px; color:#526174; font-size:14px; }.focus-row { display:flex; align-items:center; gap:9px; padding:12px 0; border-top:1px solid #eff2f2; }.focus-row > div:nth-child(2) { flex:1; }.focus-row strong,.focus-row span { display:block; }.focus-row strong { color:#4a5961; font-size:14px; }.focus-row span { margin-top:3px; color:#526174; font-size:13px; }.record-list { padding:0 22px 9px; }.record-item { display:flex; align-items:center; gap:11px; min-height:61px; border-top:1px solid #eff2f2; }.record-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:7px; font-size:15px; }.record-icon.positive { color:#268a6e; background:#e7f6f0; }.record-icon.caution { color:#bd7947; background:#fff1e4; }.record-content { flex:1; }.record-content strong { color:#46565e; font-size:14px; font-weight:600; }.record-content p { margin:4px 0 0; color:#526174; font-size:13px; }.record-content small { display:block; margin-top:4px; color:#526174; font-size:13px; }.record-score { color:#268a6e; font-size:14px; font-weight:700; }.record-score.negative { color:#c47868; }.small-select { min-height:29px; }.notice-layout { grid-template-columns:1.15fr .85fr; }.notice-list { padding:0 22px 12px; }.notice-item { display:flex; align-items:flex-start; gap:11px; padding:13px 0; border-top:1px solid #eff2f2; }.notice-item > div:nth-child(2) { flex:1; }.notice-item strong { color:#43535c; font-size:14px; font-weight:600; }.notice-item p { margin:5px 0 0; color:#526174; font-size:13px; line-height:1.55; }.notice-item small { display:block; margin-top:5px; color:#526174; font-size:13px; }.notice-status { padding:4px 6px; border-radius:4px; color:#2a896d; background:#e9f7f2; font-size:13px; }.message-panel { min-height:300px; }.message-item { display:flex; align-items:flex-start; gap:9px; margin:0 22px; padding:14px 0; border-top:1px solid #eff2f2; }.message-item > div:nth-child(2) { flex:1; }.message-item strong { color:#46565e; font-size:14px; }.message-item p { margin:5px 0 0; color:#526174; font-size:13px; line-height:1.5; }.message-item small { display:block; margin-top:5px; color:#526174; font-size:13px; }.schedule-layout { grid-template-columns:1.35fr .65fr; }.week-grid { overflow:auto; padding:0 22px 22px; }.week-head,.week-row { min-width:650px; display:grid; grid-template-columns:70px repeat(5,1fr); }.week-head { border-top:1px solid #eff2f2; border-bottom:1px solid #eff2f2; }.week-head span,.week-head b { padding:11px 8px; color:#526174; font-size:13px; font-weight:500; text-align:center; }.week-head .today-head { color:#248a6e; background:#eff9f5; }.week-row { min-height:67px; border-bottom:1px solid #eff2f2; }.week-row > span { padding:12px 8px; color:#526174; font-size:14px; font-weight:600; text-align:center; }.week-row > span small { display:block; margin-top:3px; color:#526174; font-size:13px; font-weight:400; }.week-row > div { display:flex; flex-direction:column; justify-content:center; margin:5px 4px; padding:7px; border-radius:5px; color:#53646c; background:#f1f6f5; font-size:13px; text-align:center; }.week-row > div:nth-child(3n) { background:#f5f1fa; }.week-row > div small { display:block; margin-top:3px; color:#526174; font-size:13px; }.week-row > div.today-cell { color:#217f66; background:#e4f5ee; box-shadow:inset 0 0 0 1px #bce3d5; }.duty-panel { min-height:250px; }.duty-row { display:flex; align-items:center; gap:9px; min-height:49px; border-top:1px solid #eff2f2; color:#526174; font-size:14px; cursor:pointer; }.duty-row input { accent-color:var(--green); }.duty-row span { flex:1; }.duty-row small { color:#526174; font-size:13px; }.modal-backdrop { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; background:#14212b66; }.modal-backdrop[hidden] { display:none; }.modal { width:min(480px,100%); max-height:calc(100vh - 40px); overflow:auto; border:1px solid #e0e7e5; border-radius:9px; background:#fff; box-shadow:0 20px 60px #14212b38; }.modal-heading { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #edf1f1; }.modal-heading h2 { margin:0; color:#2e3d46; font-size:16px; }.modal-close { width:28px; height:28px; border-radius:5px; color:#526174; background:#f5f7f7; font-size:20px; line-height:1; }.modal-body { padding:20px; }.modal-form { display:grid; gap:14px; }.modal-form .field input,.modal-form .field select,.modal-form .field textarea { width:100%; min-height:36px; padding:8px 10px; border:1px solid #dfe6e6; border-radius:5px; outline:0; color:#52616a; background:#fff; font:inherit; font-size:14px; }.modal-form .field textarea { min-height:88px; resize:vertical; }.modal-form .field input:focus,.modal-form .field select:focus,.modal-form .field textarea:focus { border-color:#8bcbb9; box-shadow:0 0 0 3px #e7f6f1; }.form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:3px; }.search-results { padding:20px; }.search-results h3 { margin:0 0 12px; color:#40515a; font-size:15px; }.search-result { display:flex; align-items:center; gap:9px; padding:10px 0; border-top:1px solid #eff2f2; }.search-result strong { color:#52616a; font-size:14px; }.search-result small { display:block; margin-top:3px; color:#526174; font-size:13px; }
.toast { position:fixed; z-index:10; left:50%; bottom:25px; transform:translate(-50%,20px); padding:10px 16px; border-radius:6px; color:#fff; background:#24353e; box-shadow:0 8px 25px #14212b2b; opacity:0; pointer-events:none; transition:.2s ease; font-size:14px; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1100px) { .sidebar { width:215px; }.main-content { width:calc(100% - 215px); margin-left:215px; }.content-wrap { padding:30px 25px 45px; }.topbar { padding:0 25px; }.metric-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid,.lower-grid,.behavior-layout,.notice-layout,.schedule-layout { grid-template-columns:1fr; } }
@media (max-width:720px) { .sidebar { position:relative; inset:auto; width:100%; min-height:0; padding:14px 13px 12px; }.app-shell { display:block; }.main-content { width:100%; margin-left:0; }.brand-block { padding:0 8px 14px; }.side-class,.nav-list,.sidebar-bottom { display:none; }.topbar { height:57px; padding:0 16px; }.top-date { margin-left:4px; padding-left:9px; }.content-wrap { padding:25px 15px 40px; }.welcome-row,.view-title { align-items:flex-start; flex-direction:column; }.welcome-row h1,.view-title h1 { font-size:23px; }.header-actions { width:100%; }.header-actions .button { flex:1; }.metric-grid { gap:9px; margin-top:23px; }.metric-card { min-height:145px; padding:14px; }.metric-value { margin-top:8px; font-size:25px; }.metric-foot { display:block; line-height:1.8; }.metric-foot span { margin-right:4px; }.sparkline i { width:12px; }.panel { padding:17px 15px; }.dashboard-grid,.lower-grid { gap:10px; margin-top:10px; }.attendance-status { display:none; }.activity-item p { font-size:13px; }.workspace-toolbar { align-items:stretch; flex-direction:column; }.toolbar-spacer { display:none; }.compact-field input,.compact-field select,.search-field,.select-field select { width:100%; }.quick-stats { grid-template-columns:repeat(2,1fr); gap:8px; }.table-heading { padding:16px 15px 13px; }.data-table th { padding:9px 15px; }.data-table td { padding:11px 15px; }.table-footer { align-items:flex-start; flex-direction:column; gap:10px; padding:13px 15px; }.table-footer .button { width:100%; }.behavior-layout,.notice-layout,.schedule-layout { gap:10px; margin-top:20px; }.record-list,.notice-list { padding-left:15px; padding-right:15px; }.message-item { margin-left:15px; margin-right:15px; }.week-grid { padding-left:15px; padding-right:15px; }.placeholder-view { min-height:400px; }.breadcrumb strong { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
@media (max-width:390px) { .metric-grid { grid-template-columns:1fr 1fr; }.metric-top { font-size:13px; }.metric-value { font-size:23px; }.top-actions .icon-button { display:none; } }
.quick-stat[type="button"] { width:100%; color:inherit; font:inherit; text-align:left; cursor:pointer; }.quick-stat[type="button"]:hover { border-color:#b4d8ce; background:#fbfefd; }.quick-stat[type="button"]:focus-visible { outline:3px solid #d4eee6; outline-offset:1px; }.quick-stat.active { border-color:#6bbca6; background:#f1faf6; box-shadow:0 0 0 1px #bde5d7; }.orange-stat.active { border-color:#d79a60; background:#fff8ef; box-shadow:0 0 0 1px #f1d2ac; }.red-stat.active { border-color:#d27b72; background:#fff5f3; box-shadow:0 0 0 1px #efc4bf; }
.table-heading-actions { display:flex; align-items:center; gap:12px; }
.modal-backdrop.wide-modal .modal { width:min(860px,calc(100vw - 48px)); max-height:calc(100vh - 32px); }
.modal-backdrop.wide-modal .modal-body { padding:24px 28px 28px; }
.modal-backdrop.wide-modal .profile-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:720px) { .modal-backdrop.wide-modal .modal { width:calc(100vw - 24px); }.modal-backdrop.wide-modal .modal-body { padding:18px 16px 22px; }.modal-backdrop.wide-modal .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.user-actions .danger-link { color:#bd6c61; }.current-user-label { padding:4px; color:#526174; font-size:13px; white-space:nowrap; }.checkbox-field { display:flex; align-items:center; gap:7px; color:#526174; font-size:14px; }.checkbox-field input { accent-color:var(--green); }.form-hint { margin:-5px 0 0; color:#526174; font-size:13px; }
.profile-sections-title { margin-top:18px; padding-top:16px; border-top:1px solid #eff2f2; color:#52636b; font-size:14px; font-weight:700; }.profile-section { margin-top:14px; }.profile-section h3 { margin:0 0 8px; color:#526174; font-size:14px; font-weight:600; }.profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.profile-grid div { min-width:0; padding:8px; border-radius:4px; background:#f7f9f9; }.profile-grid small,.profile-grid strong { display:block; overflow-wrap:anywhere; }.profile-grid small { color:#526174; font-size:13px; }.profile-grid strong { margin-top:3px; color:#53636b; font-size:13px; font-weight:500; line-height:1.45; }.import-preview .subtitle { margin:0 0 12px; }.import-preview .table-wrap { max-height:260px; overflow:auto; border:1px solid #eff2f2; border-radius:5px; }.import-preview .data-table { white-space:nowrap; }.import-warnings { margin:0 0 12px; padding:9px 11px; border:1px solid #f4dfbf; border-radius:5px; color:#9c713d; background:#fff8ed; font-size:13px; line-height:1.6; }.import-warnings p { margin:0; }.import-warnings p + p { margin-top:3px; }
.profile-summary { margin-top:16px; padding:12px; border:1px solid #e3ece9; border-radius:6px; background:#fbfdfc; }.profile-section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }.profile-section-heading h3 { margin:0; color:#52636b; font-size:14px; }.profile-section-heading span { color:#526174; font-size:13px; }.profile-raw { margin-top:16px; border-top:1px solid #eff2f2; }.profile-raw summary { padding:13px 0 4px; cursor:pointer; color:#526174; font-size:13px; font-weight:600; list-style:none; }.profile-raw summary::-webkit-details-marker { display:none; }.profile-raw summary::before { content:'＋'; display:inline-block; width:16px; color:var(--green); font-size:15px; }.profile-raw[open] summary::before { content:'−'; }.profile-raw-body { padding-bottom:5px; }.profile-section h3 small { margin-left:4px; color:#526174; font-size:13px; font-weight:400; }
.family-section { margin-top:14px; }.family-table-wrap { overflow:auto; border:1px solid #e8eeee; border-radius:5px; }.family-table { width:100%; min-width:1040px; border-collapse:collapse; table-layout:auto; }.family-table th,.family-table td { padding:9px 8px; border-bottom:1px solid #edf1f1; color:#53636b; font-size:13px; text-align:left; }.family-table th { color:#526174; background:#f8faf9; font-size:13px; font-weight:500; }.family-table th:nth-child(1),.family-table td:nth-child(1) { min-width:75px; }.family-table th:nth-child(2),.family-table td:nth-child(2) { min-width:90px; }.family-table th:nth-child(3),.family-table td:nth-child(3) { min-width:120px; }.family-table th:nth-child(4),.family-table td:nth-child(4),.family-table th:nth-child(5),.family-table td:nth-child(5) { min-width:160px; }.family-table tr:last-child td { border-bottom:0; }.family-household { margin-top:8px; }
.schedule-layout .table-panel { min-width:0; }.week-grid { min-width:0; }.week-head,.week-row { min-width:850px; grid-template-columns:66px repeat(7,minmax(105px,1fr)); }.week-head span,.week-head b { padding:10px 4px; }.week-row { min-height:150px; align-items:stretch; }.week-row > span { padding-top:16px; }.week-row > .week-day { display:flex; align-items:stretch; justify-content:flex-start; flex-direction:column; gap:6px; margin:0; padding:7px 5px; background:transparent; text-align:left; }.week-row > .week-day.today-cell { background:#f3faf7; box-shadow:inset 1px 0 #d9eee6,inset -1px 0 #d9eee6; }.week-course { min-width:0; padding:8px 7px; border:1px solid #e5ecea; border-radius:5px; color:#53646c; background:#fff; }.week-course strong,.week-course b,.week-course small { display:block; overflow-wrap:anywhere; }.week-course strong { color:#27876c; font-size:13px; font-weight:600; }.week-course b { margin-top:4px; color:#46575e; font-size:13px; font-weight:600; }.week-course small { margin-top:4px; color:#526174; font-size:13px; }.week-course-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }.week-course-actions button { padding:2px 0; color:#27876c; background:transparent; font-size:13px; }.week-course-actions button:last-child { color:#b86f63; }.week-empty { margin:auto; color:#526174; font-size:14px; }.duty-list { padding:0 22px; }.duty-list .duty-row { min-height:49px; }.duty-panel .full-button { margin:12px 22px 18px; width:calc(100% - 44px); }.week-grid { overflow-x:auto; }
.behavior-chart { padding:0 22px 18px; }.behavior-chart .bars { height:135px; margin:12px 0 0; }.behavior-chart .bars i { background:#70bda5; }.behavior-chart .bars i:nth-child(3n) { background:#a0d1c1; }.behavior-chart .bars i.negative-bar { background:#e4a36e; }.behavior-chart .legend { margin:19px 0 0; }.focus-panel #behaviorWeekFocus { padding-top:12px; }.focus-panel #behaviorWeekFocus .empty-state { margin:40px 0; text-align:center; }.focus-panel .focus-row .activity-icon { flex:0 0 auto; }.focus-panel .focus-row > div:nth-child(2) { min-width:0; flex:1; }.focus-panel .focus-row strong { overflow-wrap:anywhere; }.focus-panel .focus-row span { overflow-wrap:anywhere; }
.view-toggle { display:flex; flex:0 0 auto; padding:3px; border:1px solid #dfe6e6; border-radius:5px; background:#f7f9f9; }.view-toggle button { width:30px; height:27px; border-radius:3px; color:#526174; background:transparent; font-size:16px; line-height:1; }.view-toggle button.active { color:#197e64; background:#fff; box-shadow:0 1px 3px #182a241c; }.student-card-grid[hidden],#studentListView[hidden] { display:none; }.student-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:12px; padding:0 22px 22px; }.student-card { min-width:0; padding:15px; border:1px solid #e6eceb; border-radius:6px; background:#fff; }.student-card.attention-row-critical { border-color:#e6b7ac; }.student-card-top { display:flex; align-items:center; gap:10px; min-width:0; }.student-card-top .avatar { width:40px; height:40px; }.student-card-identity { min-width:0; flex:1; }.student-card-identity strong,.student-card-identity span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.student-card-identity strong { color:#36464e; font-size:15px; }.student-card-identity span { margin-top:4px; color:#526174; font-size:13px; }.student-card-attention { max-width:80px; padding:4px 6px; border-radius:4px; color:#a65e50; background:#fff0ec; font-size:13px; overflow-wrap:anywhere; }.student-card-tags { display:flex; flex-wrap:wrap; gap:4px; min-height:23px; margin-top:12px; }.student-card-tags .tag { margin:0; }.student-card-meta { display:grid; grid-template-columns:70px minmax(0,1fr); gap:8px 6px; margin-top:12px; padding-top:11px; border-top:1px solid #eff2f2; font-size:13px; }.student-card-meta span { color:#526174; }.student-card-meta strong { min-width:0; overflow:hidden; color:#58676d; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }.student-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:13px; padding-top:10px; border-top:1px solid #eff2f2; }.student-card-bottom > div { display:flex; gap:6px; }.student-card-bottom .row-link { white-space:nowrap; }
.priority-section { margin-top:16px; padding:13px; border:1px solid #efb1aa; border-radius:6px; color:#7e4039; background:#fff5f3; }.priority-heading { display:flex; align-items:center; gap:9px; margin-bottom:10px; }.priority-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#d35e55; font-size:15px; font-weight:800; }.priority-heading h3,.priority-heading small { display:block; }.priority-heading h3 { margin:0; color:#813d36; font-size:14px; }.priority-heading small { margin-top:2px; color:#a1665e; font-size:13px; }.priority-count { margin-left:auto; color:#a1665e; font-size:13px; }.priority-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.priority-grid div { background:#fff; }
.attention-cell { min-width:145px; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }.attention-badge { display:inline-flex; align-items:center; max-width:130px; padding:4px 7px; overflow:hidden; border-radius:4px; font-size:13px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.attention-badge.critical { color:#b4483f; background:#ffe8e5; }.attention-badge.department { color:#a65e2e; background:#fff0df; }.attention-badge.daily { color:#95702e; background:#fff7dc; }.attention-reason { max-width:190px; overflow:hidden; color:#8a6250; font-size:13px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }.attention-more { color:#526174; }.attention-empty { color:#526174; font-size:13px; }.attention-row-critical td { background:#fffaf9; }.attention-row-critical td:first-child { box-shadow:inset 3px 0 #da7066; }.attention-alert { margin-top:16px; padding:12px; border:1px solid #f0d28f; border-radius:6px; color:#72572e; background:#fff9e9; }.attention-alert.critical { border-color:#efaaa2; color:#8d3f38; background:#fff1ef; }.attention-alert-heading { display:flex; align-items:center; gap:9px; }.attention-alert-icon { width:23px; height:23px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#d99b3f; font-size:15px; font-weight:800; }.attention-alert.critical .attention-alert-icon { background:#d35e55; }.attention-alert strong,.attention-alert small { display:block; }.attention-alert strong { font-size:14px; }.attention-alert small { margin-top:3px; font-size:13px; }.attention-alert ul { margin:10px 0 0 30px; padding:0; font-size:13px; line-height:1.7; }.attention-alert p { margin:10px 0 0 30px; font-size:13px; }
.no-results { padding:30px !important; color:#526174 !important; text-align:center; }.avatar-photo { overflow:hidden; color:transparent !important; background:#edf1f1 !important; }.avatar-photo img { width:100%; height:100%; display:block; object-fit:cover; }.student-detail-card { display:flex; align-items:center; gap:11px; padding:0 0 18px; border-bottom:1px solid #eff2f2; }.student-detail-card .avatar { width:48px; height:62px; border-radius:5px; }.student-detail-card strong,.student-detail-card span { display:block; }.student-detail-card strong { color:#40515a; font-size:14px; }.student-detail-card span { margin-top:5px; color:#526174; font-size:13px; }.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }.detail-grid div { padding:11px; border-radius:5px; background:#f7f9f9; }.detail-grid small,.detail-grid strong { display:block; }.detail-grid small,.detail-note small { color:#526174; font-size:13px; }.detail-grid strong { margin-top:5px; color:#53636b; font-size:14px; }.detail-note { margin-top:15px; padding-top:15px; border-top:1px solid #eff2f2; }.detail-note p { margin:7px 0 0; color:#526174; font-size:14px; line-height:1.7; }.detail-actions { display:flex; justify-content:flex-end; margin-top:18px; }.photo-editor { display:flex; align-items:center; gap:13px; padding-bottom:15px; border-bottom:1px solid #eff2f2; }.photo-preview .avatar { width:54px; height:70px; border-radius:5px; }.photo-editor strong,.photo-editor small { display:block; }.photo-editor strong { color:#53636b; font-size:14px; }.photo-editor small { margin:4px 0 8px; color:#526174; font-size:13px; }.photo-picker { position:relative; min-height:29px; padding:0 9px; font-size:13px; }.photo-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }.remove-photo { display:block; margin-top:8px; color:#526174; font-size:13px; }.remove-photo input { margin:0 4px 0 0; accent-color:#bc766b; }
.tag-empty { color:#526174; }
.button-danger { color:#b44f48 !important; background:#fff0ee !important; border-color:#efc4c0 !important; }
.student-profile-card { gap:16px; }
.student-profile-card > .avatar { width:88px; height:116px; border-radius:7px; }
.inline-editor-row td { padding:0 !important; background:#f7fbf9; }
.inline-editor { padding:18px 22px 20px; border-left:3px solid var(--green); }
.inline-editor-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.inline-editor-heading strong { color:#2f4a42; font-size:15px; }
.inline-editor-heading small { color:#526174; font-size:13px; }
.inline-editor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.inline-editor .field input { width:100%; }
.inline-profile-fields { margin-top:16px; padding-top:14px; border-top:1px solid #dfece7; }
.inline-profile-fields > strong { display:block; margin-bottom:11px; color:#526b62; font-size:14px; }
.inline-editor-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:17px; }
@media (max-width: 760px) { .inline-editor-grid { grid-template-columns:1fr; } .inline-editor-heading { display:block; } .inline-editor-heading small { display:block; margin-top:4px; } }
.student-create-form { gap:18px; }
.student-create-section { padding-bottom:16px; border-bottom:1px solid #edf1f1; }
.student-create-section h3 { margin:0 0 13px; color:#41545c; font-size:14px; }
.student-create-section .inline-editor-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.student-create-section .field input { width:100%; }
@media (max-width: 760px) { .student-create-section .inline-editor-grid { grid-template-columns:1fr; } }
.daily-attention-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.daily-attention-group { min-width:0; margin:0; padding:10px 11px; border:1px solid #e8eeec; border-radius:5px; }
.daily-attention-group legend { padding:0 5px; color:#526174; font-size:13px; font-weight:700; }
.daily-attention-option { display:flex; align-items:flex-start; gap:7px; padding:5px 0; color:#53636b; font-size:13px; line-height:1.5; cursor:pointer; }
.daily-attention-option input { width:14px; height:14px; flex:0 0 auto; margin:0; accent-color:var(--green); }
.daily-attention-option span { min-width:0; overflow-wrap:anywhere; }
.attention-level-field { max-width:260px; margin-top:12px; }
.daily-attention-detail-groups { display:grid; gap:10px; }
.daily-attention-detail-group { display:grid; gap:5px; }
.daily-attention-detail-group > strong { color:#526174; font-size:13px; }
.daily-attention-detail-group > div { display:flex; flex-wrap:wrap; gap:5px; }
.daily-attention-detail-group span { padding:5px 7px; border-radius:4px; color:#855f2b; background:#fff6e5; font-size:13px; line-height:1.4; }
@media (max-width:760px) { .daily-attention-groups { grid-template-columns:1fr; } }
@media (max-width:720px) { .student-card-grid { grid-template-columns:1fr; padding:0 15px 16px; }.student-results .table-heading { align-items:center; }.view-toggle { align-self:flex-start; } }
.student-card-grid { grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; }.student-card { padding:17px; }.student-card-portrait { display:flex; align-items:center; justify-content:center; min-height:180px; max-height:340px; margin:-17px -17px 15px; overflow:hidden; background:#f2f5f4; }.student-card-portrait img { display:block; width:auto; height:auto; max-width:100%; max-height:340px; object-fit:contain; object-position:center; }.student-card-top .avatar { width:42px; height:42px; }
@media (max-width:720px) { .student-card-grid { grid-template-columns:1fr; }.student-card-portrait { max-height:320px; }.student-card-portrait img { max-height:320px; } }
.dashboard-attendance-charts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:15px; }
.lesson-attendance-chart { min-width:0; min-height:156px; display:grid; grid-template-rows:34px 70px minmax(24px,auto); justify-items:center; align-items:center; gap:5px; padding:8px 5px; border:1px solid #e8eded; border-radius:6px; color:inherit; background:#fff; text-align:center; transition:border-color .16s ease,background .16s ease; }
.lesson-attendance-chart:hover,.lesson-attendance-chart:focus-visible { border-color:#8bcbb9; background:#f9fcfb; outline:none; }
.lesson-chart-title { width:100%; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.lesson-chart-title strong { color:#42535b; font-size:15px; }
.lesson-chart-title small { max-width:100%; overflow:hidden; color:#526174; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.lesson-chart-donut { width:68px; height:68px; border-radius:50%; background:conic-gradient(var(--chart)); }
.lesson-chart-legend { width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 6px; color:#526174; font-size:13px; line-height:1.3; }
.lesson-chart-total { flex:0 0 100%; color:#34454d; font-size:13px; font-weight:600; }
.lesson-chart-legend-item { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.lesson-chart-legend-item i { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:#46ad89; }
.lesson-chart-legend-item i.late { background:#e1a05f; }
.lesson-chart-legend-item i.absent { background:#d8756c; }
.lesson-chart-legend-item i.leave { background:#7593ca; }
.lesson-chart-legend-item i.unmarked { background:#cdd6d6; }
.dashboard-attendance-charts { display:grid; grid-template-columns:1fr; gap:10px; }
.attendance-chart-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.evening-attendance { grid-template-columns:repeat(4,minmax(0,1fr)); }
.evening-attendance .lesson-attendance-chart { grid-column:span 2; }
.lesson-attendance-chart { min-height:145px; }
.week-head,.week-row { min-width:0; grid-template-columns:82px repeat(5,minmax(0,1fr)); }
.week-row { min-height:122px; }
.week-row > .week-day { min-width:0; }
.week-empty.week-add { min-height:34px; border:1px dashed #dbe7e3; border-radius:4px; color:#526174; background:#fbfdfc; font:inherit; cursor:pointer; }
.week-empty.week-add:hover { border-color:#8bcbb9; color:#248a6e; background:#f3faf7; }
@media (max-width:720px) {
  .attendance-chart-row,.evening-attendance { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .evening-attendance .lesson-attendance-chart { grid-column:span 1; }
  .week-head,.week-row { min-width:760px; grid-template-columns:68px repeat(5,minmax(138px,1fr)); }
  .week-grid { padding-left:15px; padding-right:15px; }
}
@media (max-width:720px) { .dashboard-attendance-charts { grid-template-columns:1fr; gap:10px; }.attendance-chart-row,.evening-attendance { grid-template-columns:repeat(2,minmax(0,1fr)); }.evening-attendance .lesson-attendance-chart { grid-column:span 1; }.lesson-attendance-chart { min-height:152px; } }

.week-row > span .slot-time { line-height:1.6; overflow-wrap:anywhere; color:#526174; }
.slot-time-edit { margin-top:7px; padding:4px 2px; color:var(--green); background:transparent; font:inherit; font-size:13px; cursor:pointer; }
.slot-time-edit:hover { text-decoration:underline; }

/* Readable surfaces and a consistent visual hierarchy. */
body { font-variant-numeric:tabular-nums; }
input,select,textarea { accent-color:var(--green); }
input::placeholder,textarea::placeholder { color:#687789; opacity:1; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #08785e; outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.65; }
.sidebar { background:#182c3b; overflow-y:auto; }
.sidebar .brand-block span,.sidebar .eyebrow,.sidebar .nav-label,
.sidebar .class-switcher small,.sidebar .teacher-card span { color:#b9cbd7; }
.sidebar .nav-item { color:#d1dce5; min-height:46px; font-size:15px; }
.sidebar .nav-item.active { color:#fff; background:#08785e; box-shadow:inset 3px 0 #8be2c2; }
.sidebar .nav-item:hover { color:#fff; background:#274454; }
.sidebar .teacher-card strong { color:#fff; font-size:15px; }
.sidebar .more-button { color:#d1dce5; }
.sidebar .class-switcher { border-color:#446071; background:#213a4a; }
.brand-mark { width:40px; height:40px; box-shadow:none; }
.brand-block strong { font-size:20px; }
.content-wrap { padding:32px 32px 48px; }
.topbar { padding:0 32px; }
.welcome-row h1,.view-title h1 { font-size:30px; letter-spacing:0; }
.subtitle { font-size:15px; line-height:1.7; }
.panel,.metric-card,.student-card { border-radius:12px; box-shadow:0 2px 8px #23374706; }
.panel-heading h2,.table-heading h2,.focus-panel h2,.message-panel h2 { font-size:18px; color:#203348; }
.panel-heading p,.table-heading p { font-size:14px; }
.metric-value { font-size:36px; font-weight:700; letter-spacing:0; }
.metric-top { font-size:15px; color:#425269; }
.metric-foot { flex-wrap:wrap; }
.metric-card { min-height:165px; }
.button { min-height:42px; padding:8px 16px; border-radius:8px; font-size:14px; }
.button-primary { background:var(--green); box-shadow:none; }
.button-primary:hover { background:#065e4b; transform:none; }
.button-ghost { border-color:#bdcbd4; color:#34475a; }
.text-button,.row-link { font-size:14px; }
.icon-button { min-width:40px; min-height:40px; }
.full-button { height:auto; min-height:42px; }
.full-button.muted { color:#41576a; border-color:#b9c9d2; background:#f8fafb; }
.workspace-toolbar { gap:14px; padding:16px; flex-wrap:wrap; border-radius:10px; }
.field { color:#415268; font-size:14px; gap:7px; }
.field input,.field select,.select-field select,.small-select,
.modal-form .field input,.modal-form .field select,.modal-form .field textarea {
  min-height:42px; color:#23364b; font-size:15px; border-color:#bccad4; border-radius:7px;
}
.inline-input,.inline-select { min-height:38px; font-size:14px; color:#23364b; border-color:#bccad4; }
.search-field { min-height:42px; border-color:#bccad4; }
.search-field input { font-size:15px; }
.data-table th { color:#415268; font-weight:600; background:#f3f6f9; padding:13px 18px; }
.data-table td { color:#33475b; font-size:14px; padding:15px 18px; }
.table-student strong,.student-card-identity strong { color:#22364b; font-size:16px; }
.tag { font-size:13px; padding:4px 8px; }
.tag.green-tag,.present { color:#12634e; background:#e7f5ed; }
.tag.orange-tag,.late { color:#875019; background:#fff2dd; }
.absent { color:#a13434; background:#ffeded; }
.leave { color:#355d96; background:#edf3fd; }
.student-card-meta { grid-template-columns:88px minmax(0,1fr); font-size:14px; }
.student-card-meta span { color:#526174; }
.student-card-attention { max-width:105px; }
.profile-grid,.detail-grid { gap:12px; }
.profile-grid div,.detail-grid div { padding:12px; }
.family-table td,.family-table th { overflow-wrap:anywhere; }
.modal { width:min(520px,100%); border-radius:14px; }
.modal-heading { padding:20px 24px; }
.modal-heading h2 { font-size:20px; }
.modal-body { padding:24px; }
.modal-form { gap:18px; }
.toast { font-size:15px; z-index:30; max-width:calc(100vw - 32px); }
.lesson-attendance-chart { grid-template-rows:minmax(64px,auto) 80px minmax(38px,auto); min-height:218px; gap:10px; padding:14px 8px; border-radius:10px; }
.lesson-chart-title strong { font-size:16px; }
.lesson-chart-title small { white-space:normal; font-size:13px; line-height:1.5; }
.lesson-chart-donut { width:78px; height:78px; }
.lesson-chart-legend { font-size:13px; line-height:1.6; }
.lesson-chart-legend-item i { width:8px; height:8px; }
.lesson-attendance-chart:focus-visible { outline:3px solid #08785e; outline-offset:2px; }
.schedule-layout { grid-template-columns:minmax(0,1fr) 280px; align-items:start; }
.week-head,.week-row { min-width:810px; grid-template-columns:110px repeat(5,minmax(140px,1fr)); }
.week-head { background:#f3f6f9; }
.week-head span,.week-head b { color:#3c5065; font-size:14px; font-weight:600; padding:14px 8px; }
.week-row { min-height:130px; }
.week-row > span { background:#f8fafc; color:#2e4559; font-size:15px; padding:18px 8px; }
.week-row > span .slot-time { font-size:13px; color:#526174; }
.week-row > .week-day,.week-row > .week-day:nth-child(3n) { background:#fff; border-left:1px solid #edf1f4; padding:10px 6px; }
.week-row > .week-day.today-cell { background:#eff9f4; box-shadow:inset 0 3px #72baa1; }
.week-head .today-head { background:#e5f4eb; color:#12634e; }
.week-course { border-color:#d4e2db; border-left:3px solid #40987c; padding:10px; border-radius:7px; box-shadow:0 2px 5px #243e3105; }
.week-course b { font-size:15px; line-height:1.6; color:#233c4d; }
.week-course small { font-size:13px; line-height:1.65; color:#526174; }
.week-course-actions { justify-content:space-between; gap:6px; margin-top:10px; }
.week-course-actions button { min-height:32px; padding:3px 4px; font-size:13px; color:#08785e; }
.week-course-actions button:last-child { color:#ac3838; }
.week-empty.week-add { min-height:38px; padding:5px 10px; color:#376b5b; border-color:#b8cfc5; background:#f8fcfa; font-size:14px; }
.slot-time-edit { min-height:34px; font-size:13px; }
.time { width:110px; flex:0 0 110px; font-size:14px; color:#3b5365; }
.course strong,.todo-copy strong { font-size:15px; }
.course span { font-size:13px; white-space:normal; }
.duty-row { min-height:60px; flex-wrap:wrap; font-size:15px; }
.duty-row small { font-size:13px; }
.duty-row input { width:18px; height:18px; }
.schedule-item { min-height:72px; }
@media (max-width:1350px) {
  .schedule-layout { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1100px) {
  .content-wrap { padding:26px 24px 40px; }
  .attendance-chart-row { gap:8px; }
}
@media (max-width:720px) {
  .app-shell { flex-direction:column; }
  .sidebar { overflow:visible; }
  .sidebar .nav-list { display:flex; flex:0 0 auto; gap:6px; padding:8px 0 0; overflow-x:auto; }
  .sidebar .nav-list .nav-label { display:none; }
  .sidebar .nav-list .nav-item { flex:0 0 auto; width:auto; margin:0; padding:9px 12px; font-size:14px; }
  .sidebar .brand-block { padding-bottom:4px; }
  .topbar { padding:0 16px; }
  .content-wrap { padding:24px 14px 36px; }
  .welcome-row h1,.view-title h1 { font-size:26px; }
  .header-actions { flex-wrap:wrap; }
  .metric-card { padding:14px; }
  .metric-top { font-size:14px; gap:6px; }
  .metric-value { font-size:30px; }
  .panel { padding:18px 15px; }
  .table-panel { padding:0; }
  .week-grid { padding:0 14px 18px; }
  .field input,.field select,.modal-form .field input,.modal-form .field select,.modal-form .field textarea { font-size:16px; }
  .lesson-attendance-chart { min-height:215px; }
  .student-card-grid { grid-template-columns:minmax(0,1fr); }
  .modal-body { padding:20px; }
  .daily-attention-groups,.modal-backdrop.wide-modal .profile-grid { grid-template-columns:1fr; }
  .time { width:94px; flex-basis:94px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; }
}

.permission-editor { margin:18px 0 2px; padding:14px 13px 5px; border:1px solid #e0e9e6; border-radius:6px; background:#f9fcfb; }.permission-editor legend { padding:0 5px; color:#405a52; font-size:14px; font-weight:700; }.permission-group { padding:10px 0 8px; border-top:1px solid #e7efed; }.permission-group:first-of-type { border-top:0; }.permission-group > strong { display:block; margin-bottom:7px; color:#60736e; font-size:13px; }.permission-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px; }.permission-option { display:flex; align-items:flex-start; gap:7px; min-width:0; padding:6px 7px; border-radius:4px; color:#465d58; background:#fff; font-size:13px; line-height:1.45; cursor:pointer; }.permission-option:hover { background:#edf8f4; }.permission-option input { width:15px; height:15px; flex:0 0 auto; margin:2px 0 0; accent-color:var(--green); }.permission-option span { overflow-wrap:anywhere; }
@media (max-width:540px) { .permission-options { grid-template-columns:1fr; } }
.lesson-chart-legend > small { font-size:13px; }
.sidebar .nav-item.active:hover { background:#08694f; }

/* Student profile hierarchy: labels stay quiet, values carry the reading weight. */
.modal-backdrop.wide-modal .modal-heading h2 { color:#1f3545; font-weight:700; }
.modal-backdrop.wide-modal .student-detail-card strong { color:#173b4d; font-size:18px; font-weight:700; }
.modal-backdrop.wide-modal .student-detail-card span { color:#536b7c; font-size:14px; }
.modal-backdrop.wide-modal .detail-grid div { border:1px solid #e3ebef; background:#f6f9fb; }
.modal-backdrop.wide-modal .detail-grid small,
.modal-backdrop.wide-modal .profile-grid small,
.modal-backdrop.wide-modal .family-table th { color:#667b8a; font-size:13px; font-weight:600; letter-spacing:.02em; }
.modal-backdrop.wide-modal .detail-grid strong,
.modal-backdrop.wide-modal .profile-grid strong,
.modal-backdrop.wide-modal .family-table td { color:#243f51; font-size:14px; font-weight:650; line-height:1.55; }
.modal-backdrop.wide-modal .profile-summary { border-color:#cfe3dc; background:#fbfefd; }
.modal-backdrop.wide-modal .profile-section-heading h3,
.modal-backdrop.wide-modal .profile-section h3 { color:#1f4e5c; font-size:15px; font-weight:700; }
.modal-backdrop.wide-modal .profile-section-heading span,
.modal-backdrop.wide-modal .profile-section h3 small { color:#708391; font-size:13px; font-weight:600; }
.modal-backdrop.wide-modal .profile-grid div,
.modal-backdrop.wide-modal .family-household div { border:1px solid #e5edf0; background:#f5f8fa; }
.modal-backdrop.wide-modal .family-table-wrap { border-color:#dce7eb; }
.modal-backdrop.wide-modal .family-table th { color:#587080; background:#eef4f6; }
.modal-backdrop.wide-modal .family-table td { background:#fbfcfd; }
.modal-backdrop.wide-modal .profile-raw { border-top-color:#dce7eb; }
.modal-backdrop.wide-modal .profile-raw summary { color:#2f6970; font-weight:700; }
.modal-backdrop.wide-modal .detail-actions { gap:9px; flex-wrap:wrap; }
.duty-panel { padding:0; }
.duty-panel .table-heading { flex-wrap:wrap; padding:20px 18px 15px; gap:10px; }
.status-pill { white-space:nowrap; }
.duty-panel .duty-list { padding:0 18px; }
.duty-panel .full-button { margin:14px 18px 20px; width:calc(100% - 36px); }
:root { --orange:#995314; --blue:#355ea0; --purple:#7250a2; }
.brand-mark { background:#08785e; }
.sidebar .chevron { color:#c9d9e3; }
.trend.neutral { color:#7250a2; }
.trend.up,.score-total,.score-cell,.record-score { color:#146b52; }
.score-up { color:#146b52 !important; }
.trend.down { color:#995314; }
.count-badge { color:#9d4034; }
.status-pill.green,.user-status,.user-status.off { color:#17654e; }
.user-status.off { color:#8e493f; }
.avatar-green { color:#1c654f; }
.avatar-yellow { color:#795017; }
.avatar-red { color:#923c35; }
.avatar-blue { color:#36598c; }
.saved-label { color:#82531f; }
.saved-label.saved { color:#17654e; }
.todo-priority.high { color:#984529; }
.tag { color:#405d81; }
.student-card-attention { color:#923f32; }
.import-warnings { color:#82531f; }

/* Course actions appear only while the page's edit switch is enabled. */
#toggleScheduleEditButton[hidden],#editScheduleButton[hidden] { display:none; }
.schedule-edit-toggle { gap:10px; color:#415268; background:#fff; border:1px solid #bdcbd4; }
.schedule-switch-track { width:34px; height:20px; flex:0 0 auto; padding:3px; border-radius:12px; background:#718294; transition:background .16s ease; }
.schedule-switch-track::after { content:''; display:block; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .16s ease; }
.schedule-edit-toggle[aria-checked="true"] { color:#12634e; border-color:#74b99e; background:#eff9f4; }
.schedule-edit-toggle[aria-checked="true"] .schedule-switch-track { background:var(--green); }
.schedule-edit-toggle[aria-checked="true"] .schedule-switch-track::after { transform:translateX(14px); }
@media (min-width:1101px) {
  .dashboard-grid > .todo-panel { display:flex; flex-direction:column; min-height:0; height:100%; overflow:hidden; }
  .todo-panel > .panel-heading,.todo-panel > .full-button { flex-shrink:0; }
  .todo-panel > .todo-list { min-height:0; height:0; flex:1 1 auto; overflow-y:auto; contain:paint; }
}
/* Two lesson rows, grouped by morning / afternoon / evening columns. */
.dashboard-attendance-charts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.attendance-period-heading { margin:0; padding:8px 4px; border-radius:6px; color:#3c5065; background:#f3f6f9; font-size:14px; font-weight:600; text-align:center; }
@media (max-width:720px) {
  .dashboard-attendance-charts { gap:8px; }
  .dashboard-attendance-charts .lesson-attendance-chart { padding:12px 4px; grid-template-rows:minmax(74px,auto) 68px minmax(38px,auto); gap:8px; }
  .dashboard-attendance-charts .lesson-chart-title strong { font-size:14px; }
  .dashboard-attendance-charts .lesson-chart-donut { width:64px; height:64px; }
}

/* A distinct, readable color for each part of the day. */
.attendance-morning { --period-ink:#88500c; --period-soft:#fff4dc; --period-border:#f2d391; --period-accent:#e8aa3c; }
.attendance-afternoon { --period-ink:#265b98; --period-soft:#eaf3ff; --period-border:#bbd5f5; --period-accent:#639ee0; }
.attendance-evening { --period-ink:#674299; --period-soft:#f2ecff; --period-border:#d8c4f1; --period-accent:#a283d2; }
.attendance-period-heading { display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 6px; border:1px solid var(--period-border); border-radius:10px; color:var(--period-ink); background:var(--period-soft); font-size:15px; font-weight:700; }
.period-emoji { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#ffffffa6; font-size:22px; line-height:1; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
.dashboard-attendance-charts .lesson-attendance-chart { border-color:var(--period-border); border-top:3px solid var(--period-accent); }
.dashboard-attendance-charts .lesson-attendance-chart:hover { background:var(--period-soft); border-color:var(--period-accent); }
.dashboard-attendance-charts .lesson-chart-title strong { padding:2px 9px; border-radius:6px; color:var(--period-ink); background:var(--period-soft); }
.panel-title-emoji { display:inline-block; margin-right:8px; font-size:21px; vertical-align:-1px; line-height:1; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
@media (max-width:720px) {
  .attendance-period-heading { gap:4px; padding:8px 3px; font-size:14px; }
  .period-emoji { width:25px; height:28px; font-size:19px; }
  .dashboard-attendance-charts .lesson-chart-title strong { padding:2px 5px; }
}

/* Colorful navigation with a quiet dark backdrop. */
.sidebar { background:linear-gradient(165deg,#1c3746 0%,#172c3b 55%,#162936 100%); border-right:1px solid #294756; }
.sidebar .brand-block { padding-bottom:24px; }
.sidebar .brand-mark { width:44px; height:44px; border-radius:14px; background:linear-gradient(145deg,#219f80,#08785e); box-shadow:0 5px 16px #071d2440,inset 0 1px #ffffff38; }
.sidebar .brand-block strong { letter-spacing:.06em; }
.sidebar .side-class { padding:0 5px 20px; }
.sidebar .eyebrow { padding:0 8px; color:#bed1dc; font-size:12px; }
.sidebar .class-switcher { padding:14px 12px; gap:8px; border:1px solid #456577; border-radius:12px; background:linear-gradient(120deg,#2b4b5c,#223d4f); box-shadow:0 4px 12px #10232d25; }
.sidebar .class-switcher > span:first-child { min-width:0; }
.sidebar .class-switcher b { overflow-wrap:anywhere; font-size:15px; }
.sidebar .class-switcher small { margin-top:6px; color:#d1e0e9; font-size:13px; }
.sidebar .class-switcher:hover { border-color:#81b7ab; }
.sidebar .nav-list { padding-top:20px; }
.sidebar .nav-label { color:#a9c0cd; font-size:12px; letter-spacing:.12em; padding:0 12px; }
.sidebar .secondary-label { margin-top:22px; }
.sidebar .nav-item { --nav-tint:#e4f6ed; --nav-accent:#86d6b5; gap:11px; min-height:54px; margin:5px 0; padding:9px 12px; border:1px solid transparent; border-radius:12px; color:#dce7ee; font-size:15px; font-weight:500; }
.sidebar .nav-item[data-view="attendance"] { --nav-tint:#e4efff; --nav-accent:#9fc5ff; }
.sidebar .nav-item[data-view="students"] { --nav-tint:#f0e8ff; --nav-accent:#c6a9ee; }
.sidebar .nav-item[data-view="behavior"] { --nav-tint:#fff2d5; --nav-accent:#f5cc77; }
.sidebar .nav-item[data-view="points"] { --nav-tint:#e6f4ed; --nav-accent:#86d2ad; }
.sidebar .nav-item[data-view="notice"] { --nav-tint:#ffe7ed; --nav-accent:#f1aabf; }
.sidebar .nav-item[data-view="schedule"] { --nav-tint:#ddf5f5; --nav-accent:#85d4d3; }
.sidebar .nav-item#settingsButton { --nav-tint:#e8edf4; --nav-accent:#bed0e1; }

.settings-view { width:min(100%,1240px); margin:0 auto; }
.settings-save-hint { min-height: 34px; padding: 9px 12px; color: #3b6f60; font-size: 13px; }
.settings-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; align-items:start; }
.settings-nav-panel { position:sticky; top:18px; padding:10px; }
.settings-nav-label { margin:6px 10px 9px; color:#83909c; font-size:12px; font-weight:700; letter-spacing:.08em; }
.settings-nav-item { width:100%; display:flex; align-items:center; gap:10px; padding:11px 10px; border:0; border-radius:10px; color:#586b7a; background:transparent; text-align:left; cursor:pointer; }
.settings-nav-item:hover { color:#2d5665; background:#f3f8f7; }
.settings-nav-item.active { color:#1f6756; background:#eaf7f2; box-shadow:inset 3px 0 #5bb395; }
.settings-nav-item > span:last-child { min-width:0; display:grid; gap:3px; }
.settings-nav-item strong { font-size:13px; }
.settings-nav-item small { color:#8a99a3; font-size:11px; }
.settings-nav-icon { width:27px; height:27px; display:grid; place-items:center; flex:0 0 27px; border-radius:8px; color:#4f9d84; background:#dff2ea; font-size:12px; font-weight:750; }
.settings-content { min-width:0; }
.settings-section-panel[hidden] { display:none; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.settings-card { padding:0; overflow:hidden; }
.settings-card > .table-heading { padding:19px 22px 14px; border-bottom:1px solid #e7eef0; }
.settings-card > .table-heading h2 { margin:0 0 5px; }
.settings-card > .table-heading p { margin:0; }
.settings-form { display:grid; gap:15px; padding:20px 22px 22px; }
.class-logo-editor { display:flex; align-items:center; gap:15px; padding:0 0 16px; border-bottom:1px solid #e7eef0; }
.class-logo-preview { width:72px; height:72px; display:grid; place-items:center; flex:0 0 72px; overflow:hidden; border:1px solid #dce6e4; border-radius:12px; color:#fff; background:#5966c9; font-size:26px; font-weight:800; }
.class-logo-preview img { width:100%; height:100%; display:block; object-fit:contain; }
.class-logo-controls { min-width:0; display:grid; gap:4px; }
.class-logo-controls > strong { color:#344951; font-size:14px; }
.class-logo-controls > small { color:#809098; font-size:12px; line-height:1.5; }
.class-logo-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:5px; }
.class-logo-actions > input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.class-logo-actions > .button { min-height:32px; padding:0 11px; font-size:12px; }
.class-logo-actions > .text-button[hidden] { display:none; }
.settings-form .form-actions { margin-top:2px; }
.settings-toggle { flex-direction:row; align-items:center; gap:7px; white-space:nowrap; }
.settings-toggle input { width:17px; height:17px; }
.wecom-contact-sync { display:flex; align-items:center; gap:10px; }
.wecom-contact-sync > span { color:#75857f; font-size:12px; }
.profile-contact-row .field select { min-height:34px; padding:0 9px; border:1px solid #dfe6e6; border-radius:5px; color:#4b5b64; background:#fff; font:inherit; font-size:13px; }
.profile-contact-row .field select + input { margin-top:5px; }
.collaborator-settings-card { margin-top:0; }
.collaborator-settings-card .user-list { margin:0; padding:0 22px 8px; border-top:0; }
.user-row { display:grid; grid-template-columns:38px minmax(140px,1fr) 70px 224px; align-items:center; gap:12px; min-height:70px; padding:14px 0; }
.user-row .user-identity { min-width:0; flex:1; }
.user-row .user-identity small { overflow-wrap:anywhere; }
.user-row .user-status { justify-self:center; text-align:center; white-space:nowrap; }
.user-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; width:224px; gap:0; }
.user-actions button,.user-action-empty,.current-user-label { justify-self:center; text-align:center; white-space:nowrap; }
.user-actions button { min-width:58px; padding:6px 2px; }
.user-actions .current-user-label { grid-column:2; }
.user-editor { margin:4px 0 14px; padding:18px; border:1px solid #dce9e5; border-radius:8px; background:#f7fbf9; }
.user-editor-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid #e2ece8; }
.user-editor-heading h3 { margin:0; color:#2d443e; font-size:15px; }
.user-editor-heading p { margin:4px 0 0; color:#75857f; font-size:12px; }
.user-editor-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 16px; padding-top:16px; }
.user-active-field { align-self:end; min-height:35px; }
.user-editor .permission-editor { margin-top:14px; }
.user-editor .form-actions { padding-top:12px; border-top:1px solid #e2ece8; }
.brand-mark img { width:100%; height:100%; display:block; object-fit:contain; border-radius:inherit; }
@media (max-width:820px) { .settings-layout { grid-template-columns:1fr; } .settings-nav-panel { display:flex; gap:6px; overflow-x:auto; padding:8px; } .settings-nav-label { display:none; } .settings-nav-item { min-width:170px; } .settings-save-hint { display:none; } }
@media (max-width:600px) { .user-row { grid-template-columns:38px minmax(0,1fr) 70px; align-items:center; }.user-row .user-identity { grid-column:2; }.user-row .user-status { grid-column:3; grid-row:1; }.user-row .user-actions { grid-column:2 / 4; width:100%; grid-template-columns:repeat(3,minmax(64px,1fr)); justify-items:start; }.user-actions button,.user-action-empty,.current-user-label { justify-self:start; }.user-editor-fields { grid-template-columns:1fr; }.user-editor { padding:13px; }.collaborator-settings-card .user-list { padding-right:13px; padding-left:13px; } }
.sidebar .nav-icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; border-radius:10px; background:var(--nav-tint); font-size:21px; line-height:1; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; box-shadow:inset 0 1px #ffffff80; }
.sidebar .nav-item:hover { background:#ffffff0d; color:#fff; border-color:#ffffff18; }
.sidebar .nav-item.active,.sidebar .nav-item.active:hover { color:#fff; background:#ffffff12; border-color:#ffffff22; box-shadow:inset 3px 0 var(--nav-accent); font-weight:700; }
.sidebar .nav-item.active .nav-icon { box-shadow:0 0 0 3px #ffffff0c; }
.sidebar .nav-item em { background:#fbd29b; color:#6d380d; font-weight:700; min-width:23px; }
.sidebar .nav-item em[hidden] { display:none; }
.sidebar .nav-item[data-view="points"] .nav-icon,.sidebar .nav-item[data-view="fees"] .nav-icon { color:#205b49; font-weight:900; }
.sidebar .nav-item[data-view="points"] .nav-icon { font-size:23px; }
.sidebar .sidebar-bottom { margin-top:14px; padding-top:12px; }
.sidebar .teacher-card { margin:14px 0 0; padding:12px 10px; gap:10px; border:1px solid #3b5667; border-radius:12px; background:#ffffff06; }
.sidebar .teacher-avatar { width:38px; height:38px; border-radius:12px; background:#d6f0e6; color:#165c48; font-size:16px; }
.sidebar .teacher-card > div:nth-child(2) { min-width:0; flex:1; }
.sidebar .teacher-card strong { overflow-wrap:anywhere; font-size:14px; }
.sidebar .teacher-card span { font-size:12px; color:#bfd1dd; }
.sidebar .more-button { flex:0 0 30px; height:34px; padding:0; border-radius:8px; background:#ffffff0a; color:#ecf5fa; }
.sidebar .more-button:hover { background:#ffffff18; }
.sidebar :focus-visible { outline-color:#a2dfcc; outline-offset:2px; }
.sidebar .nav-item[hidden] { display:none; }
.sidebar .eyebrow { display:inline-flex; align-items:center; gap:6px; }
.flat-icon,.nav-icon { position:relative; display:inline-block; width:22px; height:22px; flex:0 0 auto; }
.flat-icon::before,.flat-icon::after,.nav-icon::before,.nav-icon::after { content:''; position:absolute; display:block; }
.icon-home::before { left:4px; top:8px; width:14px; height:11px; border-radius:3px; background:#6877e1; box-shadow:0 4px 0 -2px #fff inset; }
.icon-home::after { left:3px; top:3px; width:12px; height:12px; border-radius:3px 3px 2px 2px; background:#3f4fb2; transform:rotate(45deg) scale(.78); }
.icon-clipboard::before { left:5px; top:4px; width:12px; height:16px; border-radius:3px; background:#5b9be1; box-shadow:0 0 0 2px #315789 inset; }
.icon-clipboard::after { left:8px; top:2px; width:6px; height:4px; border-radius:2px; background:#315789; }
.icon-students::before { left:2px; top:8px; width:18px; height:10px; border-radius:10px 10px 5px 5px; background:#9a84d8; }
.icon-students::after { left:7px; top:2px; width:9px; height:9px; border-radius:50%; background:#51418b; box-shadow:-5px 9px 0 -2px #7a68bd, 5px 9px 0 -2px #7a68bd; }
.icon-star::before { left:4px; top:2px; width:14px; height:14px; background:#e5b84e; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%); }
.icon-ai::before { left:3px; top:5px; width:16px; height:13px; border-radius:7px; background:#8792ef; box-shadow:0 0 0 2px #3948a8 inset; }
.icon-ai::after { left:7px; top:10px; width:3px; height:3px; border-radius:50%; background:#fff; box-shadow:6px 0 #fff; }
.icon-medal::before { left:7px; top:2px; width:8px; height:8px; border-radius:50%; background:#f4c454; box-shadow:0 0 0 2px #9e7220 inset; }
.icon-medal::after { left:6px; top:10px; width:10px; height:10px; background:#74c5a5; clip-path:polygon(0 0,100% 0,74% 100%,50% 73%,26% 100%); }
.icon-wallet::before { left:2px; top:6px; width:18px; height:12px; border-radius:4px; background:#e0a35d; box-shadow:0 0 0 2px #805930 inset; }
.icon-wallet::after { left:12px; top:10px; width:6px; height:4px; border-radius:2px; background:#fff0cf; }
.icon-mail::before { left:2px; top:5px; width:18px; height:14px; border-radius:3px; background:#dd83a3; box-shadow:0 0 0 2px #934363 inset; }
.icon-mail::after { left:5px; top:7px; width:12px; height:8px; border-bottom:2px solid #fff; transform:rotate(0); clip-path:polygon(0 0,50% 55%,100% 0,100% 22%,50% 75%,0 22%); background:#fff; }
.icon-book::before { left:3px; top:3px; width:16px; height:16px; border-radius:3px; background:#74bbcf; box-shadow:0 0 0 2px #276a82 inset; }
.icon-book::after { left:10px; top:5px; width:2px; height:12px; background:#d9f3f7; }
.icon-settings::before { left:4px; top:4px; width:14px; height:14px; border:3px dotted #8c9db7; border-radius:50%; }
.icon-settings::after { left:9px; top:9px; width:5px; height:5px; border-radius:50%; background:#526275; }
.icon-school::before { width:13px; height:10px; left:2px; top:5px; border-radius:2px; background:#7180e6; transform:skewY(-8deg); }
.icon-school::after { width:6px; height:6px; left:8px; top:2px; background:#3948a8; transform:rotate(45deg); }
.icon-search::before { left:3px; top:3px; width:11px; height:11px; border:3px solid #5369c9; border-radius:50%; }
.icon-search::after { left:15px; top:15px; width:7px; height:3px; border-radius:2px; background:#5369c9; transform:rotate(45deg); transform-origin:left center; }
.icon-bell::before { left:5px; top:3px; width:12px; height:14px; border-radius:8px 8px 3px 3px; background:#7b87dc; box-shadow:0 0 0 2px #304261 inset; }
.icon-bell::after { left:3px; top:16px; width:16px; height:3px; border-radius:3px; background:#304261; box-shadow:6px 3px 0 -1px #304261; }
.sidebar .nav-icon { width:34px; height:34px; }
.icon-image { display:inline-grid; place-items:center; flex:0 0 auto; overflow:hidden; }
.icon-image img { width:100%; height:100%; display:block; object-fit:contain; }
.sidebar .nav-icon.image-icon img { width:100%; height:100%; max-width:26px; max-height:26px; object-fit:contain; }
.icon-image::before,.icon-image::after,.nav-icon.image-icon::before,.nav-icon.image-icon::after { display:none !important; }
.sidebar .nav-icon.image-icon { padding:3px; }
.icon-image-school { width:18px; height:18px; }
.icon-image-school img { object-fit:contain; }
.icon-image-bell { width:23px; height:23px; }
.icon-image-bell img { object-fit:contain; }
.sidebar .nav-icon::before { transform:scale(1.18); transform-origin:center; }
.sidebar .nav-icon::after { transform-origin:center; }
.sidebar .nav-item.active .nav-icon { filter:drop-shadow(0 1px 1px rgba(26,36,96,.18)); }
.top-actions .icon-button { display:grid; place-items:center; }
.notification-trigger #notificationCount { position:absolute; right:3px; top:3px; }
@media (max-width:720px) {
  .sidebar .brand-block { padding-bottom:8px; }
  .sidebar .nav-list { padding:8px 2px 5px; gap:8px; }
  .sidebar .nav-list .nav-item { min-height:48px; padding:7px 10px; gap:8px; border-radius:11px; }
  .sidebar .nav-icon { width:30px; height:30px; flex-basis:30px; font-size:19px; border-radius:9px; }
  .sidebar .nav-icon { width:30px; height:30px; }
}
/* A denser dashboard while keeping the readable type scale. */
#dashboardView .kicker { margin-bottom:4px; }
#dashboardView .subtitle { margin-top:5px; }
#dashboardView .metric-grid { margin-top:20px; gap:12px; }
#dashboardView .metric-card { min-height:136px; padding:14px 16px 12px; }
#dashboardView .metric-value { margin-top:6px; line-height:1.3; }
#dashboardView .metric-foot { margin-top:4px; }
#dashboardView .progress { margin-top:10px; }
#dashboardView .dashboard-grid,#dashboardView .lower-grid { gap:12px; margin-top:12px; }
#dashboardView .panel { padding:16px 18px; }
#dashboardView .panel-heading p { margin-top:3px; }
#dashboardView .dashboard-attendance-charts { margin-top:12px; gap:8px; }
#dashboardView .attendance-period-heading { padding:6px; }
#dashboardView .period-emoji { width:28px; height:28px; font-size:20px; }
#dashboardView .lesson-attendance-chart { min-height:185px; padding:9px 8px; grid-template-rows:minmax(60px,auto) 68px minmax(24px,auto); gap:6px; }
#dashboardView .lesson-chart-donut { width:68px; height:68px; }
#dashboardView .todo-list { margin-top:12px; }
#dashboardView .todo-item { padding:9px 0; }
#dashboardView .todo-copy small { margin-top:3px; }
#dashboardView .full-button { margin-top:12px; }
#dashboardView .activity-list,#dashboardView .schedule-list { margin-top:10px; }
#dashboardView .activity-item { min-height:54px; }
#dashboardView .schedule-item { min-height:62px; }
@media (max-width:720px) {
  #dashboardView .metric-grid { gap:10px; margin-top:16px; }
  #dashboardView .metric-card { padding:12px; }
  #dashboardView .panel { padding:14px 12px; }
  #dashboardView .attendance-period-heading { padding:5px 3px; }
  #dashboardView .period-emoji { width:24px; height:26px; font-size:19px; }
  #dashboardView .lesson-attendance-chart { padding:8px 4px; grid-template-rows:minmax(74px,auto) 64px minmax(24px,auto); }
  #dashboardView .lesson-chart-donut { width:64px; height:64px; }
}

.dashboard-sync-status { display:flex; align-items:center; gap:6px; margin:6px 0 0; color:#17654e; font-size:13px; }
.dashboard-sync-status::before { content:''; flex:0 0 6px; height:6px; border-radius:50%; background:#168466; }
.dashboard-sync-status.sync-error { color:#82531f; }
.dashboard-sync-status.sync-error::before { background:#b87520; }

/* Keep the overview scannable; workspace pages retain the larger reading scale. */
#dashboardView .welcome-row h1 { font-size:24px; }
#dashboardView .welcome-row h1 span { font-size:17px; }
#dashboardView .welcome-row h1 #welcomeGreeting { font-size:24px; }
#dashboardView .subtitle { font-size:13px; }
#dashboardView .metric-top { font-size:13px; }
#dashboardView .metric-value { font-size:26px; }
#dashboardView .metric-value span { font-size:12px; }
#dashboardView .panel-heading h2 { font-size:15px; }
#dashboardView .panel-heading p { font-size:12px; }
#dashboardView .activity-item p { font-size:12px; }
#dashboardView .activity-item span { font-size:11px; }
#dashboardView .schedule-item .course strong { font-size:12px; }
#dashboardView .todo-copy strong { font-size:12px; }

/* Business views keep the data and actions while omitting explanatory copy. */
.view-title .kicker,
.view-title .subtitle,
.view .panel-heading p,
.view .table-heading p,
.view .analysis-heading p,
.view .score-board-heading p,
.view .score-board-heading small,
.view .score-rank-heading p,
.view .behavior-range-label,
.view .table-footer > span,
.view .behavior-metric > small { display:none !important; }

/* Dense attendance roster: several editable students per row instead of a tall table. */
.attendance-record-panel { overflow:hidden; }
.attendance-quick-actions { display:flex; align-items:center; gap:8px; padding:0 22px 14px; }
.attendance-quick-actions .button { min-height:32px; padding:0 11px; font-size:13px; }
.attendance-roster { display:grid; grid-template-columns:repeat(3,minmax(250px,1fr)); gap:8px; padding:0 22px 18px; }
.attendance-roster-row { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 76px 82px 30px; align-items:center; gap:7px; min-height:48px; padding:7px 9px; border:1px solid #e6ecee; border-radius:7px; background:#fbfcfc; }
.attendance-roster-row:hover { border-color:#b9d8ce; background:#f8fcfa; }
.attendance-student { min-width:0; display:flex; align-items:center; gap:7px; }
.attendance-avatar { width:25px; height:25px; display:grid; flex:0 0 auto; place-items:center; border-radius:50%; font-size:12px; font-weight:700; }
.attendance-student-copy { min-width:0; }
.attendance-student-copy strong,.attendance-student-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attendance-student-copy strong { color:#33475b; font-size:13px; font-weight:600; }
.attendance-student-copy small { margin-top:1px; color:#74838b; font-size:11px; }
.attendance-roster-row .inline-select { width:100%; min-height:30px; padding:0 4px; font-size:12px; }
.attendance-roster-row .inline-input { width:100%; min-width:0; min-height:30px; padding:0 6px; font-size:12px; }
.attendance-roster-row .attendance-contact { padding:3px 0; font-size:12px; text-align:center; }
.attendance-row-readonly { background:#fff; }
.attendance-status { display:inline-flex; align-items:center; min-height:30px; padding:0 7px; color:#526174; font-size:13px; font-weight:600; }
.attendance-status-present { color:#268a6e; }
.attendance-status-late { color:#b8793e; }
.attendance-status-absent { color:#c36f68; }
.attendance-status-leave { color:#6884b5; }
.attendance-note-readonly { grid-column:2 / 4; color:#7a8790; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attendance-request-status { color:#a16e35; font-size:12px; }
.attendance-request-status.approved { color:#268a6e; }
.attendance-request-status.used { color:#7a8790; }
.attendance-footer-actions { display:flex; align-items:center; gap:8px; }
.attendance-approval-list { display:grid; gap:10px; }
.attendance-approval-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid #eff2f2; }
.attendance-approval-row:first-child { border-top:0; }
.attendance-approval-row strong,.attendance-approval-row span { display:block; }
.attendance-approval-row strong { color:#40515a; font-size:14px; }
.attendance-approval-row span { margin-top:4px; color:#526174; font-size:13px; }
.dashboard-messages-panel { margin-top:12px; padding:14px 18px; }
.dashboard-messages-panel.has-pending-message { animation: notification-panel-flash 1.15s ease-in-out infinite; }
.dashboard-message-count { color:#73818a; font-size:12px; }
.dashboard-message-list { display:grid; }
.dashboard-message-row { display:flex; align-items:center; gap:11px; min-width:0; padding:10px 0; border-top:1px solid #eff2f2; }
.dashboard-message-row:first-child { border-top:0; }
.dashboard-message-icon { width:27px; height:27px; display:grid; flex:0 0 auto; place-items:center; border-radius:50%; color:#75838a; background:#eef2f2; font-size:14px; font-weight:700; }
.dashboard-message-icon.pending { color:#a66b31; background:#fff1df; }
.dashboard-message-icon.approved { color:#26866b; background:#e8f7f1; }
.dashboard-message-icon.rejected { color:#b95f57; background:#fff0ef; }
.dashboard-message-copy { min-width:0; flex:1; }
.dashboard-message-copy strong,.dashboard-message-copy span,.dashboard-message-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-message-copy strong { color:#36454e; font-size:13px; font-weight:600; }
.dashboard-message-copy span { margin-top:3px; color:#526174; font-size:12px; }
.dashboard-message-copy small { margin-top:2px; color:#7b878d; font-size:11px; }
.dashboard-message-actions { display:flex; flex:0 0 auto; gap:6px; }
.dashboard-message-actions .button,.dashboard-message-row > .button { min-height:29px; padding:0 9px; font-size:12px; }
.notification-trigger { position:relative; }
.notification-trigger > #notificationCount { position:absolute; top:-5px; right:-6px; min-width:16px; height:16px; padding:0 4px; border:2px solid #fff; border-radius:10px; color:#fff; background:#d76e61; font-size:10px; line-height:12px; text-align:center; animation: notification-flash 1s steps(2, start) infinite; }
.notification-trigger > #notificationCount[hidden] { display:none; }
.dashboard-message-icon.pending { animation: notification-flash 1s steps(2, start) infinite; }
@keyframes notification-flash { 50% { opacity:.2; } }
@keyframes notification-panel-flash {
  0%,100% { background-color:#fff; border-color:#d9e3e8; box-shadow:0 3px 12px #18342a04; }
  50% { background-color:#ffe3a3; border-color:#e5a543; box-shadow:0 0 0 4px #f5c76b70; }
}
@media (prefers-reduced-motion: reduce) { .notification-trigger > span,.dashboard-message-icon.pending,.dashboard-messages-panel.has-pending-message { animation:none; } }
@media (max-width:720px) { .dashboard-messages-panel { margin-top:10px; padding:12px 13px; }.dashboard-message-row { align-items:flex-start; gap:8px; }.dashboard-message-actions { flex-direction:column; }.dashboard-message-actions .button { min-width:54px; } }
@media (max-width:1100px) { .attendance-roster { grid-template-columns:repeat(2,minmax(250px,1fr)); } }
@media (max-width:720px) { .attendance-quick-actions { flex-wrap:wrap; padding:0 15px 12px; }.attendance-roster { grid-template-columns:1fr; padding:0 15px 15px; }.attendance-roster-row { grid-template-columns:minmax(0,1fr) 76px 78px 30px; padding:6px 7px; } }

.monthly-leave-panel { margin-top:14px; overflow:hidden; }
.monthly-leave-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.monthly-leave-controls .compact-field input { width:150px; min-width:0; }
.leave-frequency-tag { display:inline-block; padding:4px 7px; border-radius:4px; color:#9b5e31; background:#fff2e2; font-size:13px; }
@media (max-width:720px) {
  .monthly-leave-panel .table-heading { flex-direction:column; }
  .monthly-leave-controls { width:100%; justify-content:flex-start; }
  .monthly-leave-controls .compact-field { flex:1; min-width:130px; }
  .monthly-leave-controls .compact-field input { width:100%; }
}

.behavior-toolbar { display:flex; align-items:center; flex-wrap:nowrap; gap:12px; min-height:54px; margin:20px 0 14px; padding:8px 10px; border:1px solid #dce5e8; border-radius:6px; background:#fff; }
.behavior-view-toggle { gap:2px; }
.behavior-view-toggle button { width:auto; min-width:94px; padding:0 12px; font-size:14px; }
.behavior-toolbar .compact-field { display:flex; flex:0 0 auto; flex-direction:row; align-items:center; gap:8px; margin:0; }
.behavior-toolbar .compact-field span { padding:4px 8px; border-left:3px solid #16866c; border-radius:3px; color:#11634f; background:#e8f5ef; font-size:13px; font-weight:700; white-space:nowrap; }
.behavior-toolbar .compact-field select,.behavior-student-picker select { width:auto; min-width:132px; min-height:34px; padding:4px 9px; border:1px solid #d8e1e4; border-radius:5px; color:#354850; background:#fff; font:inherit; font-size:14px; }
.behavior-range-label { margin:0 0 0 auto; color:var(--muted); font-size:13px; white-space:nowrap; }
.behavior-analysis-view[hidden] { display:none; }
.behavior-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-bottom:14px; }
.behavior-metric { min-width:0; padding:14px 16px 12px; border:1px solid #dce5e8; border-left:3px solid #568ac0; border-radius:6px; background:#fff; }
.behavior-metric.positive { border-left-color:#16866c; }
.behavior-metric.caution { border-left-color:#d0755f; }
.behavior-metric > span,.behavior-metric > strong,.behavior-metric > small { display:block; }
.behavior-metric > span { color:#526174; font-size:13px; }
.behavior-metric > strong { margin-top:2px; color:#263a44; font-size:25px; line-height:1.4; }
.behavior-metric > strong small { margin-left:4px; color:#526174; font-size:13px; font-weight:500; }
.behavior-metric > small { margin-top:2px; color:#65757c; font-size:12px; }
.behavior-analysis-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; margin-bottom:14px; }
.behavior-analysis-panel { min-width:0; min-height:290px; padding:18px 20px; }
.analysis-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.analysis-heading h2 { margin:0; color:#2e414a; font-size:16px; }
.analysis-heading p { margin:3px 0 0; color:#65757c; font-size:13px; }
.chart-legend { display:flex; align-items:center; gap:5px; color:#526174; font-size:12px; white-space:nowrap; }
.chart-legend i { width:8px; height:8px; border-radius:50%; }
.positive-dot { background:#16866c; }
.caution-dot { margin-left:6px; background:#d0755f; }
.behavior-trend { min-height:205px; display:flex; align-items:center; padding-top:12px; }
.behavior-bars { width:100%; height:174px; display:grid; grid-template-columns:repeat(auto-fit,minmax(22px,1fr)); align-items:end; gap:5px; padding:0 0 25px; border-bottom:1px solid #e6ecee; }
.behavior-bar-group { min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; }
.behavior-bar-pair { width:100%; height:calc(100% - 19px); display:flex; align-items:flex-end; justify-content:center; gap:3px; }
.behavior-bar-pair i { width:min(13px,38%); min-height:0; border-radius:3px 3px 0 0; }
.behavior-bar-pair .positive-bar { background:#4cad8d; }
.behavior-bar-pair .caution-bar { background:#df987d; }
.behavior-bar-group small { width:100%; color:#67777e; font-size:10px; line-height:1; text-align:center; white-space:nowrap; }
.behavior-categories { display:grid; gap:13px; margin-top:20px; }
.category-row > div { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; color:#43545d; font-size:13px; }
.category-row strong { color:#596c73; font-size:12px; font-weight:600; }
.category-row > i { height:7px; display:block; overflow:hidden; border-radius:4px; background:#edf1f2; }
.category-row > i b { height:100%; display:block; border-radius:inherit; background:#6d9dbf; }
.category-row:nth-child(3n + 2) > i b { background:#47a187; }
.category-row:nth-child(3n) > i b { background:#d3916e; }
.behavior-students-panel { padding:18px 20px 10px; }
.analysis-count { color:#61727a; font-size:13px; }
.behavior-ranking { margin-top:11px; }
.ranking-row { width:100%; min-height:48px; display:grid; grid-template-columns:40px minmax(100px,1fr) auto 90px; align-items:center; gap:10px; padding:5px 3px; border-top:1px solid #edf1f2; color:#485a62; background:#fff; text-align:left; }
.ranking-row:hover { background:#f6faf9; }
.ranking-index { color:#89969a; font-size:13px; font-variant-numeric:tabular-nums; }
.ranking-row > strong { overflow:hidden; color:#344850; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.ranking-positive,.ranking-caution,.ranking-total { font-size:13px; }
.ranking-counts { display:flex; align-items:center; gap:14px; }
.ranking-positive { color:#16866c; }
.ranking-caution { color:#bd6655; }
.ranking-total { color:#65757c; text-align:right; }
.behavior-student-picker { display:flex; align-items:flex-end; gap:13px; margin-bottom:13px; }
.behavior-student-picker label { gap:3px; }
.behavior-student-picker label > span { color:#526174; font-size:12px; }
.behavior-student-picker select { min-width:230px; }
.behavior-student-picker > span { margin-bottom:5px; color:#607179; font-size:13px; }
.behavior-student-picker .button { min-height:34px; padding:0 11px; white-space:nowrap; }
.behavior-record-heading { align-items:flex-end; }
.behavior-record-filters { display:flex; align-items:center; gap:9px; }
.behavior-record-filters .search-field { min-height:34px; }
.behavior-record-filters .search-field input { width:205px; }
.behavior-record-filters .small-select { min-height:34px; }
.record-item { align-items:flex-start; padding:12px 0; }
.record-item > .record-icon { flex:0 0 28px; margin-top:2px; }
.record-content { min-width:0; }
.record-title-line { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.record-title-line strong { overflow-wrap:anywhere; }
.behavior-category-tag { padding:1px 6px; border-radius:3px; color:#326b73; background:#e8f3f3; font-size:11px; }
.record-content p { margin-top:5px; line-height:1.55; overflow-wrap:anywhere; }
.record-meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:5px; color:#77858b; font-size:12px; }
.record-response { display:flex; gap:7px; margin-top:7px; padding:6px 9px; border-left:2px solid #78ad9b; color:#4b635c; background:#f3f8f6; font-size:12px; line-height:1.5; }
.record-response b { flex:0 0 auto; font-weight:600; }
.record-score { flex:0 0 auto; padding-top:5px; }
.behavior-entry-form { grid-template-columns:1fr 1fr; }
.behavior-entry-form .field:nth-of-type(5),.behavior-entry-form .field:nth-of-type(6),.behavior-entry-form .field:nth-of-type(7),.behavior-entry-form .form-actions { grid-column:1 / -1; }
.behavior-entry-form .field textarea { min-height:78px; }
@media (max-width:1000px) {
  .behavior-analysis-grid { grid-template-columns:1fr; }
  .behavior-analysis-panel { min-height:250px; }
  .behavior-bars { grid-template-columns:repeat(auto-fit,minmax(20px,1fr)); }
}
@media (max-width:720px) {
  .behavior-toolbar { align-items:center; flex-wrap:wrap; gap:8px; margin:16px 0 11px; padding:8px; }
  .behavior-view-toggle { width:auto; flex:1 1 180px; }
  .behavior-view-toggle button { flex:1; }
  .behavior-toolbar .compact-field { flex:0 0 auto; }
  .behavior-toolbar .compact-field select { width:auto; min-width:115px; }
  .behavior-range-label { align-self:center; margin-left:auto; }
  .behavior-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
  .behavior-metric { padding:11px 12px 10px; }
  .behavior-metric > strong { font-size:22px; }
  .behavior-analysis-grid { gap:10px; margin-bottom:10px; }
  .behavior-analysis-panel { min-height:245px; padding:15px 13px; }
  .behavior-bars { height:158px; gap:2px; }
  .behavior-bar-group small { font-size:9px; }
  .behavior-students-panel { padding:15px 13px 8px; }
  .ranking-row { grid-template-columns:27px minmax(70px,1fr) auto; gap:5px; min-height:46px; }
  .ranking-total { display:none; }
  .ranking-row > strong,.ranking-positive,.ranking-caution { font-size:12px; }
  .ranking-counts { gap:7px; }
  .behavior-student-picker { align-items:stretch; flex-direction:column; gap:5px; }
  .behavior-student-picker select { width:100%; }
  .behavior-student-picker > span { margin:0; }
  .behavior-student-picker .button { align-self:flex-start; }
  .behavior-record-heading { align-items:stretch; }
  .behavior-record-filters { align-items:stretch; flex-direction:column; }
  .behavior-record-filters .search-field,.behavior-record-filters .search-field input { width:100%; }
  .behavior-record-filters .small-select { width:100%; }
  .record-item { gap:8px; }
  .record-score { font-size:13px; }
  .behavior-entry-form { grid-template-columns:1fr; }
  .behavior-entry-form .field:nth-of-type(5),.behavior-entry-form .field:nth-of-type(6),.behavior-entry-form .field:nth-of-type(7),.behavior-entry-form .form-actions { grid-column:auto; }
}
.score-leaderboard-panel { margin:0 0 14px; padding:17px 19px 16px; }
.score-board-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.score-board-heading h2 { margin:0; color:#2e414a; font-size:16px; }
.score-board-heading p { margin:3px 0 0; color:#65757c; font-size:12px; }
.score-board-heading small { display:block; margin-top:2px; color:#7b888d; font-size:11px; }
.score-period-tabs { flex:0 0 auto; }
.score-period-tabs button { width:auto; min-width:54px; padding:0 10px; font-size:13px; }
.score-leaderboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.score-rank-section { min-width:0; padding:11px 12px 6px; border:1px solid #e3e9eb; border-top:3px solid #438e75; border-radius:5px; background:#fff; }
.score-rank-section.rank-low { border-top-color:#d27a64; }
.score-rank-section.rank-rise { border-top-color:#5687b4; }
.score-rank-heading { display:flex; align-items:center; gap:9px; min-height:34px; padding-bottom:8px; border-bottom:1px solid #edf1f2; }
.rank-mark { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:#176f56; background:#e8f5ef; font-size:17px; font-weight:700; }
.rank-low .rank-mark { color:#a65746; background:#fff0eb; }
.rank-rise .rank-mark { color:#456e98; background:#edf3fa; }
.score-rank-heading h3 { margin:0; color:#354951; font-size:14px; }
.score-rank-heading p { margin:1px 0 0; color:#748187; font-size:11px; }
.score-rank-list { min-height:119px; }
.score-rank-row { width:100%; min-height:38px; display:grid; grid-template-columns:23px minmax(0,1fr) auto; align-items:center; gap:7px; padding:4px 1px; border-bottom:1px solid #f0f3f4; color:#42535b; background:transparent; text-align:left; }
.score-rank-row:last-child { border-bottom:0; }
.score-rank-row:hover { background:#f7faf9; }
.score-rank-row > strong { min-width:0; overflow:hidden; font-size:13px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.score-rank-number { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:#6d7b80; background:#eff2f3; font-size:11px; font-weight:700; }
.score-rank-number.score-rank-emoji { width:24px; height:24px; border-radius:0; color:inherit; background:transparent; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; font-size:18px; line-height:1; }
.rank-1 { color:#805d16; background:#fbefc9; }
.rank-2 { color:#596c78; background:#e9eef1; }
.rank-3 { color:#875d48; background:#f5e8df; }
.score-rank-value { color:#68787e; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.score-rank-value.is-positive { color:#17785e; }
.score-rank-value.is-negative { color:#bd6655; }
.score-rank-empty { margin:0; padding:35px 6px; color:#7a888e; font-size:12px; text-align:center; }
.points-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0 14px; }
.points-summary-item { padding:15px 18px; border:1px solid #dce5e8; border-left:3px solid #16866c; border-radius:7px; background:#fff; }
.points-summary-item span { display:block; color:#526174; font-size:13px; }
.points-summary-item strong { display:block; margin-top:4px; color:#203b45; font-size:25px; }
.points-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.points-toolbar .view-toggle { flex:0 0 auto; }
.points-toolbar .view-toggle button { width:auto; min-width:82px; padding:0 12px; }
.points-toolbar .search-field { min-height:38px; margin-left:auto; }
.points-toolbar .search-field input { width:230px; }
.points-active-toggle { display:flex; align-items:center; gap:7px; color:#526174; font-size:13px; }
.points-active-toggle input { width:17px; height:17px; }
.points-bulk-adjust { margin:0 0 16px; padding:13px; border:1px solid #d8e8e1; border-radius:6px; background:#f5faf7; }
.points-bulk-row { display:flex; align-items:flex-end; gap:8px; }
.points-bulk-row .field { flex:1; }
.points-bulk-row > span { padding-bottom:11px; color:#526174; }
.points-bulk-row .button { white-space:nowrap; }
.points-bulk-note { margin:8px 0 0; color:#526174; font-size:13px; line-height:1.5; }
.base-score-form { max-height:56vh; overflow:auto; padding-right:5px; }
.point-rules-panel .table-wrap { overflow:visible; }
.point-rules-table { width:100%; table-layout:fixed; white-space:normal; }
.point-rules-table th,.point-rules-table td { padding-right:12px; padding-left:12px; overflow-wrap:anywhere; }
.point-rules-table th:nth-child(1),.point-rules-table td:nth-child(1) { width:8%; }
.point-rules-table th:nth-child(2),.point-rules-table td:nth-child(2) { width:12%; }
.point-rules-table th:nth-child(3),.point-rules-table td:nth-child(3) { width:14%; }
.point-rules-table th:nth-child(4),.point-rules-table td:nth-child(4) { width:9%; }
.point-rules-table th:nth-child(5),.point-rules-table td:nth-child(5) { width:42%; }
.point-rules-table th:nth-child(6),.point-rules-table td:nth-child(6) { width:9%; }
.point-rules-table th:nth-child(7),.point-rules-table td:nth-child(7) { width:6%; }
.point-rules-table td.rule-points { white-space:nowrap; }
.point-rules-table td { vertical-align:top; }
.rule-points { font-weight:700; white-space:nowrap; }
.rule-points.positive { color:#14755a; }
.rule-points.negative { color:#bb5d4f; }
.point-warning-1 { color:#a74337 !important; background:#fff0ed; }
.point-warning-2 { color:#a3372d !important; background:#ffe5e1; }
.point-warning-3 { color:#922b25 !important; background:#ffd4ce; }
.point-warning-4 { color:#fff !important; background:#a92f28; }
.record-score.point-warning-1,.record-score.point-warning-2,.record-score.point-warning-3,.record-score.point-warning-4,.score-up.point-warning-1,.score-up.point-warning-2,.score-up.point-warning-3,.score-up.point-warning-4 { padding:4px 7px; border-radius:4px; }
.score-up.negative { color:#a74337 !important; }
.point-event-warning-1 { background:#fff7f5; box-shadow:inset 3px 0 #e5a79e; }
.point-event-warning-2 { background:#fff1ee; box-shadow:inset 4px 0 #dc887e; }
.point-event-warning-3 { background:#ffe8e3; box-shadow:inset 5px 0 #d5685e; }
.point-event-warning-4 { background:#ffddd7; box-shadow:inset 6px 0 #bd4038; }
.data-table tr.point-event-warning-1 td { background:#fff7f5; }
.data-table tr.point-event-warning-2 td { background:#fff1ee; }
.data-table tr.point-event-warning-3 td { background:#ffe8e3; }
.data-table tr.point-event-warning-4 td { background:#ffddd7; }
.data-table tr.point-event-warning-1 td:first-child,.data-table tr.point-event-warning-2 td:first-child,.data-table tr.point-event-warning-3 td:first-child,.data-table tr.point-event-warning-4 td:first-child { box-shadow:inset 3px 0 #e5a79e; }
.data-table tr.point-event-warning-2 td:first-child { box-shadow:inset 4px 0 #dc887e; }
.data-table tr.point-event-warning-3 td:first-child { box-shadow:inset 5px 0 #d5685e; }
.data-table tr.point-event-warning-4 td:first-child { box-shadow:inset 6px 0 #bd4038; }
.record-item.point-event-warning-1,.record-item.point-event-warning-2,.record-item.point-event-warning-3,.record-item.point-event-warning-4 { padding-left:10px; border-radius:4px; }
.todo-item.point-event-warning-1,.todo-item.point-event-warning-2,.todo-item.point-event-warning-3,.todo-item.point-event-warning-4 { padding-left:10px; border-radius:4px; }
.point-ledger-panel { margin-top:14px; }
.point-ledger-panel .compact-field { flex-direction:row; align-items:center; }
.point-ledger-panel .compact-field select { min-width:150px; }
.fee-summary .points-summary-item { border-left-color:#4a8bb5; }
.fee-summary .fee-income { border-left-color:#2b9a73; }
.fee-summary .fee-expense { border-left-color:#c87567; }
.fee-summary .fee-balance { border-left-color:#4a8bb5; }
.fee-ledger-panel { margin-top:14px; }
.fee-ledger-controls { display:flex; align-items:flex-end; gap:12px; }
.fee-ledger-controls .compact-field { min-width:126px; }
.fee-direction { display:inline-block; min-width:38px; padding:4px 7px; border-radius:4px; font-size:13px; text-align:center; }
.fee-direction.income { color:#237e60; background:#e8f6f0; }
.fee-direction.expense { color:#ad5f51; background:#fff0ed; }
.fee-amount { font-weight:700; white-space:nowrap; }
.fee-amount.income { color:#237e60; }
.fee-amount.expense { color:#ad5f51; }
.fee-receipt-link { white-space:nowrap; }
.fee-receipt-preview { display:flex; align-items:center; gap:10px; padding:9px; border:1px solid #e5ecea; border-radius:6px; background:#f8fbfa; }
.fee-receipt-preview img { width:58px; height:58px; object-fit:cover; border-radius:4px; }
.fee-receipt-preview span { color:#526174; font-size:13px; }
@media (max-width:720px) { .points-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.points-summary-item { padding:12px; }.points-toolbar .search-field,.points-toolbar .search-field input { width:100%; }.points-toolbar .search-field { margin-left:0; }.points-active-toggle { width:100%; }.point-ledger-panel .table-heading { align-items:flex-start; flex-direction:column; }.point-ledger-panel .compact-field select { width:100%; }.fee-ledger-panel .table-heading { align-items:flex-start; flex-direction:column; }.fee-ledger-controls { width:100%; align-items:flex-end; justify-content:space-between; }.fee-ledger-controls .compact-field { flex:1; }.fee-ledger-controls .compact-field select { width:100%; }.points-bulk-row { align-items:stretch; flex-wrap:wrap; }.points-bulk-row .field { flex:1 1 130px; }.points-bulk-row > span { padding:0 0 10px; }.points-bulk-row .button { flex:1 0 100%; }.point-rules-table th,.point-rules-table td { padding:9px 5px; font-size:12px; line-height:1.5; }.point-rules-table th:nth-child(1),.point-rules-table td:nth-child(1) { width:9%; }.point-rules-table th:nth-child(2),.point-rules-table td:nth-child(2) { width:12%; }.point-rules-table th:nth-child(3),.point-rules-table td:nth-child(3) { width:14%; }.point-rules-table th:nth-child(4),.point-rules-table td:nth-child(4) { width:13%; }.point-rules-table th:nth-child(5),.point-rules-table td:nth-child(5) { width:32%; }.point-rules-table th:nth-child(6),.point-rules-table td:nth-child(6) { width:10%; }.point-rules-table th:nth-child(7),.point-rules-table td:nth-child(7) { width:10%; }.point-rules-table .status-pill { padding:3px 4px; font-size:11px; } }
@media (max-width:420px) { .point-rules-table th,.point-rules-table td { padding:8px 3px; font-size:11px; }.point-rules-table .rule-points span { display:none; } }
@media (max-width:900px) {
  .score-leaderboard-grid { grid-template-columns:1fr; gap:8px; }
  .score-rank-list { min-height:0; }
}
@media (max-width:720px) {
  .score-leaderboard-panel { padding:14px 12px; }
  .score-board-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .score-period-tabs { align-self:stretch; }
  .score-period-tabs button { flex:1; }
  .score-leaderboard-grid { margin-top:10px; }
  .score-rank-section { padding:9px 10px 5px; }
}
.ai-sidebar-panel[hidden] { display:none; }
.ai-floating-button { position:fixed; right:24px; bottom:24px; z-index:24; display:flex; align-items:center; gap:9px; min-height:54px; padding:7px 13px 7px 8px; border:1px solid #b9ded2; border-radius:28px; color:#245b4c; background:#f7fffc; box-shadow:0 8px 24px #153b3026; cursor:pointer; transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease; }
.ai-floating-button:hover { box-shadow:0 10px 28px #153b3035; transform:translateY(-2px); }
.ai-floating-button[hidden] { display:none; }
.ai-floating-character { position:relative; width:40px; height:40px; display:block; border:2px solid #278c73; border-radius:14px 14px 16px 16px; background:#d9f4e9; box-shadow:inset 0 -4px #bce7d7; }
.ai-floating-character:before { content:''; position:absolute; left:50%; top:-8px; width:2px; height:8px; background:#278c73; transform:translateX(-50%); }
.ai-floating-character:after { content:''; position:absolute; left:50%; top:-11px; width:6px; height:6px; border-radius:50%; background:#efad69; transform:translateX(-50%); box-shadow:0 0 0 2px #d9f4e9; }
.ai-floating-character i,.ai-floating-character b { position:absolute; top:14px; width:6px; height:8px; border-radius:50%; background:#236454; }
.ai-floating-character i { left:10px; }.ai-floating-character b { right:10px; }
.ai-floating-character em { position:absolute; left:50%; bottom:8px; width:15px; height:6px; border-bottom:2px solid #278c73; border-radius:0 0 12px 12px; transform:translateX(-50%); }
.ai-floating-label { font-size:13px; font-weight:650; white-space:nowrap; }
.app-shell.ai-docked .ai-floating-button { opacity:0; pointer-events:none; transform:translateY(8px); }
.app-shell.ai-docked { --ai-dock-width:clamp(340px,26vw,460px); }
.ai-sidebar-panel { position:fixed; z-index:25; inset:0 0 0 auto; width:var(--ai-dock-width); height:100vh; display:flex; flex-direction:column; overflow:hidden; border-left:1px solid #d5e0e5; color:#24384a; background:#fff; box-shadow:-8px 0 24px #13243110; }
.ai-sidebar-panel ::-webkit-scrollbar { width:8px; height:8px; }
.ai-sidebar-panel ::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:8px; background:#cbd6dc; background-clip:padding-box; }
.app-shell.ai-docked .main-content { width:calc(100% - 246px - var(--ai-dock-width)); margin-right:var(--ai-dock-width); }
.ai-drawer-heading { min-height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid #edf1f4; background:#fff; }
.ai-drawer-heading strong,.ai-drawer-heading small { display:block; }
.ai-drawer-heading strong { color:#1e3448; font-size:18px; letter-spacing:0; }
.ai-drawer-heading small { margin-top:2px; color:#7b8a96; font-size:12px; }
.ai-chat-messages { min-height:0; flex:1; overflow:auto; display:flex; flex-direction:column; gap:22px; padding:24px 20px 30px; background:#fbfcfd; }
.ai-welcome { margin:auto 0; padding:0 5px 12px; color:#526879; }
.ai-welcome-title { color:#1d4660; font-size:25px; font-weight:650; letter-spacing:-.02em; }
.ai-welcome p { margin:5px 0 22px; color:#758794; font-size:15px; }
.ai-welcome-prompts { display:grid; gap:9px; }
.ai-welcome-prompts button { width:fit-content; max-width:100%; padding:9px 13px; border:1px solid #dbe6eb; border-radius:18px; color:#4e6a79; background:#f4f8fa; text-align:left; font-size:13px; line-height:1.45; }
.ai-welcome-prompts button:hover { border-color:#9ccdbd; color:#236d59; background:#edf9f4; }
.ai-message { max-width:96%; padding:0; border:0; border-radius:0; color:#33475b; background:transparent; }
.ai-message.user { align-self:flex-end; max-width:82%; padding:10px 13px; border:1px solid #cce8dd; border-radius:14px 14px 4px 14px; color:#174d3d; background:#e9f7f1; }
.ai-message-role { min-height:18px; margin-bottom:6px; color:#71818e; font-size:12px; font-weight:650; }
.ai-message.assistant .ai-message-role { color:#3d6b5d; }
.ai-message.assistant .ai-message-content { padding-left:1px; }
.ai-drawer-actions { display:flex; gap:5px; }
.ai-drawer-actions .icon-button { width:36px; height:36px; border:1px solid #dce5e9; color:#486071; background:#fff; }
.ai-drawer-actions .icon-button:hover { border-color:#a8cfc0; color:#08785e; background:#f2faf6; }
.ai-message-content { line-height:1.65; white-space:normal; overflow-wrap:anywhere; }
.ai-message-content p { margin:0 0 9px; }
.ai-message-content p:last-child { margin-bottom:0; }
.ai-message-content h1,.ai-message-content h2,.ai-message-content h3,.ai-message-content h4 { margin:13px 0 7px; color:#20394b; line-height:1.4; }
.ai-message-content h1 { font-size:18px; }.ai-message-content h2 { font-size:17px; }.ai-message-content h3,.ai-message-content h4 { font-size:15px; }
.ai-message-content ul,.ai-message-content ol { display:grid; gap:5px; margin:7px 0 10px; padding-left:23px; }
.ai-message-content blockquote { margin:8px 0; padding:7px 10px; border-left:3px solid #8abcae; color:#526877; background:#f4f8f7; }
.ai-message-content code { padding:1px 4px; border-radius:3px; color:#7d3f37; background:#fff1ec; font: .92em ui-monospace,SFMono-Regular,Consolas,monospace; }
.ai-copy-button { float:right; padding:1px 5px; border-radius:10px; color:#7c929a; background:transparent; font-size:11px; cursor:pointer; }
.ai-copy-button:hover { color:#08785e; text-decoration:underline; }
.ai-table-wrap { max-width:100%; margin:10px 0 12px; overflow-x:auto; border:1px solid #dfe8e8; border-radius:5px; }
.ai-table-wrap table { width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap; }
.ai-table-wrap th,.ai-table-wrap td { padding:7px 9px; border-bottom:1px solid #e8eeee; text-align:left; }
.ai-table-wrap th { color:#334b5a; background:#edf4f3; font-weight:650; }
.ai-table-wrap tr:last-child td { border-bottom:0; }
.ai-thinking .ai-message-content { color:#687a85; }
.ai-chat-form { margin:0 14px 12px; padding:10px 11px 9px; border:1px solid #d8e1e6; border-radius:15px; background:#fff; box-shadow:0 3px 12px #1b3b4d0b; }
.ai-chat-form:focus-within { border-color:#84c5b1; box-shadow:0 0 0 3px #e7f6f1,0 3px 12px #1b3b4d0b; }
.ai-chat-form textarea { width:100%; min-height:60px; max-height:150px; padding:4px 2px; border:0; outline:0; resize:vertical; color:#304655; background:transparent; line-height:1.55; }
.ai-attachment-preview { display:flex; align-items:center; gap:7px; max-width:100%; margin:3px 0 6px; padding:6px 8px; border:1px solid #dbe8e5; border-radius:8px; color:#496574; background:#f4faf7; font-size:12px; }
.ai-attachment-icon { color:#178367; font-size:15px; }
.ai-attachment-name { min-width:0; overflow:hidden; flex:1; text-overflow:ellipsis; white-space:nowrap; }
.ai-attachment-preview small { color:#83929a; white-space:nowrap; }
.ai-attachment-preview button { width:22px; height:22px; border-radius:50%; color:#71838c; background:transparent; cursor:pointer; }
.ai-attachment-preview button:hover { color:#a44940; background:#fff0ed; }
.ai-chat-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:5px; }
.ai-input-tools { min-width:0; display:flex; align-items:center; gap:9px; }
.ai-attach-button { display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border-radius:7px; color:#607783; background:#f5f8f9; font-size:13px; cursor:pointer; }
.ai-attach-button:hover { color:#08785e; background:#edf8f4; }
.ai-attach-button input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.ai-chat-actions .form-hint { max-width:230px; color:#87939b; line-height:1.4; }
.ai-chat-actions .button { min-height:34px; padding:0 13px; border-radius:17px; }
.ai-shortcuts { flex:0 0 auto; max-height:32%; overflow:auto; border-top:1px solid #edf1f4; background:#fff; }
.ai-shortcuts summary { padding:12px 20px; color:#617482; font-size:13px; font-weight:650; cursor:pointer; }
.ai-prompt-list { display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 15px; }
.ai-prompt-list button { padding:7px 10px; border:1px solid #dfe7eb; border-radius:16px; color:#506b7b; background:#f8fafb; text-align:left; font-size:12px; line-height:1.4; }
.ai-prompt-list button:hover { border-color:#83c5b1; background:#effaf5; }
@media (max-width:720px) { .placeholder-view { min-height:0; } }
@media (max-width:1100px) { .app-shell.ai-docked { --ai-dock-width:min(400px,40vw); } .app-shell.ai-docked .main-content { width:calc(100% - 215px); margin-right:0; } }
@media (max-width:720px) { .ai-floating-button { right:15px; bottom:15px; min-height:48px; padding-right:10px; } .ai-floating-character { width:35px; height:35px; border-radius:12px; transform:scale(.9); } .ai-floating-label { font-size:12px; } .app-shell.ai-docked { --ai-dock-width:min(390px,78vw); } .ai-sidebar-panel { height:100dvh; } .app-shell.ai-docked .main-content { width:100%; margin-right:0; } .ai-chat-actions { align-items:flex-end; } .ai-chat-actions .button { min-width:92px; } .ai-chat-actions .form-hint { max-width:calc(100% - 110px); } .ai-attach-button span { display:none; } .ai-shortcuts { max-height:32%; } }

/* Global indigo theme. Semantic orange, red, and blue statuses stay distinct. */
html,body { min-height:100%; }
.content-wrap,#dashboardView { min-height:0; }
body { accent-color:#5966c9; }
:focus-visible { outline-color:#5966c9; }
.auth-screen { background:#eef0f8; }.auth-card { border-color:#dce1ef; box-shadow:0 18px 50px #29345f12; }
.brand-mark,.sidebar .brand-mark { background:linear-gradient(145deg,#6d78df,#5966c9); }
.sidebar { background:linear-gradient(165deg,#202c47 0%,#19243b 55%,#162038 100%); border-right-color:#344263; }
.sidebar .nav-item.active { background:#5966c9; box-shadow:inset 3px 0 #d0d4ff; }.sidebar .nav-item:hover { background:#2a3655; }
.sidebar .class-switcher { background:linear-gradient(120deg,#314364,#263653); border-color:#536789; }
.button-primary { background:#5966c9; box-shadow:0 4px 10px #5966c922; }.button-primary:hover { background:#4854b3; }
.kicker,.text-button,.row-link,.review-link,.slot-time-edit { color:#5966c9; }.button-ghost:hover { border-color:#b8bde8; background:#f7f7ff; }
.field input:focus,.field select:focus,.search-field:focus-within,.select-field select:focus,.modal-form .field input:focus,.modal-form .field select:focus,.modal-form .field textarea:focus { border-color:#9da5e5; box-shadow:0 0 0 3px #eef0ff; }
.accent-green { border-top-color:#6d78d9; }.accent-green .metric-icon { color:#5966c9; background:#eef0ff; }.progress { height:6px; border:1px solid #e8b2ae; background:#f6d4d1; }.progress i,.attendance-bar i { background:#6874d4; }
.status-pill.green,.saved-label.saved,.user-status { color:#4b58b0; background:#eef0ff; }.full-button { border-color:#c5c9ef; color:#5966c9; background:#f7f7ff; }.full-button:hover { background:#eef0ff; }
.checkmark,.todo-item input:checked + .checkmark { border-color:#5966c9; }.todo-item input:checked + .checkmark { background:#5966c9; }
.activity-icon.green { color:#5966c9; background:#eef0ff; }.score-up,.trend.up,.score-total,.score-cell,.record-score { color:#5966c9 !important; }
.schedule-item.current .course-dot { background:#6874d4; box-shadow:0 0 0 4px #eef0ff; }.schedule-item em { color:#5966c9; background:#eef0ff; }
.empty-icon { color:#5966c9; background:#eef0ff; }.inline-editor { border-left-color:#5966c9; }.profile-raw summary::before { color:#5966c9; }
.week-head .today-head { color:#4b58b0; background:#eef0ff; }.week-course { border-left-color:#6874d4; border-color:#d8dcf2; }.week-course-actions button { color:#5966c9; }
.permission-option input,.daily-attention-option input,.duty-row input { accent-color:#5966c9; }.permission-option:hover { background:#f1f2ff; }
.behavior-metric.positive { border-left-color:#6874d4; }.positive-dot { background:#6874d4; }.rank-mark { color:#5966c9; background:#eef0ff; }.score-rank-value.is-positive { color:#5966c9; }.points-summary-item { border-left-color:#6874d4; }.rule-points.positive { color:#5966c9; }
.ai-floating-button { border-color:#c4c9f1; color:#454fa4; background:#f7f7ff; box-shadow:0 8px 24px #29345f26; }.ai-floating-button:hover { box-shadow:0 10px 28px #29345f35; }
.ai-floating-character { border-color:#6571d1; background:#e8e9ff; box-shadow:inset 0 -4px #d1d4fb; }.ai-floating-character:before { background:#6571d1; }.ai-floating-character:after { box-shadow:0 0 0 2px #e8e9ff; }.ai-floating-character i,.ai-floating-character b { background:#454fa4; }.ai-floating-character em { border-bottom-color:#6571d1; }
.sidebar .nav-item { --nav-tint:#e8eaff; --nav-accent:#aab2ff; }
.sidebar .nav-item[data-view="attendance"] { --nav-tint:#e6efff; --nav-accent:#9fc1ff; }
.sidebar .nav-item[data-view="students"] { --nav-tint:#eeebff; --nav-accent:#b9aaf5; }
.sidebar .nav-item[data-view="behavior"] { --nav-tint:#fff1dc; --nav-accent:#efbd76; }
.sidebar .nav-item[data-view="points"] { --nav-tint:#e8eaff; --nav-accent:#aab2ff; }
.sidebar .nav-item[data-view="notice"] { --nav-tint:#ffe8ef; --nav-accent:#efa8bf; }
.sidebar .nav-item[data-view="schedule"] { --nav-tint:#e3f2ff; --nav-accent:#96c6ef; }
.sidebar .nav-item#settingsButton { --nav-tint:#e9edf5; --nav-accent:#bdc9df; }
.sidebar .class-switcher:hover { border-color:#9ca8df; }.sidebar .teacher-avatar { background:#e3e6ff; color:#4d58a8; }.sidebar :focus-visible { outline-color:#aeb7ff; }
.tag.green-tag,.present,.attendance-status-present { color:#4f5fae; background:#edf0ff; }
.notice-status,.fee-direction.income,.fee-amount.income { color:#4f5fae; background:#edf0ff; }
.attendance-status-present { color:#4f5fae; }.dashboard-sync-status { color:#5966c9; }.dashboard-sync-status::before { background:#6874d4; }

/* Apple-inspired translucent glass surfaces. */
:root {
  --glass-bg:rgba(255,255,255,.66);
  --glass-strong:rgba(255,255,255,.8);
  --glass-line:rgba(255,255,255,.76);
  --glass-shadow:0 18px 45px rgba(32,48,88,.1),0 2px 8px rgba(32,48,88,.06);
}
body { background:linear-gradient(135deg,#eef2fb 0%,#e8edf7 52%,#f3f5fb 100%); }
.auth-screen { background:linear-gradient(135deg,#e9eef9,#f3f5fb); }
.auth-card,.panel,.metric-card,.student-card,.workspace-toolbar,.quick-stat,.table-panel,.empty-panel,
.behavior-toolbar,.behavior-metric,.score-rank-section,.points-summary-item,.points-bulk-adjust,
.fee-receipt-preview,.message-panel,.modal,.search-results {
  border-color:var(--glass-line);
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  backdrop-filter:blur(22px) saturate(145%);
}
.auth-card { background:var(--glass-strong); }
.topbar { border-bottom-color:rgba(255,255,255,.7); background:rgba(255,255,255,.58); -webkit-backdrop-filter:blur(22px) saturate(145%); backdrop-filter:blur(22px) saturate(145%); }
.sidebar { border-right-color:rgba(255,255,255,.18); background:rgba(24,35,65,.82); -webkit-backdrop-filter:blur(24px) saturate(135%); backdrop-filter:blur(24px) saturate(135%); }
.sidebar .class-switcher,.sidebar .teacher-card { border-color:rgba(214,224,255,.24); background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.sidebar .nav-item.active { background:rgba(104,116,224,.82); box-shadow:inset 3px 0 #e0e3ff,0 8px 20px rgba(30,42,104,.2); }
.sidebar .nav-item:hover { background:rgba(255,255,255,.11); }
.button-ghost,.icon-button,.field input,.field select,.select-field select,.small-select,.search-field,
.inline-input,.inline-select,.schedule-edit-toggle { border-color:rgba(127,145,180,.35); background:rgba(255,255,255,.58); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.button-ghost:hover,.icon-button:hover { background:rgba(255,255,255,.82); }
.metric-card,.quick-stat { background:rgba(255,255,255,.62); }
.data-table th { background:rgba(242,246,253,.72); }
.data-table td { background:rgba(255,255,255,.25); }
.data-table tbody tr:hover { background:rgba(255,255,255,.56); }
.attendance-roster-row,.ranking-row,.score-rank-row { border-color:rgba(127,145,180,.22); background:rgba(255,255,255,.42); }
.attendance-roster-row:hover,.ranking-row:hover { background:rgba(255,255,255,.72); }
.modal-backdrop { background:rgba(20,31,55,.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.modal-heading { border-bottom-color:rgba(127,145,180,.18); background:rgba(255,255,255,.34); }
.ai-sidebar-panel { border-left-color:rgba(255,255,255,.78); background:rgba(249,251,255,.78); box-shadow:-18px 0 45px rgba(32,48,88,.12); -webkit-backdrop-filter:blur(26px) saturate(145%); backdrop-filter:blur(26px) saturate(145%); }
.ai-drawer-heading,.ai-chat-form,.ai-shortcuts { border-color:rgba(127,145,180,.2); background:rgba(255,255,255,.58); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.ai-chat-messages { background:rgba(239,244,252,.42); }
.ai-message.user { border-color:rgba(111,127,221,.3); background:rgba(225,230,255,.72); color:#34417e; }
.ai-attachment-preview,.ai-attach-button,.ai-welcome-prompts button,.ai-prompt-list button { border-color:rgba(127,145,180,.25); background:rgba(255,255,255,.55); }
.ai-floating-button { border-color:rgba(145,156,231,.52); background:rgba(247,248,255,.7); box-shadow:0 16px 34px rgba(43,55,130,.2); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
/* Keep icon glyphs crisp against translucent surfaces. */
.sidebar .nav-icon { border:1px solid rgba(255,255,255,.72); background:rgba(255,255,255,.92); box-shadow:inset 0 1px rgba(255,255,255,.95),0 2px 7px rgba(10,22,55,.18); text-shadow:0 1px 1px rgba(20,35,75,.2); }
.sidebar .nav-item[data-view="points"] .nav-icon,.sidebar .nav-item[data-view="fees"] .nav-icon { color:#27377c; }
.sidebar .nav-item#aiSidebarButton .nav-icon { color:#3f4da5; background:#f0f1ff; border-color:#d5d8ff; font-weight:800; text-shadow:none; }
.sidebar .nav-item.active .nav-icon { border-color:#fff; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18),0 3px 9px rgba(10,22,55,.22); }
.sidebar .nav-item[data-view="behavior"] .nav-icon { color:#754d10; }
.sidebar .nav-item[data-view="attendance"] .nav-icon { color:#315789; }
.sidebar .nav-item[data-view="students"] .nav-icon { color:#51418b; }
.sidebar .nav-item[data-view="notice"] .nav-icon { color:#934363; }
.sidebar .nav-item[data-view="schedule"] .nav-icon { color:#276a82; }
.icon-button { color:#304261; text-shadow:0 1px rgba(255,255,255,.8); }
.panel-title-emoji,.period-emoji { text-shadow:0 1px 2px rgba(28,42,76,.2); }
@media (prefers-reduced-transparency: reduce) {
  .auth-card,.panel,.metric-card,.student-card,.workspace-toolbar,.quick-stat,.table-panel,.empty-panel,.modal,.ai-sidebar-panel { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; }
}

#dashboardView .welcome-row { align-items:center; }
#dashboardView .welcome-row h1 { color:#1d2d40; font-size:27px; font-weight:720; }
#dashboardView .welcome-row h1 span { color:#687891; font-size:17px; font-weight:550; }
#dashboardView .welcome-row h1 #welcomeGreeting { color:#1d2d40; font-size:27px; }
#dashboardView .metric-grid { gap:14px; margin-top:22px; }
#dashboardView .metric-card {
  --metric-accent:#5966c9;
  --metric-soft:rgba(229,233,255,.66);
  min-height:196px;
  padding:16px 18px 13px;
  border:1px solid rgba(255,255,255,.86);
  border-top:3px solid var(--metric-accent);
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(246,248,255,.56));
  box-shadow:0 12px 28px rgba(39,54,105,.075),inset 0 1px rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
}
#dashboardView .metric-card.accent-green { --metric-accent:#5966c9; --metric-soft:rgba(229,233,255,.72); }
#dashboardView .metric-card.accent-orange { --metric-accent:#c47b32; --metric-soft:rgba(255,237,211,.78); }
#dashboardView .metric-card.accent-blue { --metric-accent:#477cb9; --metric-soft:rgba(222,238,255,.82); }
#dashboardView .metric-card.accent-purple { --metric-accent:#8061b4; --metric-soft:rgba(239,229,255,.8); }
#dashboardView .metric-top { min-height:36px; color:#45566f; font-size:14px; font-weight:600; }
#dashboardView .metric-icon { width:36px; height:36px; border:1px solid color-mix(in srgb,var(--metric-accent) 16%, transparent); border-radius:11px; color:var(--metric-accent); background:var(--metric-soft); }
#dashboardView .metric-icon img { width:25px; height:25px; display:block; object-fit:contain; }
#dashboardView .metric-value { margin-top:6px; color:#202e40; font-size:31px; font-weight:750; line-height:1.2; }
#dashboardView .metric-value span { color:#66758b; font-size:13px; font-weight:600; }
#dashboardView .metric-chart { min-width:0; margin-top:7px; }
#dashboardView #dashboardPendingTrend,
#dashboardView #dashboardScoreTrend,
#dashboardView #dashboardNoticeTrend { margin-top:22px; }
#dashboardView .metric-chart-heading { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-height:14px; color:#78869a; font-size:10px; line-height:1.2; }
#dashboardView .metric-chart-heading strong { overflow:hidden; color:var(--metric-accent); font-size:11px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
#dashboardView .metric-chart-plot { position:relative; height:27px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:end; gap:7px; margin-top:3px; border-bottom:1px solid rgba(97,115,151,.18); }
#dashboardView .metric-chart-column { min-width:0; height:100%; position:relative; display:block; }
#dashboardView .metric-chart-column i { position:absolute; right:1px; bottom:0; left:1px; height:var(--chart-height); border-radius:3px 3px 1px 1px; background:linear-gradient(180deg,color-mix(in srgb,var(--metric-accent) 58%,white),var(--metric-accent)); opacity:.42; transition:height .25s ease,opacity .25s ease; }
#dashboardView .metric-chart-column.has-value.latest i { opacity:1; box-shadow:0 1px 4px color-mix(in srgb,var(--metric-accent) 25%,transparent); }
#dashboardView .metric-chart-column.no-value i { display:none; }
#dashboardView .metric-chart-axis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-top:2px; color:#8793a5; font-size:9px; line-height:1.2; text-align:center; }
#dashboardView .metric-chart-axis span:last-child { color:#5263bd; font-weight:700; }
#dashboardView .metric-chart-diverging .metric-chart-plot { align-items:stretch; border-bottom:0; background:linear-gradient(to bottom,transparent calc(50% - .5px),rgba(97,115,151,.22) calc(50% - .5px),rgba(97,115,151,.22) calc(50% + .5px),transparent calc(50% + .5px)); }
#dashboardView .metric-chart-diverging .metric-chart-column i { top:50%; bottom:auto; height:var(--chart-height); border-radius:0 0 3px 3px; background:linear-gradient(180deg,var(--metric-accent),color-mix(in srgb,var(--metric-accent) 58%,white)); }
#dashboardView .metric-chart-diverging .metric-chart-column.negative i { top:auto; bottom:50%; border-radius:3px 3px 0 0; background:linear-gradient(0deg,#de7778,#f0a2a0); }
#dashboardView .metric-chart-diverging .metric-chart-column.neutral i { top:calc(50% - 1px); bottom:auto; height:3px; border-radius:2px; background:#9aa7bc; }
#dashboardView .progress { height:6px; margin-top:9px; border:0; background:#f3c9c5; box-shadow:inset 0 1px 2px rgba(122,57,57,.12); }
#dashboardView .progress i { background:linear-gradient(90deg,#6774dd,#4f60c6); box-shadow:0 1px 3px rgba(61,74,172,.2); }
@media (max-width:720px) {
  #dashboardView .welcome-row h1,#dashboardView .welcome-row h1 #welcomeGreeting { font-size:23px; }
  #dashboardView .metric-grid { margin-top:17px; gap:10px; }
  #dashboardView .metric-card { min-height:184px; padding:12px; }
  #dashboardView #dashboardPendingTrend,
  #dashboardView #dashboardScoreTrend,
  #dashboardView #dashboardNoticeTrend { margin-top:17px; }
  #dashboardView .metric-icon { width:31px; height:31px; border-radius:9px; }
  #dashboardView .metric-icon img { width:22px; height:22px; }
  #dashboardView .metric-value { font-size:27px; }
  #dashboardView .metric-chart-plot { gap:4px; }
  #dashboardView .metric-chart-axis { gap:4px; font-size:8px; }
}
/* Todo workflow */
.todo-filters { display:flex; gap:4px; margin-top:12px; padding:3px; border:1px solid #e6ecea; border-radius:6px; background:#f8faf9; }
.todo-filters button,.todo-completed-toggle { border:0; padding:5px 8px; color:#65736f; background:transparent; font-size:12px; cursor:pointer; }
.todo-filters button.active { color:#236f5b; background:#e4f3ed; border-radius:4px; font-weight:600; }
.todo-completed-toggle { display:block; width:100%; margin-top:8px; border-top:1px solid #eff2f2; text-align:left; }
.todo-item { cursor:default; }
.todo-check { display:flex; flex:0 0 18px; cursor:pointer; }
.todo-content { flex:1; min-width:0; }
.todo-copy { display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer; }
.todo-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.todo-due.today { color:#c87b20; }
.todo-due.overdue { color:#bd514e; font-weight:600; }
.todo-meta { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; min-width:0; margin-top:3px; overflow:hidden; color:#65736f; font-size:12px; white-space:nowrap; }
.todo-meta > * { flex:0 0 auto; }
.todo-meta .todo-due { overflow:hidden; max-width:142px; text-overflow:ellipsis; }
.todo-meta .todo-student-link,.todo-meta .todo-source-link { overflow:hidden; max-width:120px; text-overflow:ellipsis; white-space:nowrap; }
.todo-status { padding:2px 5px; border-radius:3px; background:#f1f4f3; }
.todo-status.in_progress { color:#426ba0; background:#edf3fb; }
.todo-status.completed { color:#6d7b76; background:#eef2f1; }
.todo-student-link,.todo-source-link { padding:0; border:0; color:var(--green); background:none; font-size:12px; cursor:pointer; }
.todo-priority-dot { width:8px; height:8px; flex:0 0 auto; margin-top:5px; border-radius:50%; background:#9ba8a4; }
.todo-priority-dot.high { background:#d86b51; }.todo-priority-dot.medium { background:#dfa33e; }.todo-priority-dot.low { background:#72a6a0; }
.todo-item.due-overdue { border-left:3px solid #d65e58; padding-left:8px; }.todo-item.due-today { border-left:3px solid #e5a044; padding-left:8px; }
.todo-detail-related { margin:0; color:#526174; font-size:13px; }.todo-detail-actions { display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid #eef2f1; }
/* Keep the todo panel visible when the neighboring attendance panel is short, such as on weekends. */
@media (min-width:1101px) {
  #dashboardView .dashboard-grid { align-items:stretch; grid-auto-rows:minmax(470px, auto); }
  #dashboardView .dashboard-grid > .attendance-panel,
  #dashboardView .dashboard-grid > .todo-panel { min-height:470px; height:100%; }
  #dashboardView .dashboard-grid > .todo-panel { display:flex; flex-direction:column; overflow:hidden; }
  #dashboardView .todo-panel > .panel-heading,
  #dashboardView .todo-panel > .todo-filters,
  #dashboardView .todo-panel > .todo-completed-toggle,
  #dashboardView .todo-panel > .full-button { flex:0 0 auto; }
  #dashboardView .todo-panel > .todo-list { min-height:0; height:0; max-height:none; flex:1 1 auto; overflow-y:auto; }
}