html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.6; }
html[lang="km"] body, [lang="km"], .khmer-font, .khmer-text { font-family: var(--font-khmer); }
h1,h2,h3,h4 { color: var(--color-primary-dark); line-height: 1.25; letter-spacing: -.015em; }
h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); }
a { color: var(--color-info); text-underline-offset: 3px; }
button,input,select,textarea { font: inherit; }
button,a,input,select,textarea,[tabindex]:not([tabindex="-1"]) { outline-offset: 3px; }
:focus-visible { outline: 3px solid var(--color-focus) !important; }
::selection { background: #cde3f2; color: var(--color-primary-dark); }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 9999; padding: .65rem 1rem; background: #fff; color: var(--color-primary-dark); border: 2px solid var(--color-focus); border-radius: var(--radius-sm); }
.skip-link:focus { top: 1rem; }
.institution-strip { background: var(--color-primary-dark); color: #dce8f0; padding: .38rem clamp(1rem,4vw,4.5rem); font-size: var(--text-caption); letter-spacing: .035em; }
.institution-strip span { color: #f0dba5; }
.surface, .card, .panel, .search-card, .result-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-subtle); }
.card,.panel { padding: var(--space-5); }
.btn,.button,.btn-primary,.lang-toggle-btn { min-height: var(--touch-target); border-radius: var(--radius-sm); font-weight: 650; letter-spacing: .005em; transition: background-color .15s,border-color .15s,color .15s; }
.btn-primary,.button:not(.secondary):not(.gold):not(.danger) { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover,.button:not(.secondary):not(.gold):not(.danger):hover { background: var(--color-primary-dark); }
.button.gold,.btn-gold { background: #f4eddc; color: #634a17; border: 1px solid #d8c28e; }
.button.secondary,.btn-secondary { background: #fff; color: var(--color-primary-dark); border: 1px solid var(--color-border-strong); }
.button.danger,.btn-danger { background: #fff; color: var(--color-danger); border: 1px solid #d8a6ac; }
.badge { border-radius: 999px; font-weight: 700; text-transform: none; letter-spacing: .015em; }
.badge::before { content: "•"; font-size: 1rem; line-height: .5; }
.form-control,input,select,textarea { min-height: var(--touch-target); border-color: var(--color-border-strong); border-radius: var(--radius-sm); }
.form-label,label { color: var(--color-text-primary); }
.form-label + .help-text,.field small { color: var(--color-text-secondary); }
.data-table th { color: var(--color-primary-dark); background: #f1f5f7; text-transform: none; letter-spacing: .02em; }
.data-table td { line-height: 1.45; }
.data-table tbody tr:focus-within { background: var(--color-primary-light); }
.empty-state { padding: var(--space-7) var(--space-5); text-align: center; color: var(--color-text-secondary); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.empty-state h2 { margin-bottom:.5rem; }.empty-state .btn { margin-top:1rem; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.screen-header { margin-bottom:1.5rem; }.screen-title { font-size:var(--text-h1); }.screen-subtitle { color:var(--color-text-secondary); }
.table-container { width:100%; overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-md); }
.progress-track { height: 8px; background: #dfe7ed; border-radius: 999px; }
.progress-bar { background: var(--color-success); }
.notice,.alert { border-radius: var(--radius-sm); border-left: 4px solid var(--color-info); background: var(--info-bg); color: var(--color-primary-dark); }
.notice.error,.alert-error { border-left-color: var(--color-danger); background: var(--danger-bg); color: #72242c; }
.top-header,.course-topbar { background: var(--color-primary-dark); border-bottom: 3px solid var(--color-accent); box-shadow: none; }
.admin-avatar { display:grid; place-items:center; background:#fff; color:var(--color-primary-dark); font-size:.72rem; font-weight:800; }
.main-viewport { max-width: calc(var(--content-max) + var(--sidebar-width)); width:calc(100% - var(--sidebar-width)); min-width:0; overflow-x:hidden; }
.main-viewport > * { min-width:0; }
.main-viewport [style*="grid-template-columns"] { min-width:0; }
.page-header,.screen-header { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.metric-card { border-radius: var(--radius-md); box-shadow: none; border-top-width: 3px !important; }
.metric-card:hover { transform: none; box-shadow: var(--shadow-subtle); }
.app-sidebar { box-shadow: none; }
.menu-item { min-height: 42px; border-left: 3px solid transparent; }
.menu-item.active { border-left-color: var(--color-primary); background: var(--color-primary-light); }
.sidebar-backdrop { display:none; position:fixed; inset:var(--header-height) 0 0; z-index:850; background:var(--color-overlay); }
.sidebar-backdrop.active { display:block; }
.ui-kicker { color: var(--color-accent); font-size: var(--text-caption); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.meta-list { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; color:var(--color-text-secondary); font-size:var(--text-small); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.section-heading p { max-width:65ch; color:var(--color-text-secondary); }
.toast-region { position:fixed; right:1rem; bottom:1rem; z-index:3000; display:grid; gap:.5rem; max-width:min(380px,calc(100vw - 2rem)); }
.toast { padding:.8rem 1rem; background:var(--color-primary-dark); color:#fff; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }