.dct-portal-shell {
	--portal-ink: #172126;
	--portal-muted: #67747a;
	--portal-line: #dce5e2;
	--portal-green: #176b5b;
	--portal-green-dark: #0e4f43;
	max-width: 1040px;
	margin: 42px auto;
	color: var(--portal-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}
.dct-portal-shell [hidden] { display: none !important; }
.dct-portal-header { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 30px 34px; border-radius: 20px; background: linear-gradient(135deg, #0e4f43, #1d7f6b); color: #fff; }
.dct-portal-header h1 { margin: 2px 0 7px; color: #fff; font-size: clamp(26px, 4vw, 38px); }
.dct-portal-header p { margin: 0; opacity: .92; }
.dct-portal-header .dct-portal-public-name { margin-top: 5px; font-size: 14px; }
.dct-portal-eyebrow { font-size: 12px; font-weight: 750; letter-spacing: .14em; }
.dct-portal-logout { padding: 9px 16px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; color: #fff; text-decoration: none; }
.dct-fixed-school-section { margin-top: 26px; }
.dct-portal-section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin: 0 0 14px; }
.dct-portal-section-heading h2 { margin: 3px 0 0; color: var(--portal-ink); font-size: 24px; }
.dct-portal-section-heading .dct-portal-eyebrow { margin: 0; color: var(--portal-green); }
.dct-portal-section-heading > span { color: var(--portal-muted); font-size: 13px; }
.dct-session-section-heading { margin-top: 30px; }
.dct-fixed-school-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dct-fixed-school-card { padding: 22px; border: 1px solid var(--portal-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(23,33,38,.055); }
.dct-fixed-school-card-top { display: flex; justify-content: space-between; gap: 12px; color: var(--portal-green); font-size: 12px; }
.dct-fixed-school-card h3 { margin: 8px 0 3px; color: var(--portal-ink); font-size: 22px; }
.dct-fixed-school-formal-name { margin: 0 0 14px; color: var(--portal-muted); font-size: 12px; line-height: 1.5; }
.dct-fixed-school-time, .dct-fixed-school-course { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; }
.dct-fixed-school-time strong { color: var(--portal-green-dark); font-size: 18px; }
.dct-fixed-school-time span, .dct-fixed-school-course span { color: var(--portal-muted); font-size: 13px; }
.dct-fixed-school-course strong { color: var(--portal-ink); }
.dct-fixed-assignment-role { display: inline-flex; width: fit-content; margin: 10px 0 0; padding: 5px 10px; border-radius: 999px; background: #eaf2ff; color: #173f83; font-weight: 800; font-size: 13px; }
.dct-fixed-school-meta, .dct-fixed-school-period { margin: 10px 0 0; color: var(--portal-muted); font-size: 13px; line-height: 1.55; }
.dct-fixed-school-period { padding-top: 10px; border-top: 1px solid var(--portal-line); }
.dct-teacher-pay { display: grid; gap: 3px; margin-top: 16px; padding: 12px 14px; border: 1px solid #c7dfd5; border-radius: 10px; background: #eef8f3; color: #174e39; }
.dct-teacher-pay > span { font-size: 12px; font-weight: 700; }
.dct-teacher-pay > strong { font-size: 17px; }
.dct-teacher-pay > small { color: #4b6d61; line-height: 1.45; }
.dct-teacher-pay.is-unset { border-color: #ead9ae; background: #fff8df; color: #715417; }
.dct-portal-tabs { display: flex; gap: 6px; margin: 20px 0; padding: 5px; border: 1px solid var(--portal-line); border-radius: 12px; background: #f5f8f7; }
.dct-portal-tabs a { flex: 1; padding: 11px; border-radius: 8px; color: var(--portal-muted); text-align: center; text-decoration: none; font-weight: 700; }
.dct-portal-tabs a.is-active { background: #fff; color: var(--portal-green); box-shadow: 0 2px 9px rgba(0,0,0,.08); }
.dct-session-card-list { display: grid; gap: 16px; }
.dct-session-card { overflow: hidden; border: 1px solid var(--portal-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(23,33,38,.055); }
.dct-session-card.is-cancelled { opacity: .72; }
.dct-session-card-summary { display: grid; grid-template-columns: 160px 1fr 150px; gap: 22px; align-items: center; padding: 24px; }
.dct-session-date { display: flex; flex-direction: column; gap: 4px; }
.dct-session-date strong { font-size: 18px; }
.dct-session-date span { color: var(--portal-green); font-size: 17px; font-weight: 700; }
.dct-session-main h2 { margin: 5px 0; color: var(--portal-ink); font-size: 21px; }
.dct-session-main p { margin: 4px 0; color: var(--portal-muted); }
.dct-session-source { display: inline-block; color: var(--portal-green); font-size: 12px; font-weight: 750; }
.dct-session-location { font-size: 14px; }
.dct-session-state { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; text-align: right; }
.dct-session-state small { color: var(--portal-muted); }
.dct-portal-status { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.dct-portal-status-scheduled { background: #e8f2ff; color: #135e96; }
.dct-portal-status-completed { background: #e7f7ed; color: #146c2e; }
.dct-portal-status-cancelled { background: #fbeaea; color: #9a2727; }
.dct-report-panel { border-top: 1px solid var(--portal-line); background: #f7faf9; }
.dct-report-panel summary { padding: 16px 24px; color: var(--portal-green); font-weight: 750; cursor: pointer; }
.dct-report-panel form { padding: 2px 24px 24px; }
.dct-report-grid { display: grid; grid-template-columns: 180px 1fr; gap: 14px; }
.dct-report-grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 650; }
.dct-report-grid input, .dct-report-grid textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid #b9c7c3; border-radius: 9px; background: #fff; color: var(--portal-ink); font: inherit; font-weight: 400; }
.dct-report-wide { grid-column: 2; }
.dct-portal-button { display: inline-block; margin-top: 16px; padding: 12px 21px; border: 0; border-radius: 999px; background: var(--portal-green); color: #fff; font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
.dct-portal-button:hover { background: var(--portal-green-dark); color: #fff; }
.dct-session-info, .dct-portal-notice, .dct-portal-empty, .dct-portal-message { margin: 18px 0; padding: 20px 24px; border-radius: 12px; background: #eef7f4; color: #23564c; }
.dct-session-info { margin: 0; border-top: 1px solid var(--portal-line); border-radius: 0; }
.dct-portal-message { padding: 34px; text-align: center; }
.dct-portal-message h2 { margin-top: 0; }
.dct-portal-error { background: #fff1f1; color: #842828; }
.dct-portal-line-warning { background: #fff7dc; color: #6f4d00; border: 1px solid #efcc66; }
.dct-portal-line-warning p { margin: 8px 0; }
.dct-portal-line-warning a { color: #174a91; font-weight: 800; }
.dct-report-overview { display: flex; justify-content: space-between; gap: 22px; align-items: center; margin-top: 20px; padding: 18px 22px; border: 1px solid #c9e2d8; border-radius: 14px; background: #f0f8f5; }
.dct-report-overview.has-pending { border-color: #efd28b; background: #fff8df; }
.dct-report-overview > div { display: grid; gap: 3px; }
.dct-report-overview .dct-portal-eyebrow { margin: 0; color: var(--portal-green); }
.dct-report-overview strong { color: var(--portal-ink); font-size: 21px; }
.dct-report-overview span { color: var(--portal-muted); font-size: 13px; line-height: 1.55; }
.dct-report-overview-action { flex: 0 0 auto; padding: 10px 17px; border-radius: 999px; background: var(--portal-green); color: #fff; text-decoration: none; font-weight: 750; }
.dct-report-overview-action:hover { background: var(--portal-green-dark); color: #fff; }
.dct-report-status { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.dct-report-status-pending { background: #fff0bf; color: #71520c; }
.dct-report-status-overdue { background: #fde7e7; color: #a02323; }
.dct-report-status-reported { background: #e7f7ed; color: #146c2e; }
.dct-report-status-not-open, .dct-report-status-not-required { background: #eef1f3; color: #637078; }
.dct-session-card { scroll-margin-top: 24px; transition: border-color .18s ease, box-shadow .18s ease; }
.dct-session-card:target, .dct-session-card.is-deep-linked { border-color: #d49b16; box-shadow: 0 0 0 3px rgba(230,174,43,.24), 0 10px 28px rgba(23,33,38,.08); }
.dct-report-grid.is-single-column { grid-template-columns: 1fr; }
.dct-report-grid.is-single-column .dct-report-wide { grid-column: 1; }
.dct-report-grid label small { color: var(--portal-muted); font-weight: 400; }

.dct-period-tabs { position: sticky; z-index: 5; top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 18px 0; padding: 5px; border: 1px solid var(--portal-line); border-radius: 14px; background: rgba(245,248,247,.96); box-shadow: 0 6px 20px rgba(23,33,38,.06); backdrop-filter: blur(10px); }
.dct-period-tabs a { min-width: 0; padding: 12px 8px; border-radius: 9px; color: var(--portal-muted); text-align: center; text-decoration: none; font-weight: 800; }
.dct-period-tabs a.is-active { background: #fff; color: var(--portal-green); box-shadow: 0 2px 9px rgba(0,0,0,.09); }
.dct-pending-tab span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #b3261e; color: #fff; font-size: 12px; }
.dct-pending-tab.is-active span { background: var(--portal-green); }
.dct-month-panel { margin: 18px 0; padding: 22px; border: 1px solid var(--portal-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(23,33,38,.05); }
.dct-month-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.dct-month-heading .dct-portal-eyebrow { margin: 0; color: var(--portal-green); }
.dct-month-heading h2 { margin: 4px 0 0; color: var(--portal-ink); font-size: 27px; }
.dct-current-month, .dct-reset-date { color: var(--portal-green); font-size: 13px; font-weight: 800; text-decoration: none; }
.dct-current-month:hover, .dct-reset-date:hover { color: var(--portal-green-dark); text-decoration: underline; }
.dct-month-switcher { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(180px, auto) minmax(100px, 1fr); gap: 12px; align-items: center; margin-top: 14px; padding: 14px 0; border-top: 1px solid var(--portal-line); border-bottom: 1px solid var(--portal-line); }
.dct-month-switcher h2 { margin: 0; color: var(--portal-ink); text-align: center; font-size: 27px; }
.dct-month-switcher a { display: flex; align-items: center; min-height: 42px; color: var(--portal-green); text-decoration: none; font-size: 14px; font-weight: 800; }
.dct-month-switcher a:last-child { justify-content: flex-end; }
.dct-month-switcher a:hover { color: var(--portal-green-dark); }
.dct-month-arrows { display: flex; gap: 8px; }
.dct-month-arrows a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #cbd9d5; border-radius: 50%; color: var(--portal-green); text-decoration: none; font-size: 28px; line-height: 1; }
.dct-month-arrows a:hover { border-color: var(--portal-green); background: #eef8f5; }
.dct-month-picker { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--portal-line); }
.dct-month-picker label { color: var(--portal-muted); font-size: 13px; font-weight: 750; }
.dct-month-picker input { min-height: 44px; padding: 8px 10px; border: 1px solid #becdc8; border-radius: 9px; background: #fff; color: var(--portal-ink); font: inherit; }
.dct-month-picker button { min-height: 44px; padding: 8px 15px; border: 0; border-radius: 9px; background: var(--portal-green); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.dct-month-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.dct-month-metrics > div { display: grid; gap: 3px; min-width: 0; padding: 14px; border-radius: 12px; background: #f3f7f6; }
.dct-month-metrics span { color: var(--portal-muted); font-size: 12px; font-weight: 700; }
.dct-month-metrics strong { color: var(--portal-ink); font-size: 19px; }
.dct-month-metrics small { color: var(--portal-muted); font-size: 11px; line-height: 1.45; }
.dct-month-metrics .has-alert { background: #fff4d6; }
.dct-month-metrics .has-alert strong { color: #875b00; }
.dct-classroom-pay-progress { margin-top: 12px; padding: 15px 16px; border: 1px solid #c9dfd8; border-radius: 13px; background: #eff8f5; }
.dct-classroom-pay-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.dct-classroom-pay-progress-heading > div { display: grid; gap: 3px; }
.dct-classroom-pay-progress-heading span { color: var(--portal-muted); font-size: 12px; font-weight: 750; }
.dct-classroom-pay-progress-heading strong { color: var(--portal-green-dark); font-size: 18px; }
.dct-classroom-pay-progress-heading p { margin: 0; color: #3f625a; font-size: 13px; }
.dct-classroom-pay-progress-heading p.has-alert { color: #8a5b00; }
.dct-classroom-progress-track { overflow: hidden; height: 9px; margin-top: 15px; border-radius: 999px; background: #d8e7e2; }
.dct-classroom-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1d7f6b, #d49b16); }
.dct-classroom-progress-milestones { position: relative; height: 28px; margin-top: 6px; color: #5b6e68; font-size: 10px; line-height: 1.25; }
.dct-classroom-progress-milestones span { position: absolute; top: 0; text-align: center; transform: translateX(-50%); }
.dct-classroom-progress-milestones span.is-last { text-align: right; transform: translateX(-100%); }
.dct-classroom-pay-progress > small { display: block; margin-top: 10px; color: var(--portal-muted); line-height: 1.45; }
.dct-classroom-pay-progress.is-part-time > p { margin: 12px 0 0; color: #35584f; font-size: 13px; line-height: 1.6; }
.dct-date-picker { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: -2px 0 18px; }
.dct-date-picker label { color: var(--portal-muted); font-size: 13px; font-weight: 750; }
.dct-date-picker input { box-sizing: border-box; min-height: 44px; padding: 8px 11px; border: 1px solid #bdcdc8; border-radius: 10px; background: #fff; color: var(--portal-ink); font: inherit; cursor: pointer; }
.dct-date-picker input:focus { outline: 3px solid rgba(23,107,91,.16); border-color: var(--portal-green); }
.dct-date-picker button { min-height: 42px; padding: 8px 14px; border: 0; border-radius: 9px; background: var(--portal-green); color: #fff; font: inherit; font-weight: 800; }
.dct-completed-heading { margin-top: 27px; }
.dct-pending-explanation { margin: 14px 0 0; color: var(--portal-muted); line-height: 1.65; }
.dct-session-tools { margin: 18px 0 14px; }
.dct-session-filter-grid { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(240px, 1.3fr); gap: 10px; }
.dct-session-tools label { display: grid; gap: 6px; min-width: 0; margin: 0; color: var(--portal-muted); font-size: 12px; font-weight: 750; }
.dct-session-tools input, .dct-session-tools select { box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #bdcdc8; border-radius: 12px; background: #fff; color: var(--portal-ink); font: inherit; }
.dct-session-tools input:focus, .dct-session-tools select:focus { outline: 3px solid rgba(23,107,91,.16); border-color: var(--portal-green); }
.dct-session-groups { display: grid; gap: 22px; }
.dct-session-day { display: grid; gap: 10px; }
.dct-session-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px; }
.dct-session-day-heading h3 { margin: 0; color: var(--portal-ink); font-size: 19px; }
.dct-session-day-heading span { color: var(--portal-muted); font-size: 12px; font-weight: 750; }
.dct-session-school { overflow: hidden; border: 1px solid var(--portal-line); border-radius: 15px; background: #fff; box-shadow: 0 7px 22px rgba(23,33,38,.05); }
.dct-session-school-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; background: #eaf5f1; color: var(--portal-green-dark); }
.dct-session-school-heading h4 { min-width: 0; margin: 0; color: inherit; font-size: 17px; overflow-wrap: anywhere; }
.dct-session-school-heading span { padding: 3px 8px; border-radius: 999px; background: #fff; color: var(--portal-muted); font-size: 11px; font-weight: 750; }
.dct-session-rows { display: grid; }
.dct-session-row + .dct-session-row { border-top: 1px solid var(--portal-line); }
.dct-session-row.is-cancelled { opacity: .68; }
.dct-session-item > summary { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 70px; padding: 10px 35px 10px 15px; list-style: none; cursor: pointer; }
.dct-session-item > summary::-webkit-details-marker { display: none; }
.dct-session-item > summary::after { content: "›"; position: absolute; right: 13px; top: 50%; color: var(--portal-muted); font-size: 22px; transform: translateY(-50%) rotate(90deg); transition: transform .16s ease; }
.dct-session-item[open] > summary::after { transform: translateY(-50%) rotate(-90deg); }
.dct-session-item > summary:hover { background: #f8fbfa; }
.dct-session-item > summary:focus-visible, .dct-fixed-school-section > summary:focus-visible, .dct-archived-sessions > summary:focus-visible { outline: 3px solid rgba(23,107,91,.22); outline-offset: -3px; }
.dct-session-item[open] > summary { background: #f8fbfa; }
.dct-session-row-time { display: grid; gap: 1px; color: var(--portal-green-dark); font-size: 17px; font-weight: 850; }
.dct-session-row-time small { color: var(--portal-muted); font-size: 11px; font-weight: 650; }
.dct-session-row-main { display: grid; gap: 3px; min-width: 0; }
.dct-session-row-main strong { overflow: hidden; color: var(--portal-ink); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.dct-session-row-main small { overflow: hidden; color: var(--portal-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dct-session-row-action { display: grid; justify-items: end; gap: 4px; }
.dct-session-row-action > small { color: var(--portal-green); font-size: 11px; font-weight: 800; }
.dct-session-report-pending .dct-session-item > summary, .dct-session-report-overdue .dct-session-item > summary { background: #fffbef; }
.dct-session-report-overdue .dct-session-item > summary { background: #fff6f6; }
.dct-session-detail { padding: 14px 16px 18px; border-top: 1px solid var(--portal-line); background: #f7faf9; }
.dct-session-detail-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.dct-session-detail-meta span { padding: 5px 9px; border-radius: 999px; background: #e9f0ee; color: #49625c; font-size: 11px; font-weight: 700; }
.dct-session-detail-meta span.has-alert { background: #fff0bf; color: #795200; }
.dct-session-pay-formula { margin: 0 0 12px; padding: 10px 12px; border-radius: 9px; background: #eaf5f1; color: var(--portal-green-dark); font-weight: 800; }
.dct-session-reporter { margin: 0 0 12px; color: var(--portal-muted); font-size: 12px; }
.dct-report-form { display: grid; gap: 2px; }
.dct-session-note { margin: 0; color: var(--portal-muted); line-height: 1.65; }
.dct-session-row { scroll-margin-top: 90px; transition: box-shadow .18s ease; }
.dct-session-row:target, .dct-session-row.is-deep-linked { box-shadow: inset 4px 0 0 #d49b16, 0 0 0 2px rgba(230,174,43,.22); }
.dct-search-empty { margin-top: 14px; padding: 22px; border-radius: 12px; background: #f3f6f5; color: var(--portal-muted); text-align: center; }
.dct-current-empty { margin-bottom: 14px; }
.dct-archived-sessions { overflow: hidden; margin-top: 20px; border: 1px solid var(--portal-line); border-radius: 15px; background: #fff; }
.dct-archived-sessions > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 11px 17px; list-style: none; cursor: pointer; }
.dct-archived-sessions > summary::-webkit-details-marker { display: none; }
.dct-archived-sessions > summary span { display: grid; gap: 2px; }
.dct-archived-sessions > summary strong { color: var(--portal-ink); font-size: 16px; }
.dct-archived-sessions > summary small { color: var(--portal-muted); font-size: 12px; }
.dct-archived-sessions > summary b, .dct-fixed-school-section > summary b { display: inline-flex; align-items: center; color: var(--portal-green); font-size: 13px; }
.dct-archived-sessions > summary b::after, .dct-fixed-school-section > summary b::after { content: "⌄"; margin-left: 8px; color: var(--portal-muted); font-size: 18px; line-height: 1; transition: transform .16s ease; }
.dct-archived-sessions[open] > summary b::after, .dct-fixed-school-section[open] > summary b::after { transform: rotate(180deg); }
.dct-archived-sessions[open] > summary { border-bottom: 1px solid var(--portal-line); background: #f7faf9; }
.dct-archived-session-content { padding: 16px; }
.dct-fixed-school-section { overflow: hidden; margin-top: 28px; border: 1px solid var(--portal-line); border-radius: 15px; background: #fff; }
.dct-fixed-school-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 11px 17px; list-style: none; cursor: pointer; }
.dct-fixed-school-section > summary::-webkit-details-marker { display: none; }
.dct-fixed-school-section > summary span { display: grid; gap: 2px; }
.dct-fixed-school-section > summary strong { color: var(--portal-ink); font-size: 16px; }
.dct-fixed-school-section > summary small { color: var(--portal-muted); font-size: 12px; }
.dct-fixed-school-section[open] > summary { border-bottom: 1px solid var(--portal-line); background: #f7faf9; }
.dct-fixed-school-content { padding: 16px; }

.dct-auth-shell { --portal-green: #103c86; --portal-green-dark: #0a2a62; max-width: 620px; }
.dct-auth-card { padding: clamp(28px, 6vw, 48px); border: 1px solid #d9e1ee; border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(16,60,134,.1); }
.dct-auth-card h2 { margin: 4px 0 10px; color: #103c86; font-size: clamp(28px, 5vw, 38px); }
.dct-auth-card .dct-portal-eyebrow { margin: 0; color: #e52420; }
.dct-auth-intro { margin: 0 0 24px; color: var(--portal-muted); line-height: 1.7; }
.dct-line-login-button { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: #06c755; color: #fff; text-decoration: none; font-weight: 800; }
.dct-line-login-button:hover { background: #05ad4a; color: #fff; }
.dct-line-login-button span { display: inline-grid; place-items: center; width: 35px; height: 28px; border-radius: 8px; background: #fff; color: #06a94a; font-size: 12px; font-weight: 900; }
.dct-auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: #7b8795; font-size: 13px; }
.dct-auth-divider::before, .dct-auth-divider::after { content: ""; flex: 1; height: 1px; background: #dce3ed; }
.dct-auth-form label { display: grid; gap: 8px; color: #26394f; font-weight: 750; }
.dct-auth-form input { box-sizing: border-box; width: 100%; padding: 13px 14px; border: 1px solid #b9c7d8; border-radius: 10px; background: #fff; color: #172126; font: inherit; }
.dct-auth-form input:focus { outline: 3px solid rgba(244,189,61,.35); border-color: #103c86; }
.dct-auth-form .dct-portal-button { width: 100%; border-radius: 10px; }
.dct-auth-notice, .dct-auth-coming-soon { margin: 0 0 20px; padding: 13px 15px; border-radius: 10px; background: #eef4ff; color: #103c86; line-height: 1.55; }
.dct-auth-notice.is-error { background: #fff1f1; color: #842828; }
.dct-auth-coming-soon { background: #fff8df; color: #715417; }
.dct-auth-secondary, .dct-auth-help { margin: 14px 0 0; text-align: center; font-size: 13px; }
.dct-auth-help { color: #7b8795; line-height: 1.6; }
.dct-line-first-note { margin: 11px 0 0; color: #68778a; text-align: center; font-size: 13px; line-height: 1.6; }
.dct-auth-line-complete { display: flex; flex-direction: column; gap: 4px; margin: 0 0 22px; padding: 15px 17px; border: 1px solid #bfe7ce; border-radius: 12px; background: #effaf3; color: #146c2e; }
.dct-auth-line-complete strong { font-size: 16px; }
.dct-auth-line-complete span { color: #3f6950; font-size: 13px; }
.dct-auth-step { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 20px; padding: 10px 13px; border-radius: 10px; background: #eef4ff; color: #103c86; font-size: 13px; }
.dct-email-fallback { margin-top: 22px; border-top: 1px solid #dce3ed; }
.dct-email-fallback summary { padding: 18px 2px 8px; color: #526274; text-align: center; font-size: 13px; font-weight: 700; cursor: pointer; }
.dct-email-fallback[open] summary { margin-bottom: 12px; }

@media (max-width: 760px) {
	.dct-portal-shell { margin: 12px auto; }
	.dct-portal-header { align-items: flex-start; padding: 20px; border-radius: 16px; }
	.dct-portal-header h1 { font-size: 27px; }
	.dct-portal-header > div > p:last-child { font-size: 13px; }
	.dct-portal-logout { padding: 7px 12px; font-size: 13px; }
	.dct-session-card-summary { grid-template-columns: 1fr; gap: 14px; }
	.dct-fixed-school-grid { grid-template-columns: 1fr; }
	.dct-portal-section-heading { align-items: flex-start; flex-direction: column; }
	.dct-session-state { align-items: flex-start; text-align: left; }
	.dct-report-grid { grid-template-columns: 1fr; }
	.dct-report-wide { grid-column: 1; }
	.dct-report-overview { align-items: flex-start; flex-direction: column; }
	.dct-report-overview-action { box-sizing: border-box; width: 100%; text-align: center; }
	.dct-period-tabs { top: 6px; margin: 12px 0; }
	.dct-period-tabs a { min-height: 44px; padding: 11px 4px; font-size: 14px; }
	.dct-pending-tab span { min-width: 21px; height: 21px; margin-left: 2px; }
	.dct-month-panel { margin: 12px 0; padding: 17px; }
	.dct-month-heading h2 { font-size: 23px; }
	.dct-month-switcher { grid-template-columns: 1fr minmax(120px, auto) 1fr; gap: 6px; }
	.dct-month-switcher h2 { font-size: 21px; }
	.dct-month-switcher a { font-size: 12px; }
	.dct-month-arrows a { width: 44px; height: 44px; }
	.dct-month-picker { display: grid; grid-template-columns: 1fr auto; }
	.dct-month-picker label { grid-column: 1 / -1; }
	.dct-month-picker input { width: 100%; min-width: 0; }
	.dct-month-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dct-month-metrics > div { padding: 12px; }
	.dct-session-filter-grid { grid-template-columns: 1fr; }
	.dct-session-item > summary { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; min-height: 66px; padding: 8px 30px 8px 11px; }
	.dct-session-item > summary::after { right: 9px; }
	.dct-session-row-time { font-size: 15px; }
	.dct-session-row-main strong { font-size: 14px; }
	.dct-session-row-main small { font-size: 11px; }
	.dct-session-row-action .dct-report-status { max-width: 74px; padding: 4px 7px; text-align: center; font-size: 10px; }
	.dct-session-row-action > small { font-size: 10px; }
	.dct-session-detail { padding: 13px 12px 16px; }
	.dct-report-form .dct-portal-button { box-sizing: border-box; width: 100%; }
	.dct-archived-session-content { padding: 12px; }
	.dct-fixed-school-content { padding: 12px; }
}

/* 0.22: calm, task-first teacher view. */
.dct-portal-v22 { max-width: 900px; }
.dct-view-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 24px 2px 14px; }
.dct-view-heading .dct-portal-eyebrow { margin: 0; color: var(--portal-green); }
.dct-view-heading h2 { margin: 3px 0 0; color: var(--portal-ink); font-size: 25px; }
.dct-view-heading > span { color: var(--portal-muted); font-size: 13px; font-weight: 700; }
.dct-session-groups-flat { gap: 25px; }
.dct-session-groups-flat .dct-session-day { gap: 9px; }
.dct-session-groups-flat .dct-session-day-heading { padding: 0 2px; }
.dct-session-groups-flat .dct-session-day-heading h3 { font-size: 17px; letter-spacing: .01em; }
.dct-session-day-card { overflow: hidden; border: 1px solid var(--portal-line); border-radius: 16px; background: #fff; box-shadow: 0 7px 22px rgba(23,33,38,.05); }
.dct-portal-v22 .dct-session-item > summary { grid-template-columns: 72px minmax(0, 1fr) minmax(72px, auto); min-height: 78px; padding: 12px 37px 12px 17px; }
.dct-portal-v22 .dct-session-row-main { gap: 4px; }
.dct-portal-v22 .dct-session-row-main strong,
.dct-portal-v22 .dct-session-row-main small { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.dct-portal-v22 .dct-session-row-main strong { font-size: 16px; line-height: 1.4; }
.dct-portal-v22 .dct-session-row-main small { line-height: 1.45; }
.dct-session-school-inline { color: var(--portal-green) !important; font-size: 12px !important; font-weight: 800; }
.dct-portal-v22 .dct-session-row-action strong { display: inline-flex; justify-content: center; padding: 6px 10px; border-radius: 999px; background: #edf2f0; color: #52645f; font-size: 11px; line-height: 1.25; white-space: nowrap; }
.dct-portal-v22 .dct-session-report-pending .dct-session-row-action strong,
.dct-portal-v22 .dct-session-report-overdue .dct-session-row-action strong { background: #fff0bf; color: #71520c; }
.dct-portal-v22 .dct-session-item[open] .dct-session-row-action strong { background: var(--portal-green); color: #fff; }
.dct-portal-v22 .dct-session-detail { padding: 16px 18px 20px; }
.dct-portal-v22 .dct-archived-session-content .dct-session-groups { gap: 18px; }
.dct-portal-v22 .dct-archived-session-content .dct-session-day-heading h3 { font-size: 15px; }

.dct-admin-preview-bar { position: sticky; z-index: 10; top: 8px; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(190px, 270px) auto; gap: 14px; align-items: center; margin-bottom: 12px; padding: 12px 15px; border-radius: 14px; background: #182326; color: #fff; box-shadow: 0 9px 28px rgba(0,0,0,.18); }
.dct-admin-preview-bar > div { display: grid; gap: 2px; }
.dct-admin-preview-bar span { color: #c9d5d2; font-size: 12px; }
.dct-admin-preview-bar form { margin: 0; }
.dct-admin-preview-bar select { box-sizing: border-box; width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid #52615e; border-radius: 9px; background: #fff; color: #172126; font: inherit; }
.dct-admin-preview-bar > a { color: #bfeada; font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.dct-portal-v22.is-admin-preview .dct-period-tabs { top: 83px; }
.dct-preview-picker-shell { max-width: 620px; }
.dct-admin-preview-picker { margin-top: 12vh; padding: clamp(26px, 6vw, 48px); border: 1px solid var(--portal-line); border-radius: 22px; background: #fff; box-shadow: 0 18px 50px rgba(23,33,38,.1); }
.dct-admin-preview-picker .dct-portal-eyebrow { margin: 0; color: var(--portal-green); }
.dct-admin-preview-picker h2 { margin: 5px 0 9px; color: var(--portal-ink); font-size: 31px; }
.dct-admin-preview-picker > p:not(.dct-portal-eyebrow) { color: var(--portal-muted); line-height: 1.65; }
.dct-admin-preview-picker form,
.dct-admin-preview-picker label { display: grid; gap: 8px; }
.dct-admin-preview-picker form { margin-top: 22px; }
.dct-admin-preview-picker label { color: var(--portal-ink); font-weight: 800; }
.dct-admin-preview-picker select { box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #b9c7c3; border-radius: 10px; background: #fff; color: var(--portal-ink); font: inherit; }

.dct-substitution-entry { margin: 5px 0 0; }
.dct-substitution-entry a,
.dct-text-button { color: var(--portal-green); font-weight: 800; }
.dct-substitution-panel,
.dct-substitution-alert,
.dct-withdraw-panel { margin: 14px 0 0; padding: 15px; border: 1px solid #c8ddd6; border-radius: 12px; background: #eef8f5; }
.dct-substitution-panel > strong,
.dct-substitution-alert > strong { display: block; color: var(--portal-green-dark); }
.dct-substitution-panel > span,
.dct-substitution-alert > span { display: block; margin-top: 3px; color: var(--portal-muted); font-size: 12px; line-height: 1.55; }
.dct-substitution-panel form { display: grid; gap: 11px; margin-top: 13px; }
.dct-substitution-panel label,
.dct-withdraw-panel label { display: grid; gap: 6px; color: var(--portal-ink); font-size: 13px; font-weight: 750; }
.dct-substitution-panel select,
.dct-substitution-panel textarea,
.dct-withdraw-panel textarea { box-sizing: border-box; width: 100%; padding: 10px 11px; border: 1px solid #b9c7c3; border-radius: 9px; background: #fff; color: var(--portal-ink); font: inherit; font-weight: 400; }
.dct-substitution-panel .dct-portal-button { justify-self: start; margin-top: 0; }
.dct-substitution-alert { border-color: #e8c36e; background: #fff8df; }
.dct-substitution-alert > strong { color: #795200; }
.dct-withdraw-panel { border-color: #ead7d7; background: #fff; }
.dct-withdraw-panel > summary { color: #8a3030; font-size: 13px; font-weight: 800; cursor: pointer; }
.dct-withdraw-panel form { display: grid; gap: 10px; margin-top: 12px; }
.dct-text-button,
.dct-danger-button { width: fit-content; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.dct-danger-button { padding: 9px 13px; border-radius: 9px; background: #a33636; color: #fff; font-weight: 800; }
.dct-restore-form { padding-top: 12px; border-top: 1px solid #c8ddd6; }
.dct-portal-notice.is-error { background: #fff1f1; color: #842828; }
.dct-preview-lock { margin: 8px 0 0; color: #68756f; font-size: 12px; line-height: 1.5; }
.dct-portal-v22.is-admin-preview button:disabled { opacity: .58; cursor: not-allowed; }

@media (max-width: 760px) {
	.dct-portal-v22 { margin-top: 8px; }
	.dct-classroom-pay-progress-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
	.dct-classroom-pay-progress-heading p { line-height: 1.5; }
	.dct-view-heading { margin: 19px 2px 11px; }
	.dct-view-heading h2 { font-size: 21px; }
	.dct-reset-date { text-align: right; }
	.dct-date-picker { display: grid; grid-template-columns: auto 1fr; margin-bottom: 15px; }
	.dct-date-picker input { width: 100%; min-width: 0; }
	.dct-session-groups-flat { gap: 21px; }
	.dct-session-groups-flat .dct-session-day-heading h3 { font-size: 16px; }
	.dct-portal-v22 .dct-session-item > summary { grid-template-columns: 56px minmax(0, 1fr) 70px; gap: 8px; min-height: 78px; padding: 10px 29px 10px 11px; }
	.dct-portal-v22 .dct-session-row-time { font-size: 15px; }
	.dct-portal-v22 .dct-session-row-main strong { font-size: 14px; }
	.dct-portal-v22 .dct-session-row-action strong { max-width: 68px; padding: 5px 7px; text-align: center; white-space: normal; }
	.dct-portal-v22 .dct-session-detail { padding: 14px 12px 17px; }
	.dct-admin-preview-bar { top: 5px; grid-template-columns: 1fr auto; gap: 9px; padding: 10px 11px; }
	.dct-admin-preview-bar form { grid-column: 1 / -1; grid-row: 2; }
	.dct-admin-preview-bar > a { grid-column: 2; grid-row: 1; }
	.dct-portal-v22.is-admin-preview .dct-period-tabs { top: 117px; }
	.dct-admin-preview-picker { margin-top: 6vh; padding: 25px 20px; }
	.dct-admin-preview-picker h2 { font-size: 27px; }
	.dct-substitution-panel .dct-portal-button,
	.dct-danger-button { box-sizing: border-box; width: 100%; text-align: center; }
}

/* Compact teacher home and task entry cards. */
.dct-portal-shell .dct-portal-hero{padding:25px 30px;border-radius:20px;margin-bottom:20px}.dct-portal-shell .dct-portal-hero h1{font-size:clamp(27px,4vw,38px);line-height:1.3;margin:7px 0 12px}.dct-portal-shell .dct-portal-hero p{font-size:15px}.dct-portal-shell .dct-portal-hero .dct-portal-eyebrow{font-size:12px;letter-spacing:.13em}.dct-flow-teacher-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.dct-flow-teacher-nav a{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid #d5e2df;border-radius:12px;padding:17px;text-decoration:none;color:#175f58;box-shadow:0 3px 10px #1a51480a;min-width:0}.dct-flow-teacher-nav a:hover{background:#ecf6f2;border-color:#258a77}.dct-flow-teacher-nav small{font-size:12px;color:#6a7d79;line-height:1.5}.dct-flow-teacher-nav a:focus-visible{outline:3px solid #358578;outline-offset:3px}@media(max-width:650px){.dct-portal-shell .dct-portal-hero{padding:22px}.dct-flow-teacher-nav{gap:7px}.dct-flow-teacher-nav a{padding:13px 10px}.dct-flow-teacher-nav strong{font-size:14px}.dct-flow-teacher-nav small{font-size:11px}}