@font-face { font-family:Vazirmatn; src:url(/fonts/Vazirmatn.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
:root { color-scheme:light; --bg:#f4f6fa; --surface:#fff; --text:#18243b; --muted:#52617a; --line:#dce3ee; --accent:#245cc4; --accent-hover:#18499f; --soft:#eaf0fc; --danger:#a82137; --radius:16px; font-family:Vazirmatn,Tahoma,Arial,sans-serif; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#111927; --surface:#1b2638; --text:#eff4fb; --muted:#b7c4d8; --line:#394960; --accent:#aac8ff; --accent-hover:#c8dcff; --soft:#263956; --danger:#ffacb9; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-size:16px; line-height:1.7; padding-bottom:env(safe-area-inset-bottom); }
a { color:var(--accent); }
button,input,select,textarea { font:inherit; }
button { min-height:46px; cursor:pointer; border:1px solid var(--line); border-radius:11px; padding:10px 17px; background:var(--surface); color:var(--text); line-height:1.4; white-space:normal; overflow-wrap:anywhere; text-align:center; }
button:hover { border-color:var(--accent); background:var(--soft); }
button:disabled { opacity:.6; cursor:wait; }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--surface); font-weight:700; }
button.primary:hover { background:var(--accent-hover); }
:root[data-theme="dark"] button.primary { color:#14233b; }
button.quiet { border-color:transparent; background:transparent; color:var(--accent); }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.app-header { padding:env(safe-area-inset-top) max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left)); background:var(--surface); border-bottom:1px solid var(--line); }
.header-inner { min-height:72px; max-width:1120px; margin:auto; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.brand { font-weight:800; font-size:19px; text-decoration:none; margin-inline-end:auto; }
.badge { color:var(--muted); font-size:14px; }
main { max-width:1120px; margin:0 auto; padding:28px max(20px,env(safe-area-inset-right)) 38px max(20px,env(safe-area-inset-left)); min-height:60vh; }
main:focus { outline:none; }
h1 { margin:0 0 16px; font-size:clamp(1.5rem,3vw,2rem); line-height:1.4; overflow-wrap:anywhere; }
h2 { font-size:1.1rem; line-height:1.5; margin:0 0 12px; overflow-wrap:anywhere; }
p { margin:0 0 14px; white-space:pre-wrap; overflow-wrap:anywhere; unicode-bidi:plaintext; }
.breadcrumb { display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:14px; margin-bottom:8px; }
.breadcrumb button { padding-inline:0; }
.course-context { font-weight:700; color:var(--muted); }
.info-line { padding:13px 17px; border-inline-start:3px solid var(--accent); background:var(--soft); border-radius:0 10px 10px 0; }
.welcome-line { background:#fff3da; border-color:#bf711a; color:#573a15; font-weight:600; }
:root[data-theme="dark"] .welcome-line { background:#3b3020; border-color:#efba71; color:#ffe0af; }
[dir="rtl"] .info-line { border-radius:10px 0 0 10px; }
.actions,.card-actions,.pagination { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-block:16px; }
.navigation { display:flex; flex-wrap:wrap; gap:8px; margin-block:18px 24px; }
.nav-button { text-align:start; background:var(--surface); }
.card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.card { min-width:0; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.card,.form-panel { box-shadow:0 3px 14px rgb(24 36 59 / .045); }
.card-actions { margin-bottom:0; }
.file-button { text-align:start; max-width:100%; color:var(--accent); }
.body-copy { color:var(--muted); }
.page-count,.hint { font-size:14px; color:var(--muted); }
.notice { max-width:1080px; margin:18px auto 0; padding:14px 18px; background:var(--soft); border:1px solid var(--accent); border-radius:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.notice.error { color:var(--danger); border-color:var(--danger); }
.form-panel { max-width:780px; background:var(--surface); padding:24px; border:1px solid var(--line); border-radius:var(--radius); }
.field { margin-bottom:22px; }
label { display:block; font-weight:700; margin-bottom:8px; overflow-wrap:anywhere; }
input,select,textarea { display:block; width:100%; min-width:0; border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--bg); color:var(--text); min-height:48px; }
textarea { min-height:145px; resize:vertical; }
input[type="file"] { line-height:1.4; font-size:14px; }
.grade-row { display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:12px; align-items:center; border-bottom:1px solid var(--line); padding-block:13px; }
.grade-row label { margin:0; font-weight:600; }
.student-number { display:block; color:var(--muted); font-size:13px; }
.attendance-list { list-style:none; margin:16px 0; padding:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.attendance-refresh { margin-block:2px 0; }
.attendance-row { display:flex; align-items:start; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); }
.attendance-row:last-child { border-bottom:0; }
.attendance-status { flex:none; line-height:1.7; }
.attendance-identity { min-width:0; display:flex; gap:4px 10px; flex-wrap:wrap; overflow-wrap:anywhere; }
.attendance-number,.attendance-extra { color:var(--muted); font-size:14px; }
.attendance-number { unicode-bidi:isolate; direction:ltr; }
.review-row { padding:12px 16px; border-bottom:1px solid var(--line); margin:0; background:var(--surface); }
.pagination .page-count { margin:0; }
.status-panel { padding:30px; max-width:700px; margin:30px auto; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); }
footer { text-align:center; padding:20px; color:var(--muted); font-size:13px; }
.skip-link { position:absolute; inset-inline-start:15px; top:-100px; z-index:5; padding:10px; background:var(--surface); }
.skip-link:focus { top:10px; }
@media (max-width:700px) { .card-grid { grid-template-columns:minmax(0,1fr); } main { padding:20px 16px 30px; } .card,.form-panel { padding:18px; } .header-inner { gap:6px; min-height:65px; } .brand { font-size:17px; } .navigation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .notice { margin:14px 16px 0; } .actions>* { flex:1 1 auto; } }
@media (prefers-reduced-motion:no-preference) { button { transition:background-color .12s,border-color .12s; } }