/* student_portal — mobile-first · สดใส */
:root{
	--sp-ink:#0c4a6e;
	--sp-text:#0f172a;
	--sp-muted:#64748b;
	--sp-sky:#0ea5e9;
	--sp-sky-deep:#0284c7;
	--sp-mint:#22c55e;
	--sp-mint-deep:#16a34a;
	--sp-sun:#f59e0b;
	--sp-coral:#fb7185;
	--sp-aqua:#67e8f9;
	--sp-card:#ffffff;
	--sp-soft:#f0f9ff;
}
*,*::before,*::after{box-sizing:border-box}
body.sp-body{
	margin:0;
	font-family:'Sarabun',sans-serif;
	background:
		radial-gradient(900px 420px at 0% -5%,rgba(56,189,248,.35),transparent 55%),
		radial-gradient(800px 380px at 100% 5%,rgba(251,146,60,.28),transparent 50%),
		radial-gradient(700px 360px at 50% 100%,rgba(74,222,128,.22),transparent 55%),
		linear-gradient(180deg,#e0f2fe 0%,#fefce8 45%,#f0fdf4 100%);
	color:var(--sp-text);
	min-height:100vh;
}
.sp-top{
	background:linear-gradient(120deg,#0284c7 0%,#06b6d4 42%,#22c55e 100%);
	color:#fff;
	padding:14px 16px 10px;
	box-shadow:0 10px 28px rgba(2,132,199,.28);
}
.sp-top-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;max-width:920px;margin:0 auto}
.sp-top-left{display:flex;align-items:center;gap:12px;min-width:0}
.sp-brand{font-weight:700;font-size:1.05rem;line-height:1.3;text-shadow:0 1px 0 rgba(0,0,0,.08)}
.sp-sub{opacity:.92;font-size:.85rem;margin-top:2px}
.sp-logout{
	color:#0c4a6e;text-decoration:none;font-size:.9rem;font-weight:700;
	background:#fff;padding:8px 14px;border-radius:999px;white-space:nowrap;
	box-shadow:0 4px 12px rgba(15,23,42,.12)
}
.sp-who{max-width:920px;margin:10px auto 0;font-size:.92rem}
.sp-who strong{display:block;font-size:1.05rem}
.sp-who span{opacity:.92}
.sp-nav{
	display:flex;gap:8px;overflow-x:auto;padding:12px 12px 4px;
	max-width:920px;margin:0 auto;-webkit-overflow-scrolling:touch
}
.sp-nav a{
	flex:0 0 auto;text-decoration:none;color:#0369a1;background:#fff;
	border:2px solid #bae6fd;border-radius:999px;padding:8px 14px;font-weight:700;font-size:.9rem;
	box-shadow:0 4px 12px rgba(14,165,233,.12);
	transition:transform .12s ease,box-shadow .12s ease,background .12s ease
}
.sp-nav a:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(14,165,233,.18)}
.sp-nav a.is-active{
	background:linear-gradient(135deg,#0ea5e9,#22c55e);
	border-color:transparent;color:#fff;
	box-shadow:0 8px 20px rgba(14,165,233,.35)
}
.sp-main{max-width:920px;margin:0 auto;padding:8px 14px 28px}
.sp-foot{text-align:center;color:#64748b;font-size:.82rem;padding:8px 14px 24px}

.sp-card{
	background:linear-gradient(180deg,#ffffff 0%,#f8feff 100%);
	border:1px solid #bae6fd;border-radius:18px;
	padding:16px 16px 14px;margin:0 0 14px;
	box-shadow:0 12px 28px rgba(14,165,233,.1)
}
.sp-card h2{margin:0 0 6px;font-size:1.15rem;color:#0369a1}
.sp-card .hint{margin:0 0 12px;color:var(--sp-muted);font-size:.92rem;line-height:1.45}
.sp-profile{display:flex;align-items:center;gap:14px}
.sp-avatar-btn{
	position:relative;padding:0;border:0;background:transparent;cursor:pointer;
	border-radius:50%;flex:0 0 auto;line-height:0
}
.sp-avatar{
	width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;
	border:3px solid #fde68a;background:#fff7ed;
	box-shadow:0 0 0 3px #38bdf8,0 8px 20px rgba(251,146,60,.28)
}
.sp-avatar--sm{width:48px;height:48px;border-width:2px;box-shadow:0 0 0 2px #fff,0 4px 12px rgba(14,165,233,.35)}
.sp-avatar-hint{
	position:absolute;right:2px;bottom:2px;width:28px;height:28px;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg,#f59e0b,#fb7185);color:#fff;font-size:.75rem;
	box-shadow:0 2px 8px rgba(245,158,11,.45)
}
.sp-avatar-btn--sm .sp-avatar-hint{width:20px;height:20px;font-size:.65rem;right:-2px;bottom:-2px}
.sp-avatar-btn:focus-visible{outline:3px solid #38bdf8;outline-offset:3px}
.sp-profile-text{min-width:0}
.sp-profile-text h2{margin:0 0 2px}
.sp-profile-name{margin:0 0 6px;font-size:1.15rem;font-weight:700;color:#0284c7;line-height:1.3}

.sp-photo-dialog{
	border:0;padding:0;border-radius:18px;max-width:min(92vw,420px);width:100%;
	background:#0c4a6e;color:#fff;box-shadow:0 24px 60px rgba(2,132,199,.45)
}
.sp-photo-dialog::backdrop{background:rgba(12,74,110,.72)}
.sp-photo-dialog-bar{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	padding:12px 14px;margin:0;background:linear-gradient(90deg,#0284c7,#22c55e)
}
.sp-photo-dialog-bar strong{font-size:.95rem;line-height:1.3}
.sp-photo-close{
	border:0;background:rgba(255,255,255,.22);color:#fff;width:36px;height:36px;
	border-radius:50%;cursor:pointer;font-size:1rem
}
.sp-photo-dialog img{
	display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;background:#082f49
}
.sp-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.sp-grid-3{grid-template-columns:repeat(3,1fr)}}
.sp-stat{
	display:block;text-decoration:none;color:inherit;
	background:linear-gradient(160deg,#ffffff 0%,#e0f2fe 100%);
	border:2px solid #7dd3fc;border-radius:16px;padding:14px 14px 12px;
	box-shadow:0 8px 18px rgba(14,165,233,.12);
	transition:transform .12s ease,box-shadow .12s ease
}
.sp-stat:nth-child(2){background:linear-gradient(160deg,#ffffff 0%,#dcfce7 100%);border-color:#86efac}
.sp-stat:nth-child(3){background:linear-gradient(160deg,#ffffff 0%,#fef3c7 100%);border-color:#fcd34d}
.sp-stat:nth-child(4){background:linear-gradient(160deg,#ffffff 0%,#ffe4e6 100%);border-color:#fda4af}
.sp-stat:nth-child(5){background:linear-gradient(160deg,#ffffff 0%,#e0e7ff 100%);border-color:#a5b4fc}
.sp-stat:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(14,165,233,.2)}
.sp-stat .k{font-size:.85rem;color:#0369a1;font-weight:700}
.sp-stat:nth-child(2) .k{color:#15803d}
.sp-stat:nth-child(3) .k{color:#b45309}
.sp-stat:nth-child(4) .k{color:#be123c}
.sp-stat:nth-child(5) .k{color:#4338ca}
.sp-stat .v{font-size:1.45rem;font-weight:800;margin-top:4px;color:#0c4a6e}
.sp-stat:nth-child(2) .v{color:#166534}
.sp-stat:nth-child(3) .v{color:#92400e}
.sp-stat:nth-child(4) .v{color:#9f1239}
.sp-stat:nth-child(5) .v{color:#3730a3}
.sp-stat .d{font-size:.85rem;color:#475569;margin-top:4px}

.sp-alert{
	border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:.95rem;line-height:1.45
}
.sp-alert.info{background:#e0f2fe;border:1px solid #7dd3fc;color:#075985}
.sp-alert.warn{background:#fef3c7;border:1px solid #fcd34d;color:#92400e}
.sp-alert.ok{background:#dcfce7;border:1px solid #86efac;color:#166534}
.sp-alert.bad{background:#ffe4e6;border:1px solid #fda4af;color:#9f1239}

.sp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.sp-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:480px}
table.sp-table th,table.sp-table td{padding:8px 10px;border-bottom:1px solid #e0f2fe;text-align:left;vertical-align:top}
table.sp-table th{background:linear-gradient(90deg,#e0f2fe,#dcfce7);color:#0c4a6e;font-weight:700;white-space:nowrap}
table.sp-table td.num,table.sp-table th.num{text-align:center}
.sp-pill{
	display:inline-block;min-width:2.2rem;padding:2px 8px;border-radius:999px;
	background:#dcfce7;color:#166534;font-weight:700;font-size:.88rem;text-align:center
}
.sp-pill.miss{background:#ffe4e6;color:#9f1239}
.sp-pill.fail{background:#ffedd5;color:#c2410c}
.sp-pill.neutral{background:#e0f2fe;color:#0369a1}

.sp-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.sp-toolbar label{font-size:.9rem;color:#0369a1;font-weight:600}
.sp-toolbar select,.sp-toolbar input{
	font:inherit;padding:8px 10px;border-radius:10px;border:2px solid #7dd3fc;background:#fff
}
.sp-btn{
	display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:700;
	padding:9px 14px;border-radius:12px;border:0;
	background:linear-gradient(135deg,#0ea5e9,#22c55e);color:#fff;text-decoration:none;cursor:pointer;
	box-shadow:0 8px 18px rgba(14,165,233,.3)
}
.sp-btn.secondary{background:#fff;color:#0284c7;border:2px solid #7dd3fc;box-shadow:none}
.sp-empty{color:#64748b;padding:8px 0;margin:0}

/* login */
.sp-login-wrap{
	min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
	background:
		radial-gradient(600px 320px at 15% 20%,rgba(56,189,248,.55),transparent 60%),
		radial-gradient(520px 300px at 90% 80%,rgba(74,222,128,.45),transparent 55%),
		radial-gradient(480px 280px at 70% 10%,rgba(251,191,36,.4),transparent 50%),
		linear-gradient(145deg,#0369a1 0%,#0ea5e9 40%,#22c55e 100%)
}
.sp-login{
	width:100%;max-width:420px;background:#fff;border-radius:22px;
	box-shadow:0 28px 60px rgba(3,105,161,.35);overflow:hidden
}
.sp-login-hdr{padding:22px 22px 16px;background:linear-gradient(120deg,#0ea5e9,#22c55e 70%,#f59e0b);color:#fff;text-align:center}
.sp-login-logo{
	width:88px;height:88px;object-fit:contain;border-radius:50%;
	background:#fff;padding:6px;margin:0 auto 12px;display:block;
	box-shadow:0 8px 20px rgba(0,0,0,.18);border:3px solid rgba(255,255,255,.85)
}
.sp-login-hdr h1{margin:0;font-size:1.25rem}
.sp-login-hdr p{margin:6px 0 0;opacity:.95;font-size:.92rem;line-height:1.4}
.sp-login-body{padding:20px 22px 24px}
.sp-field{margin:0 0 14px}
.sp-field label{display:block;font-weight:700;margin:0 0 6px;font-size:.92rem;color:#0369a1}
.sp-field input{
	width:100%;font:inherit;padding:12px 12px;border-radius:12px;border:2px solid #bae6fd
}
.sp-field input:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.2)}
.sp-field .help{margin:6px 0 0;font-size:.82rem;color:#64748b}
.sp-login-body .sp-btn{width:100%;justify-content:center;padding:12px}
.sp-login-links{margin-top:14px;text-align:center;font-size:.9rem}
.sp-login-links a{color:#0284c7;text-decoration:none;font-weight:700}

.cat-1{color:#16a34a}.cat-2{color:#e11d48}.cat-3{color:#ea580c}.cat-4{color:#2563eb}.cat-5{color:#7c3aed}
.pts-pos{color:#16a34a;font-weight:700}.pts-neg{color:#e11d48;font-weight:700}
.sp-wh-block{
	border:2px solid #bae6fd;border-radius:14px;padding:12px 14px;margin:0 0 10px;
	background:linear-gradient(160deg,#ffffff,#e0f2fe)
}
.sp-wh-block:nth-child(even){border-color:#86efac;background:linear-gradient(160deg,#ffffff,#dcfce7)}
.sp-wh-title{font-weight:700;color:#0284c7;margin:0 0 6px}
.sp-wh-metrics{font-size:1.05rem;font-weight:700;color:#0f172a}
.sp-wh-bmi{margin-top:8px;font-size:.95rem;color:#334155;line-height:1.45}
.bmi-badge{
	display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;
	font-size:.82rem;font-weight:700;background:#e0f2fe;color:#0369a1
}
.bmi-badge.n{background:#dcfce7;color:#166534}
.bmi-badge.t{background:#fef9c3;color:#854d0e}
.bmi-badge.w{background:#ffedd5;color:#c2410c}
.bmi-badge.o{background:#ffe4e6;color:#9f1239}
.bmi-badge.st{background:#e2e8f0;color:#475569}
.sp-warn-inline{color:#d97706;font-weight:700}