:root { color-scheme: light; font-family: "Phetsarath OT", system-ui, sans-serif; color: #172033; background: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--pd); }
header { background: #fff; border-bottom: 1px solid #e4e9f1; }
header > div, main { max-width: 1160px; margin: auto; padding: 1.2rem; }
header > div, nav, .tools, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
header .brand { font-size: 1.3rem; font-weight: 700; margin-right: auto; text-decoration: none; }
main { padding-bottom: 3rem; }
section { margin: 1.5rem 0; }
.card { background: #fff; border: 1px solid #e3e8f0; border-radius: .8rem; padding: 1.2rem; margin: .8rem 0; overflow-wrap: anywhere; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px),1fr)); gap: 1rem; }
h1 { font-size: clamp(1.5rem,3vw,2.2rem); }
h2 { font-size: 1.3rem; }
h3 { margin: 0 0 .5rem; }
input, select, textarea, button { font: inherit; }
input, select, textarea { padding: .6rem; border: 1px solid #cbd5e1; border-radius: .5rem; max-width: 100%; }
button, .button { display: inline-flex; justify-content: center; gap: .4rem; background: var(--pd); color: #fff; border: 0; border-radius: .5rem; padding: .6rem .9rem; cursor: pointer; text-decoration: none; }
button.secondary, .button.secondary { background: #e8eef5; color: #334155; }
button:disabled { opacity: .6; cursor: wait; }
.muted { color: #64748b; }
.plain { white-space: pre-wrap; overflow-wrap: anywhere; }
.notice { padding: .9rem; border-radius: .5rem; background: #fee2e2; color: #991b1b; }
.notice.success { background: #dcfce7; color: #166534; }
.badge { display: inline-block; padding: .2rem .6rem; background: #fef3c7; color: #92400e; border-radius: 99px; }
.badge.approved, .badge.published { background: #dcfce7; color: #166534; }
.badge.rejected { background: #fee2e2; color: #991b1b; }
dialog { width: min(640px,calc(100% - 2rem)); border: 0; border-radius: .8rem; padding: 1.2rem; max-height: 90vh; overflow-y: auto; }
dialog::backdrop { background: #0f172a99; }
dialog img { max-width: 100%; max-height: 65vh; object-fit: contain; }
label { display: block; margin-bottom: .8rem; }
label input, label textarea, label select { display: block; width: 100%; margin-top: .3rem; }
video { display: block; width: 100%; max-height: 70vh; background: #000; }
.lesson-button { text-align: left; display: block; width: 100%; margin: .6rem 0; }
.lesson-button[aria-pressed="true"] { outline: 3px solid #38bdf8; }
[hidden] { display: none !important; }