@font-face {
  font-family: "Iran Yekan";
  src: url("/yekan-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Iran Yekan";
  src: url("/yekan-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Iran Yekan";
  src: url("/yekan-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Arabic";
  src: url("/ibmplexarabic_regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Arabic";
  src: url("/ibmplexarabic_semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Arabic";
  src: url("/ibmplexarabic_extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #173a36;
  --muted: #65756f;
  --paper: #f3f5f1;
  --surface: #fffefa;
  --line: #dce5dc;
  --green: #1d5148;
  --green-deep: #123d36;
  --green-soft: #e5f0e9;
  --accent: #d9a751;
  --danger: #a33f3e;
  font-family: "Iran Yekan", Vazirmatn, Tahoma, Arial, sans-serif;
  font-synthesis: none;
}
html { overscroll-behavior-y: none; }
html[lang="ar"], html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea {
  font-family: "IBM Plex Arabic", Tahoma, Arial, sans-serif !important;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-size: 14px; line-height: 1.85; letter-spacing: -.01em; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 8% -5%, #dcebe0 0, transparent 43%), radial-gradient(ellipse at 100% 20%, #f7eacd 0, transparent 35%); }
.page-loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: linear-gradient(135deg, #edf6ef, #fff4dc); }
.page-loader-card { display: flex; align-items: center; gap: 13px; min-width: min(100%, 280px); padding: 20px 23px; border: 1px solid #ffffffb8; border-radius: 19px; background: #fffffff0; color: var(--green-deep); box-shadow: 0 18px 40px #173d3b18; font-weight: 700; animation: loader-enter .35s ease-out both; }
.page-loader .spinner { width: 27px; height: 27px; border-width: 3px; border-color: #d6e5d9; border-top-color: var(--green); animation: loader-spin .8s linear infinite; }
.app-loading .app-shell, .app-loading #notice { visibility: hidden; }
.pull-refresh { position: fixed; z-index: 90; top: max(8px, env(safe-area-inset-top)); left: 50%; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 5px 15px; border: 1px solid #d6e3d9; border-radius: 999px; background: #fffffff2; color: var(--green-deep); box-shadow: 0 5px 16px #173d3b1c; font-size: 12px; font-weight: bold; pointer-events: none; opacity: 0; transform: translate(-50%, -58px); transition: transform .16s ease, opacity .16s ease; }
.pull-refresh.visible { opacity: 1; }
.pull-refresh.refreshing::before { content: ""; width: 13px; height: 13px; margin-inline-end: 7px; border: 2px solid #b7cbc0; border-top-color: var(--green); border-radius: 50%; animation: loader-spin .75s linear infinite; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.app-shell { max-width: 1080px; margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.site-header { display: flex; align-items: center; gap: 13px; padding: 5px 2px 28px; }
.brand-link { display: inline-flex; align-items: center; gap: 13px; min-width: 0; color: inherit; text-decoration: none; border-radius: 18px; }
.brand-link:focus-visible { outline-offset: 4px; }
.brand-mark { flex: 0 0 54px; width: 54px; height: 54px; display: grid; place-items: center; padding: 5px; background: white; border: 1px solid #d8e2dc; border-radius: 17px; box-shadow: 0 8px 18px #16453a16; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-copy { min-width: 0; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; line-height: 1.55; letter-spacing: -.025em; }
.brand-title { display: block; font-size: 20px; font-weight: 700; line-height: 1.55; letter-spacing: -.025em; }
h2 { font-size: 24px; line-height: 1.5; letter-spacing: -.03em; }
h3 { font-size: 17px; line-height: 1.6; letter-spacing: -.02em; }
.eyebrow { font-size: 11px; color: var(--muted); }
#language-select { appearance: none; width: 90px; min-width: 90px; margin-inline-start: auto; padding: 9px 13px 9px 31px; border-radius: 12px; border: 1px solid #d5e1d8; background-color: #ffffffd9; background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%); background-position: 13px 52%, 18px 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; color: var(--ink); font-size: 12px; line-height: 1.3; box-shadow: 0 2px 6px #16453a0d; cursor: pointer; }
#language-select::-ms-expand { display: none; }
#language-select:focus { border-color: #7ba893; box-shadow: 0 0 0 4px #7ba89322; outline: none; }
.student-header-name { margin-inline-start: auto; color: var(--green-deep); font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#student-header-name:not([hidden]) + #language-select { margin-inline-start: 0; }
main { min-height: 60vh; }
.panel { background: var(--surface); border: 1px solid #ffffff; border-radius: 24px; padding: 25px; margin-bottom: 18px; box-shadow: 0 8px 26px #1c49380b, 0 1px 2px #1c49380d; }
.contact-request { border-color: #c8dccd; background: linear-gradient(135deg, #edf6ef, #fff9eb); }
.contact-request .actions { max-width: 360px; }
.hero { position: relative; overflow: hidden; padding: 30px; background: linear-gradient(135deg, #286357, var(--green-deep)); color: white; border-color: #20584d; box-shadow: 0 16px 33px #15483a25; }
.hero::before { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; top: -125px; left: -55px; background: #ffffff0c; }
.hero::after { content: '✦'; position: absolute; left: 20px; bottom: -56px; font-size: 185px; line-height: 1; color: #ffffff0a; pointer-events: none; }
.hero .eyebrow { color: #d8e4d4; margin-bottom: 5px; }
.hero p { max-width: 640px; color: #e1e9df; margin-top: 8px; }
.hero .chip { margin-top: 18px; background: #ffffff17; color: #edf4ea; border-color: #ffffff20; }
.hero .button { margin-top: 18px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.section-heading h2 { font-size: 20px; }
.subtitle, .muted, .help { color: var(--muted); }
.subtitle { margin-top: 7px; }
.help { font-size: 12px; }
.tabs { display: flex; padding: 5px; gap: 5px; background: #e4ebe3; border: 1px solid #dce5dc; border-radius: 16px; margin-bottom: 25px; box-shadow: inset 0 1px 2px #21463d0b; }
.tabs .tab { flex: 1; min-height: 44px; border: 0; border-radius: 12px; color: var(--muted); background: #fff; padding: 8px; font-size: 13px; transition: color .18s, background .18s, box-shadow .18s; }
.tabs .tab.active { color: #fff; background: var(--green); box-shadow: 0 3px 10px #234d3926; font-weight: bold; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); gap: 15px; }
.stack { display: grid; gap: 15px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 19px; border: 1px solid transparent; border-radius: 12px; background: var(--green); color: white; text-decoration: none; font-weight: bold; font-size: 13px; box-shadow: 0 4px 10px #1c4e421c; transition: transform .16s, box-shadow .16s, filter .16s, background .16s; }
.button:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 7px 15px #1c4e4225; }
.button:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.button.secondary { background: var(--green-soft); color: var(--green); }
.button.ghost { background: #ffffffb8; color: var(--green); border-color: #d7e3d9; box-shadow: none; }
.button.ghost.active { color: white; background: var(--green); border-color: var(--green); box-shadow: 0 4px 9px #1c4e421a; }
.button.danger { color: var(--danger); background: #fae9e4; }
.button.accent { color: var(--ink); background: #f1d199; }
.button.small { min-height: 38px; padding: 6px 12px; font-size: 12px; }
.button.wide { width: 100%; }
.button[data-busy="true"]::after { content: ''; width: 13px; height: 13px; border: 2px solid currentColor; border-left-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 16px; }
.actions:first-child { margin-top: 0; }
.field { display: grid; gap: 6px; margin-bottom: 15px; }
.field > span { font-size: 13px; font-weight: bold; }
input:not([type="checkbox"]), textarea, select { color: var(--ink); width: 100%; border: 1px solid #d7e2d8; background: #fffefb; padding: 11px 13px; border-radius: 12px; outline-offset: 2px; min-width: 0; box-shadow: inset 0 1px 2px #1a473909; transition: border-color .16s, box-shadow .16s; }
input:not([type="checkbox"]):focus, textarea:focus, select:focus { border-color: #7ba893; box-shadow: 0 0 0 4px #7ba89322; }
input[type="checkbox"] { width: 21px; height: 21px; accent-color: var(--green); flex-shrink: 0; }
input[type="file"] { font-size: 12px; padding: 9px; }
textarea { resize: vertical; min-height: 105px; }
input[dir="ltr"] { text-align: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .full-width { grid-column: 1 / -1; }
.service-card { display: flex; align-items: start; gap: 13px; border: 1px solid #e0e8e0; border-radius: 19px; padding: 19px; background: var(--surface); box-shadow: 0 3px 11px #1c493806; transition: transform .16s, border-color .16s, background .16s, box-shadow .16s; }
label.service-card { cursor: pointer; }
label.service-card:hover { transform: translateY(-2px); border-color: #9db8a5; box-shadow: 0 9px 18px #1c49380d; }
.external-service-card { align-items: center; color: var(--ink); text-decoration: none; cursor: pointer; }
.external-service-card:hover { transform: translateY(-2px); border-color: #c59645; background: #fffaf0; box-shadow: 0 9px 18px #6f4b110f; }
.external-service-url { direction: ltr; text-align: start; }
.external-service-arrow { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 20px; font-weight: bold; transition: transform .16s, background .16s; }
.external-service-card:hover .external-service-arrow { transform: translate(2px, -2px); background: #f4dfb7; }
.service-card:has(input:checked) { background: #e9f0e5; border-color: #699077; }
.service-card:has(input:disabled) { background: #edefe8; opacity: .8; cursor: default; }
.service-card p { color: var(--muted); font-size: 12px; margin-top: 5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.service-card input { margin-top: 4px; }
.service-card .chip { margin-top: 12px; }
.service-content { flex: 1; min-width: 0; }
.service-content h3 { overflow-wrap: anywhere; }
.request-card { display: block; width: 100%; text-align: start; color: var(--ink); background: var(--surface); border: 1px solid #e0e8e0; border-radius: 20px; padding: 20px; box-shadow: 0 3px 11px #1c493806; transition: transform .16s, border-color .16s, box-shadow .16s; }
button.request-card:hover { transform: translateY(-2px); border-color: #8fae99; box-shadow: 0 10px 22px #20482c10; }
.card-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 13px; }
.card-heading h3 { overflow-wrap: anywhere; }
.request-number { color: var(--muted); font-size: 11px; }
.chip, .status { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid transparent; border-radius: 100px; font-size: 11px; line-height: 1.7; white-space: nowrap; }
.chip { color: #50645b; background: #edf3ed; border-color: #dce8de; }
.status.open { background: #e9ece6; color: #536b52; }
.status.progress { background: #f9ebd3; color: #8b612a; }
.status.done { background: #e3eee3; color: #386440; }
.status.rejected { background: #f7e7e1; color: #a25943; }
.metadata { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 12px; }
.metadata span { display: inline-block; }
.latest-comment { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 13px; padding-top: 11px; border-top: 1px solid #e8ebe3; font-size: 12px; color: #5c7167; white-space: pre-wrap; overflow-wrap: anywhere; }
.latest-comment::before { content: '↳ '; color: #8a9c81; }
.announcements { display: grid; gap: 11px; margin-bottom: 25px; }
.announcement { padding: 14px; margin-bottom: 11px; border: 1px solid #bfdbfe; border-radius: 14px; background: #eff6ff; color: #1e3a5f; }
.announcements .announcement { margin-bottom: 0; }
.announcement.warning { border-color: #fed7aa; background: #fff7ed; color: #7c2d12; }
.announcement:last-child { margin-bottom: 0; }
.announcement p { white-space: pre-wrap; overflow-wrap: anywhere; }
.empty { text-align: center; padding: 36px 20px; }
.empty-symbol { display: block; margin-bottom: 10px; color: #739176; font-size: 35px; }
.empty p { margin-top: 7px; color: var(--muted); }
.loading-panel { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 160px; }
.spinner { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: spin .7s linear infinite; }
.onboarding { max-width: 570px; margin: 25px auto; }
.onboarding .intro-symbol { color: #b78843; font-size: 46px; display: block; margin-bottom: 6px; }
.onboarding form { margin-top: 23px; }
.language-options { display: flex; gap: 12px; margin-top: 23px; }
.language-options button { flex: 1; padding: 17px; }
.toolbar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin: -2px 0 19px; padding: 10px; background: #ffffff8c; border: 1px solid #e1e9e1; border-radius: 17px; }
.toolbar select { width: auto; flex: 1; min-width: 140px; }
.toolbar input[type="search"] { flex: 1 1 230px; min-width: 180px; margin: 0; }
.toolbar .button { margin-inline-start: 0; }
.toolbar > .button.secondary { margin-inline-start: auto; }
.service-request-counts { margin: -5px 0 19px; padding: 13px 15px; border: 1px solid #dce7de; border-radius: 17px; background: var(--surface); }
.service-request-counts h3 { margin-bottom: 9px; font-size: 13px; }
.service-request-count-list { display: flex; flex-wrap: wrap; gap: 8px; }
.service-request-count { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 10px; border-radius: 10px; background: var(--green-soft); color: var(--green-deep); font-size: 12px; }
.service-request-count span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-request-count strong { min-width: 1.5em; padding-inline-start: 8px; border-inline-start: 1px solid #b9d4c0; text-align: center; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 25px 0 8px; }
.page-info { min-width: 105px; text-align: center; color: var(--muted); font-size: 12px; }
.detail-top { margin-bottom: 14px; }
.detail-heading { display: flex; gap: 12px; justify-content: space-between; align-items: start; margin-bottom: 15px; }
.detail-heading h2 { font-size: 22px; }
.detail-facts { display: grid; gap: 8px; margin-top: 15px; border-top: 1px solid var(--line); padding-top: 15px; }
.detail-facts > div { display: flex; justify-content: space-between; gap: 16px; }
.detail-facts dt { color: var(--muted); }
.detail-facts dd { margin: 0; overflow-wrap: anywhere; }
.comment { position: relative; padding: 19px; border: 1px solid #e0e8e0; border-radius: 18px; background: #fffefa; }
.comment.student-comment { border-color: #9cb8d7; background: #f3f8ff; }
.comment + .comment { margin-top: 13px; }
.comment-date { color: var(--muted); font-size: 11px; margin-bottom: 10px; }
.comment-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.attachment { display: flex; align-items: center; gap: 8px; margin-top: 13px; border-top: 1px solid var(--line); padding-top: 12px; }
.attachment button { overflow-wrap: anywhere; word-break: break-word; text-align: start; }
.comment form { margin-top: 12px; }
.inline-form { display: flex; gap: 10px; align-items: end; }
.inline-form .field { flex: 1; margin: 0; }
.student-row { display: flex; align-items: center; gap: 15px; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); }
.student-row:first-child { border-top: 0; }
.student-code { font-family: ui-monospace, monospace; direction: ltr; overflow-wrap: anywhere; }
.notice { position: fixed; z-index: 10; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 30px); background: #1d5148; color: white; box-shadow: 0 12px 30px #15382835; padding: 13px 20px; border: 1px solid #ffffff28; border-radius: 14px; font-size: 13px; }
.notice.error { background: #873e36; }
.error-panel { border-color: #e8bbb0; background: #fff7f2; }
#app-footer { text-align: center; padding: 26px 0 10px; color: #819080; font-size: 11px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-enter { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (min-width: 760px) { .site-header { padding: 16px 2px 34px; } .hero { padding: 37px; } .tabs { max-width: 610px; } }
@media (max-width: 520px) { .app-shell { padding-inline: 14px; } .site-header { padding-bottom: 23px; } .panel { padding: 20px; border-radius: 21px; } .hero { padding: 26px 21px; } h1 { font-size: 17px; } h2 { font-size: 22px; } .eyebrow { font-size: 10px; } .brand-mark { flex-basis: 44px; width: 44px; height: 44px; padding: 4px; border-radius: 14px; } #language-select { width: 82px; min-width: 82px; padding-inline-end: 9px; } .form-grid { grid-template-columns: 1fr; } .form-grid .full-width { grid-column: auto; } .detail-facts > div { flex-wrap: wrap; gap: 2px 10px; } .inline-form { flex-wrap: wrap; } .inline-form .field { flex-basis: 100%; } .inline-form .button { width: 100%; } .toolbar { gap: 7px; padding: 8px; } .toolbar .button { flex: 1 1 auto; } .request-card, .service-card { padding: 17px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.request-import-dialog {
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 24px 80px #123d3633;
  overflow-y: auto;
}
.request-import-dialog::backdrop { background: #123d3680; }
.request-import-dialog h2 { margin-top: 0; }
.request-import-dialog .subtitle { line-height: 1.9; margin-bottom: 20px; }
.request-import-results { margin-top: 20px; }
.request-import-table-wrap { overflow-x: auto; max-height: 48dvh; border: 1px solid var(--line); border-radius: 12px; }
.request-import-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.request-import-table th, .request-import-table td { padding: 12px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.request-import-table th { background: var(--green-soft); white-space: nowrap; position: sticky; top: 0; }
.request-import-table td { min-width: 80px; max-width: 320px; overflow-wrap: anywhere; white-space: pre-wrap; }
.request-import-table td:last-child { min-width: 180px; }
.request-import-errors { color: var(--danger); background: #a33f3e0d; padding: 12px 16px; margin-top: 16px; border-radius: 12px; overflow-wrap: anywhere; }
.request-import-errors p { margin-top: 0; }
.request-import-errors li + li { margin-top: 8px; }
.request-import-actions { margin-top: 24px; }
@media (max-width: 600px) {
  .request-import-dialog { padding: 18px; width: calc(100vw - 20px); }
  .request-import-actions .button { flex: 1 1 100%; }
}