:root {
  color-scheme: light;
  --bg: #f7f7f2;
  --paper: #ffffff;
  --text: #212b36;
  --muted: #596676;
  --line: #dce2e6;
  --accent: #245a7d;
  --accent-soft: #e9f1f7;
  --danger: #9a3434;
  --good: #2a684b;
  --radius: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 17px; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Noto Sans Thai", "Tahoma", sans-serif; line-height: 1.6; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 3px solid #5b9fd6; outline-offset: 2px; }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: clamp(1.6rem,5vw,2.25rem); line-height: 1.35; margin-bottom: .3rem; }
h2 { font-size: 1.45rem; line-height: 1.45; margin-bottom: .35rem; }
h3 { font-size: 1.16rem; line-height: 1.45; margin-bottom: .3rem; }
p { margin-bottom: .6rem; }
a { color: var(--accent); }
.skip { position: absolute; left: -1000px; top: 0; z-index: 20; background: #fff; padding: 8px; }
.skip:focus { left: 8px; }
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); padding: 17px max(20px,calc((100vw - 1000px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-header h1 { margin: 0; }
.eyebrow { font-size: .77rem; letter-spacing: .12em; color: var(--accent); font-weight: 800; margin: 0 0 2px; }
.subtitle { font-size: .92rem; color: var(--muted); margin: 0; }
.header-user { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.user-email { color: var(--muted); font-size:.87rem; overflow-wrap:anywhere; }
.page { max-width: 1000px; padding: 26px 20px 56px; margin: 0 auto; }
.login-page { display:grid; place-items:center; min-height:60vh; }
.login-box { max-width: 430px; width:100%; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow: 0 8px 28px rgba(27,42,52,.04); }
.help-text { color: var(--muted); font-size: .91rem; }
label { display:block; font-weight:700; margin: 13px 0 7px; }
.label-compact { margin-top: 18px; }
input,select,textarea { width:100%; min-height:50px; border:1.5px solid #bdc8d1; border-radius:9px; background:#fff; color:var(--text); padding:10px 12px; font-size:1rem; }
textarea { min-height:95px; resize:vertical; }
input::placeholder { color:#808a94; }
.btn { min-height:46px; display:inline-flex; justify-content:center; align-items:center; gap:6px; padding:9px 16px; border-radius:10px; font-weight:700; border:1.5px solid transparent; text-decoration:none; white-space:normal; text-align:center; line-height:1.45; }
.btn-primary { color:#fff; background:var(--accent); }
.btn-primary:hover { background:#19435f; }
.btn-outline { color:var(--accent); border-color:#bfd0dc; background:#fff; }
.btn-outline:hover { background:var(--accent-soft); }
.btn-danger { color:var(--danger); background:#fff; border-color:#dfb4b4; }
.btn-small { min-height:39px; font-size:.9rem; padding:5px 11px; }
.btn-full { width:100%; margin-top:23px; }
.notice { max-width:960px; margin:16px auto 0; padding:13px 17px; border:1px solid #cadfe9; background:#e8f3f7; border-radius:12px; color:#1b465e; }
.notice.error { background:#fff2f0; border-color:#edc6c0; color:#872c24; }
.notice.success { background:#ecf7f0; border-color:#b6dcc3; color:#28583b; }
.section-head { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:flex-start; margin-bottom:19px; }
.section-head p { color:var(--muted); }
.head-actions,.sub-actions { display:flex; flex-wrap:wrap; gap:9px; }
.sub-actions { margin-bottom:18px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin: 0 0 25px; color:var(--muted); font-size:.92rem; }
.breadcrumbs button { border:0; background:none; color:var(--accent); text-decoration:underline; padding:6px 2px; cursor:pointer; }
.school-list,.set-list,.subject-list { display:grid; gap:12px; }
.school-item,.set-item,.subject-panel,.link-item,.empty-state { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:17px; }
.school-item,.set-item { border-left:5px solid var(--school-color,#5b829f); }
.school-link,.set-link { display:block; width:100%; background:transparent; border:none; padding:3px 0; color:var(--text); font-size:1.16rem; text-align:left; font-weight:750; line-height:1.5; }
.school-link:hover,.set-link:hover { color:var(--accent); }
.item-meta { margin-top:6px; font-size:.9rem; color:var(--muted); }
.set-item { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:9px; }
.set-item .set-link { flex:1; }
.muted { color:var(--muted); }
.empty-state { padding:24px; color:var(--muted); }
.subject-panel { padding:0; overflow:hidden; }
.subject-heading { padding:13px 17px; background:var(--subject-bg,#f1f4f6); border-left:7px solid var(--subject-accent,#6c859c); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:9px; }
.subject-heading h3 { margin:0; }
.subject-contents { display:grid; gap:0; }
.resource-heading { font-size:.95rem; font-weight:800; padding:12px 17px 6px; color:#435263; background:#fbfcfd; border-top:1px solid #e7ecef; }
.link-item { border:none; border-radius:0; border-top:1px solid #edf0f2; padding:13px 17px; }
.link-main { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.link-title { font-weight:750; font-size:1.07rem; }
.link-source { font-size:.91rem; margin-top:3px; color:var(--muted); overflow-wrap:anywhere; }
.link-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.link-item.is-hidden { background:#f9f9f9; opacity:.78; }
.status { display:inline-block; border:1px solid #cad0d5; border-radius:99px; padding:2px 10px; font-size:.76rem; background:#f3f5f6; font-weight:700; color:#57606b; }
.status.PUBLISHED { background:#e7f5ed; color:#276445; border-color:#bbdcc9; }
.status.HIDDEN { background:#f6eaea; color:#804444; border-color:#e7c7c7; }
.subject-math { --subject-bg:#e7f0fb;--subject-accent:#2c67b0; }
.subject-science { --subject-bg:#e7f5eb;--subject-accent:#2f8754; }
.subject-english { --subject-bg:#fff6da;--subject-accent:#ad7b21; }
.subject-thai { --subject-bg:#fae9e6;--subject-accent:#b24e42; }
.subject-social { --subject-bg:#f1eafa;--subject-accent:#7850a4; }
.restricted { background:#fff; border:1px solid var(--line); margin-top:22px; border-radius:var(--radius); }
dialog { width:min(94vw,620px); max-height:88dvh; border:1px solid #d4dfe6; border-radius:16px; padding:0; color:var(--text); box-shadow:0 22px 70px rgba(0,0,0,.22); }
dialog::backdrop { background:rgba(25,37,51,.55); }
dialog form { max-height:88dvh; display:flex; flex-direction:column; }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:17px 20px 12px; border-bottom:1px solid var(--line); }
.dialog-header h2 { margin:0; font-size:1.27rem; }
.dialog-body { padding:12px 20px 23px; overflow:auto; }
.dialog-footer { background:#fff; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:9px; padding:14px 20px; }
.close { width:38px; height:38px; font-size:1.5rem; border:0; background:#f2f4f6; border-radius:9px; }
.field-row { display:flex; gap:8px; align-items:center; }
.field-row select { flex:1; min-width:0; }
.field-row button { flex:none; }
.field-help { font-size:.86rem; color:var(--muted); margin:4px 0 9px; }
.footer { text-align:center; color:var(--muted); font-size:.8rem; padding:18px 20px 30px; }
@media(max-width:620px) {
  html { font-size:16px; }
  .site-header { padding:15px 16px; }
  .page { padding:20px 13px 42px; }
  .login-box { padding:20px; }
  .section-head .btn, .head-actions .btn { min-height:45px; }
  .head-actions { width:100%; }
  .head-actions .btn { flex:1; }
  .school-item,.set-item { padding:14px; }
  .subject-heading { padding:13px; }
  .link-item { padding:12px 13px; }
  .dialog-body { padding:10px 15px 21px; }
  .dialog-footer { padding:12px 15px; }
  .dialog-footer .btn { flex:1; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }