:root {
    --bg: #f4f7ff;
    --surface: #ffffff;
    --surface-soft: #eef3ff;
    --text: #17213a;
    --muted: #667085;
    --border: #dfe6f2;
    --primary: #3156d3;
    --primary-dark: #2443ad;
    --primary-soft: #e7edff;
    --mint: #dff7ee;
    --green: #16794d;
    --amber: #a96500;
    --amber-soft: #fff3d7;
    --red: #c43c4c;
    --red-soft: #ffeaed;
    --critical: #8e1834;
    --critical-soft: #ffe0e8;
    --shadow: 0 18px 50px rgba(43, 62, 118, .1);
    --radius: 22px;
    --radius-sm: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font-family: system-ui, -apple-system, "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    overflow-x: hidden;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
.container { width: min(1160px, calc(100% - 36px)); margin-inline: auto; }
.container-narrow { width: min(700px, calc(100% - 30px)); }
.container-survey { width: min(940px, calc(100% - 30px)); }
.page-space { padding-block: 48px 76px; }
.section-space { padding-block: 72px; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 8px; color: var(--primary); font-size: .84rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4vw, 3.65rem); margin: 0 0 18px; }
h2 { margin: 0 0 10px; font-size: clamp(1.3rem, 2vw, 1.75rem); }
h3 { margin: 0 0 8px; }
p { margin-top: 0; }
.lead { color: var(--muted); font-size: 1.08rem; }

.public-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(223,230,242,.9); backdrop-filter: blur(12px); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand > span:last-child { display: grid; min-width: 0; }
.brand strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small { color: var(--muted); font-size: .78rem; }
.brand-mark { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg, #5d79e6, #294ec9); color: white; font-weight: 900; box-shadow: 0 8px 20px rgba(49,86,211,.24); }
.public-nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.student-link { text-decoration: none; padding: 9px 14px; color: white; background: var(--primary); border-radius: 12px; font-weight: 800; white-space: nowrap; }
.staff-link { text-decoration: none; padding: 9px 14px; color: var(--primary); background: var(--primary-soft); border-radius: 12px; font-weight: 700; white-space: nowrap; }

.hero { padding: 86px 0 70px; background: radial-gradient(circle at 85% 20%, #dce5ff 0, transparent 28%), linear-gradient(180deg,#fff 0%,#f4f7ff 100%); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); align-items: center; gap: 72px; }
.hero h1 span { color: var(--primary); }
.hero-copy { max-width: 680px; color: var(--muted); font-size: 1.16rem; margin-bottom: 30px; }
.hero-panel { position: relative; display: grid; gap: 14px; }
.hero-panel::before { content: ""; position: absolute; inset: -45px -70px; z-index: 0; border-radius: 50%; background: rgba(255,255,255,.72); filter: blur(2px); }
.signal-card { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid rgba(255,255,255,.9); border-radius: 20px; box-shadow: var(--shadow); }
.signal-card:nth-child(2) { transform: translateX(28px); }
.signal-card strong, .signal-card small { display: block; }
.signal-card small { color: #536076; margin-top: 3px; }
.signal-blue { background: #edf1ff; }
.signal-mint { background: #e7faf4; }
.signal-rose { background: #fff0f3; }
.signal-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 46px; border-radius: 15px; background: rgba(255,255,255,.75); color: var(--primary); font-weight: 900; }

.button { appearance: none; border: 0; border-radius: 13px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 11px 18px; text-decoration: none; cursor: pointer; font-weight: 800; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(49,86,211,.24); outline-offset: 2px; }
.button-primary { color: white; background: var(--primary); box-shadow: 0 9px 24px rgba(49,86,211,.22); }
.button-primary:hover { background: var(--primary-dark); }
.button-secondary { color: var(--text); background: #eef2f8; }
.button-danger { color: #a62d3c; background: var(--red-soft); }
.button-small { padding: 7px 11px; border-radius: 10px; font-size: .84rem; }
.button-large { padding: 14px 22px; font-size: 1.04rem; }
.button-block { width: 100%; }
.button:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: 0 10px 30px rgba(43,62,118,.05); }
.info-card p { color: var(--muted); margin-bottom: 0; }
.info-number { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-weight: 900; }
.privacy-band { padding: 44px 0; color: white; background: #1c2d61; }
.privacy-inner { display: flex; align-items: center; gap: 20px; }
.privacy-inner h2 { font-size: 1.35rem; }
.privacy-inner p { margin-bottom: 0; color: #d5def7; }
.privacy-icon { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; background: rgba(255,255,255,.12); border-radius: 18px; font-size: 1.4rem; }
.public-footer { padding: 28px 0; background: white; border-top: 1px solid var(--border); }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; }
.footer-inner p { margin: 0; font-size: .85rem; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(22px, 4vw, 38px); box-shadow: var(--shadow); }
.survey-heading { margin-bottom: 28px; }
.survey-heading h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.survey-heading > p:last-child { color: var(--muted); }
.survey-progress { position: sticky; top: 86px; z-index: 10; padding: 14px 18px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 15px; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(43,62,118,.06); }
.progress-meta { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 8px; font-size: .84rem; font-weight: 800; }
.progress-meta span:last-child { color: var(--muted); }
.progress-track { height: 8px; border-radius: 99px; background: #e8edf5; overflow: hidden; }
.progress-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#3156d3,#6f87e8); transition: width .25s ease; }
.survey-section { margin-bottom: 20px; }
.js-enabled .survey-section { display: none; }
.js-enabled .survey-section.is-active { display: block; animation: surveyIn .25s ease; }
@keyframes surveyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.section-title { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
.section-title > span { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; background: var(--primary-soft); color: var(--primary); font-weight: 900; }
.section-title h2 { margin-bottom: 4px; }
.section-title p { margin: 0; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field > span { font-weight: 800; font-size: .92rem; }
.field small, .form-note { color: var(--muted); font-size: .8rem; }
.field-wide { grid-column: 1 / -1; }
input, select, textarea { width: 100%; min-height: 48px; border: 1px solid #cfd8e8; border-radius: 12px; padding: 10px 13px; color: var(--text); background: #fff; }
textarea { resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #aebbd3; }
.answer-legend { display: flex; justify-content: flex-end; gap: 12px; margin: -10px 0 12px; color: var(--muted); font-size: .72rem; }
.question-card { min-width: 0; margin: 0; padding: 22px 0; border: 0; border-top: 1px solid var(--border); }
.question-card legend { width: 100%; padding: 0; font-weight: 800; }
.question-number { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: .8rem; }
.question-help { margin: 8px 0 0 38px; color: var(--red); font-size: .82rem; }
.choice-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { min-height: 72px; display: grid; place-content: center; text-align: center; padding: 9px; border: 1px solid #d7dfeb; border-radius: 13px; background: #fafbfe; transition: .15s ease; }
.choice b { color: var(--primary); font-size: 1.08rem; }
.choice small { color: var(--muted); font-size: .72rem; line-height: 1.25; }
.choice input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(49,86,211,.1); }
.choice input:focus-visible + span { outline: 3px solid rgba(49,86,211,.24); }
.privacy-box, .support-box { padding: 20px; border-radius: 16px; background: var(--surface-soft); }
.privacy-box p, .privacy-box li, .support-box p { color: #536076; }
.privacy-box ul { margin-bottom: 0; }
.consent { display: flex; gap: 12px; margin-top: 20px; padding: 16px; border: 1px solid var(--border); border-radius: 15px; cursor: pointer; }
.consent input { width: 22px; min-height: 22px; flex: 0 0 22px; accent-color: var(--primary); }
.survey-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.survey-actions .button:last-child { margin-left: auto; }
.survey-action-hint { flex: 1 1 auto; margin: 0; color: var(--muted); font-size: .78rem; text-align: center; }
.noscript-note { margin-bottom: 18px; }
.completion-card { text-align: center; }
.completion-check { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 24px; color: var(--green); background: var(--mint); font-size: 2rem; font-weight: 900; }
.receipt { display: inline-flex; align-items: center; gap: 14px; margin: 10px 0 24px; padding: 11px 18px; border-radius: 13px; background: #f3f5fa; }
.receipt span { color: var(--muted); font-size: .8rem; }
.receipt strong { letter-spacing: .08em; }
.support-box { margin: 0 auto 24px; text-align: left; }
.support-box p:last-child { margin-bottom: 0; }
.empty-state { padding: 70px 20px; text-align: center; }
.empty-state h1 { font-size: 2rem; }

.alert { padding: 14px 17px; margin-bottom: 18px; border-radius: 13px; border: 1px solid transparent; }
.alert ul { margin: 8px 0 0; }
.alert-danger { color: #8f2534; background: var(--red-soft); border-color: #f4bbc4; }
.alert-success { color: #12623e; background: var(--mint); border-color: #a9e5cd; }
.alert-warning { color: #815000; background: var(--amber-soft); border-color: #efd18d; }
.flash-wrap { padding-top: 18px; }

.install-page { min-height: 100vh; background: radial-gradient(circle at top,#e6ecff,transparent 42%), var(--bg); }
.auth-card { margin-inline: auto; }
.auth-card > .brand-mark { margin-bottom: 18px; }
.setup-summary { display: flex; justify-content: space-between; gap: 14px; padding: 13px 15px; margin-bottom: 20px; border-radius: 12px; background: #f0f3fa; font-size: .86rem; }
.auth-card form { display: grid; gap: 16px; }
.auth-heading { margin: 32px 0 22px; }
.auth-heading h1 { font-size: 2.25rem; }
.back-link { display: block; margin-top: 20px; color: var(--muted); text-align: center; text-decoration: none; }

/* Student account and profile */
.profile-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 3px solid white; border-radius: 50%; object-fit: cover; background: #dfe6fa; box-shadow: 0 6px 20px rgba(34,56,120,.15); }
img.profile-avatar { aspect-ratio: 1; }
.profile-avatar-small { width: 44px; height: 44px; border-width: 2px; font-size: .78rem; }
.profile-avatar-large { width: 112px; height: 112px; font-size: 1.5rem; }
.profile-avatar-xl { width: 136px; height: 136px; font-size: 1.7rem; }
.profile-avatar-fallback { color: white; background: linear-gradient(145deg,#6781e6,#3156d3); font-weight: 900; letter-spacing: .04em; }
.student-cell { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.student-cell > div { display: grid; }
.student-cell small { color: var(--muted); }
.student-login-card { max-width: 620px; }
.login-help { margin-top: 20px; padding: 15px 17px; border-radius: 14px; background: var(--surface-soft); }
.login-help strong { font-size: .9rem; }
.login-help p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; }
.student-portal { padding-block: 42px 72px; }
.student-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: clamp(22px,4vw,34px); overflow: hidden; border: 1px solid #cbd7ff; border-radius: var(--radius); background: radial-gradient(circle at 92% 10%,rgba(255,255,255,.9),transparent 34%),linear-gradient(135deg,#edf2ff,#f9fbff); box-shadow: var(--shadow); }
.student-profile-summary { display: flex; align-items: center; gap: 24px; min-width: 0; }
.student-profile-summary > div { min-width: 0; }
.student-profile-summary h1 { margin-bottom: 5px; font-size: clamp(1.75rem,3vw,2.6rem); }
.student-profile-summary p:not(.eyebrow) { margin-bottom: 10px; color: var(--muted); }
.student-profile-summary .tag-list span { padding: 6px 9px; font-size: .72rem; }
.student-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.student-metrics article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border: 1px solid var(--border); border-radius: 16px; background: white; }
.student-metrics span { color: var(--muted); font-size: .8rem; font-weight: 800; }
.student-metrics strong { color: var(--primary); font-size: 1.65rem; line-height: 1; }
.student-campaign-list { display: grid; gap: 12px; }
.student-campaign { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px; border: 1px solid var(--border); border-radius: 15px; background: #fbfcff; }
.student-campaign.is-highlighted { border-color: #91a8ef; background: #f1f5ff; box-shadow: 0 0 0 3px rgba(49,86,211,.08); }
.student-campaign h3 { margin: 7px 0 3px; }
.student-campaign p { margin-bottom: 5px; color: var(--muted); font-size: .84rem; }
.student-campaign small { color: var(--muted); }
.student-completed-button { cursor: default; white-space: nowrap; }
.student-completed-button:hover { transform: none; }
.student-dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.simple-history { display: grid; gap: 8px; }
.simple-history > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 12px; padding: 11px 13px; border-radius: 12px; background: #f6f8fb; }
.simple-history span { font-size: .84rem; font-weight: 800; }
.simple-history strong { color: var(--green); font-size: .74rem; }
.simple-history small { grid-column: 1/-1; color: var(--muted); font-size: .7rem; }
.profile-admin-grid, .profile-self-card { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 28px; align-items: start; }
.profile-photo-editor { display: grid; justify-items: center; gap: 13px; min-width: 0; padding: 18px; border-radius: 16px; background: #f6f8fd; }
.profile-photo-editor .field { width: 100%; }
.profile-photo-editor input[type="file"] { min-height: 0; padding: 9px; font-size: .78rem; }
.profile-photo-editor .check-row { justify-self: start; font-size: .82rem; }
.identity-readonly { align-self: center; }
.identity-readonly h2 { margin-bottom: 4px; }
.identity-readonly > p { color: var(--muted); }
.student-page-heading { align-items: center; }
.assessment-identity { display: grid; grid-template-columns: minmax(230px,.72fr) minmax(0,1.28fr); gap: 22px; }
.assessment-identity-person { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 22px; text-align: center; border-radius: 17px; background: linear-gradient(145deg,#edf2ff,#f8faff); }
.assessment-identity-person div { display: grid; }
.assessment-identity-person span, .assessment-identity-person small { color: var(--muted); font-size: .76rem; }
.assessment-identity-person strong { margin: 2px 0; font-size: 1.12rem; }
.assessment-profile-details { align-content: center; }
.profile-confirm-note { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 16px; border: 1px solid #b9e7d2; border-radius: 14px; background: #f6fffb; }
.profile-confirm-note > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--green); background: var(--mint); font-weight: 900; }
.profile-confirm-note p { margin: 0; color: #536076; font-size: .8rem; }

/* Admin */
.admin-body { background: #f3f5fa; }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0,1fr); }
.admin-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 16px; color: #e9eeff; background: #17213a; overflow-y: auto; }
.admin-brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 24px; color: white; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-brand > span:last-child { display: grid; min-width: 0; }
.admin-brand strong { font-size: .98rem; }
.admin-brand small { color: #aeb9d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; }
.admin-nav { display: grid; gap: 5px; padding: 22px 0; }
.admin-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; color: #bdc7e2; text-decoration: none; border-radius: 11px; font-size: .91rem; font-weight: 700; }
.admin-nav a:hover, .admin-nav a.is-active { color: white; background: rgba(106,132,222,.2); }
.nav-dot { width: 8px; height: 8px; border-radius: 50%; background: #7784a9; }
.admin-nav a.is-active .nav-dot { background: #8aa2ff; box-shadow: 0 0 0 4px rgba(138,162,255,.12); }
.sidebar-footer { display: grid; margin-top: auto; padding: 18px 10px 4px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-footer span { font-weight: 800; }
.sidebar-footer small { color: #aeb9d9; }
.sidebar-footer a { margin-top: 11px; color: #d5ddf5; font-size: .82rem; }
.admin-main { min-width: 0; }
.admin-topbar { position: sticky; top: 0; z-index: 18; min-height: 74px; display: flex; align-items: center; gap: 16px; padding: 10px clamp(18px,3vw,38px); background: rgba(255,255,255,.94); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
.admin-topbar > div { display: grid; }
.admin-topbar p { margin: 0; color: var(--muted); font-size: .72rem; }
.admin-topbar strong { font-size: .95rem; }
.view-public { margin-left: auto; color: var(--primary); text-decoration: none; font-size: .83rem; font-weight: 800; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 0; border-radius: 11px; color: var(--text); background: #eef2f8; cursor: pointer; }
.admin-content { padding: 32px clamp(18px,3vw,38px) 70px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.page-heading h1 { margin-bottom: 7px; font-size: clamp(1.8rem,3vw,2.65rem); }
.page-heading > div > p:last-child { margin: 0; color: var(--muted); }
.campaign-filter label { display: grid; gap: 5px; }
.campaign-filter span { color: var(--muted); font-size: .75rem; font-weight: 800; }
.campaign-filter select { min-width: 260px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin-bottom: 18px; }
.metric-card { position: relative; overflow: hidden; min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 17px; background: white; }
.metric-card::after { content: ""; position: absolute; width: 75px; height: 75px; right: -28px; bottom: -30px; border-radius: 50%; background: var(--primary-soft); }
.metric-card > span, .metric-card > small { display: block; color: var(--muted); }
.metric-card > span { font-size: .8rem; font-weight: 800; }
.metric-card strong { display: block; margin: 5px 0; font-size: 2rem; line-height: 1.1; }
.metric-card small { font-size: .75rem; }
.metric-critical { border-color: #efb3c1; background: #fff8fa; }
.metric-critical strong { color: var(--critical); }
.metric-critical::after { background: var(--critical-soft); }
.metric-danger { background: #fffafb; }
.metric-danger strong { color: var(--red); }
.metric-danger::after { background: var(--red-soft); }
.metric-warning { background: #fffdf8; }
.metric-warning strong { color: var(--amber); }
.metric-warning::after { background: var(--amber-soft); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); gap: 18px; margin-bottom: 18px; }
.lower-grid { grid-template-columns: minmax(340px,.75fr) minmax(0,1.25fr); }
.panel { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: white; box-shadow: 0 7px 25px rgba(43,62,118,.04); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.panel-heading h2 { margin-bottom: 3px; font-size: 1.1rem; }
.panel-heading p { margin: 0; color: var(--muted); font-size: .76rem; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.risk-overview { display: flex; align-items: center; justify-content: center; gap: 34px; }
#risk-chart { width: 210px; height: 210px; max-width: 48%; }
.chart-legend { display: grid; gap: 11px; min-width: 155px; }
.chart-legend span { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
.chart-legend b { color: var(--text); }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-low { background: #2c9a68; }.dot-watch { background: #e0a12c; }.dot-high { background: #db5966; }.dot-urgent { background: #8e1834; }
.kpi-ring { --value: 0; width: 176px; height: 176px; display: grid; place-items: center; margin: 4px auto 22px; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--value) * 1%), #e8edf5 0); }
.kpi-ring::before { content: ""; grid-area: 1/1; width: 136px; height: 136px; border-radius: 50%; background: white; }
.kpi-ring > div { grid-area: 1/1; z-index: 1; display: grid; text-align: center; }
.kpi-ring strong { color: var(--primary); font-size: 1.8rem; }
.kpi-ring span { color: var(--muted); font-size: .72rem; }
.mini-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.mini-metrics div { display: grid; padding: 10px; text-align: center; border-radius: 12px; background: #f5f7fb; }
.mini-metrics strong { font-size: 1.08rem; }.mini-metrics span { color: var(--muted); font-size: .68rem; }
.factor-list { display: grid; gap: 17px; }
.factor-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: .8rem; }
.factor-row b { color: var(--primary); }
.factor-track { height: 8px; overflow: hidden; border-radius: 99px; background: #edf0f5; }
.factor-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6f87e8,#3156d3); }
.trend-chart { width: 100%; height: 250px; }
.case-panel { margin-top: 18px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.data-table th { padding: 10px 12px; color: var(--muted); text-align: left; background: #f7f8fb; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.data-table td { padding: 13px 12px; vertical-align: middle; border-bottom: 1px solid #edf0f5; }
.data-table tbody tr:hover { background: #fbfcff; }
.data-table td > strong, .data-table td > small { display: block; }
.data-table td > small { margin-top: 2px; color: var(--muted); }
.empty-cell, .empty-inline { padding: 30px !important; color: var(--muted); text-align: center !important; }
.risk-badge { display: inline-flex; padding: 4px 8px; border-radius: 9px; font-size: .7rem; font-weight: 900; white-space: nowrap; }
.risk-low { color: var(--green); background: var(--mint); }
.risk-watch { color: var(--amber); background: var(--amber-soft); }
.risk-high { color: var(--red); background: var(--red-soft); }
.risk-urgent { color: white; background: var(--critical); }
.score-text { margin-top: 4px; color: var(--muted); font-size: .68rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-list span { padding: 4px 7px; border-radius: 8px; color: #4f5d7d; background: #edf1f8; font-size: .66rem; white-space: nowrap; }
.status-text { font-size: .74rem; font-weight: 800; white-space: nowrap; }.status-text.success { color: var(--green); }.status-text.danger { color: var(--red); }
.toolbar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .field { min-width: 180px; }.toolbar .field.search { flex: 1 1 260px; }
.toolbar .field > span { font-size: .72rem; color: var(--muted); }
.student-filter-toolbar .field:first-child { flex: 1 1 280px; }
.student-filter-toolbar .field:nth-child(2) { flex: 0 1 210px; }
.advisor-roster-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.advisor-roster-summary span { display: inline-flex; align-items: baseline; gap: 5px; padding: 8px 11px; border: 1px solid #d9e1f4; border-radius: 11px; color: #536076; background: #f7f9ff; font-size: .75rem; font-weight: 800; }
.advisor-roster-summary strong { color: var(--primary); font-size: 1rem; }
.student-group-list { display: grid; gap: 18px; margin-top: 18px; }
.student-group-panel { overflow: hidden; padding: 0; border-color: #d9e1f4; }
.student-group-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-bottom: 1px solid #dfe5f3; background: linear-gradient(135deg,#f4f7ff,#fbfcff); }
.student-group-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.student-group-icon { display: grid; place-items: center; width: 45px; height: 45px; flex: 0 0 45px; border-radius: 14px; color: white; background: linear-gradient(135deg,#3156d3,#6f87e8); font-size: .72rem; font-weight: 900; }
.student-group-identity h2 { margin: 0 0 3px; color: #21325f; font-size: 1.12rem; }
.student-group-identity p { margin: 0; color: var(--muted); font-size: .76rem; }
.student-group-count { display: flex; align-items: baseline; gap: 5px; flex: 0 0 auto; padding: 7px 12px; border: 1px solid #cdd8f3; border-radius: 12px; color: #536076; background: white; }
.student-group-count strong { color: var(--primary); font-size: 1.25rem; line-height: 1; }
.student-group-count span { font-size: .72rem; font-weight: 800; }
.student-group-panel .data-table tbody tr:last-child td { border-bottom: 0; }
.split-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 18px; align-items: start; }
.stack { display: grid; gap: 18px; }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.detail-item { padding: 13px; border-radius: 12px; background: #f6f8fb; }
.detail-item span, .detail-item strong { display: block; }.detail-item span { color: var(--muted); font-size: .7rem; }.detail-item strong { margin-top: 3px; font-size: .88rem; }
.detail-wide { grid-column: 1/-1; }
.risk-hero { padding: 22px; color: white; border-radius: 17px; background: linear-gradient(135deg,#263f9e,#3156d3); }
.risk-hero.high { background: linear-gradient(135deg,#9f2636,#d24a59); }.risk-hero.urgent { background: linear-gradient(135deg,#651127,#9c1d3d); }.risk-hero.watch { color: #563300; background: linear-gradient(135deg,#f7d98f,#ffebba); }
.risk-hero strong { display: block; font-size: 2rem; }.risk-hero span { opacity: .9; }
.timeline { display: grid; gap: 12px; }
.timeline-item { position: relative; padding: 15px 15px 15px 20px; border-left: 3px solid var(--primary); border-radius: 0 12px 12px 0; background: #f7f9fd; }
.timeline-item header { display: flex; justify-content: space-between; gap: 12px; }.timeline-item p { margin: 8px 0 0; color: #536076; }
.form-stack { display: grid; gap: 15px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.check-row { display: flex; align-items: center; gap: 9px; }.check-row input { width: 20px; min-height: 20px; }
.section-divider { margin: 25px 0; border: 0; border-top: 1px solid var(--border); }
.link-box { display: flex; gap: 8px; }.link-box input { min-width: 260px; }
.code-note { display: inline-block; padding: 2px 7px; border-radius: 7px; background: #eef1f7; font-family: ui-monospace, monospace; font-size: .74rem; }
.campaign-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 15px; background: #fbfcff; }
.campaign-main { display: flex; justify-content: space-between; gap: 18px; }
.campaign-main h3 { margin: 6px 0 3px; }.campaign-main p { margin: 0; color: var(--muted); font-size: .82rem; }
.campaign-status { display: inline-flex; padding: 3px 8px; border-radius: 8px; font-size: .68rem; font-weight: 900; }
.status-active { color: var(--green); background: var(--mint); }.status-draft { color: #59647b; background: #e9edf4; }.status-closed { color: var(--red); background: var(--red-soft); }
.campaign-count { min-width: 70px; text-align: right; }.campaign-count strong,.campaign-count span { display: block; }.campaign-count strong { font-size: 1.4rem; }.campaign-count span { color: var(--muted); font-size: .7rem; }
.campaign-actions { display: flex; justify-content: flex-end; gap: 8px; }
.collapsible-panel summary { cursor: pointer; font-weight: 900; }
.details-form { margin-top: 22px; }
.inline-upload { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; }.inline-upload input { width: auto; max-width: 280px; padding: 7px; }
.inline-upload .import-advisor-field { min-width: 230px; }
.import-security-note { margin-top: 5px !important; color: #815000 !important; }
.import-advisor-summary { align-self: center; color: var(--muted); font-size: .76rem; }
.map-link { margin-top: 14px; }
.urgent-panel { border-color: #efb3c1; background: #fffafb; }
.urgent-reason { display: flex; justify-content: space-between; gap: 14px; padding: 13px 15px; border-radius: 12px; background: var(--red-soft); }
.urgent-reason span { color: var(--critical); font-weight: 900; white-space: nowrap; }
.answer-groups { display: grid; gap: 10px; }.answer-groups details { border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }.answer-groups summary { padding: 12px 14px; cursor: pointer; font-weight: 900; background: #f8f9fc; }
.answer-list > div { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 12px 14px; border-top: 1px solid var(--border); }.answer-list span { font-size: .82rem; }.answer-value { flex: 0 0 auto; padding: 4px 8px; border-radius: 8px; font-size: .7rem; }.answer-0 { color: var(--green); background: var(--mint); }.answer-1 { color: #59647b; background: #edf0f5; }.answer-2 { color: var(--amber); background: var(--amber-soft); }.answer-3 { color: var(--red); background: var(--red-soft); }
.timeline-item header > div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }.timeline-item header a { color: var(--primary); font-size: .78rem; }.timeline-item > small { display: block; margin-top: 4px; color: var(--muted); }.timeline-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; color: var(--muted); font-size: .72rem; }
.print-body { background: #e5e7eb; }.print-sheet { box-sizing: border-box; width: 210mm; min-height: 297mm; margin: 20px auto; padding: 16mm 17mm; background: white; box-shadow: 0 10px 40px rgba(0,0,0,.12); font-size: 12.5pt; }.print-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }.print-header { text-align: center; border-bottom: 2px solid #222; padding-bottom: 10px; }.print-header h1 { margin: 0 0 5px; font-size: 18pt; }.print-header p { margin: 0; }.print-section { margin-top: 16px; }.print-section h2 { padding: 5px 8px; background: #eef1f7; font-size: 13pt; }.print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 20px; }.print-grid p { margin: 2px 0; }.print-grid .full { grid-column: 1/-1; }.write-line { margin: 12px 0; }.write-box { min-height: 75px; margin: 8px 0; padding: 8px; border: 1px solid #777; }.write-box.short { min-height: 55px; }.signature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 35px; text-align: center; }
.sidebar-backdrop { display: none; }

/* Evaluation criteria */
.criteria-callout { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; align-items: start; padding: 18px 20px; margin-bottom: 18px; border: 1px solid #b9c8f7; border-radius: 16px; background: #eef3ff; }
.criteria-callout > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: white; background: var(--primary); font-weight: 900; }
.criteria-callout h2 { margin-bottom: 4px; font-size: 1.05rem; }
.criteria-callout p { margin: 0; color: #4f5d7d; }
.criteria-level-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.criteria-level { position: relative; overflow: hidden; min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 17px; background: white; }
.criteria-level::after { content: ""; position: absolute; width: 70px; height: 70px; right: -28px; bottom: -30px; border-radius: 50%; background: #edf1f8; }
.criteria-level > span, .criteria-level > strong, .criteria-level > small { position: relative; z-index: 1; display: block; }
.criteria-level > span { font-size: .76rem; font-weight: 900; }
.criteria-level > strong { margin: 5px 0 3px; font-size: 1.55rem; line-height: 1.2; }
.criteria-level > small { color: var(--muted); }
.criteria-level.low { border-color: #b9e7d2; background: #f9fffc; }.criteria-level.low > span,.criteria-level.low > strong { color: var(--green); }.criteria-level.low::after { background: var(--mint); }
.criteria-level.watch { border-color: #efd18d; background: #fffdf8; }.criteria-level.watch > span,.criteria-level.watch > strong { color: var(--amber); }.criteria-level.watch::after { background: var(--amber-soft); }
.criteria-level.high { border-color: #f4bbc4; background: #fffafb; }.criteria-level.high > span,.criteria-level.high > strong { color: var(--red); }.criteria-level.high::after { background: var(--red-soft); }
.criteria-level.urgent { border-color: #dfa6b5; background: #fff8fa; }.criteria-level.urgent > span,.criteria-level.urgent > strong { color: var(--critical); }.criteria-level.urgent::after { background: var(--critical-soft); }
.criteria-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(330px,.95fr); gap: 18px; margin-bottom: 18px; }
.formula-box { padding: 22px; border-radius: 16px; color: white; background: linear-gradient(135deg,#253d96,#3156d3); }
.formula-box > span { display: block; margin-bottom: 8px; color: #dce4ff; font-size: .76rem; font-weight: 800; }
.formula-expression { display: grid; gap: 5px; font-size: clamp(1.05rem,2vw,1.35rem); font-weight: 900; line-height: 1.4; }
.formula-expression small { color: #dce4ff; font-size: .75rem; font-weight: 600; }
.formula-example { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); color: #edf1ff; font-size: .82rem; }
.criteria-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: criteria-step; }
.criteria-steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: start; counter-increment: criteria-step; }
.criteria-steps li::before { content: counter(criteria-step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-size: .78rem; font-weight: 900; }
.criteria-steps b, .criteria-steps small { display: block; }.criteria-steps small { margin-top: 2px; color: var(--muted); }
.criteria-table td:first-child { font-weight: 900; }
.criteria-table tfoot td { font-weight: 900; background: #f7f8fb; }
.critical-list { display: grid; gap: 10px; }
.critical-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 13px 14px; border: 1px solid var(--border); border-radius: 13px; background: #fbfcff; }
.critical-item p { margin: 0; font-size: .82rem; }
.critical-item small { display: block; margin-top: 3px; color: var(--muted); }

/* Question, account and follow-up quality-of-life additions */
.question-category-filter { display: flex; align-items: end; gap: 10px; margin-bottom: 18px; }
.question-category-filter .field { flex: 1 1 360px; }
.question-category-filter .button { flex: 0 0 auto; }
.question-category-empty { padding: 28px 16px; border: 1px dashed #cfd8e8; border-radius: 14px; text-align: center; }
.question-category-management { grid-template-columns: minmax(0,1fr) minmax(320px,380px); }
.category-editor-panel { position: sticky; top: 88px; }
.management-table { min-width: 900px; }
.question-management-table { min-width: 1120px; }
.management-table tr.is-archived { background: #fafbfc; opacity: .76; }
.management-actions, .order-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.management-actions form, .order-actions form { margin: 0; }
.order-actions { flex-wrap: nowrap; }
.management-actions .button { white-space: nowrap; }
.users-layout { grid-template-columns: minmax(0,1fr) minmax(340px,420px); }
.group-picker, .followup-photo-manager { min-width: 0; margin: 0; padding: 15px; border: 1px solid var(--border); border-radius: 14px; }
.group-picker legend, .followup-photo-manager legend { padding-inline: 6px; font-weight: 900; font-size: .92rem; }
.group-picker > small { display: block; margin-top: 9px; color: var(--muted); font-size: .75rem; }
.group-picker-options { display: grid; gap: 7px; max-height: 330px; overflow-y: auto; padding-right: 3px; }
.group-picker-options > label { display: grid; grid-template-columns: 21px minmax(0,1fr); gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid #dfe5f0; border-radius: 11px; background: #fafbfe; cursor: pointer; }
.group-picker-options input { width: 19px; min-height: 19px; margin: 0; accent-color: var(--primary); }
.group-picker-options span, .group-picker-options strong, .group-picker-options small { display: block; min-width: 0; }
.group-picker-options strong { font-size: .82rem; }
.group-picker-options small { color: var(--muted); font-size: .69rem; }
.settings-self-only { width: min(680px,100%); }
.followed-tag { display: inline-flex; align-items: center; width: fit-content; margin: 5px 0 0; padding: 4px 8px; border-radius: 8px; color: #12623e; background: var(--mint); font-size: .67rem; font-weight: 900; line-height: 1.35; }
.followed-tag-on-dark { color: white; background: rgba(255,255,255,.2); }
.upload-field output { min-height: 0; color: var(--primary); font-size: .78rem; font-weight: 800; }
.timeline-actions { display: flex; align-items: center; gap: 11px; }
.followup-photo-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 10px; }
.followup-photo-grid-compact { grid-template-columns: repeat(auto-fill,minmax(92px,130px)); margin-top: 12px; }
.followup-photo-grid img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--border); border-radius: 11px; background: #eef1f7; }
.followup-photo-manager > .followup-photo-grid > label { position: relative; min-width: 0; padding: 7px; border: 1px solid var(--border); border-radius: 12px; background: #fafbfe; }
.followup-photo-manager label > span { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--red); font-size: .72rem; font-weight: 800; }
.followup-photo-manager input[type="checkbox"] { width: 18px; min-height: 18px; margin: 0; accent-color: var(--red); }
.print-photo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8mm; }
.print-photo-grid figure { break-inside: avoid; margin: 0; padding: 3mm; border: 1px solid #aaa; }
.print-photo-grid img { display: block; width: 100%; max-height: 105mm; object-fit: contain; }
.print-photo-grid figcaption { margin-top: 2mm; color: #555; font-size: 9pt; text-align: center; overflow-wrap: anywhere; }
.print-signature-section { margin-top: 25mm; }

/* Version 1.9 case-management workflow */
.case-badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border-radius: 9px; font-size: .7rem; font-weight: 900; line-height: 1.35; white-space: nowrap; }
.case-pending { color: #815000; background: var(--amber-soft); }
.case-in_progress { color: #2443ad; background: var(--primary-soft); }
.case-follow_up { color: #155e75; background: #dff5fa; }
.case-closed { color: var(--green); background: var(--mint); }
.case-overdue-badge { display: inline-flex; width: fit-content; padding: 5px 9px; border-radius: 9px; color: white; background: var(--red); font-size: .7rem; font-weight: 900; white-space: nowrap; }
.text-danger { color: var(--red) !important; }
.case-progress-panel { margin-bottom: 18px; padding: 18px 22px; }
.case-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.case-progress-heading > div { display: flex; align-items: baseline; gap: 9px; }
.case-progress-heading span { color: var(--muted); font-size: .74rem; font-weight: 800; }
.case-progress-heading strong { font-size: 1.1rem; }
.case-stepper { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.case-stepper li { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: start; min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: #f8f9fc; }
.case-stepper li > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #7a8497; background: #e8ecf3; font-size: .78rem; font-weight: 900; }
.case-stepper li strong, .case-stepper li small { display: block; }
.case-stepper li strong { margin-top: 1px; font-size: .82rem; }
.case-stepper li small { margin-top: 2px; color: var(--muted); font-size: .63rem; line-height: 1.45; }
.case-stepper li.is-done { border-color: #b9e7d2; background: #f7fdfb; }
.case-stepper li.is-done > span { color: white; background: var(--green); }
.case-stepper li.is-current { border-color: #91a8ef; background: #f2f5ff; box-shadow: inset 0 0 0 1px rgba(49,86,211,.12); }
.case-stepper li.is-current > span { color: white; background: var(--primary); box-shadow: 0 6px 15px rgba(49,86,211,.22); }
.case-stepper li.is-future { opacity: .68; }
.case-overview-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,.9fr); gap: 18px; margin-bottom: 18px; }
.case-overview-grid .risk-hero { display: grid; align-content: center; min-height: 154px; }
.case-summary-card { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.case-summary-card > div { padding: 11px 12px; border-radius: 11px; background: #f6f8fb; }
.case-summary-card span, .case-summary-card strong { display: block; }
.case-summary-card span { color: var(--muted); font-size: .69rem; }
.case-summary-card strong { margin-top: 3px; font-size: .82rem; }
.case-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; align-items: start; }
.case-sidebar { position: sticky; top: 86px; }
.case-command-panel { overflow: hidden; border-color: #cbd6f5; }
.case-command-copy { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 13px; align-items: start; }
.case-command-copy h2 { margin: 1px 0 3px; font-size: 1.15rem; }
.case-command-copy p { margin: 0; color: var(--muted); font-size: .8rem; }
.case-command-number { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: white; background: var(--primary); font-size: 1rem; font-weight: 900; }
.case-open-form, .case-work-details, .case-reopen-box { margin-top: 18px; }
.case-work-details, .case-reopen-box { border-top: 1px solid var(--border); padding-top: 15px; }
.case-work-details > summary, .case-reopen-box > summary { width: fit-content; padding: 9px 13px; border-radius: 11px; color: var(--primary); background: var(--primary-soft); cursor: pointer; font-size: .82rem; font-weight: 900; }
.case-work-details[open] > summary, .case-reopen-box[open] > summary { margin-bottom: 16px; }
.case-next-task { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 16px; padding: 14px; border: 1px solid #b7dfe8; border-radius: 13px; background: #f1fbfd; }
.case-next-task > div { min-width: 0; }
.case-next-task span, .case-next-task strong { display: block; }
.case-next-task span { color: #47717b; font-size: .68rem; font-weight: 800; }
.case-next-task strong { margin-top: 2px; font-size: .85rem; overflow-wrap: anywhere; }
.case-next-task time { flex: 0 0 auto; color: #155e75; font-size: .76rem; font-weight: 900; }
.case-next-task.is-overdue { border-color: #efb3c1; background: #fff5f6; }
.case-next-task.is-overdue span, .case-next-task.is-overdue time { color: var(--red); }
.case-form-section { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: 14px; }
.case-form-section legend { padding-inline: 6px; font-size: .86rem; font-weight: 900; }
.case-action-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.case-action-options label { position: relative; min-width: 0; cursor: pointer; }
.case-action-options input { position: absolute; opacity: 0; pointer-events: none; }
.case-action-options label > span { display: block; height: 100%; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: #f9fafc; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.case-action-options strong, .case-action-options small { display: block; }
.case-action-options strong { font-size: .82rem; }
.case-action-options small { margin-top: 3px; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.case-action-options input:checked + span { border-color: #7893e7; background: var(--primary-soft); box-shadow: inset 0 0 0 1px rgba(49,86,211,.12); }
.case-action-options input:focus-visible + span { outline: 3px solid rgba(49,86,211,.24); outline-offset: 2px; }
.case-conditional-fields { margin-top: 13px; padding-top: 13px; border-top: 1px dashed #cfd7e5; }
.case-close-summary { margin-top: 16px; padding: 15px; border: 1px solid #b9e7d2; border-radius: 13px; background: #f7fdfb; }
.case-close-summary span { color: var(--green); font-size: .7rem; font-weight: 900; }
.case-close-summary p { margin: 5px 0; }
.case-close-summary small { color: var(--muted); }
.case-readonly-note, .case-edit-notice { display: grid; gap: 2px; margin-top: 16px; padding: 13px 14px; border: 1px solid #cfd8e8; border-radius: 12px; color: #4f5d7d; background: #f7f9fd; font-size: .78rem; }
.case-edit-notice { margin: 0 0 18px; }
.case-edit-notice strong { color: var(--text); }
.case-assignee-form { display: grid; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.case-assignee-form .button { width: 100%; }
.activity-badge { display: inline-flex; padding: 4px 8px; border-radius: 8px; color: #4f5d7d; background: #e9edf4; font-size: .65rem; font-weight: 900; }
.case-status-event { border-left-color: var(--green); background: #f7fdfb; }
.case-activity-event { border-left-color: var(--primary); }
.case-evidence-panel > .panel-description { margin: 10px 0 14px; color: var(--muted); font-size: .78rem; }
.case-status-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin-bottom: 18px; }
.case-status-tabs a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: white; text-decoration: none; }
.case-status-tabs span { min-width: 0; color: var(--muted); font-size: .7rem; font-weight: 800; }
.case-status-tabs strong { color: var(--text); font-size: .95rem; }
.case-status-tabs a.is-active { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px rgba(49,86,211,.12); }
.case-status-tabs a.is-active span, .case-status-tabs a.is-active strong { color: var(--primary-dark); }
.case-status-tabs a.is-overdue strong { color: var(--red); }
.case-list { display: grid; gap: 10px; }
.case-list-item { display: grid; grid-template-columns: 94px minmax(200px,1.1fr) minmax(150px,.7fr) minmax(190px,1fr) auto; gap: 14px; align-items: center; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: #fbfcff; }
.case-list-item.is-overdue { border-color: #efb3c1; background: #fffafb; }
.case-list-risk, .case-list-student, .case-list-status, .case-list-next { display: grid; align-content: center; min-width: 0; }
.case-list-risk { justify-items: start; }
.case-list-risk small, .case-list-student span, .case-list-student small, .case-list-status small, .case-list-next span, .case-list-next small { color: var(--muted); font-size: .68rem; }
.case-list-student > strong, .case-list-next > strong { overflow-wrap: anywhere; }
.case-list-student > strong { font-size: .86rem; }
.case-list-next > strong { font-size: .78rem; }
.case-list-status { gap: 5px; }
.case-list-action .button { white-space: nowrap; }
.case-mini-metrics { grid-template-columns: repeat(4,1fr); }
.case-mini-metrics .is-overdue { background: var(--red-soft); }
.case-mini-metrics .is-overdue strong { color: var(--red); }
.print-activity-item { break-inside: avoid; margin: 10px 0 16px; padding: 10px; border: 1px solid #aaa; }
.print-activity-item h3 { margin: 0 0 8px; font-size: 11.5pt; }
.print-activity-item .print-photo-grid { margin-top: 8px; }
.print-case-event-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.print-case-event-table th, .print-case-event-table td { padding: 2.5mm; border: 1px solid #aaa; text-align: left; vertical-align: top; }
.print-case-event-table th { background: #f0f0f0; }
.print-case-event-table small { color: #555; }


@media (max-width: 820px) {
    body { font-size: 16px; }
    .admin-body.sidebar-open { overflow: hidden; }
    .hero { padding-top: 58px; }
    .hero-grid { grid-template-columns: 1fr; gap: 46px; }
    .hero-panel { max-width: 620px; }
    .info-grid { grid-template-columns: 1fr; }
    .footer-inner { display: grid; }
    .answer-legend { display: none; }
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar { position: fixed; z-index: 40; width: 270px; left: 0; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 18px 0 45px rgba(16,24,45,.25); }
    .admin-sidebar.is-open { transform: translateX(0); }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(15,23,42,.45); }
    .sidebar-backdrop.is-open { display: block; }
    .menu-toggle { display: grid; place-items: center; }
    .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dashboard-grid, .lower-grid, .split-layout, .case-overview-grid, .case-layout { grid-template-columns: 1fr; }
    .case-sidebar { position: static; }
    .case-stepper { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .case-status-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .case-list-item { grid-template-columns: 90px minmax(0,1fr) minmax(150px,.7fr); }
    .case-list-next { grid-column: 2/4; }
    .case-list-action { grid-column: 1/4; }
    .case-list-action .button { width: 100%; }
    .criteria-level-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .criteria-grid { grid-template-columns: 1fr; }
    .page-heading { align-items: stretch; flex-direction: column; }
    .campaign-filter select { min-width: 0; }
    .student-welcome { align-items: stretch; flex-direction: column; }
    .student-welcome > .button { align-self: flex-start; }
    .student-dashboard-grid { grid-template-columns: 1fr; }
    .profile-admin-grid, .profile-self-card { grid-template-columns: 190px minmax(0,1fr); }
    .assessment-identity { grid-template-columns: 1fr; }
    .assessment-identity-person { flex-direction: row; text-align: left; }
}

@media (max-width: 620px) {
    .container { width: min(100% - 24px, 1160px); }
    .page-space { padding-block: 28px 52px; }
    .header-inner { min-height: 68px; }
    .brand-mark { width: 40px; height: 40px; flex-basis: 40px; border-radius: 13px; }
    .brand strong { font-size: .9rem; }
    .brand small { display: none; }
    .public-nav { gap: 5px; }
    .student-link, .staff-link { padding: 8px 9px; font-size: .74rem; }
    .hero { padding-block: 46px; }
    .hero h1 br { display: none; }
    .signal-card:nth-child(2) { transform: none; }
    .privacy-inner { align-items: flex-start; }
    .privacy-icon { width: 44px; height: 44px; flex-basis: 44px; }
    .card { border-radius: 18px; padding: 20px 16px; }
    .survey-progress { top: 76px; }
    .survey-heading h1 { font-size: 1.8rem; }
    .survey-heading p { font-size: .92rem; }
    .section-title { gap: 12px; }
    .section-title > span { width: 36px; height: 36px; flex-basis: 36px; }
    .form-grid { grid-template-columns: 1fr; }
    .field-wide { grid-column: auto; }
    .choice-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .choice span { min-height: 66px; }
    .survey-actions { position: sticky; bottom: 0; z-index: 9; margin: 0 -16px -20px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--border); backdrop-filter: blur(10px); }
    .survey-actions .button { min-height: 48px; flex: 1 1 0; padding-inline: 12px; }
    .survey-action-hint { display: none; }
    input, select, textarea { font-size: 16px; }
    .setup-summary { display: grid; }
    .admin-content { padding-inline: 12px; }
    .admin-topbar { padding-inline: 12px; }
    .view-public { display: none; }
    .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .metric-card { padding: 16px; }.metric-card strong { font-size: 1.65rem; }
    .panel { padding: 17px 14px; }
    .panel-heading { align-items: flex-start; flex-direction: column; }
    .panel-heading > .inline-upload { width: 100%; align-items: stretch; }
    .case-page-heading .panel-actions .button { flex: 1 1 100%; }
    .case-progress-panel { padding: 15px 12px; }
    .case-progress-heading { align-items: flex-start; }
    .case-stepper { grid-template-columns: 1fr; gap: 7px; }
    .case-stepper li { grid-template-columns: 34px minmax(0,1fr); padding: 10px; }
    .case-stepper li > span { width: 34px; height: 34px; }
    .case-stepper li small { font-size: .68rem; }
    .case-summary-card { grid-template-columns: 1fr; }
    .case-command-panel { padding-inline: 14px; }
    .case-command-copy { grid-template-columns: 40px minmax(0,1fr); }
    .case-command-number { width: 40px; height: 40px; border-radius: 12px; }
    .case-next-task { align-items: flex-start; flex-direction: column; }
    .case-action-options { grid-template-columns: 1fr; }
    .case-work-form > .button-block { position: sticky; bottom: 0; z-index: 8; min-height: 48px; box-shadow: 0 -8px 20px rgba(23,33,58,.08); }
    .case-status-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .case-list-panel { padding-inline: 12px; }
    .case-list-item { grid-template-columns: 1fr; gap: 10px; }
    .case-list-risk { display: flex; align-items: center; gap: 7px; }
    .case-list-next, .case-list-action { grid-column: auto; }
    .case-list-status { align-items: start; }
    .case-mini-metrics { grid-template-columns: repeat(2,1fr); }
    .inline-upload .import-advisor-field, .inline-upload input[type="file"], .inline-upload .button { width: 100%; max-width: none; }
    .risk-overview { flex-direction: column; gap: 18px; }
    #risk-chart { max-width: 210px; }
    .chart-legend { width: 100%; }
    .detail-grid { grid-template-columns: 1fr; }.detail-wide { grid-column: auto; }
    .link-box { flex-direction: column; }.link-box input { min-width: 0; }
    .toolbar > .field, .toolbar > .button { width: 100%; min-width: 0; }
    .toolbar .field.search { flex-basis: auto; }
    .advisor-roster-summary { display: grid; grid-template-columns: 1fr 1fr; }
    .advisor-roster-summary span { justify-content: center; }
    .student-group-header { align-items: flex-start; padding: 16px 14px; }
    .student-group-identity { align-items: flex-start; }
    .student-group-identity h2 { font-size: 1rem; }
    .student-group-count { padding: 7px 10px; }
    .campaign-main { align-items: flex-start; }.campaign-count { min-width: 55px; }
    .answer-list > div, .urgent-reason { align-items: flex-start; flex-direction: column; gap: 6px; }
    .criteria-callout { grid-template-columns: 1fr; padding: 16px; }
    .criteria-level-grid { gap: 9px; }
    .criteria-level { padding: 16px 14px; }
    .criteria-level > strong { font-size: 1.22rem; }
    .formula-box { padding: 18px 16px; }
    .critical-item { grid-template-columns: 1fr; gap: 8px; }
    .question-category-filter { align-items: stretch; flex-direction: column; }
    .question-category-filter .button { width: 100%; }
    .category-editor-panel { position: static; }
    .management-table, .management-table tbody, .management-table tr, .management-table td { display: block; min-width: 0; width: 100%; }
    .management-table thead { display: none; }
    .management-table tbody { display: grid; gap: 12px; }
    .management-table tr { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
    .management-table td { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 10px; padding: 10px 12px; border-bottom: 1px solid #edf0f5; }
    .management-table td:last-child { border-bottom: 0; }
    .management-table td::before { content: attr(data-label); color: var(--muted); font-size: .7rem; font-weight: 800; }
    .management-table td[data-label="คำถาม"], .management-table td[data-label="ชื่อหมวด"] { grid-template-columns: 1fr; }
    .management-table td[data-label="คำถาม"]::before, .management-table td[data-label="ชื่อหมวด"]::before { margin-bottom: -3px; }
    .management-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
    .management-actions .order-actions { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; }
    .management-actions form, .management-actions .button, .order-actions form, .order-actions .button { width: 100%; }
    .group-picker-options { max-height: 280px; }
    .followup-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .followup-photo-grid-compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .timeline-actions { width: 100%; justify-content: flex-start; }
    .student-portal { padding-block: 28px 52px; }
    .student-welcome { padding: 20px 16px; }
    .student-profile-summary { align-items: flex-start; gap: 15px; }
    .student-profile-summary .profile-avatar-xl { width: 82px; height: 82px; font-size: 1.05rem; }
    .student-profile-summary h1 { font-size: 1.5rem; }
    .student-profile-summary > div > p:not(.eyebrow) { font-size: .82rem; }
    .student-profile-summary .tag-list { display: grid; }
    .student-metrics { grid-template-columns: 1fr; gap: 8px; }
    .student-campaign { align-items: stretch; flex-direction: column; gap: 13px; }
    .student-campaign .button { width: 100%; }
    .profile-admin-grid, .profile-self-card { grid-template-columns: 1fr; }
    .profile-photo-editor { padding: 15px; }
    .assessment-identity-person { align-items: center; flex-direction: column; text-align: center; }
    .profile-confirm-note { grid-template-columns: 34px minmax(0,1fr); }
    .profile-confirm-note .button { grid-column: 1/-1; width: 100%; }
}

@media (max-width: 390px) {
    .container { width: min(100% - 18px, 1160px); }
    .brand strong { max-width: 185px; }
    .brand > span:last-child { display: none; }
    .student-link, .staff-link { padding-inline: 8px; font-size: .7rem; }
    .choice-row { gap: 8px; }
    .choice span { padding-inline: 5px; }
    .criteria-level-grid { grid-template-columns: 1fr; }
    .metric-grid { grid-template-columns: 1fr; }
    .followup-photo-grid-compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* v3.4.8 — Official A4 report readability + evidence appendix */
.case-print-sheet {
    font-size: 14pt;
    line-height: 1.55;
}
.case-print-sheet .print-header h1 { font-size: 21pt; }
.case-print-sheet .print-section h2 { font-size: 15pt; }
.case-print-sheet .print-activity-item h3 { font-size: 14pt; }
.case-print-sheet .print-case-event-table { font-size: 12pt; }
.print-appendix { margin-top: 22mm; }
.print-appendix-header { text-align: center; margin-bottom: 8mm; }
.print-appendix-header .appendix-kicker { font-weight: 800; font-size: 16pt; }
.print-appendix-header h2 { margin: 2mm 0 1mm; font-size: 19pt; }
.print-appendix-header p { margin: 0; color: #4b5563; }
.print-appendix-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8mm 7mm; }
.print-appendix-figure { margin: 0; padding: 3mm; border: 1px solid #aaa; break-inside: avoid; }
.print-appendix-image { height: 68mm; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
.print-appendix-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.print-appendix-figure figcaption { margin-top: 2.5mm; font-size: 11.5pt; line-height: 1.4; text-align: left; }
.print-appendix-figure figcaption strong,
.print-appendix-figure figcaption span { display: block; }

@media print {
    @page {
        size: A4 portrait;
        margin: 18mm 16mm 18mm 18mm;
    }

    html, body {
        width: 100%;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #111 !important;
        font-size: 11.5pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .public-header, .public-footer, .survey-actions, .staff-link, .no-print {
        display: none !important;
    }

    .card { border: 1px solid #bbb; box-shadow: none; }
    .page-space { padding: 0; }

    /* A4 report pages must paginate naturally. Never let one long value
       widen the printable canvas and make Chromium scale the whole report. */
    .print-body { background: #fff !important; }
    .print-sheet {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        overflow: visible !important;
        font-family: "TH Sarabun New", "Sarabun", "Noto Sans Thai", Tahoma, sans-serif;
        font-size: 11.5pt;
        line-height: 1.45;
    }

    .print-sheet *,
    .print-sheet *::before,
    .print-sheet *::after {
        box-sizing: border-box;
        max-width: 100%;
    }

    .print-sheet p,
    .print-sheet td,
    .print-sheet th,
    .print-sheet li,
    .print-sheet figcaption,
    .print-sheet .full {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    .print-header {
        break-after: avoid-page;
        page-break-after: avoid;
        padding-bottom: 3mm;
        border-bottom: 1.5pt solid #111;
    }
    .print-header h1 { font-size: 18pt; line-height: 1.2; }
    .print-header p { line-height: 1.35; }

    /* Sections may continue on the next sheet. The previous rule used
       break-inside:avoid for entire sections and produced pathological scaling. */
    .print-section,
    .print-photo-section,
    .print-activity-section,
    .print-activity-item {
        break-inside: auto !important;
        page-break-inside: auto !important;
    }
    .print-section { margin-top: 4.5mm; }
    .print-section h2,
    .print-activity-item h3 {
        break-after: avoid-page;
        page-break-after: avoid;
    }
    .print-section h2 {
        margin: 0 0 2.5mm;
        padding: 1.5mm 2.2mm;
        background: #eef1f7 !important;
        font-size: 13pt;
    }

    .print-grid {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
        gap: 1.3mm 7mm;
        min-width: 0;
    }
    .print-grid > *,
    .print-grid p {
        min-width: 0;
        margin: .7mm 0;
    }
    .print-grid p { break-inside: avoid-page; page-break-inside: avoid; orphans: 3; widows: 3; }

    .print-case-event-table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 9.5pt;
    }
    .print-case-event-table thead {
        display: table-header-group;
    }
    .print-case-event-table tr {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }
    .print-case-event-table th,
    .print-case-event-table td {
        min-width: 0;
        padding: 1.8mm 2mm;
        vertical-align: top;
    }
    .print-case-event-table th:nth-child(1) { width: 20%; }
    .print-case-event-table th:nth-child(2) { width: 24%; }
    .print-case-event-table th:nth-child(3) { width: 20%; }
    .print-case-event-table th:nth-child(4) { width: 36%; }

    .print-activity-item {
        margin: 3mm 0 5mm;
        padding: 3mm;
        border: 1px solid #aaa;
    }
    .print-activity-item > h3 {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    /* Grid fragmentation is unreliable in Chromium print. Inline blocks
       give a stable two-photo-per-row layout and paginate naturally. */
    .print-photo-grid {
        display: block !important;
        width: 100%;
        margin-top: 3mm !important;
        font-size: 0;
    }
    .print-photo-grid figure {
        display: inline-block;
        width: 48.5% !important;
        margin: 0 3% 4mm 0 !important;
        padding: 2.5mm;
        vertical-align: top;
        break-inside: avoid-page;
        page-break-inside: avoid;
        font-size: 9pt;
    }
    .print-photo-grid figure:nth-child(2n) { margin-right: 0 !important; }
    .print-photo-grid img {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-height: 76mm !important;
        object-fit: contain;
    }
    .print-photo-grid figcaption {
        margin-top: 1.5mm;
        font-size: 8.5pt;
        line-height: 1.25;
    }

    .print-signature-section,
    .signature-grid {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }
    .signature-grid {
        gap: 15mm;
        margin-top: 12mm;
        font-size: 10.5pt;
    }

    /* v3.4.8: case report uses official-document reading size. */
    .case-print-sheet {
        font-size: 16pt;
        line-height: 1.5;
    }
    .case-print-sheet .print-header h1 { font-size: 22pt; }
    .case-print-sheet .print-header p { font-size: 15pt; line-height: 1.4; }
    .case-print-sheet .print-section h2 { font-size: 17pt; line-height: 1.3; }
    .case-print-sheet .print-activity-item h3 { font-size: 15pt; line-height: 1.35; }
    .case-print-sheet .print-case-event-table { font-size: 13.5pt; line-height: 1.4; }
    .case-print-sheet .print-case-event-table th,
    .case-print-sheet .print-case-event-table td { padding: 2mm 2.2mm; }
    .case-print-sheet .signature-grid { font-size: 14pt; }

    /* Evidence is an appendix, not part of the narrative body. */
    .print-appendix {
        break-before: page;
        page-break-before: always;
        margin: 0 !important;
        padding: 0 !important;
    }
    .print-appendix-header {
        break-after: avoid-page;
        page-break-after: avoid;
        margin: 0 0 8mm;
        text-align: center;
    }
    .print-appendix-header .appendix-kicker { font-size: 18pt; }
    .print-appendix-header h2 { margin: 1.5mm 0 1mm; font-size: 20pt; }
    .print-appendix-header p { margin: 0; font-size: 14pt; line-height: 1.4; }
    .print-appendix-grid {
        display: block !important;
        width: 100%;
        font-size: 0;
    }
    .print-appendix-figure {
        display: inline-block;
        width: 48.5% !important;
        margin: 0 3% 6mm 0 !important;
        padding: 2.5mm;
        border: 1px solid #aaa;
        break-inside: avoid-page;
        page-break-inside: avoid;
        vertical-align: top;
        font-size: 11.5pt;
    }
    .print-appendix-figure:nth-child(2n) { margin-right: 0 !important; }
    .print-appendix-image {
        height: 62mm;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .print-appendix-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }
    .print-appendix-figure figcaption {
        margin-top: 2mm;
        font-size: 11.5pt;
        line-height: 1.35;
        text-align: left;
    }
}

/* v2.2 — student-safe landing experience */
.student-safe-home { overflow: hidden; background: linear-gradient(180deg,#f9fcff 0,#fff 42%); }
.care-hero { position: relative; padding: 68px 0 54px; background: radial-gradient(circle at 8% 10%,rgba(81,124,231,.10),transparent 30%),radial-gradient(circle at 88% 15%,rgba(53,185,156,.12),transparent 28%),linear-gradient(135deg,#f7fbff 0%,#fbfffd 100%); border-bottom: 1px solid #e8f0f6; }
.care-hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); gap:54px; align-items:center; }
.care-kicker { display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid #d9e7ff; background:#fff; color:#3159b8; border-radius:999px; font-weight:800; font-size:.82rem; box-shadow:0 8px 26px rgba(48,83,155,.07); }
.care-kicker span { color:#ef7186; font-size:1.1rem; }
.care-hero h1 { margin:18px 0 15px; max-width:760px; color:#182746; font-size:clamp(2.25rem,4.3vw,4.15rem); line-height:1.08; letter-spacing:-.035em; }
.care-hero h1 span { color:#3372d7; background:linear-gradient(90deg,#356ddd,#2ea68d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.care-lead { max-width:720px; margin:0; color:#53627b; font-size:1.08rem; line-height:1.9; }
.care-promise-row { display:flex; flex-wrap:wrap; gap:9px; margin:23px 0; }
.care-promise-row span { padding:8px 11px; border-radius:12px; background:#fff; border:1px solid #e0e9f4; color:#3f5069; font-size:.82rem; font-weight:750; box-shadow:0 5px 18px rgba(40,70,120,.045); }
.care-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:13px; }
.care-primary { box-shadow:0 12px 30px rgba(49,86,211,.22); }
.care-round-label { color:#65728a; font-size:.79rem; max-width:360px; }
.care-round-label strong { color:#33435e; }
.care-visual { position:relative; min-height:470px; display:grid; place-items:center; isolation:isolate; }
.care-student-art { width:min(100%,520px); filter:drop-shadow(0 26px 36px rgba(50,79,120,.12)); z-index:2; }
.care-orbit { position:absolute; border:1px dashed rgba(60,117,197,.20); border-radius:50%; z-index:-1; }
.care-orbit-one { width:440px; height:440px; }
.care-orbit-two { width:340px; height:340px; border-color:rgba(42,166,137,.24); }
.care-float { position:absolute; z-index:4; display:grid; place-items:center; width:54px; height:54px; border-radius:18px; background:#fff; box-shadow:0 15px 34px rgba(47,73,110,.13); font-weight:900; }
.care-float-heart { top:48px; right:24px; color:#ef788b; transform:rotate(7deg); font-size:1.25rem; }
.care-float-lock { left:20px; bottom:100px; color:#27a187; transform:rotate(-7deg); font-size:1.25rem; }
.care-visual-caption { position:absolute; z-index:5; right:18px; bottom:0; max-width:340px; padding:15px 17px; border:1px solid rgba(213,228,240,.9); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-radius:18px; box-shadow:0 13px 35px rgba(47,77,120,.1); }
.care-visual-caption strong,.care-visual-caption span { display:block; }.care-visual-caption strong { color:#253a5e; font-size:.86rem; }.care-visual-caption span { margin-top:4px; color:#6b778c; font-size:.72rem; line-height:1.65; }
.care-trust-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.care-trust-card { display:grid; grid-template-columns:52px minmax(0,1fr); gap:14px; align-items:start; padding:22px; border:1px solid #e5edf5; border-radius:22px; background:#fff; box-shadow:0 12px 34px rgba(43,70,105,.055); }
.care-trust-card h2 { margin:1px 0 6px; color:#223655; font-size:1rem; }.care-trust-card p { margin:0; color:#68758a; font-size:.83rem; line-height:1.75; }
.care-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:17px; font-weight:900; font-size:1.2rem; }.care-icon-blue{background:#eaf1ff;color:#315ed0}.care-icon-green{background:#e7faf4;color:#29987f}.care-icon-orange{background:#fff1e6;color:#dc7a31}
.care-how-section { padding:62px 0; background:#f6fafc; border-block:1px solid #e8eff5; }
.care-section-heading { max-width:720px; margin:0 auto 28px; text-align:center; }.care-section-heading > span { color:#3570cf; font-size:.78rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.care-section-heading h2 { margin:8px 0; color:#203554; font-size:clamp(1.55rem,2.8vw,2.35rem); }.care-section-heading p { margin:0; color:#6b788c; }
.care-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.care-steps article { position:relative; padding:25px 23px 24px; border-radius:22px; background:#fff; border:1px solid #e1ebf3; }.care-steps article > span { display:grid; place-items:center; width:38px; height:38px; margin-bottom:16px; border-radius:13px; background:#edf3ff; color:#315dc9; font-weight:900; }.care-steps h3 { margin:0 0 7px; color:#263a57; font-size:1rem; }.care-steps p { margin:0; color:#6b778a; font-size:.82rem; line-height:1.72; }
.care-privacy-card { display:grid; grid-template-columns:72px minmax(0,1fr); gap:20px; align-items:center; padding:28px 30px; border:1px solid #dbe9e6; border-radius:24px; background:linear-gradient(135deg,#f8fffc,#f8fbff); box-shadow:0 15px 40px rgba(47,89,109,.06); }.care-privacy-card h2 { margin:4px 0 7px; color:#24435b; font-size:1.2rem; }.care-privacy-card p { margin:0; color:#607387; line-height:1.78; font-size:.86rem; }.care-privacy-card small { display:block; margin-top:9px; color:#7a8998; }.care-privacy-shield { display:grid; place-items:center; width:68px; height:68px; border-radius:22px; background:linear-gradient(145deg,#e6f2ff,#e5faf4); color:#2c9a82; font-size:1.6rem; font-weight:900; }
.student-safety-intro { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:20px; align-items:center; margin-bottom:18px; padding:23px 24px; border:1px solid #deebf4; border-radius:24px; background:linear-gradient(135deg,#f7fbff,#f4fffb); box-shadow:0 12px 35px rgba(48,77,112,.05); }.student-safety-intro h2 { margin:5px 0 7px; color:#243b5b; font-size:1.22rem; }.student-safety-intro p { margin:0; color:#66768a; line-height:1.75; font-size:.85rem; }.student-safety-bubbles { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.student-safety-bubbles span { padding:8px 10px; border-radius:12px; background:#fff; border:1px solid #deebf3; font-size:.72rem; color:#53657a; font-weight:800; }
.student-login-safe-note { display:grid; grid-template-columns:45px minmax(0,1fr); gap:12px; margin:0 0 18px; padding:14px; border-radius:16px; background:#f1fbf8; border:1px solid #d5efe8; }.student-login-safe-note > span { display:grid; place-items:center; width:45px; height:45px; border-radius:14px; background:#fff; color:#289c83; font-weight:900; }.student-login-safe-note strong { display:block; color:#31566a; font-size:.86rem; }.student-login-safe-note p { margin:3px 0 0; color:#6a7f8c; font-size:.76rem; line-height:1.55; }
@media (max-width:900px){.care-hero-grid{grid-template-columns:1fr}.care-visual{min-height:410px}.care-trust-grid,.care-steps{grid-template-columns:1fr}.care-trust-card{max-width:none}.student-safety-intro{grid-template-columns:1fr}.student-safety-bubbles{justify-content:flex-start}}
@media (max-width:620px){.care-hero{padding:40px 0 35px}.care-hero h1{font-size:2.25rem}.care-lead{font-size:.95rem}.care-visual{min-height:340px}.care-orbit-one{width:330px;height:330px}.care-orbit-two{width:260px;height:260px}.care-visual-caption{position:relative;right:auto;bottom:auto;margin-top:-30px}.care-trust-card{grid-template-columns:44px minmax(0,1fr);padding:18px}.care-icon{width:44px;height:44px;border-radius:14px}.care-privacy-card{grid-template-columns:1fr;padding:21px 18px}.care-privacy-shield{width:55px;height:55px;border-radius:17px}.care-how-section{padding:42px 0}.care-promise-row span{font-size:.75rem}.care-hero-actions .button{width:100%}.care-round-label{max-width:none}}

/* v2.3 — operational & shape-first student experience */
.shape-home{overflow:hidden;background:linear-gradient(180deg,#fbfdff,#fff 62%);min-height:80vh}.shape-hero{position:relative;padding:68px 0 36px;isolation:isolate}.shape-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);gap:38px;align-items:center}.shape-blob{position:absolute;border-radius:42% 58% 62% 38%/50% 42% 58% 50%;filter:blur(.1px);z-index:-1}.blob-a{width:420px;height:360px;right:-90px;top:-70px;background:#e9f6ff;transform:rotate(14deg)}.blob-b{width:320px;height:260px;left:-120px;top:110px;background:#fff2d7;transform:rotate(-15deg)}.blob-c{width:220px;height:180px;right:32%;bottom:-40px;background:#e7fbf3;transform:rotate(9deg)}.shape-kicker{display:inline-flex;padding:9px 14px;border-radius:999px;background:#fff;border:1px solid #e5ebf5;box-shadow:0 10px 28px rgba(53,75,115,.07);font-weight:850;color:#586b8a;font-size:.8rem}.shape-copy h1{margin:18px 0 10px;color:#26395c;font-size:clamp(3rem,6vw,5.7rem);line-height:.92;letter-spacing:-.055em}.shape-copy h1 span{color:#5079df}.shape-copy>p{margin:0 0 20px;color:#77849a;font-size:1.02rem}.shape-round-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;background:#ebfaf4;color:#2d806e;font-size:.77rem;font-weight:800}.shape-round-pill.is-paused{background:#f3f4f7;color:#7b8390}.shape-art{position:relative;min-height:340px;display:grid;place-items:center}.art-students{display:flex;align-items:end;gap:14px}.art-students span{display:grid;place-items:center;width:148px;height:188px;border-radius:72px 72px 36px 36px;background:linear-gradient(160deg,#e7edff,#fff);border:8px solid #fff;box-shadow:0 20px 50px rgba(58,81,126,.12);font-size:4rem;color:#4f69a4}.art-students span+span{width:134px;height:172px;background:linear-gradient(160deg,#e4f8f1,#fff);color:#3c947f;transform:translateY(18px)}.art-circle{position:absolute;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 13px 34px rgba(54,80,115,.12);font-weight:900}.art-one{width:62px;height:62px;left:8%;top:12%;color:#f19b58;font-size:1.5rem}.art-two{width:78px;height:78px;right:7%;top:3%;color:#f07f9c;font-size:2rem}.art-three{width:54px;height:54px;right:3%;bottom:22%;color:#36a489;font-size:1.4rem}.art-card{position:absolute;left:3%;bottom:2%;padding:14px 17px;border-radius:18px;background:#fff;border:1px solid #e9eef5;box-shadow:0 14px 36px rgba(60,78,110,.10);transform:rotate(-3deg)}.art-card b,.art-card small{display:block}.art-card b{color:#344b72}.art-card small{color:#8b95a5;margin-top:2px}.shape-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}.shape-action{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) 28px;grid-template-rows:auto auto;gap:2px 13px;align-items:center;padding:22px;border-radius:28px;text-decoration:none;box-shadow:0 14px 34px rgba(45,66,98,.08);transition:transform .16s ease,box-shadow .16s ease}.shape-action:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(45,66,98,.13)}.shape-action-blue{background:#e9f0ff;color:#355eb8}.shape-action-mint{background:#e7f9f3;color:#2c846f}.shape-action-peach{background:#fff0e8;color:#c96e4d}.shape-action-icon{grid-row:1/3;display:grid;place-items:center;width:58px;height:58px;border-radius:20px;background:rgba(255,255,255,.8);font-size:1.45rem}.shape-action strong{font-size:1.05rem}.shape-action small{color:currentColor;opacity:.72}.shape-action i{grid-column:3;grid-row:1/3;font-style:normal;font-size:1.5rem}.shape-trust{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:24px 0 38px}.shape-trust span{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid #e8edf4;border-radius:999px;background:#fff;color:#738096;font-size:.78rem}.shape-trust b{color:#4a87c9}.shape-help{display:grid;grid-template-columns:82px minmax(0,1fr);gap:20px;align-items:center;margin-bottom:20px;padding:27px 30px;border-radius:30px;background:linear-gradient(130deg,#fff8f3,#f6fbff);border:1px solid #ececf1}.shape-help-heart{display:grid;place-items:center;width:76px;height:76px;border-radius:26px;background:#fff;color:#ec7993;font-size:2rem;box-shadow:0 10px 25px rgba(73,72,96,.08)}.shape-help span{font-size:.76rem;color:#9a7a83;font-weight:800}.shape-help h2{margin:3px 0 4px;color:#3c4b68;font-size:1.2rem}.shape-help p{margin:0;color:#7c8799;font-size:.82rem;line-height:1.7}.shape-privacy{padding:18px 0 46px;text-align:center;color:#8490a0}.shape-privacy span{display:block;font-weight:800;color:#617086}.shape-privacy small{display:block;max-width:760px;margin:6px auto 0;line-height:1.6}
.sdo2-drop-panel{border:2px dashed #d6e2f0;background:linear-gradient(145deg,#fbfdff,#f7fffb)}.sdo2-upload-form{text-align:center}.sdo2-file-drop{display:grid;place-items:center;gap:5px;padding:44px 18px;border-radius:24px;background:#fff;cursor:pointer}.sdo2-file-drop input{margin-top:14px;max-width:360px}.sdo2-file-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:24px;background:#eaf1ff;color:#4268ce;font-size:2rem;font-weight:900}.sdo2-safety-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px}.sdo2-safety-row span{padding:7px 10px;border-radius:999px;background:#edf9f5;color:#397d70;font-size:.72rem;font-weight:800}.sdo2-action-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.sdo2-action-summary span{padding:10px 13px;border-radius:14px;background:#f6f8fb;color:#607088}.sdo2-action-summary b{color:#2c4670;font-size:1.1rem}.status-pill{display:inline-flex;padding:5px 8px;border-radius:999px;background:#edf1f6;font-size:.7rem;font-weight:850}.status-new,.status-completed{background:#e8f8ef;color:#277c54}.status-update{background:#eaf1ff;color:#3764b9}.status-code_migration,.status-legacy_match,.status-previewed{background:#fff5dd;color:#926a21}.status-conflict,.status-failed{background:#ffe9e9;color:#a54040}.is-conflict-row{background:#fff8f8}.sdo2-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.settings-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.tool-link-card{text-decoration:none;display:flex;flex-direction:column;gap:4px}.tool-link-card strong{color:#2c4265}.tool-link-card span{color:#7b8798;font-size:.8rem}.care-funnel{display:grid;grid-template-columns:repeat(8,minmax(90px,1fr));gap:8px;overflow:auto;padding-bottom:4px}.care-funnel>div{position:relative;min-width:96px;padding:17px 10px;text-align:center;border-radius:18px;background:linear-gradient(180deg,#f7f9ff,#f6fbfa)}.care-funnel>div:not(:last-child)::after{content:'›';position:absolute;right:-8px;top:50%;transform:translateY(-50%);z-index:2;color:#a8b1c0;font-size:1.3rem}.care-funnel strong,.care-funnel span{display:block}.care-funnel strong{font-size:1.45rem;color:#315dc7}.care-funnel span{margin-top:3px;color:#718096;font-size:.72rem}.intervention-grid,.today-work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.intervention-grid article,.today-work-grid>div{padding:16px;border:1px solid #e9edf4;border-radius:18px;background:#fbfcfe}.intervention-grid strong,.today-work-grid strong{display:block;color:#2e4b76;font-size:1.4rem}.intervention-grid span,.today-work-grid span{display:block;color:#69778c;font-size:.78rem}.intervention-grid small{color:#98a1ad}.today-work-grid .is-overdue{border-color:#f2c9c9;background:#fff6f6}.health-grid .metric-card small{overflow-wrap:anywhere}.compact-timeline{max-height:560px;overflow:auto}.panel-note{color:#7c8796;font-size:.76rem}.readiness-mini{margin-top:10px;padding:10px 12px;border-radius:13px;background:#f4f7fa}.readiness-mini.is-ready{background:#effaf5;color:#32785f}.readiness-mini.has-issues{background:#fff5f0;color:#9d583b}.readiness-mini span,.readiness-mini small{display:block}.framework-validation-box{margin-top:12px;padding:10px 12px;border:1px solid #e3e9f1;border-radius:14px}.framework-validation-box summary{cursor:pointer;font-weight:800;color:#4d5f7d}
@media(max-width:900px){.shape-hero-inner{grid-template-columns:1fr}.shape-art{min-height:280px}.shape-actions,.settings-tools-grid{grid-template-columns:1fr}.intervention-grid,.today-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.care-funnel{grid-template-columns:repeat(8,110px)}}
@media(max-width:620px){.shape-hero{padding-top:38px}.shape-copy h1{font-size:3.2rem}.shape-art{min-height:250px}.art-students span{width:115px;height:145px;font-size:3rem}.art-students span+span{width:105px;height:135px}.shape-action{padding:18px;border-radius:23px}.shape-help{grid-template-columns:1fr;padding:22px}.shape-help-heart{width:58px;height:58px;border-radius:18px}.intervention-grid,.today-work-grid{grid-template-columns:1fr 1fr}.sdo2-confirm-actions{flex-direction:column}.sdo2-confirm-actions form,.sdo2-confirm-actions button{width:100%}}
.student-shape-dashboard{position:relative;overflow:hidden;margin-bottom:18px;padding:28px;border:1px solid #e6edf5;border-radius:32px;background:linear-gradient(135deg,#f8fbff,#f8fffc);box-shadow:0 15px 38px rgba(52,74,108,.07);isolation:isolate}.portal-blob{position:absolute;z-index:-1;border-radius:50%}.portal-blob-a{width:260px;height:260px;background:#e8f0ff;right:-90px;top:-120px}.portal-blob-b{width:180px;height:180px;background:#fff0db;left:-80px;bottom:-110px}.student-shape-person{display:flex;align-items:center;gap:16px;margin-bottom:24px}.student-shape-person span{color:#8591a4;font-size:.78rem}.student-shape-person h1{margin:2px 0;color:#2c4166;font-size:1.75rem}.student-shape-person p{margin:0;color:#738096;font-size:.83rem}.student-shape-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.portal-action{display:grid;grid-template-columns:48px minmax(0,1fr) 20px;grid-template-rows:auto auto;gap:1px 10px;align-items:center;padding:17px;border-radius:22px;text-decoration:none}.portal-action b{grid-row:1/3;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:rgba(255,255,255,.75);font-size:1.2rem}.portal-action strong{color:currentColor}.portal-action small{color:currentColor;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.portal-action i{grid-column:3;grid-row:1/3;font-style:normal;font-size:1.25rem}.portal-blue{background:#e9f0ff;color:#3c63ba}.portal-mint{background:#e5f8f1;color:#31816d}.portal-peach{background:#fff0e8;color:#bf6d50}.portal-action.is-done{opacity:.75}.student-shape-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.student-shape-chips span{padding:6px 9px;border-radius:999px;background:#fff;border:1px solid #e8edf4;color:#748095;font-size:.7rem;font-weight:800}.student-portal-help{margin-top:18px}
@media(max-width:760px){.student-shape-actions{grid-template-columns:1fr}.student-shape-dashboard{padding:20px;border-radius:26px}.student-shape-person h1{font-size:1.35rem}}

/* =========================================================
   v2.3.1 UI/UX POLISH — stable layout layer
   Keep content in normal document flow. Decorative background
   shapes may remain absolute, but cards/actions do not float,
   rotate, or shift between states.
   ========================================================= */

:root {
    --content-max: 1480px;
    --ui-gap: 18px;
}

/* Consistent page canvas */
.admin-content {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
}
.page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 20px;
}
.page-heading > .button,
.page-heading > .campaign-filter,
.page-heading > .panel-actions {
    align-self: start;
}
.panel-heading {
    align-items: flex-start;
}
.panel-heading > div:first-child {
    min-width: 0;
}
.panel-actions {
    justify-content: flex-end;
}

/* Remove visual jumping / tilted content */
.button,
.button:hover,
.shape-action,
.shape-action:hover,
.signal-card:nth-child(2),
.art-students span + span,
.art-card,
.blob-a,
.blob-b,
.blob-c {
    transform: none;
}
.button,
.shape-action {
    transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.button:hover,
.shape-action:hover {
    box-shadow: 0 10px 24px rgba(43, 62, 118, .10);
}

/* Cards align to the same grid instead of decorative overflow */
.metric-grid,
.dashboard-grid,
.settings-tools-grid,
.intervention-grid,
.today-work-grid,
.student-dashboard-grid,
.student-shape-actions,
.shape-actions {
    align-items: stretch;
}
.metric-grid > *,
.dashboard-grid > *,
.settings-tools-grid > *,
.intervention-grid > *,
.today-work-grid > *,
.student-dashboard-grid > *,
.student-shape-actions > *,
.shape-actions > * {
    min-width: 0;
    height: 100%;
}
.metric-card::after,
.criteria-level::after {
    display: none;
}
.panel,
.metric-card,
.campaign-card,
.student-campaign,
.tool-link-card {
    overflow-wrap: anywhere;
}

/* Public student home: shape-heavy but no floating/tilted content */
.shape-hero-inner {
    align-items: stretch;
}
.shape-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.shape-art {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "students students students"
        "one two three"
        "caption caption caption";
    gap: 14px;
    place-items: stretch;
    min-height: 0;
    padding: 24px;
    border: 1px solid #e7edf5;
    border-radius: 30px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 12px 32px rgba(54,80,115,.07);
}
.art-students {
    grid-area: students;
    justify-content: center;
    align-items: center;
    min-height: 205px;
}
.art-students span,
.art-students span + span {
    width: 136px;
    height: 166px;
}
.art-circle {
    position: static;
    width: 100%;
    height: 58px;
    min-width: 0;
    border-radius: 18px;
    box-shadow: none;
    border: 1px solid #e8edf4;
}
.art-one { grid-area: one; }
.art-two { grid-area: two; }
.art-three { grid-area: three; }
.art-card {
    grid-area: caption;
    position: static;
    width: 100%;
    padding: 13px 16px;
    text-align: center;
    box-shadow: none;
}
.shape-action {
    min-height: 108px;
    border: 1px solid rgba(211,220,235,.75);
}
.shape-action strong,
.portal-action strong {
    line-height: 1.35;
}
.shape-action small,
.portal-action small {
    line-height: 1.45;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.shape-help,
.shape-privacy,
.shape-trust {
    width: min(1160px, calc(100% - 36px));
}

/* Student portal */
.student-shape-dashboard {
    box-shadow: 0 10px 28px rgba(52,74,108,.06);
}
.student-shape-person {
    align-items: center;
}
.portal-action {
    min-height: 92px;
    border: 1px solid rgba(211,220,235,.72);
}
.portal-action.is-done {
    opacity: 1;
    filter: saturate(.75);
}
.student-campaign {
    align-items: center;
}
.student-campaign > div {
    min-width: 0;
}

/* Forms: consistent rows and controls */
.form-grid,
.detail-grid {
    align-items: start;
}
.field {
    align-content: start;
}
input,
select,
textarea,
.button {
    max-width: 100%;
}
.form-actions,
.sdo2-confirm-actions {
    align-items: center;
}

/* ศธ02 Smart Sync */
.sdo2-drop-panel {
    border-style: solid;
}
.sdo2-upload-form {
    display: grid;
    gap: 16px;
    text-align: left;
}
.sdo2-file-drop {
    width: 100%;
    padding: 32px 22px;
    border: 1px dashed #c9d6e8;
    text-align: center;
}
.sdo2-file-drop input {
    width: min(100%, 560px);
    max-width: none;
    margin: 14px auto 0;
}
.sdo2-upload-form > .button {
    justify-self: center;
    min-width: 240px;
}
.sdo2-safety-row {
    margin: 0;
}
.sdo2-action-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.sdo2-action-summary span {
    display: grid;
    align-content: center;
    min-height: 66px;
}
.sdo2-preview-table .data-table td,
.sdo2-preview-table .data-table th {
    vertical-align: top;
}
.sdo2-confirm-actions form {
    margin: 0;
}

/* Funnel: use a clean row without arrows floating outside cards */
.care-funnel > div:not(:last-child)::after {
    content: none;
}
.care-funnel > div {
    border: 1px solid #e9edf4;
}

/* Tables and long Thai content */
.data-table th,
.data-table td {
    overflow-wrap: anywhere;
}
.data-table td small {
    line-height: 1.45;
}

@media (max-width: 900px) {
    .page-heading {
        grid-template-columns: 1fr;
    }
    .page-heading > .button,
    .page-heading > .campaign-filter,
    .page-heading > .panel-actions {
        width: 100%;
    }
    .page-heading > .button {
        justify-self: stretch;
    }
    .shape-art {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .admin-content {
        padding-inline: 12px;
    }
    .panel,
    .metric-card {
        border-radius: 16px;
    }
    .shape-art {
        grid-template-columns: repeat(3, minmax(0,1fr));
        padding: 18px;
        border-radius: 24px;
    }
    .art-students {
        min-height: 160px;
    }
    .art-students span,
    .art-students span + span {
        width: 105px;
        height: 132px;
    }
    .art-circle {
        height: 50px;
    }
    .shape-action,
    .portal-action {
        min-height: 0;
    }
    .sdo2-upload-form > .button,
    .sdo2-confirm-actions form,
    .sdo2-confirm-actions button {
        width: 100%;
        min-width: 0;
    }
    .sdo2-action-summary {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 390px) {
    .sdo2-action-summary {
        grid-template-columns: 1fr;
    }
    .art-students span,
    .art-students span + span {
        width: 92px;
        height: 118px;
    }
}

/* =========================================================
   v2.3.2 DEMO & PORTABLE EDITION
   ========================================================= */
.brand-mark {
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 24%, transparent);
    font-size: .74rem;
    text-align: center;
    line-height: 1.05;
    padding: 4px;
    overflow: hidden;
}
.brand-mark-logo { background: #fff; padding: 5px; border: 1px solid var(--border); box-shadow: none; }
.brand-mark-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }
input[type="color"] { padding: 5px; min-height: 48px; cursor: pointer; }
.install-section-label { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--primary); font-size: .82rem; font-weight: 900; letter-spacing: .04em; }
.install-section-label:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.branding-remove { margin-top: 0; background: #fafbfe; }
.settings-tools-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.demo-mode-banner { position: relative; z-index: 35; color: #5f4300; background: #fff2b8; border-bottom: 1px solid #e9d06c; }
.demo-mode-banner > .container,
.demo-mode-banner > div { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding-block: 7px; font-size: .78rem; }
.demo-mode-banner strong { padding: 3px 8px; border-radius: 999px; color: #fff; background: #9a6800; letter-spacing: .05em; }
.demo-mode-banner a { color: #654600; font-weight: 900; }
.admin-demo-banner { margin: 0; }
.admin-demo-banner > div { justify-content: flex-start; padding-inline: 20px; }
.demo-mode .public-header { top: 42px; }
.demo-mode .survey-progress { top: 128px; }

.demo-safety-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-gap); margin-bottom: var(--ui-gap); }
.demo-safety-card { display: flex; align-items: flex-start; gap: 14px; padding: 20px; box-shadow: none; }
.demo-safety-card > span { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-soft); font-weight: 900; }
.demo-safety-card p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; }
.demo-center-grid { align-items: stretch; }
.demo-center-grid > .panel { height: 100%; }
.demo-mini-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom: 18px; }
.demo-credential-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 12px; }
.demo-credential-grid article { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: #fafbfe; }
.demo-credential-grid span,.demo-credential-grid strong,.demo-credential-grid code,.demo-credential-grid small { display: block; }
.demo-credential-grid span { color: var(--muted); font-size: .76rem; font-weight: 800; }
.demo-credential-grid strong { margin-top: 5px; overflow-wrap: anywhere; }
.demo-credential-grid code { margin-top: 8px; padding: 7px 9px; border-radius: 9px; background: #eef2f8; overflow-wrap: anywhere; }
.demo-credential-grid small { margin-top: 7px; color: #8a6200; line-height: 1.4; }
.demo-storyboard { margin-top: var(--ui-gap); }
.demo-guide-page { max-width: 1040px; }
.demo-guide-actions { margin-top: 20px; flex-wrap: wrap; }
.demo-guide-actions .button { flex: 1 1 210px; }

.sdo2-quality-panel .alert { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sdo2-invalid-details summary { cursor: pointer; padding: 10px 0; font-weight: 900; color: var(--primary); }

@media (max-width: 900px) {
    .demo-safety-grid { grid-template-columns: 1fr; }
    .demo-mode .public-header { top: 64px; }
}
@media (max-width: 620px) {
    .demo-mode-banner > .container,
    .demo-mode-banner > div { justify-content: flex-start; padding-inline: 12px; }
    .demo-mode .public-header { position: static; }
    .demo-mode .survey-progress { top: 8px; }
    .demo-credential-grid { grid-template-columns: 1fr; }
}
.table-input { min-width: 120px; min-height: 38px; padding: 7px 9px; border-radius: 9px; font-size: .86rem; }
.table-input-small { min-width: 72px; max-width: 90px; }
.table-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.table-actions form { margin: 0; }
.sdo2-metrics { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* v2.4.2 first-install validation details */
.alert-info { color: #244c7a; background: #edf5ff; border-color: #bdd8f6; }
.preview-details { margin: -6px 0 18px; padding: 0 14px 12px; border: 1px solid var(--border); border-radius: 13px; background: #fafcff; }
.preview-details summary { cursor: pointer; padding: 12px 0; color: var(--primary); font-weight: 900; }
.preview-detail-list { display: grid; gap: 7px; color: var(--muted); font-size: .82rem; }
.preview-detail-list > div { padding: 8px 10px; border-radius: 9px; background: #fff; border: 1px solid var(--border); }

/* =========================================================
   v2.6.0 EASY ASSESSMENT BUILDER
   ========================================================= */
.assessment-builder { display: block; }
.assessment-builder-topbar { display: grid; grid-template-columns: minmax(280px,1fr) auto auto; align-items: center; gap: 16px; margin-bottom: 18px; padding: 4px 0; }
.assessment-builder-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.assessment-builder-title h1 { margin: 0; color: #15213d; font-size: clamp(1.65rem, 2.4vw, 2.35rem); letter-spacing: -.03em; }
.assessment-builder-title p { margin: 3px 0 0; color: var(--muted); }
.assessment-builder-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 48px; border-radius: 16px; color: var(--primary); background: var(--primary-soft); font-size: 1.45rem; font-weight: 900; }
.builder-mode-switch { display: inline-flex; align-items: center; padding: 4px; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: 0 4px 14px rgba(33,74,140,.06); }
.builder-mode-switch a { min-width: 94px; padding: 10px 14px; border-radius: 9px; text-align: center; color: #263655; font-weight: 900; text-decoration: none; }
.builder-mode-switch a.is-active { color: #fff; background: var(--primary); box-shadow: 0 5px 13px color-mix(in srgb, var(--primary) 25%, transparent); }
.assessment-builder-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; flex-wrap: wrap; }
.builder-notice { margin: 0 0 16px; padding: 11px 14px; border: 1px solid #bfd7f7; border-radius: 13px; color: #275282; background: #f2f7ff; font-size: .82rem; }
.assessment-builder-grid { display: grid; grid-template-columns: minmax(260px,.82fr) minmax(460px,1.48fr) minmax(250px,.72fr); gap: 14px; align-items: start; }
.builder-categories-panel,.builder-questions-panel,.builder-preview-panel { min-width: 0; padding: 14px; border: 1px solid #dce7f7; border-radius: 17px; background: #fff; box-shadow: 0 5px 20px rgba(34,72,132,.045); }
.builder-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.builder-panel-heading h2 { margin: 0; color: #14213d; font-size: 1.06rem; }
.builder-panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.builder-history-link { white-space: nowrap; color: var(--primary); font-size: .75rem; font-weight: 900; text-decoration: none; }
.builder-category-list { display: grid; gap: 10px; }
.builder-category-card { display: grid; grid-template-columns: 18px 44px minmax(0,1fr) auto 26px; align-items: center; gap: 10px; min-height: 76px; padding: 10px 11px; border: 1px solid #dce7f7; border-radius: 13px; color: inherit; background: #fff; text-decoration: none; transition: .15s ease; }
.builder-category-card:hover { border-color: #a9c7f4; transform: translateY(-1px); box-shadow: 0 7px 20px rgba(33,87,169,.08); }
.builder-category-card.is-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent); }
.builder-drag-handle { color: #94a9c8; font-size: 1.05rem; letter-spacing: -2px; }
.builder-category-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; font-size: 1.15rem; }
.builder-category-icon.family { color:#f34d64;background:#ffe9ed; }.builder-category-icon.money{color:#069851;background:#ddf8e8}.builder-category-icon.health{color:#742bd2;background:#efe4ff}.builder-category-icon.study{color:#2877e9;background:#e5f0ff}.builder-category-icon.safety{color:#e88711;background:#fff1d9}.builder-category-icon.life{color:#47688f;background:#eaf0f7}
.builder-category-copy { min-width: 0; }
.builder-category-copy strong,.builder-category-copy small { display: block; }
.builder-category-copy strong { color:#15213d;font-size:.94rem; }
.builder-category-copy small { margin-top:3px;color:var(--muted);font-size:.7rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.builder-category-count { color:#22365a;font-size:.75rem;font-weight:900;white-space:nowrap; }
.builder-category-edit { color:var(--primary);font-weight:900;text-align:center; }
.builder-add-category { display:grid; place-items:center; gap:2px; margin-top:12px; min-height:100px; padding:15px; border:1.5px dashed #84b5fa; border-radius:13px; color:var(--primary); text-decoration:none; background:#fbfdff; }
.builder-add-category > span { width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--primary);font-size:1.3rem; }
.builder-add-category strong { font-size:.92rem; }.builder-add-category small { color:var(--muted);font-size:.72rem; }
.builder-category-footer { display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid #eef2f8;color:var(--muted);font-size:.7rem;font-weight:800; }
.builder-question-list { display:grid; gap:10px; }
.builder-question-card { padding:10px 11px 12px; border:1px solid #dce7f7; border-radius:13px; background:#fff; }
.builder-question-card.is-archived { opacity:.68; background:#fafbfc; }
.builder-question-head { display:grid;grid-template-columns:18px auto auto 1fr;align-items:center;gap:8px;margin-bottom:8px; }
.builder-question-head > strong { color:#273958;font-size:.76rem; }
.builder-question-status { padding:3px 8px;border-radius:999px;color:#13794a;background:#e9f8f0;font-size:.65rem;font-weight:900; }
.builder-question-status.is-off { color:#7b5b19;background:#fff5db; }
.builder-question-tools { display:flex;justify-content:flex-end;gap:3px; }
.builder-question-tools button { width:28px;height:28px;border:0;border-radius:7px;color:#2d568d;background:transparent;cursor:pointer;font-weight:900; }
.builder-question-tools button:hover:not(:disabled) { background:#edf5ff; }.builder-question-tools button:disabled{opacity:.25;cursor:not-allowed}.builder-question-tools button.is-danger{color:#e34b52}.builder-question-tools button.is-danger:hover{background:#fff0f1}
.builder-question-text textarea { width:100%;min-height:48px;resize:vertical;padding:10px 11px;border:1px solid #d7e4f6;border-radius:9px;color:#183052;background:#fbfdff;font-weight:800;line-height:1.4; }
.builder-field-label { display:block;margin:8px 0 6px;color:#314666;font-size:.71rem;font-weight:900; }
.builder-answer-options { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px; }
.builder-answer-option { display:flex;align-items:center;gap:6px;min-width:0;padding:5px 7px;border:1px solid #dce7f7;border-radius:9px;background:#fff; }
.builder-answer-option i { width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#26ae68;box-shadow:0 0 0 3px #e8f8ef}.builder-answer-option.option-1 i{background:#2c87f7;box-shadow:0 0 0 3px #e8f2ff}.builder-answer-option.option-2 i{background:#f29b2f;box-shadow:0 0 0 3px #fff3e2}.builder-answer-option.option-3 i{background:#ef4e82;box-shadow:0 0 0 3px #ffe9f1}
.builder-answer-option input { min-width:0;width:100%;border:0!important;outline:0;background:transparent!important;padding:4px 2px!important;min-height:0!important;font-size:.73rem!important;color:#29405f;box-shadow:none!important; }
.builder-question-settings { display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:8px; }
.builder-weight-field { display:flex;align-items:center;gap:5px;margin:0;padding:0;border:0; }
.builder-weight-field legend { float:left;margin-right:8px;padding:0;color:#314666;font-size:.7rem;font-weight:900; }
.builder-weight-field label input { position:absolute;opacity:0;pointer-events:none; }.builder-weight-field label span{display:block;padding:7px 14px;border-radius:8px;color:#5e6e84;background:#eef3f9;font-size:.69rem;font-weight:800;cursor:pointer}.builder-weight-field label input:checked+span{color:#fff;background:var(--primary);box-shadow:0 4px 10px color-mix(in srgb,var(--primary) 20%,transparent)}
.builder-toggle { display:flex;align-items:center;gap:7px;color:#233a5d;font-size:.7rem;font-weight:900;cursor:pointer;white-space:nowrap; }
.builder-toggle input{position:absolute;opacity:0}.builder-toggle>span{position:relative;width:38px;height:20px;border-radius:999px;background:#cbd8e8;transition:.15s}.builder-toggle>span:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.15s}.builder-toggle input:checked+span{background:var(--primary)}.builder-toggle input:checked+span:after{transform:translateX(18px)}
.builder-critical-rules { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px;padding:8px;border-radius:9px;background:#fff0f4; }
.builder-critical-rules[hidden]{display:none!important}.builder-critical-rules>div{display:grid;grid-template-columns:minmax(0,1fr) 145px;align-items:center;gap:8px;padding:3px}.critical-option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5e3e4d;font-size:.69rem;font-weight:800}.builder-critical-rules select{min-height:32px;padding:5px 7px;border:1px solid #efc7d5;border-radius:7px;background:#fff;font-size:.68rem}
.builder-question-more { margin-top:8px;border-top:1px solid #edf2f8;padding-top:7px; }.builder-question-more summary{cursor:pointer;color:#5c7190;font-size:.68rem;font-weight:900}.builder-question-more .field{margin-top:9px}.builder-question-more small{display:block;margin-top:7px;color:#8a6b2e;font-size:.67rem;line-height:1.45}
.builder-add-question { width:100%;margin-top:10px;padding:10px;border:1.5px dashed #72adfb;border-radius:10px;color:var(--primary);background:#fbfdff;font-weight:900;cursor:pointer; }
.builder-empty-state { padding:36px 18px;text-align:center;border:1px dashed #cddbef;border-radius:12px;color:#647792;background:#fbfdff}.builder-empty-state strong{display:block;color:#273d5f}.builder-empty-state p{margin:5px 0 0;font-size:.78rem}
.builder-preview-panel { position:sticky;top:82px; }
.student-preview-card { padding:10px;border:8px solid #e9f2ff;border-radius:15px;background:#fff;box-shadow:inset 0 0 0 1px #d7e5f7; }
.student-preview-top { display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:7px;color:#203455}.student-preview-top strong{font-size:.78rem}.student-preview-top small{color:#46648e;font-size:.66rem}.preview-round-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--primary);background:#e7f1ff;font-size:.72rem}.student-preview-progress{height:6px;margin:10px 0 14px;border-radius:999px;background:#e7eef8;overflow:hidden}.student-preview-progress i{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.student-preview-category { margin:0 0 10px;color:#376091;font-size:.67rem;font-weight:900}.student-preview-card h3{margin:0 0 12px;color:#1e3150;font-size:.83rem;line-height:1.45}.student-preview-options{display:grid;gap:9px}.student-preview-options label{display:flex;align-items:center;gap:8px;color:#304969;font-size:.72rem}.student-preview-options label span{width:19px;height:19px;border:1.6px solid #6b9bd7;border-radius:50%;background:#fff}.student-preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.student-preview-actions button{padding:9px;border:1px solid #d6e2f1;border-radius:8px;color:#526982;background:#fff}.student-preview-actions button.is-primary{color:#fff;border-color:var(--primary);background:var(--primary)}
.builder-advanced-card { margin-top:12px;border:1px solid #dce7f7;border-radius:12px;background:#fff;overflow:hidden}.builder-advanced-card summary{display:flex;align-items:center;gap:9px;padding:12px;cursor:pointer}.builder-advanced-card summary>span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--primary);background:#e7f1ff}.builder-advanced-card summary strong,.builder-advanced-card summary small{display:block}.builder-advanced-card summary strong{color:#243957;font-size:.82rem}.builder-advanced-card summary small{margin-top:2px;color:var(--muted);font-size:.65rem;line-height:1.3}.builder-advanced-links{display:grid;gap:5px;padding:0 12px 12px}.builder-advanced-links a{padding:8px 9px;border-radius:8px;color:#2d5d9a;background:#f2f7ff;font-size:.7rem;font-weight:900;text-decoration:none}
.builder-tip-card { display:flex;gap:9px;margin-top:10px;padding:11px;border:1px solid #acd0fb;border-radius:12px;background:#f4f9ff}.builder-tip-card>span{font-size:1.3rem}.builder-tip-card strong{color:#263c5e;font-size:.82rem}.builder-tip-card p{margin:3px 0 0;color:#5d7493;font-size:.68rem;line-height:1.45}.builder-care-quote{display:flex;align-items:flex-end;justify-content:space-between;min-height:105px;margin:10px -14px -14px;padding:18px 18px 13px;border-radius:0 0 17px 17px;background:linear-gradient(#f9fcff,#e7f6f0);overflow:hidden}.builder-care-quote strong{color:#1670d9;font-size:.82rem;font-style:italic;line-height:1.55;text-align:center}.builder-care-quote span{font-size:3.1rem;color:#f0a14c;opacity:.9}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.question-choice-row .question-choice span { min-height:54px; display:grid; place-items:center; text-align:center; }.question-choice-row .question-choice span b{font-size:.85rem;line-height:1.25}.question-choice-row .question-choice span small{display:none}
@media (max-width: 1280px){.assessment-builder-grid{grid-template-columns:minmax(240px,.8fr) minmax(440px,1.4fr)}.builder-preview-panel{grid-column:1/-1;position:static;display:grid;grid-template-columns:minmax(280px,1fr) minmax(240px,.7fr);gap:12px}.builder-preview-panel>.builder-panel-heading{grid-column:1/-1}.builder-care-quote{margin:0;border-radius:12px}.builder-answer-options{grid-template-columns:repeat(2,minmax(0,1fr))}.assessment-builder-topbar{grid-template-columns:1fr auto}.assessment-builder-actions{grid-column:1/-1;justify-content:flex-start}}
@media (max-width: 850px){.assessment-builder-topbar{grid-template-columns:1fr}.builder-mode-switch{justify-self:start}.assessment-builder-actions{grid-column:auto}.assessment-builder-grid{grid-template-columns:1fr}.builder-preview-panel{grid-column:auto;display:block}.builder-preview-panel>*+*{margin-top:10px}.builder-question-settings{align-items:flex-start;flex-direction:column}.builder-critical-rules{grid-template-columns:1fr}.builder-answer-options{grid-template-columns:1fr 1fr}.builder-category-copy small{white-space:normal}.builder-preview-panel{position:static}}
@media (max-width: 520px){.assessment-builder-actions .button{width:100%}.builder-mode-switch{width:100%}.builder-mode-switch a{flex:1}.builder-category-card{grid-template-columns:15px 40px minmax(0,1fr) auto}.builder-category-edit{display:none}.builder-answer-options{grid-template-columns:1fr}.builder-critical-rules>div{grid-template-columns:1fr}.builder-weight-field{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.builder-weight-field legend{grid-column:1/-1;float:none}.builder-weight-field label span{text-align:center;padding-inline:7px}}
.student-preview-options label b{font-weight:700;color:#304969}
.stack-tight{display:flex;flex-direction:column;align-items:flex-start;gap:4px}


/* v2.6.1 PASSWORD VISIBILITY TOGGLE */
.password-input-wrap {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}
.password-input-wrap > input {
    width: 100%;
    padding-right: 50px;
}
.password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    z-index: 2;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #647792;
    background: transparent;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, box-shadow .15s ease;
    transform: translateY(-50%);
}
.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible {
    color: var(--primary);
    background: var(--primary-soft, #eef4ff);
}
.password-visibility-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.password-visibility-toggle.is-visible {
    color: var(--primary);
    background: var(--primary-soft, #eef4ff);
}
.password-visibility-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
@media (max-width: 620px) {
    .password-visibility-toggle {
        width: 38px;
        height: 38px;
        min-height: 38px;
        right: 6px;
    }
    .password-input-wrap > input { padding-right: 52px; }
}

/* v2.7 Risk & Priority Engine */
.priority-badge,.signal-badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.28rem .6rem;font-size:.76rem;font-weight:800;line-height:1.2;white-space:nowrap;margin:.1rem .2rem .1rem 0;border:1px solid transparent}
.priority-p1{background:#fff0f2;color:#a5112f;border-color:#ffc7d1}.priority-p2{background:#fff5e8;color:#a75300;border-color:#ffd9a7}.priority-p3{background:#fff9df;color:#806500;border-color:#f7df82}.priority-p4{background:#eef5ff;color:#2458b8;border-color:#cbdcff}.priority-p5{background:#edf8f1;color:#217a48;border-color:#c7ead4}
.signal-normal{background:#edf8f1;color:#217a48;border-color:#c7ead4}.signal-watch{background:#fff9df;color:#806500;border-color:#f7df82}.signal-followup{background:#fff5e8;color:#a75300;border-color:#ffd9a7}.signal-urgent{background:#fff0f2;color:#a5112f;border-color:#ffc7d1}
.priority-hero{border:1px solid #dfe6f3;border-radius:18px;padding:1rem 1.15rem;background:#fff;display:flex;flex-direction:column;gap:.2rem}.priority-hero>span:first-child{font-size:.78rem;color:#667085;font-weight:700}.priority-hero>strong{font-size:1.18rem}.priority-hero>span:last-child{font-size:.8rem;color:#667085}.priority-hero.priority-p1{border-color:#ffb4c3;background:#fff6f7}.priority-hero.priority-p2{border-color:#ffd19a;background:#fffaf2}.priority-hero.priority-p3{border-color:#efda79;background:#fffdf2}.priority-hero.priority-p4{border-color:#cbdcff;background:#f8fbff}.priority-hero.priority-p5{border-color:#c9e7d3;background:#f7fcf9}
.signal-panel{border-color:#f0d8a7}.signal-reason{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem;border:1px solid #eef1f6;border-radius:14px;background:#fff}.signal-reason>div{display:flex;flex-direction:column;gap:.2rem}.signal-reason span:last-child{color:#667085;font-size:.86rem}
.priority-metric-grid .metric-card strong{letter-spacing:-.02em}.priority-level-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.priority-level-grid .criteria-level strong{font-size:.88rem;line-height:1.35}
@media(max-width:1100px){.priority-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.priority-level-grid{grid-template-columns:1fr}.priority-badge,.signal-badge{white-space:normal}}

/* v2.8.0 DATA BROWSER, CREDENTIALS & STUDENT VOICE */
.pagination{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--border,#e2e8f0)}
.pagination.pagination-wide{justify-content:space-between}
.pagination>span{color:var(--muted,#667085);font-size:.82rem;font-weight:800;text-align:center}
.pagination .is-disabled{pointer-events:none;opacity:.42;filter:grayscale(.25)}
.credential-cell{min-width:210px}.credential-cell small{display:block;margin-top:4px;color:var(--muted,#667085);line-height:1.4}
.credential-reveal{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.credential-reveal code{padding:6px 9px;border:1px solid #d7e4f6;border-radius:8px;background:#f6f9fd;color:#17213a;font-weight:800;overflow-wrap:anywhere}
.student-open-heart{margin-top:10px;padding:18px;border:1px solid #cfe0f7;border-radius:18px;background:linear-gradient(135deg,#fbfdff,#f5f9ff)}
.student-open-heart h2{margin:.25rem 0 .45rem;color:#17213a}.student-open-heart>.student-open-heart-copy{margin:0 0 15px;color:#5e6e84;line-height:1.7}
.student-open-heart .privacy-note{display:flex;gap:8px;align-items:flex-start;margin:10px 0;padding:10px 12px;border-radius:12px;background:#eef6ff;color:#365777;font-size:.82rem;line-height:1.55}
.contact-preference{display:grid;gap:8px;margin-top:14px}.contact-preference>legend{margin-bottom:5px;color:#263b5c;font-weight:900}.contact-preference label{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #dce7f7;border-radius:12px;background:#fff;cursor:pointer}.contact-preference label:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent)}.contact-preference label span{display:grid;gap:2px}.contact-preference label small{color:var(--muted);line-height:1.35}
.urgent-help-choice{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:13px;border:1px solid #ffc5cf;border-radius:14px;background:#fff4f6;cursor:pointer}.urgent-help-choice input{margin-top:4px}.urgent-help-choice span{display:grid;gap:4px}.urgent-help-choice strong{color:#a5112f}.urgent-help-choice small{color:#80515a;line-height:1.45}
.student-message-card{border-color:#cfe0f7;background:linear-gradient(135deg,#fff,#f8fbff)}.student-message-card.is-contact{border-color:#ffd09a;background:#fffaf3}.student-message-card.is-urgent{border-color:#ffb8c6;background:#fff7f8}.student-message-card blockquote{margin:8px 0 12px;padding:14px 16px;border-left:4px solid var(--primary);border-radius:0 12px 12px 0;background:#fff;color:#283b58;line-height:1.75;white-space:normal}.student-message-card.is-urgent blockquote{border-left-color:#b31839}.student-message-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid #e7edf5}.student-message-meta span{color:var(--muted);font-size:.8rem}.student-message-meta strong{color:#243956}
.normal-no-case-panel{border-color:#c7ead4;background:#f7fcf9}.normal-no-case-panel>div{display:grid;gap:5px}.normal-no-case-panel h2{margin:4px 0 0;color:#215d3d}.normal-no-case-panel p{margin:0;color:#557064;line-height:1.55}
@media(max-width:640px){.pagination.pagination-wide{justify-content:center}.pagination .button{flex:1 1 120px}.student-message-meta{align-items:flex-start;flex-direction:column}.credential-cell{min-width:180px}}
.pagination-pages{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}.pagination-page{min-width:34px;height:34px;display:grid;place-items:center;padding:0 8px;border:1px solid #d9e3f2;border-radius:9px;color:#365777;background:#fff;text-decoration:none;font-weight:850}.pagination-page:hover{border-color:var(--primary);color:var(--primary);background:#f6f9ff}.pagination-page.is-current{color:#fff;border-color:var(--primary);background:var(--primary);pointer-events:none}.pagination-ellipsis{padding:0 2px;color:var(--muted)}
.message-privacy-note{display:grid;gap:3px;margin:11px 0;padding:10px 12px;border-radius:12px;background:#eef6ff;color:#365777}.message-privacy-note strong{font-size:.8rem}.message-privacy-note span{font-size:.78rem;line-height:1.5}

/* v3.6.2 — effective assessment schedule and extension control */
.campaign-status.status-expired { color:#923431; background:#fae4e1; }
.campaign-status.status-scheduled { color:#795a16; background:#fff1c9; }
.campaign-status.status-archived { color:#54616d; background:#e9edf2; }
.campaign-period { display:table; margin:7px 0; font-family:inherit; font-size:.79rem; }
.campaign-extend-form { align-items:end; flex-wrap:wrap; justify-content:flex-start; }
.campaign-extend-form .field { flex:1 1 230px; max-width:390px; }
.campaign-extend-form input[type=datetime-local] { min-width:200px; }
@media(max-width:660px) { .campaign-extend-form { align-items:stretch; } .campaign-extend-form .field { max-width:none; } }