:root {
  --green-950: #062d1f;
  --green-900: #0a3f2b;
  --green-800: #105a3c;
  --green-700: #167249;
  --green-100: #def3e7;
  --yellow: #f3c623;
  --ink: #14231c;
  --muted: #68766f;
  --line: #dfe7e2;
  --paper: #fff;
  --ground: #f3f7f4;
  --danger: #a62e2e;
  --shadow: 0 18px 45px rgba(7, 48, 32, .1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Modern UI motion system */
:root { --ui-ease: cubic-bezier(.22,1,.36,1); --ui-fast: 180ms; --ui-normal: 420ms; }
a,button,input,select,textarea,summary,.panel,.form-panel,.module-grid > *,.stats-grid > *,.attention-card,.role-feature-list > *,.role-preview-menu-grid > *,.role-preview-module-list > * {
  transition: color var(--ui-fast) ease, background-color var(--ui-fast) ease, border-color var(--ui-fast) ease, box-shadow var(--ui-normal) var(--ui-ease), transform var(--ui-normal) var(--ui-ease), opacity var(--ui-fast) ease;
}
.module-grid > a:hover,.role-preview-menu-grid > a:hover,.role-preview-module-list > a:hover,.dashboard-attention-grid > a:hover,.stats-grid > article:hover,.panel:hover {
  transform: translateY(-5px);
  border-color: rgba(8,118,77,.28);
  box-shadow: 0 16px 38px rgba(7,57,36,.11);
}
.role-feature-list > a:hover { z-index: 1; transform: translateY(-3px) scale(1.015); box-shadow: 0 12px 28px rgba(7,57,36,.1); }
.role-preview-menu-grid > a:hover .role-preview-icon,.role-preview-module-list > a:hover .role-preview-icon,.role-feature-list > a:hover .role-feature-icon {
  transform: scale(1.13) rotate(-3deg);
  color: #fff;
  background: linear-gradient(145deg,#08764d,#0ca86c);
  box-shadow: 0 8px 18px rgba(8,118,77,.24);
}
.portal-nav-icon { transition: transform var(--ui-normal) var(--ui-ease), color var(--ui-fast) ease, background-color var(--ui-fast) ease; }
.sidebar nav a:hover .portal-nav-icon { transform: scale(1.12) rotate(-4deg); }
.button:hover,button:not(.ui-toast-close):hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(7,91,58,.18); }
.ui-pressed { transform: scale(.965) !important; transition-duration: 90ms !important; }
.ui-motion-ready .ui-reveal { opacity: 0; transform: translateY(26px) scale(.985); }
.ui-motion-ready .ui-reveal.ui-visible { opacity: 1; transform: none; transition-duration: 650ms; transition-timing-function: var(--ui-ease); }
.ui-motion-ready .ui-delay-1 { transition-delay: 55ms; }
.ui-motion-ready .ui-delay-2 { transition-delay: 110ms; }
.ui-motion-ready .ui-delay-3 { transition-delay: 165ms; }
.public-hero::before,.student-welcome::before { animation: ui-float 8s ease-in-out infinite alternate; }
@keyframes ui-float { from { transform: translate3d(-1%,0,0) scale(1); } to { transform: translate3d(2%,3%,0) scale(1.05); } }
.ui-toast { position: relative; padding-right: 48px !important; animation: ui-toast-in 480ms var(--ui-ease) both; }
.ui-toast-close { position: absolute; top: 50%; right: 12px; display: grid; width: 27px; height: 27px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.08); color: currentColor; font-size: 20px; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.ui-toast-hide { opacity: 0; transform: translateX(18px); }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
dialog.ui-modal { width: min(620px,calc(100% - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.28); animation: ui-modal-in 360ms var(--ui-ease) both; }
dialog.ui-modal::backdrop { background: rgba(4,24,15,.62); backdrop-filter: blur(5px); animation: ui-fade-in 240ms ease both; }
.ui-modal-content { padding: 25px; }
.ppdb-submit-confirm .ui-modal-content { padding: 30px; text-align: center; }
.ppdb-submit-confirm h2 { margin: 8px 0 10px; font-size: clamp(1.35rem,3vw,2rem); }
.ppdb-submit-confirm p { max-width: 510px; margin: 0 auto; color: var(--muted); line-height: 1.65; }
.ppdb-confirm-icon { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 28px; color: #fff; background: linear-gradient(145deg,#0b6a43,#22a875); box-shadow: 0 16px 36px rgba(11,106,67,.25); transform: rotate(-3deg); }
.ppdb-confirm-icon svg { width: 58px; height: 58px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ppdb-confirm-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.ppdb-bulk-toolbar { display: flex; align-items: end; gap: 10px; margin: 16px 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #f7faf8; }
.ppdb-bulk-toolbar > strong { align-self: center; min-width: 82px; color: var(--green); }
.ppdb-bulk-toolbar label { flex: 1; margin: 0; }
.ppdb-bulk-toolbar select { min-width: 190px; }
.ppdb-status-panel + .ppdb-status-panel { margin-top: 18px; }
.ppdb-bulk-toolbar .ppdb-select-all-label { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.ppdb-select-all-label input { width: auto; }
.ppdb-next-status-note { flex: 1; color: var(--muted); font-size: .88rem; }
@media (max-width:760px) { .ppdb-bulk-toolbar { align-items: stretch; flex-direction: column; } .ppdb-bulk-toolbar .button,.ppdb-bulk-toolbar select { width: 100%; } }
@media (max-width:560px) { .ppdb-submit-confirm .ui-modal-content { padding: 24px 18px; } .ppdb-confirm-actions { flex-direction: column-reverse; } .ppdb-confirm-actions .button { width: 100%; } }
@keyframes ui-modal-in { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@supports (animation-timeline: view()) {
  .public-section > * { animation: ui-scroll-drift linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  @keyframes ui-scroll-drift { from { opacity: .25; transform: translateY(34px); } to { opacity: 1; transform: none; } }
}
@media (hover: none) {
  .module-grid > a:hover,.role-preview-menu-grid > a:hover,.role-preview-module-list > a:hover,.dashboard-attention-grid > a:hover,.stats-grid > article:hover,.panel:hover,.role-feature-list > a:hover { transform: none; box-shadow: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ui-motion-ready .ui-reveal { opacity: 1; transform: none; }
}

/* Public website rotating highlights */
.public-scroll-progress { position: fixed; z-index: 120; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg,#f3c623,#12b879); box-shadow: 0 1px 8px rgba(243,198,35,.45); pointer-events: none; transition: width 90ms linear; }
.public-header { transition: min-height 320ms var(--ui-ease),padding 320ms var(--ui-ease),box-shadow 320ms ease,background-color 320ms ease; }
.public-header.is-scrolled { box-shadow: 0 12px 34px rgba(7,48,32,.12); }
.public-header nav a { position: relative; transition: color var(--ui-fast) ease,transform var(--ui-normal) var(--ui-ease); }
.public-header nav a::after { content: ""; position: absolute; right: 50%; bottom: -7px; left: 50%; height: 2px; border-radius: 2px; background: var(--green-700); transition: right 280ms var(--ui-ease),left 280ms var(--ui-ease); }
.public-header nav a:hover { color: var(--green-700); transform: translateY(-2px); }
.public-header nav a:hover::after { right: 0; left: 0; }
.public-brand:hover img { transform: scale(1.08) rotate(-3deg); }
.public-brand img { transition: transform 500ms var(--ui-ease); }
.public-hero > div { animation: public-hero-copy 850ms var(--ui-ease) both; }
.public-hero > aside { animation: public-hero-card 900ms 150ms var(--ui-ease) both; }
.public-hero h1 { text-wrap: balance; }
@keyframes public-hero-copy { from { opacity: 0; transform: translateX(-42px); } to { opacity: 1; transform: none; } }
@keyframes public-hero-card { from { opacity: 0; transform: translateX(42px) scale(.94); } to { opacity: 1; transform: none; } }
.hero-actions a,.public-login { position: relative; overflow: hidden; }
.hero-actions a::after,.public-login::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 20%,rgba(255,255,255,.3) 45%,transparent 70%); transform: translateX(-125%); transition: transform 650ms var(--ui-ease); pointer-events: none; }
.hero-actions a:hover::after,.public-login:hover::after { transform: translateX(125%); }
.hero-actions a:hover { transform: translateY(-4px) scale(1.025); box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.news-grid article { overflow: hidden; }
.news-grid article img,.news-grid article .image-placeholder { transition: transform 750ms var(--ui-ease),filter 500ms ease; }
.news-grid article:hover { transform: translateY(-7px); box-shadow: 0 22px 46px rgba(7,48,32,.13); }
.news-grid article:hover img,.news-grid article:hover .image-placeholder { transform: scale(1.055); filter: saturate(1.12); }
.news-grid article h3 a { background-image: linear-gradient(var(--green-700),var(--green-700)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; transition: background-size 360ms var(--ui-ease),color var(--ui-fast) ease; }
.news-grid article:hover h3 a { color: var(--green-700); background-size: 100% 2px; }
.notice-list a:hover,.event-list a:hover,.page-links a:hover { transform: translateX(7px); border-color: rgba(8,118,77,.28); box-shadow: 0 10px 24px rgba(7,48,32,.08); }
.event-list a:hover > span { transform: scale(1.07) rotate(-2deg); }
.event-list a > span { transition: transform 400ms var(--ui-ease),background-color var(--ui-fast) ease; }
.public-gallery figure { position: relative; overflow: hidden; transition: transform 500ms var(--ui-ease),box-shadow 500ms var(--ui-ease); }
.public-gallery figure img { transition: transform 800ms var(--ui-ease),filter 500ms ease; }
.public-gallery figure:hover { z-index: 1; transform: translateY(-7px) rotate(.35deg); box-shadow: 0 22px 46px rgba(7,48,32,.16); }
.public-gallery figure:hover img { transform: scale(1.075); filter: brightness(.82) saturate(1.12); }
.public-gallery figure figcaption { transition: transform 500ms var(--ui-ease),background-color 400ms ease; }
.public-gallery figure:hover figcaption { transform: translateY(-4px); }
.public-gallery figure.is-lightbox-ready { cursor: zoom-in; }
.public-lightbox { width: min(1000px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 20px; color: #fff; background: rgba(4,24,15,.92); box-shadow: 0 30px 100px rgba(0,0,0,.5); animation: ui-modal-in 420ms var(--ui-ease) both; }
.public-lightbox::backdrop { background: rgba(2,16,10,.78); backdrop-filter: blur(9px); }
.public-lightbox img { display: block; width: 100%; max-height: calc(100dvh - 125px); border-radius: 13px; object-fit: contain; }
.public-lightbox p { margin: 10px 45px 2px 6px; color: rgba(255,255,255,.82); font-size: 12px; }
.public-lightbox-close { position: absolute; z-index: 2; top: 20px; right: 20px; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(0,0,0,.48); font-size: 25px; }
.public-lightbox-close:hover { color: var(--green-900); background: #fff; }
.public-lightbox-nav, .public-lightbox-fullscreen { position: absolute; z-index: 2; top: 50%; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(0,0,0,.48); font-size: 30px; line-height: 1; }
.public-lightbox-nav:hover, .public-lightbox-fullscreen:hover { color: var(--green-900); background: #fff; }
.public-lightbox-prev { left: 20px; }
.public-lightbox-next { right: 20px; }
.public-lightbox-fullscreen { top: 20px; right: 68px; font-size: 20px; }
.public-lightbox.is-fullscreen { position: fixed; z-index: 9999; inset: 0; display: grid; align-items: center; justify-items: center; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 24px 70px 20px; border: 0; border-radius: 0; background: rgba(0,0,0,.96); }
.public-lightbox.is-fullscreen img { width: auto; max-width: 100%; max-height: calc(100vh - 80px); margin: auto; }
.public-lightbox.is-zoomed { overflow: auto; }
.public-lightbox.is-zoomed img { max-width: none; transform: scale(2); transform-origin: center center; cursor: zoom-out; touch-action: none; }
.public-lightbox:fullscreen { width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; }
.public-lightbox:fullscreen img { max-height: calc(100dvh - 80px); }
:fullscreen .public-lightbox { width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; }
:fullscreen .public-lightbox img { max-height: calc(100dvh - 80px); }
@media (max-width:760px) {
  .public-lightbox { width: calc(100vw - 20px); max-width: none; max-height: calc(100dvh - 20px); padding: 10px; border-radius: 12px; }
  .public-lightbox img { width: 100%; max-height: calc(100dvh - 105px); border-radius: 8px; touch-action: pan-y; }
  .public-lightbox.is-fullscreen { inset: 0; width: 100vw; height: 100dvh; max-height: none; padding: max(52px, env(safe-area-inset-top)) 0 max(44px, env(safe-area-inset-bottom)); border-radius: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .public-lightbox.is-fullscreen img { width: 100vw !important; max-width: 100vw !important; height: auto; max-height: calc(100dvh - 100px); margin: 0; border-radius: 0; object-fit: contain; }
  .public-lightbox.is-zoomed { padding: 52px 42px 20px; overflow: auto; }
  .public-lightbox.is-zoomed img { width: auto; max-width: none; max-height: none; transform: scale(2); touch-action: none; }
  .public-lightbox-close { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: 40px; height: 40px; }
  .public-lightbox-fullscreen { top: max(10px, env(safe-area-inset-top)); right: 58px; width: 40px; height: 40px; }
  .public-lightbox-nav { position: fixed; top: 50%; width: 40px; height: 40px; border-color: rgba(255,255,255,.18); background: rgba(0,0,0,.28); backdrop-filter: blur(5px); }
  .public-lightbox-prev { left: 8px; }
  .public-lightbox-next { right: 8px; }
  .public-lightbox p { position: absolute; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); left: 0; margin: 0; font-size: 11px; text-align: center; }
}
.public-footer a:hover { color: #f3c623; transform: translateX(5px); }
.public-spotlight { position: fixed; z-index: 70; right: 22px; bottom: 20px; width: min(390px,calc(100vw - 28px)); border: 1px solid rgba(255,255,255,.55); border-radius: 20px; color: #fff; background: rgba(7,55,36,.94); box-shadow: 0 22px 70px rgba(2,30,18,.3); backdrop-filter: blur(16px); overflow: hidden; opacity: 0; visibility: hidden; transform: translate3d(0,28px,0) scale(.94); transition: opacity 360ms ease,visibility 360ms ease,transform 500ms var(--ui-ease),width 400ms var(--ui-ease); }
.public-spotlight.is-ready { opacity: 1; visibility: visible; transform: none; }
.public-spotlight > header { position: absolute; z-index: 3; top: 10px; right: 10px; display: flex; align-items: center; justify-content: flex-end; padding: 0; border: 0; background: transparent; }
.public-spotlight > header > div:first-child { display: grid; grid-template-columns: 10px 1fr; align-items: center; gap: 1px 9px; }
.public-spotlight > header strong { font-size: 12px; letter-spacing: .02em; }
.public-spotlight > header small { grid-column: 2; color: rgba(255,255,255,.62); font-size: 9px; }
.public-spotlight-pulse { grid-row: 1/3; width: 9px; height: 9px; border-radius: 50%; background: #f3c623; box-shadow: 0 0 0 0 rgba(243,198,35,.6); animation: spotlight-pulse 2.2s infinite; }
@keyframes spotlight-pulse { 65% { box-shadow: 0 0 0 8px rgba(243,198,35,0); } 100% { box-shadow: 0 0 0 0 rgba(243,198,35,0); } }
.public-spotlight-actions { display: flex; gap: 5px; }
.public-spotlight-actions button { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.08); font-size: 15px; box-shadow: none; }
.public-spotlight-actions button:hover { color: #073924; background: #fff; transform: translateY(-1px); box-shadow: none; }
.public-spotlight-track { position: relative; min-height: 236px; }
.public-spotlight-card { position: absolute; inset: 0; display: grid; grid-template-columns: 122px 1fr; align-items: stretch; opacity: 0; visibility: hidden; transform: translateX(24px) scale(.98); transition: opacity 420ms ease,visibility 420ms ease,transform 600ms var(--ui-ease); }
.public-spotlight-card.is-active { position: relative; min-height: 236px; opacity: 1; visibility: visible; transform: none; }
.public-spotlight-card > img { width: 122px; height: 100%; min-height: 236px; object-fit: cover; }
.public-spotlight-card > div:last-child { align-self: center; padding: 20px 18px; }
.public-spotlight-card > div > span:first-child { display: block; margin-bottom: 7px; color: #f3c623; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.public-spotlight-card time { display: block; margin-bottom: 5px; color: rgba(255,255,255,.58); font-size: 9px; }
.public-spotlight-card h3 { margin: 0 0 8px; color: #fff; font-family: Georgia,serif; font-size: 19px; line-height: 1.12; }
.public-spotlight-card p { display: -webkit-box; margin: 0 0 13px; overflow: hidden; color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.public-spotlight-card a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 10px; font-weight: 850; }
.public-spotlight-card a b { color: #f3c623; transition: transform var(--ui-fast) ease; }
.public-spotlight-card a:hover b { transform: translateX(4px); }
.spotlight-announcement { grid-template-columns: 88px 1fr; background: linear-gradient(135deg,#584300,#8a6700); }
.spotlight-event { grid-template-columns: 104px 1fr; background: linear-gradient(135deg,#3d285f,#7048a0); }
.spotlight-gallery { background: linear-gradient(135deg,#063c28,#08764d); }
.spotlight-social { grid-template-columns: 88px 1fr; background: linear-gradient(135deg,#183153,#365e92); }
.spotlight-symbol { align-self: center; justify-self: center; display: grid; width: 54px; height: 54px; padding: 13px; place-items: center; border-radius: 17px; color: #fff; background: rgba(255,255,255,.14); }
.spotlight-symbol svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.spotlight-date { align-self: center; justify-self: center; display: grid; width: 70px; padding: 13px 8px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 18px; background: rgba(255,255,255,.1); }
.spotlight-date b { font-family: Georgia,serif; font-size: 30px; line-height: 1; }
.spotlight-date span { margin-top: 5px; color: rgba(255,255,255,.7); font-size: 9px; text-transform: uppercase; }
.spotlight-social nav { display: flex; flex-wrap: wrap; gap: 6px; }
.spotlight-social nav a { padding: 6px 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.08); }
.spotlight-social nav a:hover { color: #183153; background: #fff; transform: translateY(-2px); }
.public-spotlight > footer { height: 3px; background: rgba(255,255,255,.1); }
.public-spotlight > footer span { display: block; width: 0; height: 100%; background: #f3c623; }
.public-spotlight.spotlight-progressing:not(.is-hover-paused) > footer span { animation: spotlight-progress 8.5s linear forwards; }
.public-spotlight.is-paused > footer span { animation-play-state: paused; }
@keyframes spotlight-progress { from { width: 0; } to { width: 100%; } }
@media (max-width: 600px) {
  .public-spotlight { right: 12px; bottom: 12px; width: calc(100vw - 24px); border-radius: 17px; }
  .public-spotlight-track { min-height: 196px; }
  .public-spotlight-card,.public-spotlight-card.is-active { min-height: 196px; grid-template-columns: 92px 1fr; }
  .public-spotlight-card > img { width: 92px; min-height: 196px; }
  .public-spotlight-card > div:last-child { padding: 15px 14px; }
  .public-spotlight-card h3 { font-size: 17px; }
  .public-spotlight-card p { -webkit-line-clamp: 2; }
  .spotlight-announcement,.spotlight-social { grid-template-columns: 72px 1fr; }
  .spotlight-event { grid-template-columns: 84px 1fr; }
  .spotlight-symbol { width: 46px; height: 46px; padding: 11px; border-radius: 14px; }
  .spotlight-date { width: 62px; }
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--ground); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
small { display: block; color: var(--muted); }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, .9fr) minmax(430px, 1.1fr); }
.auth-identity { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 7vw, 100px); color: #fff; background: radial-gradient(circle at 20% 15%, #258458 0, transparent 32%), linear-gradient(145deg, var(--green-950), var(--green-700)); }
.auth-identity::after { content: ""; position: absolute; right: -130px; bottom: -180px; width: 420px; height: 420px; border: 55px solid rgba(243, 198, 35, .14); border-radius: 50%; }
.auth-mark { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 30px; border: 2px solid rgba(255,255,255,.7); border-radius: 22px; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.22); overflow: hidden; flex: 0 0 auto; }
.auth-mark img { display: block; width: 88px; height: 88px; max-width: 100%; aspect-ratio: 1; object-fit: contain; }
.auth-identity p { margin-bottom: 10px; color: var(--yellow); font-size: 13px; font-weight: 800; letter-spacing: .22em; }
.auth-identity h1 { max-width: 600px; margin-bottom: 20px; font-family: Georgia, serif; font-size: clamp(38px, 5vw, 68px); line-height: 1.02; }
.auth-identity small { color: rgba(255,255,255,.75); font-weight: 650; letter-spacing: .08em; }
.auth-panel { display: grid; place-items: center; padding: 36px; }
.auth-card { width: min(100%, 520px); padding: clamp(30px, 5vw, 54px); border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.auth-card h2 { margin: 10px 0 8px; font-size: 32px; }
.auth-card > p { color: var(--muted); line-height: 1.65; }
.kicker, .eyebrow { color: var(--green-700); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.form-stack, .form-grid, .data-form { display: grid; gap: 18px; margin-top: 28px; }
.form-grid, .data-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label { display: grid; gap: 7px; color: #304239; font-size: 13px; font-weight: 750; }
input, select, textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #cfdad3; border-radius: 9px; outline: none; background: #fff; color: var(--ink); }
textarea { resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(22, 114, 73, .12); }
.checkbox { display: flex; align-items: center; align-self: end; min-height: 46px; }
.checkbox input { width: 18px; min-height: auto; }
.reportable-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 15px; border: 1px solid #d7e3dc; border-radius: 10px; background: #f7fbf8; cursor: pointer; }
.reportable-option > input { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 1px 0 0; padding: 0; accent-color: var(--green-700); }
.reportable-option > span { display: grid; gap: 4px; min-width: 0; }
.reportable-option strong { color: var(--green-900); font-size: 13px; line-height: 1.35; }
.reportable-option small { color: var(--muted); font-weight: 600; line-height: 1.5; }
.reportable-option:has(input:focus-visible) { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(22,114,73,.12); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 18px; border: 0; border-radius: 9px; background: var(--green-800); color: #fff; font-weight: 800; }
.button:hover { background: var(--green-950); }
.form-actions, .form-action { display: flex; align-items: end; }
.form-actions { gap: 8px; }
.checkbox-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:9px 16px; padding:4px 0; }
.checkbox-grid .check-option { display:flex; align-items:center; gap:8px; margin:0; font-weight:600; }
.checkbox-grid .check-option input { width:auto; min-height:auto; margin:0; }
.form-grid > .check-option { display:flex; align-items:center; align-self:end; gap:8px; min-height:42px; padding:0 2px; margin:0; font-size:13px; font-weight:600; line-height:1.35; }
.form-grid > .check-option input[type="checkbox"] { appearance:auto; -webkit-appearance:checkbox; width:18px; min-width:18px; height:18px; min-height:18px; padding:0; margin:0; border:0; box-shadow:none; accent-color:#0d6b45; }
.form-grid > .form-actions { align-self:end; }
.form-grid > .form-actions .button { min-height:38px; padding:8px 15px; font-size:13px; }
.full-field { grid-column: 1 / -1; }
.form-grid label > img[alt="Tanda tangan"],
.form-grid label > img[alt="Stempel"],
.form-grid label > img[alt="Tanda tangan dan stempel"] {
  display: block;
  width: auto;
  height: auto;
  margin-top: 8px;
  object-fit: contain;
  object-position: left center;
}
.form-grid label > img[alt="Tanda tangan"] { max-width: 180px; max-height: 90px; }
.form-grid label > img[alt="Stempel"] { max-width: 130px; max-height: 100px; }
.form-grid label > img[alt="Tanda tangan dan stempel"] { max-width: 240px; max-height: 120px; }
.button.secondary { border: 1px solid var(--line); background: #fff; color: var(--green-800); }
.auth-links { display: flex; justify-content: space-between; gap: 18px; margin-top: 23px; color: var(--muted); font-size: 12px; }
.auth-links a { color: var(--green-700); font-weight: 800; }
.setup-steps { margin-top: 25px; padding: 18px; border: 1px solid #f0d577; border-radius: 12px; background: #fff9dc; }
.setup-steps li { margin-top: 8px; }

.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 25px 18px; overflow-y: auto; color: #fff; background: linear-gradient(180deg, var(--green-950), #073924 72%, #0b4c30); }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 25px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar-brand > span { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: #fff; overflow: hidden; }
.sidebar-brand > span img { display: block; width: 44px; height: 44px; max-width: 100%; aspect-ratio: 1; object-fit: contain; }
.sidebar-brand strong, .sidebar-brand small { display: block; }
.sidebar-brand strong { font-size: 12px; letter-spacing: .1em; }
.sidebar-brand small { margin-top: 3px; color: rgba(255,255,255,.62); font-size: 10px; }
.sidebar nav { margin-top: 25px; }
.sidebar nav p { padding: 0 10px; color: rgba(255,255,255,.4); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; margin: 4px 0; padding: 10px 11px; border-radius: 8px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 650; }
.sidebar nav a > span { min-width: 0; flex: 1; }
.portal-nav-icon { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; border-radius: 8px; color: #bfe7d2; background: rgba(255,255,255,.08); }
.portal-nav-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar nav a:hover .portal-nav-icon,.sidebar nav a.active .portal-nav-icon { color: #fff; background: rgba(255,255,255,.15); }
.sidebar nav a:hover, .sidebar nav a.active { background: rgba(255,255,255,.1); color: #fff; }
.sidebar nav a.active { box-shadow: inset 3px 0 var(--yellow); }
.sidebar nav b { color: var(--yellow); }
.sidebar-foot { margin-top: auto; padding: 18px 10px 0; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar-foot span, .sidebar-foot a { display: block; font-size: 10px; }
.sidebar-foot span { color: rgba(255,255,255,.5); }
.sidebar-foot a { margin-top: 8px; color: var(--yellow); font-weight: 800; }
.mobile-sidebar-logout { display: none; }
.admin-content { min-width: 0; }
.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 12px clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); }
.topbar > div > strong { display: block; margin-top: 3px; font-family: Georgia, serif; }
.user-box { display: flex; align-items: center; gap: 10px; }
.profile-link { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.user-avatar, .user-avatar-fallback { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--green-100); color: var(--green-800); object-fit: cover; font-weight: 900; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.profile-photo-large { display:grid; width:132px; height:132px; min-width:132px; min-height:132px; flex:0 0 132px; place-items:center; border-radius:50%; object-fit:cover; background:var(--green-100); border:4px solid #fff; box-shadow:0 0 0 1px var(--line); }
.profile-photo-crop { position:relative; overflow:hidden; padding:0; }
.profile-photo-crop > img { position:absolute; left:50%; top:50%; max-width:none; object-fit:fill; transform-origin:center; will-change:transform; }
.profile-page,.profile-panel,.profile-identity,.profile-identity-copy { min-width: 0; }
.profile-panel { max-width: 920px; }
.profile-identity { align-items: center; gap: 28px; }
.profile-photo-wrap { flex: 0 0 auto; }
.profile-identity-copy h2 { margin-bottom: 7px; }
.profile-identity-copy p { display: flex; flex-wrap: wrap; gap: 3px 8px; margin: 0; }
.profile-identity-copy p span { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.profile-identity-copy p i { color: var(--muted); font-style: normal; }
.profile-panel input[type="file"] { max-width: 100%; }
.photo-focus-editor { display:grid; grid-template-columns:minmax(260px,380px) minmax(240px,1fr); gap:22px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:12px; background:#f8fbf9; }
.photo-focus-previews { display:flex; align-items:flex-end; justify-content:center; gap:16px; }
.photo-focus-stage { position:relative; width:min(100%,260px); aspect-ratio:1; overflow:hidden; display:grid; place-items:center; border:3px solid #fff; border-radius:50%; outline:1px solid #b9d2c4; background:#17211c; color:#fff; text-align:center; cursor:grab; touch-action:none; user-select:none; }
.photo-focus-stage.is-dragging { cursor:grabbing; }
.photo-focus-stage img { position:absolute; left:50%; top:50%; max-width:none; display:block; transform-origin:center; will-change:transform; pointer-events:none; }
.photo-focus-stage > span { max-width:150px; padding:15px; font-size:11px; line-height:1.45; }
.photo-focus-stage i { position:absolute; inset:50% auto auto 50%; width:28px; height:28px; border:1px solid rgba(255,255,255,.9); border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.28); transform:translate(-50%,-50%); pointer-events:none; }
.photo-focus-stage i::before,.photo-focus-stage i::after { content:""; position:absolute; background:rgba(255,255,255,.9); box-shadow:0 0 0 .5px rgba(0,0,0,.28); }
.photo-focus-stage i::before { left:50%; top:-7px; width:1px; height:40px; }
.photo-focus-stage i::after { left:-7px; top:50%; width:40px; height:1px; }
.photo-focus-avatar { position:relative; width:72px; height:72px; overflow:hidden; display:grid; place-items:center; flex:0 0 72px; border:3px solid #fff; border-radius:50%; background:#e7f0eb; color:var(--muted); box-shadow:0 0 0 1px var(--line); text-align:center; }
.photo-focus-avatar img { position:absolute; left:50%; top:50%; max-width:none; display:block; transform-origin:center; will-change:transform; }
.photo-focus-avatar span { padding:8px; font-size:9px; line-height:1.25; }
.photo-focus-controls { display:grid; gap:10px; }
.photo-focus-controls > strong { color:var(--green-900); font-size:16px; }
.photo-focus-controls > small { margin-top:-5px; color:var(--muted); line-height:1.45; }
.photo-focus-controls label { grid-template-columns:82px 1fr; align-items:center; gap:10px; }
.photo-focus-controls input[type="range"] { min-height:24px; padding:0; accent-color:var(--green-700); }
.photo-focus-controls .button { width:max-content; }
.profile-admin-field { display: flex; align-items: center; gap: 20px; grid-column: 1 / -1; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #f8fbf9; }
.profile-admin-field > div { width:132px; min-width:132px; flex:0 0 132px; overflow:hidden; }
.profile-admin-field label { flex: 1; }
.teacher-identity { display: flex; align-items: center; gap: 11px; min-width: 230px; }
.teacher-identity > div { display: flex; flex-direction: column; gap: 3px; }
.teacher-identity small, table td > small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.45; }
.photo-return-highlight { background:#edf8f1; }
.form-section-label { margin-top:6px; padding:11px 13px; border-left:4px solid var(--green-700); border-radius:8px; background:#edf8f1; }
.form-section-label strong,.form-section-label small { display:block; }
.form-section-label small { margin-top:3px; color:var(--muted); }
.operator-validation-grid { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.operator-validation-grid article { display:flex; flex-direction:column; align-items:flex-start; }
.operator-validation-grid .table-action { margin-top:auto; }
.operator-student-checks { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px; max-height:320px; padding:14px; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.operator-student-checks legend { padding:0 7px; font-weight:800; }
.bulk-actions, .row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.selection-cell { width: 42px; text-align: center; }
.selection-cell input { width: 18px; height: 18px; accent-color: var(--green-700); }
.finance-wa-check { width: 54px; min-width: 54px; padding: 10px 12px; text-align: center; }
.finance-wa-check input[type="checkbox"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--green-700);
  vertical-align: middle;
  cursor: pointer;
}
.finance-wa-check input[type="checkbox"]:focus-visible { outline: 3px solid rgba(22,114,73,.2); outline-offset: 2px; box-shadow: none; }
.finance-wa-check input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .45; }
.user-box strong { display: block; font-size: 12px; }
.user-box small { max-width: 220px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
.user-box button { margin-left: 8px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--danger); font-size: 11px; font-weight: 800; }
.notification-bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 4px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--green-800); }
.notification-bell span { position: absolute; width: 0; height: 0; overflow: hidden; }
.notification-bell::before { content: "!"; display: grid; place-items: center; width: 21px; height: 21px; border: 2px solid currentColor; border-radius: 50%; font-size: 13px; font-weight: 900; }
.notification-bell b { position: absolute; right: -3px; top: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 10px; line-height: 19px; text-align: center; }
.admin-main { max-width: 1500px; margin: 0 auto; padding: clamp(24px, 4vw, 52px); }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 32px; }
.page-heading h1 { margin: 7px 0 8px; font-family: Georgia, serif; font-size: clamp(30px, 4vw, 45px); }
.page-heading p { max-width: 750px; margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.academic-badge { padding: 12px 16px; border-left: 4px solid var(--yellow); background: #fff; box-shadow: 0 8px 25px rgba(0,0,0,.05); }
.academic-badge span, .academic-badge strong { display: block; }
.academic-badge span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.academic-badge strong { margin-top: 4px; font-size: 13px; }
.section-title, .panel-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 34px 0 16px; }
.section-title h2, .panel-title h2 { margin: 0; font-size: 19px; }
.section-title span, .section-title a { color: var(--muted); font-size: 11px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.stats-grid article, .role-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.stats-grid span { color: var(--muted); font-size: 11px; font-weight: 700; }
.stats-grid strong { display: block; margin: 8px 0 5px; color: var(--green-800); font-family: Georgia, serif; font-size: 35px; }
.recap-stat-link { display: block; color: inherit; }
.recap-stat-link article { height: 100%; transition: transform .15s ease, border-color .15s ease; }
.recap-stat-link:hover article { transform: translateY(-2px); border-color: var(--green-600); }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.module-grid a { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 13px; padding: 19px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: .18s ease; }
.module-grid a:hover { border-color: #8bb8a0; transform: translateY(-2px); box-shadow: var(--shadow); }
.module-grid a > span, .module-symbol { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 10px; background: var(--green-100); color: var(--green-800); font-weight: 900; }
.module-grid h3 { margin: 0 0 5px; font-size: 14px; }
.module-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.module-grid b { color: var(--green-700); }
.role-switcher { display: flex; gap: 8px; margin: -5px 0 24px; overflow-x: auto; padding-bottom: 5px; }
.role-switcher a { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 800; }
.role-switcher a.active { border-color: var(--green-800); background: var(--green-800); color: #fff; }
.scope-strip { display: grid; grid-template-columns: 210px 1fr; gap: 18px; margin-bottom: 25px; padding: 18px; border: 1px solid #cddfd4; border-radius: 13px; background: #f8fcf9; }
.scope-strip > div:first-child span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }.scope-strip > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.scope-chip { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #52645a; font-size: 11px; }.scope-chip.primary { border-color: #d0ad1d; background: #fff8d9; }.scope-chip b { color: var(--green-900); }
.role-module-grid .module-planned { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 13px; padding: 19px; border: 1px dashed #c7d1cb; border-radius: 12px; background: #f6f8f7; color: #748078; }
.dashboard-attention-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.dashboard-schedule-card { width: min(100%,560px); margin: 26px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(5,77,49,.08); }
.dashboard-main-grid { display: grid; grid-template-columns: minmax(0,560px) minmax(0,1fr); gap: 24px; align-items: start; margin: 26px 0; }
.dashboard-main-grid .dashboard-schedule-card { width: 100%; margin: 0; }
.dashboard-side-column { display: grid; gap: 24px; min-width: 0; align-content: start; }
.dashboard-schedule-column { display: grid; gap: 18px; min-width: 0; align-content: start; }
.dashboard-learning-actions { margin-top: 8px; }
.dashboard-learning-actions .button { min-height: 30px; padding: 6px 11px; font-size: 12px; line-height: 1; }
.dashboard-task-summary { min-width: 0; }
.dashboard-task-summary .section-title { margin-top: 0; }
.dashboard-task-summary .stats-grid,.dashboard-recap-summary .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dashboard-recap-summary .section-title { margin-top: 0; }
.dashboard-schedule-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; background: #087249; color: #fff; }
.dashboard-schedule-head .eyebrow { color: #d9f5e8; }
.dashboard-schedule-head h2 { margin: 3px 0 0; color: #fff; font-size: 18px; }
.dashboard-schedule-head > a { padding: 9px 13px; border: 1px solid rgba(255,255,255,.45); border-radius: 8px; color: #fff; font-size: 12px; font-weight: 800; }
.dashboard-schedule-classes { display: flex; flex-wrap: wrap; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: #fbfdfc; }
.dashboard-schedule-classes a { padding: 8px 12px; border: 1px solid #b8d7c8; border-radius: 7px; color: var(--green); font-size: 11px; font-weight: 800; }
.dashboard-schedule-classes a:hover,.dashboard-schedule-classes a.active { border-color: var(--green); background: var(--green); color: #fff; }
.dashboard-schedule-list { display: grid; grid-template-columns: 1fr; }
.dashboard-schedule-list article { display: grid; grid-template-columns: 118px minmax(0,1fr); min-height: 72px; border-bottom: 1px solid var(--line); }
.dashboard-schedule-list article time { display: flex; align-items: center; justify-content: center; padding: 12px 8px; background: #edf7f2; color: #075f3e; font-size: 11px; font-weight: 800; }
.dashboard-schedule-list article > div { display: flex; flex-direction: column; justify-content: center; padding: 11px 13px; }
.dashboard-schedule-list article strong { color: var(--green-900); font-size: 13px; }
.dashboard-schedule-list article span { margin-top: 2px; color: #33463c; font-size: 11px; }
.dashboard-schedule-list article small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.dashboard-schedule-list article .empty-slot { color: #89968f; }
.dashboard-schedule-list article.break time,.dashboard-schedule-list article.break > div { background: #f4c515; color: #173b2a; }
.dashboard-schedule-empty { display: grid; place-content: center; min-height: 210px; padding: 32px; text-align: center; }
.dashboard-schedule-empty strong { color: var(--green-900); font-size: 15px; }
.dashboard-schedule-empty span { max-width: 360px; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.attention-card { display: grid; grid-template-columns: 8px 1fr auto; gap: 14px; align-items: center; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.attention-card > span { width: 8px; height: 42px; border-radius: 8px; background: #6b8f79; }.attention-card strong { color: var(--green-900); }.attention-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }.attention-card b { color: var(--green-700); }
.attention-urgent > span { background: #b42318; }.attention-warning > span { background: #e1a900; }.attention-success > span { background: #1d7a46; }.attention-info > span { background: #37749a; }
.role-feature-groups { display: grid; gap: 14px; }.role-feature-panel { border: 1px solid var(--line); border-radius: 13px; background: #fff; overflow: hidden; }
.role-feature-panel summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; cursor: pointer; background: #f8fbf9; }.role-feature-panel summary span { display: grid; gap: 4px; }.role-feature-panel summary small { color: var(--muted); }.role-feature-panel summary b { color: var(--green-700); font-size: 11px; }
.role-feature-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border-top: 1px solid var(--line); }.role-feature-list a,.role-feature-list article { display: grid; grid-template-columns: 34px 1fr; gap: 9px; padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }.role-feature-list span { grid-row: 1/3; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-100); color: var(--green-800); font-weight: 900; }.role-feature-list strong { font-size: 12px; }.role-feature-list small { color: var(--muted); font-size: 10px; }.role-feature-list article { background: #fafbfa; color: #7a847e; }.role-feature-list article span { background: #eef1ef; color: #89918c; }
.role-feature-list .role-feature-icon,.role-feature-list .role-preview-icon { width: 30px; height: 30px; border-radius: 9px; }
.role-feature-icon svg,.role-feature-list .role-preview-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.role-preview-notice { margin-bottom: 18px; }
.role-preview-index { margin: 0 0 18px; }
.role-preview-groups { display: grid; gap: 14px; }
.role-preview-panel { scroll-margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.role-preview-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; cursor: pointer; background: #f8fbf9; }
.role-preview-panel > summary > span:first-child { display: grid; gap: 5px; }
.role-preview-panel > summary strong { font-size: 16px; }
.role-preview-panel > summary small { max-width: 760px; color: var(--muted); }
.role-preview-counts { display: flex; gap: 7px; flex: 0 0 auto; }
.role-preview-counts b { padding: 6px 9px; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-size: 10px; }
.role-preview-content { display: grid; gap: 26px; padding: 22px; border-top: 1px solid var(--line); }
.role-preview-subtitle { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 12px; }
.role-preview-subtitle h2 { margin: 0; font-size: 15px; }
.role-preview-subtitle span { color: var(--muted); font-size: 11px; }
.role-preview-menu-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.role-preview-menu-grid a { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 3px 11px; min-height: 92px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.role-preview-menu-grid a > span { grid-row: 1/4; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--green-100); color: var(--green-800); font-weight: 900; }
.role-preview-menu-grid .role-preview-icon { background: linear-gradient(145deg,#e1f6e9,#ccebd9); box-shadow: inset 0 0 0 1px rgba(7,91,58,.05); }
.role-preview-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.role-preview-menu-grid a:nth-child(4n+2) .role-preview-icon { background: linear-gradient(145deg,#e8f1ff,#d8e7fa); color: #225b86; }
.role-preview-menu-grid a:nth-child(4n+3) .role-preview-icon { background: linear-gradient(145deg,#fff4d8,#f8e6ad); color: #805f05; }
.role-preview-menu-grid a:nth-child(4n+4) .role-preview-icon { background: linear-gradient(145deg,#f1eaff,#e4d8f8); color: #67449a; }
.role-preview-menu-grid a > strong { font-size: 12px; }
.role-preview-menu-grid a > small { padding-right: 34px; color: var(--muted); font-size: 9px; }
.role-preview-menu-grid a > b { position: absolute; right: 12px; bottom: 12px; color: var(--green-700); font-size: 9px; }
.role-preview-module-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.role-preview-module-list a { display: flex; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; }
.role-preview-module-list a > span { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: var(--green-100); color: var(--green-800); font-weight: 900; }
.role-preview-module-list a > div { display: grid; gap: 3px; }
.role-preview-module-list strong { font-size: 12px; }
.role-preview-module-list small { color: var(--muted); font-size: 10px; }
.module-planned > span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 10px; background: #e5eae7; color: #6c7770; font-weight: 900; }.module-planned h3 { margin: 0 0 5px; font-size: 14px; }.module-planned p { margin: 0 0 7px; font-size: 11px; line-height: 1.45; }.module-planned small { color: #947100; font-weight: 800; }
.compact-list { display: grid; gap: 7px; margin-top: 20px; }.compact-list p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }.compact-list span { color: var(--muted); }
button.table-action { border: 0; background: transparent; }.danger-link { color: var(--danger); }
.table-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }.table-actions form { margin: 0; }
.panel, .form-panel { margin-bottom: 25px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.panel-title { margin-top: 0; }
.form-panel summary { cursor: pointer; color: var(--green-800); font-weight: 850; }
.tabs { display: flex; gap: 7px; margin: -8px 0 22px; padding-bottom: 6px; overflow-x: auto; }
.tabs a { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 750; }
.tabs a.active { border-color: var(--green-800); background: var(--green-800); color: #fff; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.schedule-class-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.schedule-class-picker > span { margin-right: 4px; font-weight: 800; color: var(--ink); }
.schedule-class-picker > a { padding: 9px 14px; border: 1px solid #b8d7c8; border-radius: 7px; background: #fff; color: var(--green); font-size: 12px; font-weight: 800; }
.schedule-class-picker > a:hover,.schedule-class-picker > a.active { border-color: var(--green); background: var(--green); color: #fff; }
.schedule-week-wrap { margin-top: 16px; border-radius: 4px; }
.schedule-week { min-width: 1180px; table-layout: fixed; border-collapse: collapse; }
.schedule-week th { padding: 16px 10px; background: #087249; color: #fff; text-align: center; font-size: 12px; }
.schedule-week th:first-child { width: 165px; }
.schedule-week td { height: 72px; padding: 9px 10px; border: 1px solid #d8e0e6; text-align: center; vertical-align: middle; background: #fff; }
.schedule-week tbody tr:nth-child(odd):not(.schedule-break-row) td:not(.schedule-time) { background: #f5f6f7; }
.schedule-week .schedule-time { background: linear-gradient(180deg,#0a8053,#075f3e); color: #fff; font-size: 12px; white-space: nowrap; }
.schedule-week .schedule-break { height: 48px; background: #f4c515; color: #173b2a; letter-spacing: .04em; }
.schedule-week .schedule-subject > strong { display: block; color: #102019; font-size: 13px; }
.schedule-week .schedule-subject small { display: block; margin-top: 3px; line-height: 1.25; color: #405149; }
.schedule-week .schedule-subject .schedule-teacher { color: #718078; font-size: 10px; }
.schedule-target-panel { margin: 0; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbf9; }
.schedule-target-panel legend { padding: 0 7px; color: var(--green-900); font-weight: 800; }
.schedule-target-mode { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 14px; }
.schedule-target-mode label,.schedule-target-classes label { display: flex; align-items: center; gap: 7px; margin: 0; color: #263b30; font-size: 12px; font-weight: 700; }
.schedule-target-mode input,.schedule-target-classes input { width: auto; margin: 0; }
.schedule-target-classes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; padding: 13px; border: 1px solid #d9e6df; border-radius: 8px; background: #fff; }
.schedule-target-panel > small { display: block; margin-top: 11px; color: var(--muted); line-height: 1.5; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 13px 15px; border-bottom: 1px solid #e8eeea; text-align: left; vertical-align: middle; }
th { background: #f6f9f7; color: #607068; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
td strong, td small { display: block; }
tbody tr:last-child td { border-bottom: 0; }
.empty { padding: 35px; color: var(--muted); text-align: center; }
.badge, .status { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: #edf2ef; color: #53645a; font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.badge.success, .status-active { background: #ddf3e5; color: #14643c; }
.badge.warning { background: #fff1b8; color: #735b00; }
.notification-list { display: grid; gap: 10px; }
.notification-item { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; gap: 14px; align-items: start; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.notification-item.is-unread { border-color: #a7cdb8; background: #f5fbf7; }
.notification-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: #6f8278; }
.level-success .notification-dot { background: #16834d; }
.level-warning .notification-dot,.level-urgent .notification-dot { background: #c34a36; }
.level-info .notification-dot { background: #2777b7; }
.notification-item h3 { margin: 5px 0; font-size: 15px; }
.notification-item p { margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.notification-read { padding: 7px 10px; border: 1px solid #b9cec1; border-radius: 7px; background: #fff; color: var(--green-800); font-size: 11px; font-weight: 800; }
.flash { margin-bottom: 18px; padding: 13px 15px; border-radius: 9px; font-size: 13px; font-weight: 650; }
.flash-success { border: 1px solid #a7d7b9; background: #e5f6eb; color: #145f39; }
.flash-error { border: 1px solid #e2b7b7; background: #fff0f0; color: #8b2828; }
.activity-list { display: grid; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.activity-list article { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.activity-list article:last-child { border: 0; }
.activity-list time { color: var(--muted); font-size: 10px; }
.role-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.role-grid article > span { color: var(--green-700); font-size: 10px; font-weight: 850; }
.role-grid h2 { margin: 8px 0; font-size: 17px; }
.role-grid p { min-height: 40px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.permission-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.permission-list article { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.permission-list h3 { font-size: 14px; }
.permission-list article > div { display: grid; gap: 9px; }
.permission-list span { display: grid; gap: 3px; color: var(--muted); font-size: 11px; }
.permission-list code { color: var(--green-700); }
.coming-soon { display: flex; align-items: center; gap: 22px; padding: 34px; }
.coming-soon .module-symbol { width: 68px; height: 68px; flex: 0 0 auto; font-size: 20px; }
.coming-soon h2 { margin: 7px 0; }
.coming-soon p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.65; }
.row-actions { display: flex; align-items: center; gap: 7px; }
.row-actions form { margin: 0; }
.row-actions a, .row-actions button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--green-700); font-size: 10px; font-weight: 800; }
.row-actions .danger { color: var(--danger); }
.row-actions .danger-button { border-color: var(--danger); background: var(--danger); color: #fff; }
.cms-gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; }
.cms-gallery article { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cms-gallery img { width: 100%; height: 175px; display: block; object-fit: cover; }
.cms-gallery article > div { padding: 15px; }
.cms-gallery h3 { margin: 9px 0 5px; font-size: 14px; }
.cms-gallery p { min-height: 32px; color: var(--muted); font-size: 11px; }
.cms-gallery-group { grid-column: 1 / -1; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfa; }
.cms-gallery-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cms-gallery-group > header h3 { margin: 0; font-size: 16px; }
.cms-gallery-group > header span { color: var(--muted); font-size: 11px; font-weight: 700; }
.cms-gallery-group-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.cms-gallery-group-items article { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cms-gallery-group-items img { width: 100%; height: 175px; display: block; object-fit: cover; }
.cms-gallery-group-items article > div { padding: 15px; }
.cms-gallery-group-items p { min-height: 32px; margin: 9px 0 5px; }
.guide-role-switcher { margin-bottom: 20px; }
.guide-hero, .guide-panel { margin-bottom: 20px; padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.guide-hero { color: #fff; background: linear-gradient(135deg,var(--green-950),var(--green-700)); }
.guide-hero h2 { margin: 6px 0 8px; font-size: 28px; }
.guide-hero p { max-width: 800px; margin: 0; color: rgba(255,255,255,.78); line-height: 1.7; }
.guide-hero ul { max-width: 900px; margin: 15px 0 0; padding-left: 20px; color: rgba(255,255,255,.84); line-height: 1.7; }
.guide-task-list { display: grid; gap: 10px; margin: 0; padding-left: 22px; color: var(--muted); line-height: 1.6; }
.guide-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.guide-feature-grid article { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfa; }
.guide-number { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: var(--green-800); background: var(--green-100); font-size: 11px; font-weight: 900; }
.guide-feature-grid h3 { margin: 0 0 6px; font-size: 14px; }
.guide-feature-grid p { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.guide-feature-grid strong { display: block; margin-bottom: 4px; color: var(--green-800); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.guide-feature-grid ol { margin: 0 0 10px; padding-left: 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.guide-feature-grid a { color: var(--green-800); font-size: 11px; font-weight: 850; }
.home-section-toggles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 22px; }
.home-section-toggle { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.home-section-toggle span,.home-section-toggle small { display: block; }
.home-section-toggle small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.home-section-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.home-section-toggle i { position: relative; width: 45px; height: 25px; border-radius: 999px; background: #cbd8d1; transition: background .2s ease; }
.home-section-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s ease; }
.home-section-toggle input:checked + i { background: var(--green-700); }
.home-section-toggle input:checked + i::after { transform: translateX(20px); }
.cms-gallery .slider-meta { min-height: 0; }
.error-page { display: grid; min-height: 100vh; place-items: center; padding: 25px; }
.error-card { max-width: 520px; padding: 42px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-align: center; box-shadow: var(--shadow); }
.error-card > span { color: var(--yellow); font-size: 50px; font-weight: 950; }

/* Website publik */
.public-body { max-width: 100%; overflow-x: clip; background: #fff; }
.public-top-contact { display: flex; justify-content: space-between; gap: 20px; padding: 8px clamp(22px,6vw,90px); color: rgba(255,255,255,.78); background: var(--green-950); font-size: 10px; }
.public-top-contact div { display: flex; flex-wrap: wrap; gap: 17px; }
.public-top-contact a { color: #fff; }
.home-feature-grid,.home-stat-grid,.home-step-grid,.home-testimonial-grid,.home-partner-grid { display: grid; gap: 14px; }
.home-feature-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.home-feature-grid article,.home-testimonial-grid article { padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.home-feature-grid b { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: var(--green-950); background: var(--yellow); }
.home-feature-grid h3 { margin: 15px 0 8px; }
.home-feature-grid p,.home-testimonial-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.home-stat-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.home-stat-grid article { padding: 24px 16px; border-radius: 14px; color: #fff; background: var(--green-700); text-align: center; }
.home-stat-grid strong { display: block; font: 700 40px/1 Georgia,serif; }
.home-stat-grid span { display: block; margin-top: 8px; font-size: 10px; text-transform: uppercase; }
.home-step-grid { grid-template-columns: repeat(5,minmax(0,1fr)); counter-reset: spmb-step; }
.home-step-grid article { position: relative; padding: 22px 17px; border-top: 3px solid var(--yellow); background: #f4f8f6; counter-increment: spmb-step; }
.home-step-grid article::before { content: counter(spmb-step); display: grid; width: 30px; height: 30px; margin-bottom: 12px; place-items: center; border-radius: 50%; color: #fff; background: var(--green-700); font-weight: 900; }
.home-step-grid h3 { margin: 0 0 6px; font-size: 14px; }
.home-step-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.home-video-panel,.home-footer-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: 38px; border-radius: 18px; color: #fff; background: linear-gradient(130deg,var(--green-950),var(--green-700)); }
.home-video-panel.has-embed { grid-template-columns: minmax(260px,.72fr) minmax(360px,1.28fr); }
.home-video-copy { min-width: 0; }
.home-video-showcase { overflow: hidden; padding: 38px; border-radius: 18px; color: #fff; background: linear-gradient(135deg,#031d14,#075b3a 65%,#0b7049); }
.home-video-showcase > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 27px; }
.home-video-showcase > header > div { min-width: 0; }
.home-video-showcase > header p { max-width: 760px; margin: 0; color: rgba(255,255,255,.82); line-height: 1.65; }
.home-video-showcase > header > a { flex: 0 0 auto; padding: 12px 17px; border-radius: 9px; color: var(--green-950); background: var(--yellow); font-size: 10px; font-weight: 900; }
.home-video-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.home-video-gallery article { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.07); }
.home-video-gallery article h3 { margin: 0; padding: 14px 15px 16px; color: #fff; font-size: 13px; line-height: 1.4; }
.home-video-gallery .home-video-youtube-link { display: flex; align-items: center; justify-content: space-between; margin: -7px 15px 14px; padding: 8px 10px; border-radius: 8px; color: #fff; background: rgba(255,255,255,.11); font-size: 9px; font-weight: 850; }
.home-video-gallery .home-video-youtube-link:hover { color: var(--green-950); background: var(--yellow); }
.home-video-embed { position: relative; overflow: hidden; aspect-ratio: 16/9; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: #020d09; box-shadow: 0 18px 45px rgba(0,0,0,.28); }
.home-video-gallery .home-video-embed { border: 0; border-radius: 0; box-shadow: none; }
.home-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.home-video-empty { padding: 24px; border: 1px dashed rgba(255,255,255,.3); border-radius: 12px; color: rgba(255,255,255,.8); text-align: center; }
.home-video-panel p,.home-footer-cta p { color: rgba(255,255,255,.72); }
.home-video-panel a,.home-footer-cta a { padding: 12px 18px; border-radius: 8px; color: var(--green-950); background: var(--yellow); font-size: 11px; font-weight: 900; }
.home-partner-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.home-partner-grid span,.home-partner-grid > a { display: grid; min-height: 90px; padding: 15px; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--green-700); font-weight: 900; text-align: center; background: #fff; }
.home-partner-grid img { width: 100%; height: 66px; margin-bottom: 8px; object-fit: contain; }
.home-partner-grid small,.home-testimonial-grid small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; font-weight: 500; }
.home-testimonial-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.home-floating-actions { position: fixed; z-index: 9; left: 18px; bottom: 20px; display: grid; gap: 8px; transition: opacity 220ms ease,transform 260ms var(--ui-ease),visibility 220ms; }
.home-floating-actions.is-footer-visible { visibility: hidden; opacity: 0; transform: translateY(18px); pointer-events: none; }
.home-floating-actions a { padding: 10px 14px; border-radius: 999px; color: #fff; background: var(--green-700); font-size: 10px; font-weight: 900; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.home-floating-actions a:first-child { color: var(--green-950); background: var(--yellow); }
.home-floating-actions a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
.public-header { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 80px; padding: 13px clamp(22px, 6vw, 90px); border-bottom: 1px solid rgba(8,63,42,.12); background: rgba(255,255,255,.96); }
.public-brand { min-width: 0; display: flex; align-items: center; gap: 11px; }
.public-brand > span { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border: 1px solid #d9e5dc; border-radius: 11px; background: #fff; overflow: hidden; }
.public-brand > span img { display: block; width: 44px; height: 44px; max-width: 100%; aspect-ratio: 1; object-fit: contain; }
.public-brand strong, .public-brand small { display: block; }
.public-brand strong { color: var(--green-950); font-size: 13px; letter-spacing: .06em; }
.public-brand small { margin-top: 2px; font-size: 9px; }
.public-header nav { display: flex; gap: 25px; color: #4f6258; font-size: 12px; font-weight: 700; }
.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; }
.public-search-form { display:flex; align-items:center; width:190px; flex:0 0 190px; border:1px solid #d8e4dc; border-radius:999px; background:#f7faf8; transition:border-color 180ms ease,box-shadow 180ms ease,background 180ms ease; }
.public-search-form:focus-within { border-color:#4ba77a; background:#fff; box-shadow:0 0 0 3px rgba(15,128,82,.11); }
.public-search-form input { width:100%; min-width:0; padding:9px 4px 9px 13px; border:0; outline:0; color:var(--green-950); background:transparent; font:600 11px/1.2 Inter,ui-sans-serif,system-ui; }
.public-search-form button { display:grid; width:34px; height:34px; flex:0 0 34px; padding:8px; place-items:center; border:0; border-radius:50%; color:var(--green-800); background:transparent; box-shadow:none; cursor:pointer; }
.public-search-form button:hover { color:#fff; background:var(--green-700); }
.public-search-form svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.public-search-results { padding:clamp(40px,6vw,78px) clamp(22px,7vw,110px); background:linear-gradient(180deg,#eef7f2,#fff); }
.public-search-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:28px; }
.public-search-heading h1 { margin:7px 0 8px; color:var(--green-950); font:700 clamp(34px,5vw,58px)/1.05 Georgia,serif; }
.public-search-heading p { color:var(--muted); }
.public-search-heading > a { padding:10px 14px; border:1px solid #cfded5; border-radius:9px; color:var(--green-800); background:#fff; font-size:11px; font-weight:850; }
.public-search-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.public-search-grid > a { display:flex; min-width:0; min-height:190px; flex-direction:column; padding:23px; border:1px solid #d9e6de; border-radius:15px; color:inherit; background:#fff; box-shadow:0 8px 26px rgba(7,71,47,.055); transition:transform 220ms ease,box-shadow 220ms ease,border-color 220ms ease; }
.public-search-grid > a:hover { border-color:#8bc2a4; box-shadow:0 16px 36px rgba(7,71,47,.12); transform:translateY(-4px); }
.public-search-grid span { width:max-content; padding:5px 8px; border-radius:999px; color:var(--green-700); background:var(--green-100); font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.public-search-grid h2 { margin:15px 0 8px; color:var(--green-950); font:700 22px/1.2 Georgia,serif; }
.public-search-grid p { margin:0 0 18px; color:var(--muted); font-size:12px; line-height:1.65; }
.public-search-grid b { margin-top:auto; color:var(--green-700); font-size:10px; }
.public-search-empty { padding:35px; border:1px dashed #bdd4c6; border-radius:15px; text-align:center; background:#fff; }
.public-search-empty strong { color:var(--green-950); font:700 22px Georgia,serif; }
.public-search-empty p { margin:8px 0 0; color:var(--muted); }
.public-menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid #d8e4dc; border-radius: 10px; background: #fff; box-shadow: none; }
.public-menu-toggle span { display: block; width: 100%; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--green-900); transition: transform 260ms ease,opacity 200ms ease; }
.public-menu-open .public-menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.public-menu-open .public-menu-toggle span:nth-child(2) { opacity: 0; }
.public-menu-open .public-menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.public-login-mobile { display: none; }
.public-nav-dropdown { position: relative; display: inline-flex; }
.public-nav-dropdown > button { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.public-nav-dropdown > button b { margin-left: 4px; color: var(--green-700); }
.public-nav-dropdown > span { position: absolute; z-index: 25; top: calc(100% + 14px); left: 50%; width: min(320px,80vw); max-height: min(70vh,520px); padding: 8px; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; border: 1px solid #dce7e0; border-radius: 13px; background: #fff; box-shadow: 0 18px 45px rgba(7,48,32,.16); transform: translate(-50%,-8px); transition: opacity 220ms ease,transform 220ms ease,visibility 220ms; }
.public-nav-dropdown > span a { display: block; padding: 11px 13px; border-radius: 8px; line-height: 1.35; }
.public-nav-dropdown > span a:hover { background: var(--green-100); }
.public-nav-dropdown:hover > span,.public-nav-dropdown:focus-within > span { visibility: visible; opacity: 1; transform: translate(-50%,0); }
.department-hero { padding: clamp(75px,10vw,140px) clamp(25px,8vw,125px); color: #fff; background: linear-gradient(120deg,var(--green-950),var(--green-700)); }
.department-hero h1 { max-width: 980px; margin: 12px 0 20px; font: 700 clamp(42px,6vw,76px)/1.05 Georgia,serif; }
.department-hero p { max-width: 760px; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.7; }
.department-info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.department-info-grid article { position: relative; overflow: hidden; padding: clamp(25px,3vw,38px); border: 1px solid #dce7e0; border-radius: 16px; background: #fff; transition: transform 320ms var(--ui-ease),box-shadow 320ms ease,border-color 320ms ease; }
.department-info-grid article:hover { border-color: #a9cbb8; box-shadow: 0 20px 45px rgba(7,48,32,.1); transform: translateY(-5px); }
.department-info-grid article > span { display: inline-grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--green-800); background: var(--green-100); font-size: 11px; font-weight: 900; }
.department-info-grid h3 { margin: 18px 0 12px; color: var(--green-950); font: 700 25px/1.2 Georgia,serif; }
.department-info-grid p,.department-info-grid li { color: var(--muted); font-size: 13px; line-height: 1.7; }
.department-info-grid ul { margin: 0; padding-left: 19px; }
.department-info-grid .department-summary { grid-column: 1/-1; color: #fff; background: linear-gradient(120deg,var(--green-950),var(--green-700)); }
.department-info-grid .department-summary h3 { color: #fff; }
.department-info-grid .department-summary p { max-width: 900px; color: rgba(255,255,255,.78); font-size: 15px; }
.department-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(18px,3vw,36px); }
.department-overview p { margin: 0; }
.achievement-public-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.achievement-public-grid article { display: grid; gap: 9px; padding: 25px; border: 1px solid #dce7e0; border-radius: 15px; background: #fff; transition: transform 320ms var(--ui-ease),box-shadow 320ms ease; }
.achievement-public-grid article:hover { box-shadow: 0 20px 45px rgba(7,48,32,.1); transform: translateY(-5px); }
.achievement-public-grid time,.achievement-public-grid small,.achievement-public-grid p { color: var(--muted); font-size: 11px; line-height: 1.6; }
.achievement-public-grid h3 { margin: 3px 0; color: var(--green-950); font: 700 22px/1.25 Georgia,serif; }
.achievement-level { width: fit-content; padding: 6px 9px; border-radius: 999px; color: var(--green-800); background: var(--green-100); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.public-header nav a:hover { color: var(--green-700); }
.public-login { padding: 10px 14px; border-radius: 8px; background: var(--green-800); color: #fff; font-size: 11px; font-weight: 800; }
.principal-message { position: relative; display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); align-items: end; gap: clamp(35px,6vw,90px); overflow: hidden; padding: clamp(55px,8vw,110px) clamp(25px,8vw,125px) 0; color: #fff; background: linear-gradient(125deg,#062f20 0%,#07583a 62%,#118056 100%); }
.principal-message::before { content: ""; position: absolute; right: -140px; top: -180px; width: 480px; height: 480px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018); pointer-events: none; }
.principal-photo { position: relative; z-index: 1; min-height: 510px; display: flex; align-items: flex-end; justify-content: center; }
.principal-photo::before { content: ""; position: absolute; right: 4%; bottom: 0; left: 4%; height: 75%; border: 1px solid rgba(255,255,255,.14); border-bottom: 0; border-radius: 240px 240px 0 0; background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.025)); }
.principal-photo > span { position: absolute; right: 10%; bottom: 7%; width: 70px; height: 70px; border-radius: 50%; background: var(--yellow); opacity: .9; }
.principal-photo img { position: relative; z-index: 2; display: block; width: min(100%,430px); max-height: 555px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 20px 25px rgba(0,0,0,.18)); }
.principal-copy { position: relative; z-index: 2; align-self: center; max-width: 820px; padding: 20px 0 clamp(60px,7vw,95px); }
.principal-copy .eyebrow { color: #ffd43b; }
.principal-copy h2 { max-width: 760px; margin: 14px 0 25px; color: #fff; font: 700 clamp(34px,4vw,57px)/1.08 Georgia,serif; }
.principal-copy p { margin: 0 0 15px; color: rgba(255,255,255,.79); font-size: 14px; line-height: 1.8; }
.principal-copy footer { display: grid; gap: 4px; width: fit-content; margin-top: 28px; padding-top: 18px; border-top: 2px solid rgba(255,212,59,.8); }
.principal-copy footer strong { color: #fff; font: 700 21px/1.2 Georgia,serif; }
.principal-copy footer span { color: rgba(255,255,255,.68); font-size: 11px; }
.major-showcase { background: #fff; }
.major-showcase .public-title > div { max-width: 850px; }
.major-showcase .public-title p { max-width: 720px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.major-showcase-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 34px; }
.major-showcase-grid > a { position: relative; min-width: 0; min-height: 310px; display: flex; flex-direction: column; overflow: hidden; padding: 27px 24px; border: 1px solid #dce7e0; border-radius: 17px; color: inherit; background: linear-gradient(155deg,#fff 48%,#f1f8f4 100%); transition: transform 320ms var(--ui-ease),box-shadow 320ms ease,border-color 320ms ease; }
.major-showcase-grid > a:hover { border-color: #9fc8b1; box-shadow: 0 22px 48px rgba(7,48,32,.11); transform: translateY(-7px); }
.major-showcase-grid > a.has-major-photo { color: #fff; background: var(--green-950); }
.major-showcase-grid > a.has-major-photo::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg,rgba(2,28,18,.2),rgba(2,28,18,.94)); }
.major-showcase-grid > a.has-major-photo > img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 650ms ease; }
.major-showcase-grid > a.has-major-photo:hover > img { transform: scale(1.06); }
.major-showcase-grid > a.has-major-photo > :not(img) { z-index: 1; }
.major-showcase-grid > a.has-major-photo h3,.major-showcase-grid > a.has-major-photo p,.major-showcase-grid > a.has-major-photo b { color: #fff; }
.major-showcase-grid > a.has-major-photo p { color: rgba(255,255,255,.76); }
.major-card-icon { position: relative; display: grid; width: 48px; height: 48px; margin-bottom: 14px; place-items: center; border-radius: 15px; color: var(--green-700); background: var(--yellow); box-shadow: 0 9px 22px rgba(0,0,0,.15); transition: transform 380ms var(--ui-ease),border-radius 380ms ease; }
.major-card-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.major-showcase-grid > a:hover .major-card-icon { border-radius: 50%; transform: translateY(-4px) rotate(-6deg) scale(1.08); }
.major-showcase-grid > a.has-major-photo small { color: #fff; background: rgba(255,255,255,.16); }
.major-showcase-grid > a > span { position: absolute; right: 18px; top: 12px; color: rgba(8,91,58,.08); font: 700 70px/1 Georgia,serif; }
.major-showcase-grid small { position: relative; width: fit-content; padding: 6px 9px; border-radius: 999px; color: var(--green-800); background: var(--green-100); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.major-showcase-grid h3 { position: relative; margin: 25px 0 12px; color: var(--green-950); font: 700 24px/1.18 Georgia,serif; }
.major-showcase-grid p { position: relative; margin: 0 0 22px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.major-showcase-grid b { position: relative; display: flex; align-items: center; gap: 7px; margin-top: auto; color: var(--green-700); font-size: 11px; }
.major-showcase-grid b i { font-style: normal; font-size: 17px; transition: transform 220ms ease; }
.major-showcase-grid > a:hover b i { transform: translateX(5px); }
.public-hero { position: relative; isolation: isolate; min-height: 650px; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr); align-items: center; gap: clamp(45px,8vw,120px); overflow: hidden; padding: clamp(70px,10vw,145px) clamp(25px,8vw,125px); color: #fff; background: linear-gradient(125deg,#052c1e 0%,#0a4c31 62%,#167249 100%); }
.public-hero-solid { min-height:560px; }
.home-banner-carousel { position:relative; height:clamp(245px,31vw,470px); overflow:hidden; padding:24px 0 42px; background:linear-gradient(180deg,#f8fbf9,#fff); touch-action:pan-y; user-select:none; }
.home-banner-track { position:relative; width:100%; height:100%; }
.home-banner-track article { position:absolute; top:50%; left:50%; width:min(62vw,850px); aspect-ratio:16/7; overflow:hidden; opacity:0; border-radius:22px; background:#dce8e0; box-shadow:0 22px 55px rgba(7,55,37,.16); transform:translate(-50%,-50%) scale(.72); transition:transform 650ms var(--ui-ease),opacity 450ms ease,filter 450ms ease; pointer-events:none; }
.home-banner-track article.is-active { z-index:3; opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
.home-banner-track article.is-prev { z-index:2; opacity:.38; filter:saturate(.7); transform:translate(-112%,-50%) scale(.82); }
.home-banner-track article.is-next { z-index:2; opacity:.38; filter:saturate(.7); transform:translate(12%,-50%) scale(.82); }
.home-banner-track img { width:100%; height:100%; display:block; object-fit:cover; }
.home-banner-arrow { position:absolute; z-index:5; top:50%; display:grid; width:48px; height:48px; margin-top:-35px; padding:0; place-items:center; border:0; border-radius:50%; color:#fff; background:var(--green-700); box-shadow:0 10px 25px rgba(0,0,0,.2); font-size:32px; cursor:pointer; }
.home-banner-arrow.prev { left:calc(50% - min(32vw,455px)); }
.home-banner-arrow.next { right:calc(50% - min(32vw,455px)); }
.home-banner-dots { position:absolute; z-index:5; right:0; bottom:16px; left:0; display:flex; justify-content:center; gap:7px; }
.home-banner-dots button { width:7px; height:7px; padding:0; border:0; border-radius:999px; background:#bfd1c5; box-shadow:none; transition:width 200ms ease,background 200ms ease; }
.home-banner-dots button.is-active { width:25px; background:var(--green-600); }
.slider-mode-panel { display:grid; grid-template-columns:minmax(240px,1fr) repeat(2,minmax(210px,.7fr)) auto; align-items:center; gap:14px; margin-bottom:22px; padding:20px; border:1px solid var(--line); border-radius:14px; background:#f7faf8; }
.slider-mode-panel h3 { margin:5px 0; color:var(--green-950); }
.slider-mode-panel p { margin:0; color:var(--muted); font-size:11px; }
.slider-mode-panel label { height:100%; display:flex; align-items:center; gap:10px; padding:13px; border:1px solid #d8e4dc; border-radius:11px; background:#fff; cursor:pointer; }
.slider-mode-panel label span,.slider-mode-panel label small { display:block; }
.slider-mode-panel label small { margin-top:4px; color:var(--muted); line-height:1.45; }
.default-slider-import { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; padding:16px 18px; border:1px solid #efd46c; border-radius:12px; background:#fff9df; }
.default-slider-import strong,.default-slider-import small { display:block; }
.default-slider-import strong { color:var(--green-950); }
.default-slider-import small { margin-top:4px; color:#746735; }
.bos-tool-tabs { overflow-x:auto; white-space:nowrap; scrollbar-width:thin; }
.bos-main-tabs { margin-bottom:8px; }
.bos-sub-tabs { margin-top:0; padding:10px 12px; background:rgba(8,99,63,.055); border:1px solid rgba(8,99,63,.12); border-radius:14px; }
.bos-sub-tabs a { padding:8px 13px; font-size:.88rem; }
.spj-check-form { display:grid; grid-template-columns:repeat(2,minmax(120px,1fr)); gap:7px 12px; min-width:360px; }
.spj-check-form label { display:flex; align-items:center; gap:6px; color:#42564b; font-size:10px; }
.spj-check-form input[name="notes"] { grid-column:1/-1; min-height:36px; }
.spj-check-form button { width:max-content; }
.bos-progress { width:130px; height:8px; overflow:hidden; border-radius:999px; background:#e2ece6; }
.bos-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--green-500),var(--green-800)); }
.bos-spj-package .panel-title { border-bottom:2px solid var(--green-800); padding-bottom:18px; }
.committee-tool-tabs { overflow-x:auto; white-space:nowrap; scrollbar-width:thin; }
.committee-main-tabs { margin-bottom:8px; }
.committee-sub-tabs { margin-top:0; padding:10px 12px; background:rgba(8,99,63,.055); border:1px solid rgba(8,99,63,.12); border-radius:14px; }
.committee-sub-tabs a { padding:8px 13px; font-size:.88rem; }
.public-hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(100deg,rgba(3,35,23,.91) 0%,rgba(5,54,34,.76) 46%,rgba(9,93,57,.54) 100%),radial-gradient(circle at 72% 18%,rgba(40,145,90,.35),transparent 34%); pointer-events: none; }
.public-hero > :not(.public-hero-slideshow) { position: relative; z-index: 2; }
.public-hero-slideshow { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.public-hero-slideshow span { position: absolute; inset: -2%; opacity: 0; background-size: cover; background-repeat: no-repeat; transform: scale(1.035); transition: opacity 1.6s ease-in-out,transform 8.5s ease-out; will-change: opacity,transform; }
.public-hero-slideshow span[data-image] img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; }
.public-hero-slideshow .slide-position-top img { object-position: center top; }
.public-hero-slideshow .slide-position-bottom img { object-position: center bottom; }
.public-hero-slideshow .slide-position-left img { object-position: left center; }
.public-hero-slideshow .slide-position-right img { object-position: right center; }
.cms-gallery img.slide-position-top { object-position: center top; }
.cms-gallery img.slide-position-bottom { object-position: center bottom; }
.cms-gallery img.slide-position-left { object-position: left center; }
.cms-gallery img.slide-position-right { object-position: right center; }
.slider-visual-editor { display: grid; gap: 14px; }
.slider-focus-preview { position: relative; aspect-ratio: 16/7; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg,#e8f0ec,#d5e4dc); cursor: grab; touch-action: none; user-select: none; }
.slider-focus-preview.is-dragging { cursor: grabbing; }
.slider-focus-preview img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; transform-origin: center; }
.slider-focus-preview::before,.slider-focus-preview::after { content: ""; position: absolute; z-index: 2; background: rgba(255,255,255,.48); pointer-events: none; }
.slider-focus-preview::before { width: 1px; inset: 0 auto 0 50%; }
.slider-focus-preview::after { height: 1px; inset: 50% 0 auto; }
.slider-focus-preview-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 25px; color: var(--muted); font-size: 12px; text-align: center; pointer-events: none; }
.slider-focus-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; }
.slider-focus-controls input[type="range"] { width: 100%; }
.slider-focus-readout { min-width: 150px; color: var(--muted); font-size: 11px; text-align: right; }
.home-popup[hidden] { display: none; }
.home-popup { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: clamp(18px,4vw,38px); background: rgba(2,18,13,.72); backdrop-filter: blur(7px); }
.home-popup-card { position: relative; width: min(88vw,420px); max-height: 82vh; padding:6px; border:1px solid rgba(255,255,255,.28); border-radius:20px; background:rgba(255,255,255,.12); box-shadow:0 28px 90px rgba(0,0,0,.42); animation: home-popup-in 420ms var(--ui-ease) both; }
.home-popup-card > a { display: block; overflow: hidden; border-radius: 15px; background: #fff; }
.home-popup-card img { display: block; width: 100%; max-height: calc(82vh - 12px); border-radius:15px; object-fit: contain; background:#fff; }
.home-popup-close { position: absolute; z-index: 2; top: 13px; right: 13px; width: 38px; height: 38px; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(5,91,58,.94); color: #fff; font-size: 23px; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.28); }
body.has-home-popup { overflow: hidden; }
@keyframes home-popup-in { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
.public-hero-slideshow span.is-active { opacity: .56; transform: scale(1); }
.public-hero-slideshow .hero-slide-1 img { object-position: center 68%; }
.public-hero-slideshow .hero-slide-2 img { object-position: center 70%; }
.public-hero-slideshow .hero-slide-3 img { object-position: center 62%; }
.public-hero-slideshow .hero-slide-4 img { object-position: center 82%; }
.public-hero-slideshow .hero-slide-5 img { object-position: center 66%; }
.public-hero-slideshow .hero-slide-6 img { object-position: center 70%; }
.public-hero-slideshow .hero-slide-7 img { object-position: center bottom; }
.public-hero-slideshow .hero-slide-8 img { object-position: center 76%; }
.public-hero-slideshow .hero-slide-9 img { object-position: center 72%; }
.hero-kicker { color: var(--yellow); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.public-hero h1 { max-width: 900px; margin: 18px 0 22px; font-family: Georgia, serif; font-size: clamp(43px,6.5vw,83px); line-height: 1.01; }
.public-hero > div > p { max-width: 710px; color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 34px; }
.hero-actions a { padding: 12px 18px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; font-size: 12px; font-weight: 800; }
.hero-actions a:first-child { border-color: var(--yellow); background: var(--yellow); color: var(--green-950); }
.public-hero aside { padding: 28px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.public-hero aside span { color: var(--yellow); font-size: 11px; text-transform: uppercase; }
.public-hero aside > strong { display: block; font-family: Georgia, serif; font-size: 72px; }
.public-hero aside p, .public-hero aside li { color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.55; }
.public-hero aside ul { padding-left: 18px; }
.public-notice { padding: 15px 25px; background: #fff3bf; color: #6b5600; text-align: center; font-size: 12px; font-weight: 750; }
.public-section { padding: clamp(70px, 9vw, 125px) clamp(25px, 8vw, 125px); }
.public-section.tinted { background: #f2f7f3; }
.public-section h2 { margin: 10px 0 25px; color: var(--green-950); font-family: Georgia, serif; font-size: clamp(32px, 4vw, 52px); }
.public-section .home-video-panel h2,
.public-section .home-footer-cta h2 { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.18); }
.public-section .home-video-showcase h2 { margin-bottom: 12px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.18); }
.public-section .home-video-panel .eyebrow,
.public-section .home-footer-cta .eyebrow { color: var(--yellow); }
.public-section .home-video-showcase .eyebrow { color: var(--yellow); }
.public-section .home-video-panel p,
.public-section .home-footer-cta p { color: rgba(255,255,255,.9); }
.split-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 8vw, 120px); }
.split-section p { color: #586a60; line-height: 1.85; }
.page-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.page-links a { padding: 8px 11px; border: 1px solid #cbdad1; border-radius: 999px; color: var(--green-700); font-size: 11px; font-weight: 800; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.news-grid article { overflow: hidden; border: 1px solid #dce7e0; border-radius: 13px; background: #fff; }
.news-grid img, .image-placeholder { width: 100%; height: 210px; display: grid; place-items: center; object-fit: cover; background: linear-gradient(145deg, var(--green-950), var(--green-700)); color: rgba(255,255,255,.6); font-weight: 900; letter-spacing: .12em; }
.news-grid article > div:last-child { padding: 20px; }
.news-grid time { color: var(--green-700); font-size: 10px; font-weight: 800; }
.news-grid h3 { margin: 9px 0; font-size: 18px; line-height: 1.35; }
.news-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.public-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(45px,8vw,110px); }
.notice-list, .event-list { display: grid; border-top: 1px solid var(--line); }
.notice-list a, .notice-list > div { display: grid; gap: 6px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.notice-list time, .notice-list span { color: var(--muted); font-size: 11px; }
.extracurricular-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.extracurricular-card { position: relative; min-width: 0; min-height: 270px; display: flex; flex-direction: column; overflow: hidden; padding: 22px; border: 1px solid #d5e3db; border-top: 4px solid var(--activity-color,#08734a); border-radius: 17px; color: var(--green-950); background: linear-gradient(145deg,#fff 45%,var(--activity-surface,#f2f8f4)); box-shadow: 0 11px 30px rgba(7,48,32,.08); transition: transform 280ms var(--ui-ease),border-color 280ms ease,box-shadow 280ms ease; }
.extracurricular-card::after { content: ""; position: absolute; right: -42px; bottom: -55px; width: 145px; height: 145px; border-radius: 50%; background: var(--activity-tint,#dff3e7); opacity: .8; transition: transform 360ms var(--ui-ease); }
.extracurricular-card:hover { border-color: var(--activity-color,#08734a); box-shadow: 0 20px 42px rgba(7,48,32,.16); transform: translateY(-6px); }
.extracurricular-card:hover::after { transform: scale(1.18); }
.extracurricular-card header { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; }
.extracurricular-card header small,.extracurricular-card header b { font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.extracurricular-card header small { padding: 6px 9px; border-radius: 999px; color: var(--activity-dark,#075d3e); background: var(--activity-tint,#dff3e7); }
.extracurricular-card header b { margin-left: auto; padding: 6px 8px; border: 1px solid #d7e2dc; border-radius: 999px; color: #344a3e; background: rgba(255,255,255,.88); }
.extracurricular-icon { width: 48px; height: 48px; display: grid; flex: 0 0 48px; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg,var(--activity-light,#20a56f),var(--activity-color,#08734a)); box-shadow: 0 9px 20px var(--activity-shadow,rgba(8,115,74,.28)),inset 0 1px rgba(255,255,255,.28); transform: rotate(-2deg); transition: transform 260ms var(--ui-ease),box-shadow 260ms ease; }
.extracurricular-card:hover .extracurricular-icon { box-shadow: 0 12px 25px var(--activity-shadow,rgba(8,115,74,.35)),inset 0 1px rgba(255,255,255,.32); transform: rotate(0) scale(1.06); }
.extracurricular-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.extracurricular-card h3 { position: relative; z-index: 1; margin: 22px 0 15px; font: 700 23px/1.2 Georgia,serif; }
.extracurricular-character { position: absolute; z-index: 1; right: -8px; bottom: -12px; width: 58%; height: 78%; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 14px 13px rgba(10,42,28,.2)); pointer-events: none; transition: transform 360ms var(--ui-ease); }
.extracurricular-card.has-character-art h3 { max-width: 52%; margin-top: 27px; }
.extracurricular-card.has-character-art footer { margin-right: auto; }
.extracurricular-card.has-character-art:hover .extracurricular-character { transform: translateY(-5px) scale(1.035); }
.extracurricular-card footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; width: fit-content; margin-top: auto; padding: 20px 10px 0 0; color: var(--activity-dark,var(--green-800)); font-size: 10px; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; }
.extracurricular-card footer span { transition: transform 220ms ease; }
.extracurricular-card:hover footer span { transform: translateX(5px); }
.extracurricular-sport { --activity-color:#00875a; --activity-light:#23c483; --activity-dark:#005f40; --activity-tint:#d8f7e9; --activity-surface:#f0fbf6; --activity-shadow:rgba(0,135,90,.3); }
.extracurricular-academic { --activity-color:#1f5fce; --activity-light:#4d8eff; --activity-dark:#15438f; --activity-tint:#dfebff; --activity-surface:#f2f6ff; --activity-shadow:rgba(31,95,206,.3); }
.extracurricular-creative { --activity-color:#d06a00; --activity-light:#ff9f32; --activity-dark:#8d4800; --activity-tint:#ffebcf; --activity-surface:#fff8ee; --activity-shadow:rgba(208,106,0,.3); }
.extracurricular-technology { --activity-color:#6045d6; --activity-light:#9078ff; --activity-dark:#423096; --activity-tint:#e9e4ff; --activity-surface:#f6f3ff; --activity-shadow:rgba(96,69,214,.3); }
.extracurricular-leadership { --activity-color:#c13968; --activity-light:#ef6d98; --activity-dark:#862748; --activity-tint:#fbe1ea; --activity-surface:#fff4f7; --activity-shadow:rgba(193,57,104,.3); }
.extracurricular-skill { --activity-color:#b24b25; --activity-light:#ea784d; --activity-dark:#783219; --activity-tint:#f9e1d7; --activity-surface:#fff5f1; --activity-shadow:rgba(178,75,37,.3); }
.extracurricular-general { --activity-color:#08734a; --activity-light:#24ad75; --activity-dark:#055235; --activity-tint:#dcf3e7; --activity-surface:#f2faf6; --activity-shadow:rgba(8,115,74,.3); }
.event-list a { display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.event-list a > span { display: grid; place-items: center; padding: 7px; border-radius: 9px; background: var(--green-100); color: var(--green-800); font-size: 9px; text-transform: uppercase; }
.event-list b { display: block; font-size: 22px; }
.public-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.public-gallery-post { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 9px 24px rgba(7,48,32,.08); }
.public-gallery-collage { display: grid; grid-template-columns: 1.35fr 1fr; grid-auto-rows: 170px; gap: 2px; background: var(--line); }
.public-gallery-collage figure { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: var(--green-950); }
.public-gallery-collage figure:first-child { grid-row: span 2; }
.public-gallery-collage img { width: 100%; height: 100%; display: block; object-fit: cover; }
.public-gallery-more { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.48); font-size: 30px; font-weight: 900; }
.public-gallery-album-image { display: none; }
.public-gallery-caption { padding: 13px 15px 15px; }
.public-gallery-caption strong, .public-gallery-caption span { display: block; }
.public-gallery-caption span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.public-gallery-social { padding: 0 15px 15px; border-top: 1px solid var(--line); }
.public-gallery-social > form { display: flex; gap: 8px; padding-top: 10px; }
.public-gallery-social button { border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; color: var(--green-800); background: #fff; cursor: pointer; font-size: 11px; }
.public-gallery-social button:hover { background: var(--green-100); }
.public-gallery-social details { margin-top: 10px; color: var(--muted); font-size: 11px; }
.public-gallery-social summary { cursor: pointer; color: var(--green-800); font-weight: 800; }
.public-gallery-social details p { margin: 9px 0; color: var(--ink); }
.public-gallery-social details form { display: grid; gap: 7px; margin-top: 10px; }
.public-gallery-social input, .public-gallery-social textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 8px; font: inherit; font-size: 11px; }
.public-gallery-social textarea { min-height: 55px; resize: vertical; }
.public-empty { grid-column: 1/-1; padding: 25px; border: 1px dashed #b9cbbf; border-radius: 10px; color: var(--muted); text-align: center; }
.public-footer { display: grid; grid-template-columns: 1.6fr .7fr .7fr; gap: 55px; padding: 65px clamp(25px,8vw,125px); color: #fff; background: var(--green-950); }
.public-footer .auth-mark { width: 72px; height: 72px; margin-bottom: 17px; }
.public-footer .auth-mark img { width: 66px; height: 66px; }
.public-footer h2 { font-family: Georgia,serif; }
.public-footer p { max-width: 620px; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.7; }
.public-footer > div > span { display: block; margin-bottom: 15px; color: var(--yellow); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.public-footer a { display: flex; align-items: center; gap: 9px; width: fit-content; margin: 9px 0; color: rgba(255,255,255,.75); font-size: 12px; }
.public-footer a svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms var(--ui-ease),color var(--ui-fast) ease; }
.public-footer a b { font-weight: 600; }
.public-footer a:hover svg { color: #f3c623; transform: scale(1.16) rotate(-4deg); }
.public-article { max-width: 900px; min-height: 70vh; margin: 0 auto; padding: clamp(60px,9vw,120px) 24px; }
.back-link { display: inline-block; margin-bottom: 40px; color: var(--green-700); font-size: 12px; font-weight: 800; }
.public-article h1 { margin: 12px 0 18px; color: var(--green-950); font-family: Georgia,serif; font-size: clamp(38px,6vw,66px); line-height: 1.08; }
.article-meta { color: var(--muted); font-size: 11px; }
.article-cover { width: 100%; max-height: 530px; margin: 35px 0; border-radius: 14px; object-fit: cover; }
.article-lead { margin: 34px 0; padding-left: 22px; border-left: 4px solid var(--yellow); color: var(--green-800); font-family: Georgia,serif; font-size: 23px; line-height: 1.55; }
.article-body { color: #35473e; font-size: 16px; line-height: 1.9; }
.article-photo-gallery { margin: 45px 0; }
.article-photo-gallery h2 { margin-bottom: 18px; color: var(--green-950); font-family: Georgia,serif; font-size: clamp(25px,4vw,36px); }
.article-photo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.article-photo-grid figure { margin: 0; overflow: hidden; border-radius: 12px; background: var(--green-950); }
.article-photo-grid img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .35s ease; }
.article-photo-grid figure:first-child:nth-last-child(odd) { grid-column: 1/-1; }
.article-photo-grid figure:first-child:nth-last-child(odd) img { aspect-ratio: 16/8; }
.article-photo-grid figure:hover img { transform: scale(1.025); }
.content-attachment-admin { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.content-attachment-admin > div { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 12px; margin-top: 14px; }
.content-attachment-admin figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.content-attachment-admin img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.content-attachment-admin form { padding: 8px; }
.content-attachment-admin button { width: 100%; }
.article-share { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 45px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: #f7faf8; }
.article-share > strong { color: var(--green-950); font-size: 13px; }
.article-share > div { display: flex; flex-wrap: wrap; gap: 8px; }
.article-share a, .article-share button { border: 1px solid var(--green-700); border-radius: 999px; padding: 9px 13px; color: var(--green-800); background: #fff; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.article-share a:hover, .article-share button:hover { color: #fff; background: var(--green-800); }
.article-section-heading { margin-bottom: 20px; }
.article-section-heading h2 { margin: 7px 0 0; color: var(--green-950); font-family: Georgia,serif; font-size: clamp(27px,4vw,38px); }
.article-related { margin: 55px 0; }
.article-related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.article-related-grid > a { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; color: inherit; background: #fff; }
.article-related-grid img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-related-grid span { display: grid; gap: 7px; padding: 15px; }
.article-related-grid time { color: var(--muted); font-size: 10px; }
.article-related-grid strong { color: var(--green-950); line-height: 1.4; }
.article-related-grid small { display: -webkit-box; overflow: hidden; color: var(--muted); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.article-pagination { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 55px 0; padding: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.article-pagination a { display: grid; gap: 7px; color: var(--green-900); }
.article-pagination a.next { text-align: right; }
.article-pagination small { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.article-pagination strong { line-height: 1.4; }
.article-comments { margin-top: 60px; }
.article-comments > article { padding: 20px 0; border-bottom: 1px solid var(--line); }
.article-comments > article > div { display: flex; justify-content: space-between; gap: 15px; }
.article-comments > article strong { color: var(--green-900); }
.article-comments > article time { color: var(--muted); font-size: 10px; }
.article-comments > article p { margin: 10px 0 0; color: #35473e; line-height: 1.7; }
.article-comments-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); }
.article-comment-form { display: grid; gap: 17px; margin-top: 35px; padding: clamp(22px,4vw,35px); border-radius: 15px; background: #f2f7f3; }
.article-comment-form h3 { margin: 0; color: var(--green-950); font-family: Georgia,serif; font-size: 26px; }
.article-comment-form > p { margin: -8px 0 2px; color: var(--muted); font-size: 12px; }
.article-comment-form label { display: grid; gap: 7px; color: var(--green-900); font-size: 12px; font-weight: 800; }
.article-comment-form input, .article-comment-form textarea { width: 100%; border: 1px solid #b9cbbf; border-radius: 8px; padding: 12px; background: #fff; font: inherit; font-weight: 500; }
.article-comment-form textarea { resize: vertical; }
.article-comment-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.article-comment-form .article-captcha { display: flex; align-items: center; gap: 10px; }
.article-comment-form .article-captcha input { width: 75px; }
.article-comment-form > .button { width: fit-content; }
.article-form-message { padding: 12px 14px; border-radius: 8px; font-size: 12px; }
.article-form-message.success { color: #14532d; background: #dcfce7; }
.article-form-message.error { color: #991b1b; background: #fee2e2; }
@media (max-width:700px) {
  .article-photo-grid { grid-template-columns: 1fr; }
  .article-photo-grid figure:first-child:nth-last-child(odd) { grid-column: auto; }
  .article-photo-grid figure:first-child:nth-last-child(odd) img { aspect-ratio: 4/3; }
  .article-share { align-items: flex-start; flex-direction: column; }
  .article-related-grid { grid-template-columns: 1fr; }
  .article-pagination { grid-template-columns: 1fr; }
  .article-pagination a.next { text-align: left; }
  .article-comment-fields { grid-template-columns: 1fr; }
}

/* SPMB publik dan admin */
.ppdb-public { max-width: 1050px; margin: 0 auto; padding: clamp(55px,8vw,100px) 22px; }
.ppdb-intro { margin-bottom: 35px; }
.ppdb-intro h1, .status-shell h1 { margin: 10px 0 13px; color: var(--green-950); font-family: Georgia,serif; font-size: clamp(37px,5vw,58px); }
.ppdb-intro > p, .status-shell section > p { color: var(--muted); line-height: 1.7; }
.reenroll-shell { width: min(1180px,calc(100% - 40px)); margin: 0 auto; padding: 42px 0 70px; }
.reenroll-shell .ppdb-intro { max-width: 860px; margin-bottom: 26px; }
.reenroll-shell .ppdb-intro h1 { font-size: clamp(38px,5vw,58px); line-height: 1.04; }
.reenroll-login-card { width: min(780px,100%); padding: clamp(22px,4vw,38px); }
.reenroll-login-card .panel-title { margin-bottom: 24px; }
.reenroll-login-form { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.85fr) auto; align-items: end; gap: 14px; }
.reenroll-login-form label { margin: 0; }
.reenroll-login-form .button { min-height: 46px; white-space: nowrap; }
.reenroll-help { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.reenroll-help a { color: var(--green-700); font-weight: 800; }
.reenroll-data-card { padding: clamp(20px,3vw,34px); }
@media (max-width:760px) {
  .reenroll-shell { width: min(100% - 24px,1180px); padding: 25px 0 50px; }
  .reenroll-shell .ppdb-intro h1 { font-size: clamp(34px,11vw,46px); }
  .reenroll-login-form { grid-template-columns: 1fr; }
  .reenroll-login-form .button { width: 100%; }
}
.ppdb-steps { display: flex; gap: 12px; margin-top: 27px; }
.ppdb-steps span { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-size: 10px; font-weight: 750; }
.ppdb-steps b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--green-800); color: #fff; }
.ppdb-form { display: grid; gap: 22px; }
.ppdb-form fieldset { padding: clamp(22px,4vw,34px); border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.ppdb-form legend { padding: 0 10px; color: var(--green-800); font-family: Georgia,serif; font-size: 20px; font-weight: 750; }
.ppdb-form .form-grid { margin-top: 10px; }
.ppdb-form label small { color: var(--muted); font-size: 9px; font-weight: 500; }
.major-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-top: 12px; }
.major-choice { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.major-choice:has(input:checked) { border-color: var(--green-700); background: var(--green-100); box-shadow: inset 0 0 0 1px var(--green-700); }
.major-choice input { width: 18px; min-height: 18px; }
.major-choice span { display: grid; gap: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.major-choice strong { color: var(--green-800); font-size: 13px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 16px; border-radius: 10px; background: #f1f6f2; }
.consent input { width: 18px; min-height: 18px; }
.ppdb-submit { min-width: 220px; justify-self: start; }
.ppdb-success { padding: clamp(30px,6vw,60px); border: 1px solid #9bcbae; border-radius: 18px; background: #e9f7ee; text-align: center; }
.ppdb-success > span { color: var(--green-700); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.ppdb-success h2 { margin: 14px 0; color: var(--green-950); font-size: clamp(30px,5vw,50px); letter-spacing: .05em; }
.ppdb-success p { max-width: 640px; margin: 0 auto 25px; color: #476054; line-height: 1.7; }
.ppdb-success > div { display: flex; justify-content: center; gap: 9px; }
.status-shell { max-width: 1050px; min-height: calc(100vh - 80px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: clamp(40px,8vw,100px); margin: 0 auto; padding: 60px 22px; }
.status-result { padding: clamp(28px,5vw,48px); border: 1px solid var(--line); border-top: 6px solid var(--green-700); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.status-result > span { color: var(--green-700); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.status-result h2 { margin: 10px 0; font-family: Georgia,serif; font-size: 32px; }
.status-result > p { color: var(--muted); line-height: 1.6; }
.status-result dl { display: grid; margin: 25px 0 0; }
.status-result dl div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.status-result dt { color: var(--muted); font-size: 11px; }
.status-result dd { margin: 0; font-size: 12px; font-weight: 750; }
.status-result-rejected { border-top-color: var(--danger); }
.proof-form { margin-top: 22px; }
.admin-note { margin-top: 22px; padding: 15px; border-radius: 9px; background: #fff6d5; }
.admin-note p { margin: 6px 0 0; color: #685711; font-size: 12px; line-height: 1.6; }
.heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.heading-actions form { margin: 0; }
.danger-button { background: var(--danger); }
.ppdb-admin-status { display: flex; align-items: center; gap: 12px; margin: -15px 0 20px; }
.ppdb-admin-status strong { font-size: 12px; }
.ppdb-counts { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; margin-bottom: 22px; }
.ppdb-counts a { padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.ppdb-counts a.active { border-color: var(--green-700); box-shadow: inset 0 -3px var(--green-700); }
.ppdb-counts span, .ppdb-counts strong { display: block; }
.ppdb-counts span { min-height: 25px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.ppdb-counts strong { margin-top: 4px; color: var(--green-800); font-size: 23px; }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 35px; }
.detail-grid > div { display: grid; gap: 6px; min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.detail-grid > div > span { color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.detail-grid > div > strong { overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; }
.graduation-result { display: grid; place-items: center; gap: 8px; margin: 28px 0 22px; padding: 24px; border: 1px solid; border-radius: 16px; text-align: center; }
.graduation-result small { font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.graduation-result strong { font-family: Georgia, serif; font-size: clamp(24px,3vw,38px); line-height: 1.15; }
.graduation-result-passed { border-color: #9bd5b5; background: #eaf8f0; color: var(--green-800); }
.graduation-result-failed { border-color: #e2aaaa; background: #fff0f0; color: var(--danger); }
.detail-grid dl { margin: 0; }
.detail-grid dl div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.detail-grid dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.detail-grid dd { margin: 4px 0 0; font-size: 12px; line-height: 1.55; }
.detail-grid dd a { color: var(--green-700); font-weight: 800; }
.status-form { display: flex; align-items: end; gap: 12px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }
.status-form > label:first-of-type { min-width: 180px; }
.status-form .grow { flex: 1; }
.search-form { display: flex; align-items: end; gap: 10px; margin-bottom: 18px; }
.search-form label { min-width: min(100%,420px); }
.status-submitted { background: #fff3c7; color: #78600a; }
.status-verified { background: #dceeff; color: #1e5d8e; }
.status-accepted, .status-enrolled { background: #ddf3e5; color: #14643c; }
.status-rejected { background: #fde5e5; color: #8b2828; }
.table-action { color: var(--green-700); font-size: 11px; font-weight: 850; }

/* Presensi */
.attendance-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.attendance-legend span { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; background: #f2f5f3; color: var(--muted); font-size: 9px; }
.attendance-legend b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #fff; }
.attendance-present b { background: #1e7a49; }
.attendance-sick b { background: #c58b12; }
.attendance-permitted b { background: #2777a8; }
.attendance-absent b { background: #b83b3b; }
.attendance-truant b { background: #6d28d9; }
.attendance-lock-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.attendance-lock-fieldset:disabled { opacity: .72; }
.attendance-locked-state > .flash-info { display: none; }
.attendance-lock-form { display: grid; grid-template-columns: minmax(260px,1fr) auto; gap: 14px; align-items: end; }
.attendance-lock-form label { display: grid; gap: 7px; font-size: 11px; font-weight: 800; }
.report-print-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.report-print-summary span { padding: 6px 9px; border: 1px solid #b9c9c0; border-radius: 6px; font-size: 9px; font-weight: 800; }
.attendance-table td:nth-child(1) { width: 45px; text-align: center; }
.attendance-table td:nth-child(2) { width: 110px; }
.attendance-table td:nth-child(4) { width: 190px; }
.attendance-table input, .attendance-table select { min-width: 150px; }
.attendance-session-note { display: grid; gap: 7px; margin-top: 18px; }
.attendance-detail-table { min-width: 1500px; }
.attendance-detail-table td:nth-child(2) { min-width: 190px; }
.attendance-detail-table td:nth-child(5) input { display: block; margin-bottom: 6px; }
.attendance-detail-table td:nth-child(7) { min-width: 220px; }
.attendance-detail-table td:nth-child(8) { min-width: 220px; }
.attendance-detail-table td:nth-child(8) > * { display: block; margin: 5px 0; }
.attendance-detail-table input[type="file"] { max-width: 205px; min-width: 0; font-size: 9px; }
.check-label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.check-label input { min-width: 0; width: auto; }
.status-not_required { background: #eef2f0; color: #5d6a63; }
.status-approved { background: #dff3e6; color: #17643a; }
.status-rejected { background: #fde3e1; color: #9c2e2e; }
.report-print-sheet { width: min(1120px,calc(100% - 32px)); margin: 24px auto; color: #16231c; }
.report-print-header { display: flex; align-items: center; gap: 16px; border-bottom: 3px solid #075b3a; padding: 12px 0; }
.school-letterhead { position: relative; display: grid; grid-template-columns: 92px 1fr 92px; align-items: center; min-height: 122px; padding: 6px 0 31px; color: #000; border-bottom: 3px solid #000; font-family: "Times New Roman",Times,serif; text-align: center; }
.school-letterhead::after { content: ""; position: absolute; right: 0; bottom: 25px; left: 0; border-top: 1px solid #000; }
.school-letterhead img { width: 72px; height: 84px; justify-self: center; object-fit: contain; }
.school-letterhead-copy { display: grid; gap: 0; line-height: 1.05; }
.school-letterhead-copy strong { font-size: 15px; }
.school-letterhead-copy b { font-size: 21px; }
.school-letterhead-copy em { color: #0000bd; font-size: 12px; font-weight: 700; }
.school-letterhead > small { position: absolute; right: 0; bottom: 8px; left: 0; color: #000; font-size: 10px; font-style: italic; }
.school-print-title { margin: 26px 0 16px; color: #000; font: 700 18px "Times New Roman",Times,serif; text-align: center; text-decoration: underline; }
.report-print-header img { width: 72px; height: 72px; object-fit: contain; }
.report-print-header div { display: grid; gap: 4px; }
.report-print-header strong { color: #075b3a; font-size: 22px; }
.report-print-header span { font-weight: 800; font-size: 16px; }
.report-print-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 11px; }
.report-print-table th,.report-print-table td { border: 1px solid #9aa89f; padding: 7px; text-align: center; }
.report-print-table th { background: #e7f2eb; }
.report-print-table td:nth-child(3) { text-align: left; }
.report-print-sign { display: grid; grid-template-columns: 1fr 300px; gap: 40px; margin-top: 25px; }
.report-print-sign > div:last-child { display: grid; gap: 12px; text-align: center; }
@media (max-width:700px){.report-print-header strong{font-size:17px}.report-print-header img{width:56px;height:56px}.report-print-sheet{width:calc(100% - 20px)}.report-print-sign{grid-template-columns:1fr}.attendance-detail-table{min-width:1400px}}
@media print{.report-print-sheet{width:100%;margin:0}.receipt-tools{display:none!important}.report-print-table{font-size:8px}.report-print-table th,.report-print-table td{padding:4px}@page{size:A4 landscape;margin:10mm}}

.print-page{background:#e9efeb;color:#000}
.print-shell{width:min(210mm,calc(100% - 24px));margin:20px auto 48px}
.print-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-bottom:14px}
.print-sheet{min-height:297mm;padding:12mm 20mm 16mm;background:#fff;box-shadow:0 8px 30px rgba(11,45,30,.12);font:12pt/1.5 "Times New Roman",Times,serif;box-sizing:border-box}
.letter-sheet .school-letterhead{min-height:31mm;padding-top:0}
.letter-document-heading{margin:8mm 0 7mm;text-align:center}
.letter-document-heading h1{margin:0;color:#000;font:700 14pt/1.3 "Times New Roman",Times,serif;text-decoration:underline;text-underline-offset:2px}
.letter-document-heading p{margin:1mm 0 0}
.letter-recipient{margin:0 0 5mm;line-height:1.45}
.letter-document-body{min-height:82mm;color:#000;text-align:justify}
.letter-document-body p{margin:0 0 4mm;text-indent:10mm}
.letter-document-body p:first-child{margin-top:0}
.letter-field{display:grid;grid-template-columns:43mm 4mm minmax(0,1fr);gap:0;margin:1mm 0;text-align:left;break-inside:avoid}
.letter-field > b{font-weight:400}
.letter-field > strong{font-weight:400;overflow-wrap:anywhere}
.letter-clause{display:grid;grid-template-columns:28mm 4mm minmax(0,1fr);gap:0;margin:1.2mm 0;text-align:justify;break-inside:avoid}
.letter-clause > b{font-weight:400}
.letter-signature{position:relative;width:72mm;margin:8mm 0 0 auto;line-height:1.45;break-inside:avoid}
.letter-signature-space{position:relative;height:25mm}
.letter-signature-space img{position:absolute;top:0;left:-8mm;width:55mm;height:25mm;object-fit:contain}
.letter-verification{display:flex;align-items:center;gap:3mm;margin-top:9mm;color:#4d5a53;font:8pt/1.4 Arial,sans-serif;break-inside:avoid}
.letter-verification img{width:19mm;height:19mm}
.letter-verification a{color:#244d38;text-decoration:none}
@media(max-width:700px){.print-sheet{min-height:auto;padding:22px 16px}.print-shell{width:calc(100% - 12px)}}
@media print{body.print-page{background:#fff}.print-page .no-print{display:none!important}.print-page .print-shell{width:100%;margin:0}.print-page .print-sheet{min-height:0;padding:0;box-shadow:none}@page{size:A4 portrait;margin:18mm 20mm}}
.import-panel { border-left: 4px solid var(--green-700); }
.import-form { display: flex; align-items: end; gap: 12px; }
.import-form label { min-width: min(100%, 520px); flex: 1; }
.import-help { margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }

/* Akademik dan rapor */
.two-panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.objective-list { margin-top: 24px; }
.objective-list h3 { font-size: 15px; }
.objective-list article { padding: 13px 0; border-top: 1px solid var(--line); }
.objective-list article span { color: var(--green-700); font-size: 10px; font-weight: 850; }
.objective-list article p { margin: 5px 0 0; color: #44564c; font-size: 12px; line-height: 1.6; }
.filter-row { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.filter-row label { min-width: 190px; flex: 1; }
.grade-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.grade-toolbar label { min-width: 270px; }
.grade-toolbar p { max-width: 520px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.grade-description-tools { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.grade-description-tools .button { flex:0 0 auto; }
.grade-table [data-grade-row] td:first-child .table-action { display:block; margin-top:8px; }
.grade-table td:nth-child(2) { width: 120px; }
.grade-table textarea { min-width: 230px; }
.panel-submit { display: flex; justify-content: flex-end; margin-top: 18px; }
.report-body { background: #dfe5e1; }
.report-sheet { width: min(210mm, calc(100% - 28px)); min-height: 297mm; margin: 25px auto; padding: 18mm 16mm; background: #fff; box-shadow: 0 8px 35px rgba(0,0,0,.15); color: #18251e; font-family: Arial, sans-serif; }
.report-tools { display: flex; align-items:center; justify-content: space-between; gap: 8px; width:min(210mm,calc(100% - 28px)); box-sizing:border-box; margin:10px auto 8px; padding:0 0 7px; border-bottom: 1px dashed #aebbb3; color: var(--muted); font-size: 9px; }
.report-cover-shortcut { width:min(210mm,calc(100% - 28px)); margin:10px auto -4px; text-align:right; }
.report-cover-shortcut .button { min-height:28px; padding:5px 9px; border-radius:6px; font-size:9px; }
.report-tools a { color: var(--green-700); font-weight: 800; }
.report-tools > .button,.report-tools .button { min-height:28px; padding:5px 9px; border-radius:6px; font-size:9px; line-height:1.1; }
.report-header { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 3px double #111; text-align: center; }
.report-logo { width: 58px; height: 58px; object-fit: contain; }
.report-print-options { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.report-print-options label { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.report-print-options input[type="checkbox"] { width:14px; min-height:14px; }
.report-print-options input[type="date"] { width:auto; min-height:28px; padding:4px 6px; font-size:9px; }
.report-draft { position:relative; overflow:hidden; }
.report-draft::before { content:attr(data-draft-label); position:absolute; inset:38% auto auto 10%; z-index:0; transform:rotate(-28deg); color:rgba(150,20,20,.08); font:900 100px Arial,sans-serif; letter-spacing:.12em; pointer-events:none; }
.report-draft > * { position:relative; z-index:1; }
.class-print-toolbar { position:sticky; top:0; z-index:20; display:flex; justify-content:center; align-items:center; gap:16px; padding:12px; background:#eef5f0; box-shadow:0 2px 12px rgba(0,0,0,.12); }
.report-class-page { break-after:page; page-break-after:always; }
.report-class-page:last-of-type { break-after:auto; page-break-after:auto; }
.report-mark { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 12px; background: var(--green-800); color: var(--yellow); font-size: 23px; font-weight: 950; }
.report-header p { margin: 0 0 4px; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.report-header h1 { margin: 0 0 4px; font-family: Georgia,serif; font-size: 22px; }
.report-header span { font-size: 9px; }
.report-title { padding: 18px 0; text-align: center; }
.report-title h2 { margin: 0 0 5px; font-size: 16px; letter-spacing: .12em; }
.report-title p { margin: 0; font-size: 10px; }
.student-identity { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 30px; margin: 0 0 18px; font-size: 10px; }
.student-identity div { display: grid; grid-template-columns: 110px 1fr; }
.student-identity dt::after { content: ':'; float: right; margin-right: 8px; }
.student-identity dd { margin: 0; font-weight: 700; }
.report-table { font-size: 9px; }
.report-table th, .report-table td { padding: 7px; border: 1px solid #3d4a43; }
.report-table th { background: #eaf2ed; color: #18251e; text-align: center; }
.report-table td:first-child, .score-cell { text-align: center; }
.report-table td:nth-child(1) { width: 30px; }
.report-table td:nth-child(3) { width: 70px; }
.report-table td p { margin: 0 0 4px; line-height: 1.45; }
.report-table small { display: block; font-size: 8px; }
.report-group td { background: #f0f4f1; font-weight: 800; }
.report-table tfoot td { font-weight: 850; }
.report-complements { display: grid; grid-template-columns: .75fr 1.25fr; gap: 18px; margin-top: 18px; }
.report-complements section { padding: 11px; border: 1px solid #59675f; }
.report-complements h3 { margin: 0 0 8px; font-size: 10px; text-transform: uppercase; }
.report-complements dl, .report-complements p { margin: 0; font-size: 9px; line-height: 1.55; }
.report-complements dl div { display: flex; justify-content: space-between; }
.report-complements dd { margin: 0; }
.report-signatures { margin-top:28px; font-size:9px; }
.report-signature-date { width:calc((100% - 44px)/3); margin:0 0 0 auto; text-align:center; }
.report-signature-ack { width:calc((100% - 44px)/3); margin:4px auto 0; text-align:center; }
.report-signature-roles,.report-signature-names { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; text-align:center; }
.report-signature-roles { margin-top:4px; }
.report-signature-names { align-items:end; margin-top:60px; }
.report-signature-names span,.report-signature-names strong { display:block; font-weight:700; }
.report-signature-names span { font-weight:400; text-decoration:underline; text-underline-offset:1.5px; }
.report-signature-names strong { text-decoration:underline; text-underline-offset:1.5px; }
.report-foot { margin-top: 24px; padding-top: 8px; border-top: 1px solid #aaa; color: #65736b; font-size: 7px; text-align: center; }
/* Cetak rapor: proporsi, garis, dan blok bawah mengikuti lembar rapor lama. */
.report-legacy { box-sizing:border-box; border:0; padding:7mm 5mm 8mm; color:#111; font-family:Arial,sans-serif; }
.report-legacy .report-header { grid-template-columns:19mm 1fr; gap:3mm; padding:0 0 2mm; border-bottom:2px double #111; }
.report-legacy .report-logo { width:17mm; height:17mm; }
.report-legacy .report-header p { margin:0 0 1mm; font-size:7pt; letter-spacing:.04em; }
.report-legacy .report-header h1 { margin:0 0 1mm; font-size:13pt; }
.report-legacy .report-header span { font-size:6.7pt; }
.report-legacy .report-title { padding:3mm 0 2.5mm; }
.report-legacy .report-title h2 { margin:0 0 1mm; font-size:10pt; letter-spacing:.08em; }
.report-legacy .report-title p { font-size:7pt; }
.report-legacy .student-identity { gap:1mm 14mm; margin:0 0 2mm; font-size:7pt; }
.report-legacy .student-identity div { grid-template-columns:25mm 1fr; }
.report-legacy .student-identity dt::after { margin-right:2mm; }
.report-legacy .report-table { width:100%; border-collapse:collapse; font-size:6.5pt; table-layout:fixed; }
.report-legacy .report-table th,.report-legacy .report-table td { padding:1.3mm 1.5mm; border:1px solid #111; color:#111; vertical-align:top; line-height:1.16; }
.report-legacy .report-table th { background:#eaf2ed; font-size:6.5pt; font-weight:700; }
.report-legacy .report-score-table th:nth-child(1),.report-legacy .report-score-table td:nth-child(1) { width:6mm; text-align:center; }
.report-legacy .report-score-table th:nth-child(2) { width:45mm; }
.report-legacy .report-score-table th:nth-child(3),.report-legacy .report-score-table td:nth-child(3) { width:14mm; text-align:center; }
.report-legacy .report-group td { background:#f4f4f4; font-weight:700; }
.report-legacy .report-score-table tfoot td { font-weight:700; }
.report-legacy .report-section-table { margin-top:2.5mm; }
.report-legacy .report-section-table th:nth-child(1),.report-legacy .report-section-table td:nth-child(1) { width:6mm; text-align:center; }
.report-legacy .report-section-table th:nth-child(3),.report-legacy .report-section-table td:nth-child(3) { width:25mm; }
.report-legacy .report-section-table th:nth-child(4),.report-legacy .report-section-table td:nth-child(4) { width:20mm; text-align:center; }
.report-legacy .report-bottom { margin-top:5mm; }
.report-legacy .report-attendance { width:62%; }
.report-legacy .report-attendance td:nth-child(2) { width:12mm; text-align:center; }
.report-legacy .report-attendance td:nth-child(3) { width:11mm; }
.report-legacy .report-notes { margin-top:4mm; font-size:6.7pt; }
.report-legacy .report-notes > strong { display:block; margin-bottom:1mm; }
.report-legacy .report-notes p { min-height:8mm; margin:0; padding:1.5mm; border:1px solid #111; line-height:1.25; }
.report-legacy .report-notes .report-decision { min-height:auto; border-top:0; text-align:center; }
.report-legacy .report-signatures { margin-top:5mm; font-size:6.7pt; }
.report-legacy .report-signature-date { width:calc((100% - 14mm)/3); margin:0 0 0 auto; }
.report-legacy .report-signature-ack { width:calc((100% - 14mm)/3); margin:1.5mm auto 0; }
.report-legacy .report-signature-roles,.report-legacy .report-signature-names { gap:7mm; }
.report-legacy .report-signature-roles { margin-top:1.5mm; }
.report-legacy .report-signature-names { margin-top:17mm; }
.report-legacy.report-class-page { break-after:page; page-break-after:always; }
.report-cover { box-sizing:border-box; padding:12mm; color:#173d28; font-family:Arial,sans-serif; }
.report-cover-inner { display:flex; min-height:245mm; box-sizing:border-box; flex-direction:column; align-items:center; text-align:center; padding:18mm 15mm 13mm; border:2px solid #0d6b3b; background:linear-gradient(180deg,#f6fbf8 0,#fff 34%,#fff 76%,#edf7f0 100%); }
.report-cover-logo { width:35mm; height:35mm; margin-bottom:8mm; object-fit:contain; }
.report-cover-foundation { margin:0 0 4mm; color:#35614a; font-size:9pt; font-weight:700; letter-spacing:.08em; }
.report-cover h1 { margin:0; color:#0d5b32; font:700 23pt/1.25 Georgia,serif; letter-spacing:.06em; }
.report-cover-school { margin:5mm 0 14mm; color:#1c5136; font-size:15pt; font-weight:800; line-height:1.3; }
.report-cover-school small { font-size:12pt; }
.report-cover-identity { width:100%; max-width:135mm; display:grid; gap:0; text-align:left; border:1px solid #7da68b; background:#fff; }
.report-cover-identity div { display:grid; grid-template-columns:52mm 1fr; gap:5mm; padding:3mm 4mm; border-bottom:1px solid #c4d8ca; font-size:9pt; }
.report-cover-identity div:last-child { border-bottom:0; }
.report-cover-identity span { color:#4b6455; }
.report-cover-identity strong { color:#153d29; }
.report-cover-footer { display:grid; gap:2mm; margin-top:auto; color:#28563b; font-size:9pt; }
.report-cover-footer strong { font-size:11pt; }
.report-cover-page { height:297mm; min-height:297mm; margin-bottom:12px; break-after:page; page-break-after:always; padding:0; overflow:hidden; color:#111; background:#fff; }
.report-cover-page:last-of-type { break-after:auto; page-break-after:auto; }
.report-cover-legacy-inner { height:297mm; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; padding:15mm 20mm 12mm; text-align:center; }
.report-cover-legacy-title,.report-cover-profile-title { display:grid; gap:4mm; font-family:Georgia,serif; }
.report-cover-regional-position,.report-cover-legacy-title,.report-cover-school-position,.report-cover-school-block,.report-cover-student-fields,.report-cover-ministry { flex-shrink:0; }
.report-cover-legacy-title h1,.report-cover-profile-title h1 { margin:0; color:#111; font-size:23pt; letter-spacing:0; }
.report-cover-regional-position { height:24mm; margin-bottom:3mm; }
.report-cover-school-position { margin-top:8mm; }
.report-cover-legacy-logo { width:48mm; height:48mm; object-fit:contain; }
.report-cover-regional-logo { width:24mm; height:24mm; object-fit:contain; }
.report-cover-legacy-title strong,.report-cover-profile-title strong { font-size:16pt; }
.report-cover-legacy-title b,.report-cover-profile-title b { font-size:18pt; }
.report-cover-school-block { display:grid; gap:4mm; margin:11mm 0 0; font-size:16pt; }
.report-cover-school-block b { font-size:16pt; }
.report-cover-school-block span { margin-top:3mm; font-size:10.5pt; line-height:1.35; }
.report-cover-school-block span + span { margin-top:-4mm; }
.report-cover-student-fields { width:100%; margin-top:13mm; font-family:Georgia,serif; }
.report-cover-student-fields div { display:grid; gap:1mm; margin-bottom:4mm; }
.report-cover-student-fields strong { font-size:13pt; letter-spacing:.16em; }
.report-cover-student-fields b { padding:2mm; border:1px solid #777; font-size:14pt; }
.report-cover-ministry { margin-top:auto; font:12pt/2 Georgia,serif; letter-spacing:.04em; }
.report-cover-profile { padding:27mm 25mm; }
.report-cover-profile-title { align-items:center; justify-items:center; margin-bottom:32mm; text-align:center; }
.report-cover-profile-title h1 { font-size:17pt; }.report-cover-profile-title strong { font-size:12pt; }.report-cover-profile-title b { font-size:11pt; }
.report-cover-school-data { margin:0; font:10pt/1.4 Georgia,serif; }
.report-cover-school-data div { display:grid; grid-template-columns:52mm 5mm 1fr; padding:2.4mm 0; }
.report-cover-school-data dt::after { content:' :'; float:right; }.report-cover-school-data dd { grid-column:3; margin:0; padding-bottom:1.2mm; border-bottom:1px solid #111; font-weight:600; }
.report-biodata-page { padding:0; }
.report-biodata-inner { min-height:297mm; box-sizing:border-box; display:flex; flex-direction:column; padding:15mm 18mm 14mm; color:#111; font-family:Arial,sans-serif; }
.report-biodata-inner h1 { width:max-content; margin:0 auto 10mm; padding-bottom:1mm; border-bottom:1px solid #111; color:#111; font-family:Arial,sans-serif; font-size:10pt; font-weight:700; }
.report-biodata-content { display:block; }
.report-biodata-section { margin:0 0 6mm; }.report-biodata-section h2 { margin:0 0 2mm; font-size:9pt; font-weight:700; }
.report-biodata-list { font-size:8.7pt; line-height:1.22; }
.report-biodata-row { display:grid; grid-template-columns:7mm 48mm 5mm 1fr; min-height:6.2mm; align-items:end; }
.report-biodata-row i { align-self:end; padding-bottom:1mm; font-family:Arial,sans-serif; font-style:normal; font-weight:400; line-height:1.22; }.report-biodata-row span { padding-bottom:1mm; }.report-biodata-row b { padding-bottom:1mm; font-weight:400; }.report-biodata-row strong { min-height:4.8mm; padding:0 1mm .5mm; border-bottom:1px dotted #111; font-weight:400; }
.report-biodata-row.report-biodata-parent { grid-template-columns:7mm 1fr; min-height:5.5mm; }.report-biodata-row.report-biodata-parent span { grid-column:2; font-weight:400; }.report-biodata-row.report-biodata-parent b,.report-biodata-row.report-biodata-parent strong { display:none; }
.report-biodata-row.report-biodata-continuation b { visibility:hidden; }
.report-biodata-bottom { display:grid; grid-template-columns:30mm 1fr; gap:10mm; align-items:end; width:110mm; margin:auto 0 0 auto; }
.report-biodata-photo { width:30mm; height:40mm; box-sizing:border-box; border:1px solid #111; display:grid; place-content:center; text-align:center; font:8pt/1.4 Arial,sans-serif; }
.report-biodata-photo img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
.report-biodata-signature { display:grid; justify-items:end; justify-self:end; width:70mm; font:9pt/1.4 Arial,sans-serif; }.report-biodata-signature span { width:100%; margin-bottom:16mm; text-align:left; }.report-biodata-signature strong { width:100%; min-height:4mm; font-size:9pt; text-align:left; }.report-biodata-signature small { width:100%; margin-top:1mm; font-size:8pt; text-align:left; }
.report-profile-logo { width:84px; height:84px; margin-top:8px; border:1px solid var(--line); border-radius:8px; object-fit:contain; }
.form-grid > label:has(input[name="school_logo"]),.panel:has(input[name="regional_logo"]):not(.report-logo-settings),.panel:has(input[name="school_logo_quick"]):not(.report-logo-settings) { display:none; }
.report-logo-upload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.report-logo-upload-grid form { display:grid; align-content:start; gap:12px; padding:16px; border:1px solid var(--line); border-radius:10px; background:#fafdfb; }
.report-logo-upload-grid label { display:grid; gap:7px; color:#385447; font-size:12px; font-weight:750; }
.report-logo-upload-grid label small { color:var(--muted); font-size:10px; font-weight:600; }
.report-logo-upload-grid .button { width:max-content; }

.inline-actions { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.report-completeness-panel { scroll-margin-top:20px; outline:2px solid rgba(7,91,58,.12); }
.report-student-context { display:grid; gap:3px; margin:0 0 18px; padding:14px 16px; border-left:5px solid var(--green-700); border-radius:8px; background:#eff8f2; color:var(--green-950); }
.report-student-context > span { color:var(--green-700); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.report-student-context > strong { font-size:20px; }
.report-student-context > small { color:#416253; font-size:12px; font-weight:700; }
.report-row-actions { display:flex; flex-wrap:wrap; gap:7px; min-width:190px; }
.report-action-button { display:inline-flex; align-items:center; justify-content:center; min-height:31px; padding:6px 11px; border:1px solid var(--green-700); border-radius:7px; font-size:11px; font-weight:850; line-height:1; text-decoration:none; transition:background var(--ui-fast) ease,color var(--ui-fast) ease,transform var(--ui-fast) ease; }
.report-action-button:hover { transform:translateY(-1px); }
.report-action-completeness { color:var(--green-800); background:#fff; }
.report-action-completeness:hover { color:#fff; background:var(--green-700); }
.report-action-print { color:#fff; background:var(--green-700); }
.report-action-print:hover { color:#fff; background:var(--green-950); }
.inline-actions select { min-width: 150px; }
.check-label { display: flex !important; flex-direction: row !important; align-items: center; gap: 9px; padding-top: 30px; }
.check-label input { width: auto; }
.choice-list { display: grid; gap: 9px; max-height: 480px; overflow: auto; }
.choice-list label { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #dce7df; border-radius: 10px; background: #f9fcfa; cursor: pointer; }
.choice-list input { width: auto; margin-top: 3px; }
.choice-list span { display: grid; gap: 3px; color: #516158; font-size: 13px; line-height: 1.45; }
.choice-list strong { color: #173d28; }
.exam-body { min-height: 100vh; background: #eef5f0; color: #183126; }
.exam-login-form input[name="token"] { text-transform: uppercase; letter-spacing: .18em; }
.exam-shell { width: min(940px, calc(100% - 28px)); margin: 0 auto; padding: 30px 0 60px; }
.exam-header { display: flex; justify-content: space-between; gap: 25px; padding: 26px 30px; border-radius: 18px; background: #0d5b32; color: #fff; box-shadow: 0 16px 40px rgba(13,91,50,.18); }
.exam-header h1 { margin: 5px 0 7px; font-size: clamp(25px,4vw,38px); }
.exam-header p { margin: 0; color: #cfe5d7; }
.exam-header .eyebrow { color: #ffe17a; }
.exam-time { min-width: 130px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; text-align: center; }
.exam-time small,.exam-time span { display: block; color: #cfe5d7; }
.exam-time strong { display: block; margin: 2px 0; color: #ffe17a; font-size: 28px; }
.exam-form { display: grid; gap: 18px; margin-top: 22px; }
.exam-question { padding: 25px 28px; border: 1px solid #dce7df; border-radius: 16px; background: #fff; box-shadow: 0 8px 25px rgba(31,64,45,.06); }
.question-number { display: flex; justify-content: space-between; color: #0d6b3b; font-weight: 800; }
.question-number small { color: #718078; font-weight: 600; }
.question-stimulus { margin: 18px 0; padding: 16px; border-left: 4px solid #edc735; background: #fffbed; color: #3e4d45; line-height: 1.65; }
.exam-question h2 { margin: 16px 0 20px; font-size: 19px; line-height: 1.55; }
.answer-options { display: grid; gap: 10px; }
.answer-options label { display: grid; grid-template-columns: 24px 34px 1fr; align-items: center; gap: 9px; padding: 13px 15px; border: 1px solid #dce7df; border-radius: 11px; cursor: pointer; transition: .15s ease; }
.answer-options label:hover { border-color: #5b9f73; background: #f2faf5; }
.answer-options input { width: auto; }
.answer-options b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e3f2e8; color: #0d6b3b; }
.exam-submit { padding: 22px; border-radius: 15px; background: #fff; text-align: center; }
.exam-submit p { color: #65736b; }
.result-card { margin: 20px 0; padding: 22px; border: 1px solid #dce7df; border-radius: 15px; background: #f6fbf8; text-align: center; }
.result-card > span { color: #0d6b3b; font-weight: 850; }
.result-card h3 { margin: 6px 0; }
.result-card > div { margin: 18px auto; }
.result-card > div strong { display: block; color: #0d6b3b; font-size: 44px; }
.result-card > div small { color: #65736b; }
.receipt-body { min-height: 100vh; padding: 30px; background: #edf3ef; color: #17251d; }
.receipt-sheet { width: min(850px,100%); margin: auto; padding: 36px 44px; border: 1px solid #d9e4dc; border-radius: 14px; background: #fff; box-shadow: 0 14px 38px rgba(18,55,33,.1); }
.receipt-tools { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 24px; }
.receipt-header { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: center; padding-bottom: 20px; border-bottom: 3px double #166534; }
.receipt-mark { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #166534; color: #facc15; font-size: 25px; font-weight: 900; }
.receipt-header strong,.receipt-header span,.receipt-header small { display: block; }
.receipt-header strong { color: #166534; font-size: 21px; }
.receipt-header span { margin: 5px 0; }
.receipt-title { display: flex; justify-content: space-between; gap: 20px; margin: 25px 0; padding: 14px 18px; background: #f3f8f4; }
.receipt-title span { font-weight: 900; }
.receipt-title strong { color: #166534; }
.receipt-identity { display: grid; gap: 12px; }
.receipt-identity div { display: grid; grid-template-columns: 190px 1fr; gap: 15px; border-bottom: 1px solid #e5ebe7; padding-bottom: 10px; }
.receipt-identity dt { color: #65736b; }
.receipt-identity dd { margin: 0; font-weight: 750; }
.receipt-amount { display: flex; justify-content: space-between; align-items: center; margin: 26px 0; padding: 20px; border: 2px solid #166534; border-radius: 10px; }
.receipt-amount strong { color: #166534; font-size: 26px; }
.receipt-note { padding: 12px 15px; background: #fffbed; }
.receipt-items { margin: 22px 0; overflow-x: auto; }
.receipt-items table { width: 100%; border-collapse: collapse; font-size: 12px; }
.receipt-items th,.receipt-items td { padding: 10px 12px; border: 1px solid #dce7df; text-align: left; }
.receipt-items th { background: #f3f8f4; color: #166534; }
.receipt-items th:last-child,.receipt-items td:last-child { text-align: right; }
.receipt-footer { display: grid; grid-template-columns: 1fr 260px; gap: 30px; margin-top: 45px; }
.receipt-footer div:last-child { text-align: center; }
.receipt-footer span,.receipt-footer small,.receipt-footer strong { display: block; }
.receipt-footer strong { margin-top: 60px; border-top: 1px solid #273c2f; padding-top: 7px; }

/* Portal pembayaran murid dan wali */
.finance-summary strong { font-size: clamp(20px,2vw,29px) !important; }
.payment-checkout { display: grid; gap: 18px; }
.bill-choice-list,.payment-method-list { display: grid; gap: 10px; }
.bill-choice { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.bill-choice:has(input:checked) { border-color: var(--green-700); background: #f0faf4; box-shadow: inset 0 0 0 1px var(--green-700); }
.bill-choice.pending { background: #f5f6f5; cursor: not-allowed; opacity: .75; }
.bill-choice input,.payment-method-list input { width: 18px; min-height: 18px; }
.bill-choice span,.payment-method-list span { display: grid; gap: 4px; }
.bill-choice small,.bill-choice em,.payment-method-list small,.payment-method-list em { color: var(--muted); font-size: 10px; font-style: normal; }
.bill-choice em { color: #8a6500; font-weight: 800; }
.bill-choice > b { color: var(--green-800); font-size: 14px; }
.checkout-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; align-items: start; }
.payment-method-list label { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.payment-method-list label:has(input:checked) { border-color: var(--green-700); background: #f0faf4; }
.payment-method-list b { color: var(--green-800); font-size: 18px; letter-spacing: .03em; }
.checkout-card { position: sticky; top: 18px; display: grid; gap: 13px; }
.checkout-card > h2 { margin: 2px 0 0; color: var(--green-800); font-size: 30px; }
.checkout-card > p { margin: -8px 0 5px; color: var(--muted); }
.checkout-card label { display: grid; gap: 6px; color: #405247; font-size: 11px; font-weight: 750; }
.checkout-card label small,.checkout-card > small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.status-pending { background: #fff3c7; color: #78600a; }
.status-requested { background: #fff3c7; color: #78600a; }
.status-approved { background: #dceeff; color: #1e5d8e; }
.status-submitted { background: #efe5ff; color: #6336a2; }
.status-verified { background: #ddf3e5; color: #14643c; }
.status-rejected,.status-cancelled,.status-expired { background: #fde5e5; color: #8b2828; }
.payment-flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 20px; }
.payment-flow span { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #43554a; font-size: 10px; font-weight: 750; }
.payment-flow b { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: var(--green-800); color: var(--yellow); }
.order-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.order-card { display: grid; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fbfdfb; }
.order-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.order-card header div { display: grid; gap: 3px; }
.order-card header small,.order-card > p { color: var(--muted); font-size: 10px; }
.order-card > p { margin: 0; line-height: 1.55; }
.order-card dl { display: grid; gap: 7px; margin: 0; }
.order-card dl div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding-top: 7px; border-top: 1px solid var(--line); }
.order-card dt { color: var(--muted); font-size: 10px; }
.order-card dd { margin: 0; font-size: 11px; font-weight: 750; }
.payment-destination { padding: 12px !important; border: 1px solid #96c7a8 !important; border-radius: 9px; background: #edf9f1; }
.payment-destination dd { color: var(--green-800); }
.approved-payment { padding: 14px; border-radius: 10px; background: #eef6ff; }
.approved-payment > strong { color: #1e5d8e; }
.approved-payment p { color: #536a7c; font-size: 10px; }
.approved-payment form,.approved-payment label { display: grid; gap: 8px; }
.approved-payment label { color: #405247; font-size: 10px; font-weight: 750; }
.approved-payment label small { color: var(--muted); }
.order-rejection { padding: 11px; border-radius: 8px; background: #fdeaea; color: #812b2b !important; }
.verification-actions { display: grid; gap: 8px; min-width: 210px; margin-top: 9px; }
.verification-actions form { margin: 0; }
.verification-actions .button { width: 100%; padding: 8px 10px; font-size: 10px; }
.reject-form { display: grid; gap: 6px; }
.reject-form input { min-width: 200px; }
.account-check { display: grid; gap: 4px; min-width: 245px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: #f8fbf9; }
.account-check span { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.account-check strong { color: #183c28; font-size: 10px; line-height: 1.45; }
.account-check em { width: fit-content; margin-top: 4px; padding: 4px 7px; border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 900; }
.account-check .match { background: #ddf3e5; color: #14643c; }
.account-check .mismatch { background: #fde5e5; color: #8b2828; }
.mismatch-text { color: #a12d2d; font-size: 9px; line-height: 1.45; }

/* SIJARI */
.sijari-program-grid,.review-grid,.student-activity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.sijari-program-grid article { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfb; }
.sijari-program-grid article > span,.review-grid article header > span,.student-activity header > span { color: var(--green-700); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sijari-program-grid h3,.review-grid h3 { margin: 0; }
.sijari-program-grid p,.review-grid p,.student-activity > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.sijari-program-grid small { color: var(--muted); }
.sijari-program-grid footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; }
.sijari-program-grid em { font-style: normal; }
.review-grid article { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.review-grid article header,.student-activity header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.review-grid article header div { display: grid; gap: 3px; }
.review-grid article header small { color: var(--muted); }
.review-form { display: grid; grid-template-columns: 120px 1fr; gap: 9px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.review-form label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
.review-form > div { grid-column: 1/-1; display: flex; gap: 8px; }
.sijari-points { min-width: 130px; padding: 15px 20px; border-radius: 13px; background: var(--green-800); color: #fff; text-align: center; }
.sijari-points span,.sijari-points strong { display: block; }
.sijari-points span { color: #cde5d5; font-size: 9px; text-transform: uppercase; }
.sijari-points strong { color: var(--yellow); font-size: 32px; }
.student-activity { display: grid; gap: 12px; align-content: start; }
.student-activity h2 { margin: 0; color: var(--green-900); }
.student-activity > small { color: var(--muted); }
.activity-submit { display: grid; gap: 10px; margin-top: 5px; padding-top: 14px; border-top: 1px solid var(--line); }
.activity-submit label { display: grid; gap: 6px; color: #405247; font-size: 10px; font-weight: 800; }
.activity-submit label small { color: var(--muted); }
.passport-stamp { display: flex; align-items: center; gap: 12px; padding: 13px; border: 2px dashed #2b8650; border-radius: 10px; background: #edf9f1; color: var(--green-800); }
.passport-stamp span { font-size: 10px; font-weight: 900; text-transform: uppercase; }
.passport-stamp strong { margin-left: auto; font-size: 18px; }
.passport-stamp small { color: var(--muted); }
.status-draft,.status-assigned { background: #eef1ef; color: #53645a; }
.visit-chart { height: 260px; display: grid; grid-template-columns: repeat(14,minmax(24px,1fr)); align-items: end; gap: 9px; padding-top: 20px; }
.visit-chart > div { height: 100%; min-width: 0; display: grid; grid-template-rows: 1fr auto auto; gap: 5px; text-align: center; }
.visit-chart > div > span { min-height: 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 8px; background: #eef5f0; }
.visit-chart i { width: min(100%,32px); min-height: 3px; display: block; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg,var(--green-500),var(--green-800)); }
.visit-chart .visit-bar-1 { height:10%; }.visit-chart .visit-bar-2 { height:20%; }.visit-chart .visit-bar-3 { height:30%; }.visit-chart .visit-bar-4 { height:40%; }.visit-chart .visit-bar-5 { height:50%; }
.visit-chart .visit-bar-6 { height:60%; }.visit-chart .visit-bar-7 { height:70%; }.visit-chart .visit-bar-8 { height:80%; }.visit-chart .visit-bar-9 { height:90%; }.visit-chart .visit-bar-10 { height:100%; }
.visit-chart b { color: var(--green-900); font-size: 11px; }
.visit-chart small { color: var(--muted); font-size: 8px; white-space: nowrap; }
.visit-breakdown { display: grid; gap: 9px; }
.visit-breakdown > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px; background: #f8fbf9; }
.visit-breakdown span { min-width: 0; overflow-wrap: anywhere; color: #53655b; font-size: 12px; }
.visit-breakdown strong { color: var(--green-800); }
.status-published { background: #ddf3e5; color: #14643c; }
.status-closed { background: #fde5e5; color: #8b2828; }

@media (max-width: 1050px) {
  .slider-mode-panel { grid-template-columns:1fr 1fr; }
  .slider-mode-panel > div,.slider-mode-panel > button { grid-column:1/-1; }
  .admin-shell { grid-template-columns: 215px minmax(0,1fr); }
  .module-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .role-feature-list, .role-preview-menu-grid, .role-preview-module-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .public-header { flex-wrap: wrap; }
  .public-menu-toggle { display: flex !important; position: relative; z-index: 3; width: 42px; height: 42px; flex: 0 0 42px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-left: auto; visibility: visible; opacity: 1; }
  .public-menu-toggle span { display: block !important; width: 21px !important; height: 3px !important; min-height: 3px; margin: 0 !important; flex: 0 0 3px; border-radius: 999px; background: #0a3f2b !important; }
  .public-header > .public-login { margin-left: 0; }
  .public-header > nav { order: 4; width: 100%; max-height: 0; display: flex; align-items: stretch; flex-direction: column; gap: 2px; overflow: hidden; visibility: hidden; opacity: 0; border-top: 0 solid var(--line); transition: max-height 420ms var(--ui-ease),opacity 240ms ease,visibility 240ms,padding 320ms ease,border-width 320ms ease; }
  .public-header.public-menu-open > nav { max-height: calc(100vh - 105px); padding: 10px 0 5px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; visibility: visible; opacity: 1; border-top-width: 1px; scrollbar-width: thin; }
  .public-header > nav > a,.public-header > nav > .public-nav-dropdown > button { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 10px 13px; border-radius: 9px; text-align: left; }
  .public-header > .public-header-search { order:3; width:100%; min-height:45px; flex-basis:100%; margin:3px 0 0; border-radius:11px; }
  .public-header > .public-header-search input { font-size:13px; }
  .public-search-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .public-header > nav a::after { display: none; }
  .public-header > nav > a:hover,.public-header > nav > .public-nav-dropdown > button:hover { background: var(--green-100); transform: none; }
  .public-header > nav > .public-login-mobile { display: flex; justify-content: center; margin-top: 8px; padding: 13px 14px; color: #fff; background: var(--green-800); border: 1px solid var(--green-800); border-radius: 10px; font-weight: 900; box-shadow: 0 8px 20px rgba(7,91,58,.18); }
  .public-header > nav > .public-login-mobile:hover,
  .public-header > nav > .public-login-mobile:focus { color: #fff; background: var(--green-900); transform: none; }
  .public-nav-dropdown { width: 100%; display: block; }
  .public-nav-dropdown > span,
  .public-nav-dropdown:hover > span,
  .public-nav-dropdown:focus-within > span {
    display: none !important;
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    border: 0;
    box-shadow: none;
    transform: none;
  }
  .public-nav-dropdown.is-open > span,
  .public-nav-dropdown.is-open:hover > span,
  .public-nav-dropdown.is-open:focus-within > span {
    display: block !important;
    max-height: 420px;
    margin: 3px 10px 5px;
    padding: 5px 7px 7px;
    overflow-y: auto;
    visibility: visible;
    opacity: 1;
    background: #f4f8f5;
    border-radius: 9px;
  }
  .public-nav-dropdown > span a { padding: 9px 10px; line-height: 1.3; }
  .news-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .public-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ppdb-counts { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .two-panels { grid-template-columns: 1fr; }
  .principal-message { grid-template-columns: minmax(240px,.72fr) minmax(0,1.28fr); gap: 35px; }
  .principal-photo { min-height: 430px; }
  .major-showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .extracurricular-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-video-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .default-slider-import { align-items:stretch; flex-direction:column; }
  .spj-check-form { min-width:300px; grid-template-columns:1fr; }
  .spj-check-form input[name="notes"] { grid-column:auto; }
  .slider-mode-panel { grid-template-columns:1fr; }
  .slider-mode-panel > div,.slider-mode-panel > button { grid-column:auto; }
  .home-banner-carousel { height:245px; padding-top:16px; }
  .home-banner-track article { width:82vw; aspect-ratio:16/9; border-radius:15px; }
  .home-banner-track article.is-prev { transform:translate(-116%,-50%) scale(.8); }
  .home-banner-track article.is-next { transform:translate(16%,-50%) scale(.8); }
  .home-banner-arrow { width:40px; height:40px; margin-top:-28px; font-size:26px; }
  .home-banner-arrow.prev { left:7px; }
  .home-banner-arrow.next { right:7px; }
  .public-search-results { padding:32px 18px 45px; }
  .public-search-heading { align-items:flex-start; flex-direction:column; gap:15px; }
  .public-search-grid { grid-template-columns:1fr; }
  .home-section-toggles,.home-feature-grid,.home-stat-grid,.home-step-grid,.home-partner-grid { grid-template-columns: 1fr; }
  .public-top-contact { flex-direction: column; gap: 5px; }
  .home-video-panel,.home-footer-cta { grid-template-columns: 1fr; }
  .home-video-showcase { padding: 25px 20px; }
  .home-video-showcase > header { align-items: flex-start; flex-direction: column; }
  .home-video-gallery { grid-template-columns: none; grid-auto-columns: minmax(275px,84vw); grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .home-video-gallery article { scroll-snap-align: start; }
  .home-floating-actions { left: 10px; bottom: 10px; }
  .home-floating-actions a { padding: 8px 11px; font-size: 9px; }
  .schedule-target-classes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .dashboard-task-summary .stats-grid,.dashboard-recap-summary .stats-grid { grid-template-columns: 1fr; }
  .dashboard-schedule-list { grid-template-columns: 1fr; }
  .dashboard-schedule-head { align-items: flex-start; flex-direction: column; }
  .dashboard-schedule-list article { grid-template-columns: 92px minmax(0,1fr); }
  .public-header > .public-login { display: none; }
  .principal-message { grid-template-columns: 1fr; gap: 0; padding: 54px 22px 0; }
  .principal-copy { order: 1; padding: 0 0 35px; }
  .principal-copy h2 { font-size: clamp(31px,10vw,43px); }
  .principal-copy p { font-size: 13px; line-height: 1.72; }
  .principal-photo { order: 2; min-height: 390px; }
  .principal-photo img { width: min(100%,350px); max-height: 430px; }
  .major-showcase-grid { grid-template-columns:1fr; gap:12px; margin-top:24px; }
  .extracurricular-grid { grid-template-columns:1fr; }
  .extracurricular-card { min-height: 245px; padding: 20px; }
  .major-showcase-grid > a { min-height:0; padding:23px 20px; }
  .attendance-lock-form { grid-template-columns: 1fr; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-identity { min-height: 270px; padding: 38px 28px; }
  .auth-mark { width: 72px; height: 72px; margin-bottom: 20px; border-radius: 18px; }
  .auth-mark img { width: 66px; height: 66px; }
  .auth-identity h1 { font-size: 37px; }
  .auth-panel { padding: 20px 14px; }
  .admin-shell { display: block; }
  .sidebar { position: static; height: auto; padding: 16px; }
  .sidebar nav { display: flex; gap: 5px; margin-top: 14px; padding-bottom: 7px; overflow-x: auto; }
  .sidebar nav p, .sidebar nav b, .sidebar-foot { display: none; }
  .sidebar nav a { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.12); }
  .topbar { align-items: flex-start; padding: 14px 18px; }
  .topbar > div:first-child, .user-box div { display: none; }
  .admin-main { padding: 26px 16px; }
  .page-heading { display: block; }
  .academic-badge { margin-top: 16px; }
  .module-grid, .stats-grid, .role-grid, .permission-list, .form-grid, .data-form, .major-choice-grid, .dashboard-attention-grid, .role-feature-list, .role-preview-menu-grid, .role-preview-module-list { grid-template-columns: 1fr; }
  .role-preview-panel > summary, .role-preview-subtitle { align-items: flex-start; flex-direction: column; }
  .role-preview-counts { flex-wrap: wrap; }
  .full-field { grid-column: auto; }
  .cms-gallery, .cms-gallery-group-items, .guide-feature-grid, .news-grid, .public-columns, .split-section, .public-footer { grid-template-columns: 1fr; }
  .public-header { min-height: 70px; display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; gap:9px 12px; padding: 8px 15px 11px; }
  .public-brand > span { width: 48px; height: 48px; }
  .public-brand strong { font-size: 13px; line-height: 1.2; }
  .public-brand small { display: block; margin-top: 3px; color: #607168; font-size: 9px; letter-spacing: .04em; }
  .public-menu-toggle { grid-column:2; grid-row:1; margin-left:0; }
  .public-header > .public-header-search { grid-column:1/-1; grid-row:2; order:initial; width:100%; min-height:43px; margin:0; }
  .public-header > nav { position: absolute; top: 100%; right: 0; left: 0; order: initial; width: 100%; padding-right: 15px; padding-left: 15px; background: #fff; box-shadow: 0 18px 35px rgba(7,48,32,.14); }
  .public-header.public-menu-open > nav { max-height: calc(100vh - 70px); padding: 10px 15px 12px; }
  .public-header { width: 100%; max-width: 100%; }
  .public-brand { grid-column:1; grid-row:1; max-width:100%; }
  .public-brand > div { min-width: 0; }
  .public-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home-popup { align-items:center; padding:16px; }
  .home-popup-card { width:min(91vw,370px); max-height:78vh; padding:5px; border-radius:17px; }
  .home-popup-card img { max-height:calc(78vh - 10px); border-radius:13px; }
  .home-popup-close { top:10px; right:10px; width:36px; height:36px; font-size:21px; }
  .public-hero { width: 100%; min-width: 0; min-height: auto; grid-template-columns: minmax(0,1fr); padding: 68px 22px; }
  .public-hero > div,.public-hero aside { min-width: 0; }
  .public-hero h1 { max-width: 100%; font-size: clamp(36px,11.5vw,45px); overflow-wrap: anywhere; }
  .public-hero > div > p { max-width: 100%; }
  .hero-actions { width: 100%; }
  .hero-actions a { flex: 1 1 145px; text-align: center; }
  .public-section { padding: 65px 22px; }
  .public-gallery { grid-template-columns: 1fr; }
  .ppdb-steps, .ppdb-success > div, .heading-actions, .status-form, .search-form, .import-form { align-items: stretch; flex-direction: column; }
  .status-shell, .detail-grid { grid-template-columns: 1fr; }
  .ppdb-counts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ppdb-submit { width: 100%; }
  .filter-row, .grade-toolbar { align-items: stretch; flex-direction: column; }
  .report-sheet { width: calc(100% - 12px); margin: 6px auto; padding: 20px 14px; }
  .report-header { grid-template-columns: 1fr; }
  .report-mark { margin: 0 auto; }
  .student-identity, .report-complements { grid-template-columns: 1fr; }
  .auth-links { flex-direction: column; }
  .coming-soon { align-items: flex-start; }
  .exam-header { display: block; padding: 22px; }
  .exam-time { margin-top: 18px; }
  .exam-question { padding: 20px 17px; }
  .inline-actions { align-items: stretch; flex-direction: column; }
  .checkout-grid { grid-template-columns: 1fr; }
  .payment-flow,.order-cards { grid-template-columns: 1fr; }
  .sijari-program-grid,.review-grid,.student-activity-grid { grid-template-columns: 1fr; }
  .checkout-card { position: static; }
  .bill-choice { grid-template-columns: auto 1fr; }
  .bill-choice > b { grid-column: 2; }
}

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  .report-body { background: #fff; }
  .report-sheet { width: 100%; min-height: auto; margin: 0; padding: 0; box-shadow: none; }
  .report-tools { display: none; }
  .class-print-toolbar { display:none!important; }
  .receipt-body { padding: 0; background: #fff; }
  .receipt-sheet { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .receipt-tools { display: none; }
  .report-cover-page,.report-cover-legacy-inner,.report-biodata-inner { height:277mm; min-height:277mm; }
}
.report-filter { margin-bottom: 24px; }
.report-filter .filter-grid { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)) auto; gap: 14px; align-items: end; }
.report-filter label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; color: #385447; }
.integration-report-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.integration-report-grid article { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 18px; border: 1px solid #dbe7df; border-radius: 14px; background: #f8fbf9; }
.integration-report-grid p { margin: 7px 0 0; color: #64756c; }
@media (max-width: 1100px) { .report-filter .filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .report-filter .filter-grid,.integration-report-grid,.department-info-grid,.department-overview,.achievement-public-grid { grid-template-columns: 1fr; } .department-info-grid .department-summary { grid-column: auto; } }
@media print {
  .report-view-only .report-sheet { display: none !important; }
  .report-view-only::after { content: "Pencetakan rapor hanya dapat dilakukan oleh wali kelas."; display: block; padding: 40px; font: 18px Arial,sans-serif; }
}

/* Portal murid: header ringkas dan navigasi drawer */
.student-nav-state,.student-menu-toggle,.student-drawer-close,.student-drawer-overlay { display: none; }
.student-welcome { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; margin-bottom: 30px; padding: clamp(28px,5vw,48px); border-radius: 22px; color: #fff; background: radial-gradient(circle at 85% 15%,rgba(255,255,255,.19),transparent 28%),linear-gradient(135deg,#06472f,#0a8b5a); box-shadow: 0 20px 45px rgba(6,71,47,.2); }
.student-welcome::after { content:""; position:absolute; right:-65px; bottom:-95px; width:230px; height:230px; border:35px solid rgba(243,198,35,.15); border-radius:50%; }
.student-welcome-copy { position:relative; z-index:1; }
.student-welcome .eyebrow { color:#ffe36c; }
.student-welcome h1 { margin:9px 0 10px; font-size:clamp(28px,5vw,46px); }
.student-welcome p { max-width:650px; margin-bottom:20px; color:rgba(255,255,255,.82); line-height:1.65; }
.student-welcome-meta { display:flex; flex-wrap:wrap; gap:8px; }
.student-welcome-meta span { padding:8px 11px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(255,255,255,.1); font-size:11px; font-weight:750; }
.student-welcome-avatar { position:relative; z-index:1; display:grid; width:clamp(138px,11vw,170px); height:clamp(138px,11vw,170px); place-items:center; border:5px solid rgba(255,255,255,.9); border-radius:50%; background:#dff4e8; color:#09633f; box-shadow:0 16px 34px rgba(0,0,0,.22); font-size:52px; font-weight:900; overflow:hidden; }
.student-welcome-avatar img { width:100%; height:100%; object-fit:cover; }

@media (max-width:760px) {
  .mobile-portal-body { max-width:100%; overflow-x:hidden; background:#f2f7f4; }
  .mobile-portal-body .admin-shell,.mobile-portal-body .admin-content,.mobile-portal-body .admin-main { min-width:0; max-width:100%; }
  .mobile-portal-body .admin-shell { display:block; }
  .mobile-portal-body .admin-content { min-height:100vh; }
  .mobile-portal-body .topbar { position:sticky; z-index:50; top:0; min-height:68px; align-items:center; padding:10px 14px; border:0; color:#fff; background:linear-gradient(100deg,#07583a,#0b8b5a); box-shadow:0 5px 20px rgba(6,62,41,.2); }
  .mobile-portal-body .topbar > div:first-of-type { display:block; flex:1; min-width:0; }
  .mobile-portal-body .topbar > div:first-of-type .kicker { display:none; }
  .mobile-portal-body .topbar > div:first-of-type strong { margin:0; overflow:hidden; color:#fff; font:800 12px/1.25 Inter,ui-sans-serif,system-ui; letter-spacing:.04em; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-portal-body .user-box { gap:6px; }
  .mobile-portal-body .user-box div,.mobile-portal-body .user-box form { display:none; }
  .mobile-portal-body .notification-bell { width:38px; height:38px; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; }
  .mobile-portal-body .profile-link { display:flex; }
  .mobile-portal-body .profile-link .user-avatar,.mobile-portal-body .profile-link .user-avatar-fallback { width:38px; height:38px; flex-basis:38px; box-shadow:none; }
  .student-nav-state { position:fixed; width:1px; height:1px; opacity:0; pointer-events:none; }
  .student-menu-toggle { display:grid; width:42px; height:42px; flex:0 0 42px; place-content:center; gap:5px; padding:0; border:0; border-radius:10px; background:rgba(255,255,255,.12); cursor:pointer; }
  .student-menu-toggle span { display:block; width:22px; height:2px; border-radius:2px; background:#fff; }
  .mobile-portal-body .sidebar { position:fixed; z-index:90; inset:0 auto 0 0; width:min(84vw,340px); height:100dvh; padding:20px 16px; overflow-y:auto; color:var(--ink); background:#fff; box-shadow:18px 0 55px rgba(0,0,0,.22); transform:translateX(-105%); transition:transform .25s ease; }
  .student-nav-state:checked + .admin-shell .sidebar { transform:translateX(0); }
  .student-drawer-overlay { position:fixed; z-index:80; inset:0; width:100%; height:100%; border:0; background:rgba(6,21,14,.58); opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .student-nav-state:checked + .admin-shell .student-drawer-overlay { display:block; opacity:1; pointer-events:auto; }
  .student-drawer-close { position:absolute; right:12px; top:12px; display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:50%; background:#eef5f1; color:#315247; font-size:27px; line-height:1; cursor:pointer; }
  .mobile-portal-body .sidebar-brand { padding:5px 45px 18px 4px; border-color:var(--line); color:var(--green-950); }
  .mobile-portal-body .sidebar-brand > span { border-color:var(--line); }
  .mobile-portal-body .sidebar-brand strong { font-size:13px; }
  .mobile-portal-body .sidebar-brand small { color:var(--muted); }
  .mobile-portal-body .sidebar nav { display:grid; gap:4px; margin-top:16px; padding:0; overflow:visible; }
  .mobile-portal-body .sidebar nav p { display:block; margin:4px 0 10px; padding:0 12px; color:#89958e; font-size:10px; }
  .mobile-portal-body .sidebar nav a { display:flex; width:100%; margin:0; padding:13px 14px; border:0; border-radius:11px; color:#31463b; font-size:14px; }
  .mobile-portal-body .sidebar nav a b { display:block; color:#8aa095; }
  .mobile-portal-body .sidebar nav a:hover,.mobile-portal-body .sidebar nav a.active { color:#fff; background:linear-gradient(100deg,#08764d,#0ca86c); box-shadow:0 8px 20px rgba(10,139,90,.2); }
  .mobile-portal-body .sidebar nav a.active { box-shadow:0 8px 20px rgba(10,139,90,.2); }
  .mobile-portal-body .sidebar-foot { display:block; margin-top:20px; border-color:var(--line); }
  .mobile-portal-body .sidebar-foot span { color:var(--muted); }
  .mobile-portal-body .sidebar-foot a { color:var(--green-700); }
  .mobile-portal-body .sidebar-foot .mobile-sidebar-logout { display:block; margin-top:14px; }
  .mobile-portal-body .sidebar-foot .mobile-sidebar-logout button { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; border:1px solid #efb5b5; border-radius:10px; color:#a52525; background:#fff5f5; box-shadow:none; font-weight:900; }
  .mobile-portal-body .sidebar-foot .mobile-sidebar-logout button:hover { color:#fff; background:#b52e2e; border-color:#b52e2e; }
  .mobile-portal-body .sidebar-foot .mobile-sidebar-logout button span { color:inherit; font-size:17px; }
  .mobile-portal-body .admin-main { padding:22px 14px 38px; }
  .student-welcome { grid-template-columns:1fr; gap:18px; padding:24px 20px; border-radius:18px; }
  .student-welcome h1 { padding-right:90px; font-size:27px; }
  .student-welcome p { font-size:13px; }
  .student-welcome-avatar { position:absolute; right:16px; top:18px; width:78px; height:78px; border-width:3px; font-size:29px; }
  .student-welcome-meta { padding-right:0; }
  .mobile-portal-body .section-title { margin-top:28px; }
  .mobile-portal-body .role-module-grid { gap:12px; }
  .mobile-portal-body .module-grid a { grid-template-columns:48px 1fr auto; padding:17px 16px; border-radius:16px; box-shadow:0 8px 24px rgba(14,55,38,.06); }
  .mobile-portal-body .module-grid a > span { width:48px; height:48px; border-radius:14px; }
  .profile-page .page-heading { padding-right:2px; padding-left:2px; }
  .profile-page .page-heading h1 { font-size:clamp(36px,12vw,48px); overflow-wrap:anywhere; }
  .profile-panel { padding:20px 16px; overflow:hidden; }
  .profile-panel .profile-identity { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:16px; text-align:center; }
  .profile-panel .profile-photo-large { width:118px; height:118px; }
  .profile-identity-copy { width:100%; }
  .profile-identity-copy h2 { font-size:22px; line-height:1.25; overflow-wrap:anywhere; }
  .profile-identity-copy p { display:grid; justify-items:center; gap:3px; font-size:12px; line-height:1.45; }
  .profile-identity-copy p i { display:none; }
  .profile-panel .form-grid { grid-template-columns:minmax(0,1fr); }
  .profile-panel label,.profile-panel input[type="file"] { width:100%; min-width:0; box-sizing:border-box; }
  .profile-panel input[type="file"] { padding:10px; font-size:12px; }
  .profile-panel .form-actions,.profile-panel .form-actions .button { width:100%; }
  .photo-focus-editor { grid-template-columns:1fr; gap:18px; padding:14px; }
  .photo-focus-stage { width:min(100%,190px); }
  .photo-focus-avatar { width:62px; height:62px; flex-basis:62px; }
}

/* Compact portal UI
   Berlaku untuk seluruh peran di area portal tanpa memengaruhi situs publik
   dan dokumen cetak. */
@media (min-width:761px) {
  .admin-body .admin-shell { grid-template-columns:236px minmax(0,1fr); }
  .admin-body .sidebar { padding:18px 14px; }
  .admin-body .sidebar-brand { gap:10px; padding:0 6px 16px; }
  .admin-body .sidebar-brand > span { width:40px; height:40px; border-radius:9px; }
  .admin-body .sidebar-brand > span img { width:37px; height:37px; }
  .admin-body .sidebar-brand strong { font-size:11px; }
  .admin-body .sidebar-brand small { font-size:9px; }
  .admin-body .sidebar nav { margin-top:14px; }
  .admin-body .sidebar nav p { margin:7px 0; padding:0 8px; font-size:9px; }
  .admin-body .sidebar nav a { gap:8px; margin:2px 0; padding:7px 9px; border-radius:7px; font-size:12px; line-height:1.25; }
  .admin-body .portal-nav-icon { width:27px; height:27px; border-radius:7px; }
  .admin-body .portal-nav-icon svg { width:15px; height:15px; }
  .admin-body .sidebar-foot { padding:12px 8px 0; }
  .admin-body .topbar { min-height:64px; gap:18px; padding:9px clamp(18px,3vw,38px); }
  .admin-body .notification-bell { width:36px; height:36px; }
  .admin-body .profile-link .user-avatar,
  .admin-body .profile-link .user-avatar-fallback { width:36px; height:36px; flex-basis:36px; }
}

.admin-body .admin-main { padding:clamp(18px,2.6vw,36px); }
.admin-body .page-heading { gap:18px; margin-bottom:22px; }
.admin-body .page-heading h1 { margin:4px 0 6px; font-size:clamp(28px,3vw,39px); line-height:1.08; }
.admin-body .page-heading p { max-width:720px; font-size:13px; line-height:1.5; }
.admin-body .kicker,
.admin-body .eyebrow { font-size:9px; letter-spacing:.14em; }
.admin-body .section-title,
.admin-body .panel-title { gap:14px; margin:24px 0 12px; }
.admin-body .panel-title { margin-top:0; }
.admin-body .section-title h2,
.admin-body .panel-title h2 { font-size:17px; }
.admin-body .panel,
.admin-body .form-panel { margin-bottom:18px; padding:18px; border-radius:11px; }
.admin-body .panel:hover,
.admin-body .form-panel:hover { transform:none; }
.admin-body .form-stack,
.admin-body .form-grid,
.admin-body .data-form { gap:13px; margin-top:18px; }
.admin-body label { gap:5px; font-size:12px; }
.admin-body input,
.admin-body select,
.admin-body textarea { min-height:40px; padding:8px 11px; border-radius:7px; font-size:13px; }
.admin-body input[type="checkbox"],
.admin-body input[type="radio"] { width:auto; min-height:auto; padding:0; }
.admin-body textarea { line-height:1.45; }
.admin-body .button { min-height:38px; padding:8px 14px; border-radius:7px; font-size:12px; }
.admin-body .form-actions { gap:7px; }
.admin-body .filter-row { gap:8px; margin-bottom:13px; }
.admin-body .filter-row label { min-width:165px; }
.admin-body .tabs { gap:6px; margin:-4px 0 16px; padding-bottom:4px; }
.admin-body .tabs a,
.admin-body .role-switcher a { padding:7px 11px; font-size:11px; }
.admin-body .table-wrap { border-radius:9px; }
.admin-body table { font-size:11.5px; }
.admin-body th,
.admin-body td { padding:9px 11px; }
.admin-body th { font-size:9px; }
.admin-body table td > small { margin-top:3px; line-height:1.35; }
.admin-body .table-actions,
.admin-body .row-actions,
.admin-body .bulk-actions { gap:6px; }
.admin-body .stats-grid { gap:10px; }
.admin-body .stats-grid article,
.admin-body .role-grid article { padding:16px; border-radius:10px; }
.admin-body .stats-grid strong { margin:5px 0 3px; font-size:29px; }
.admin-body .module-grid { grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:10px; }
.admin-body .module-grid a,
.admin-body .role-module-grid .module-planned { grid-template-columns:38px 1fr auto; gap:10px; padding:14px; border-radius:10px; }
.admin-body .module-grid a > span,
.admin-body .module-symbol,
.admin-body .module-planned > span { width:38px; height:38px; border-radius:9px; }
.admin-body .module-grid h3,
.admin-body .module-planned h3 { margin-bottom:3px; font-size:13px; }
.admin-body .module-grid p,
.admin-body .module-planned p { font-size:10px; line-height:1.35; }
.admin-body .flash { padding:11px 13px; border-radius:8px; font-size:12px; line-height:1.45; }
.admin-body .badge { padding:5px 8px; font-size:9px; }
.admin-body .scope-strip { grid-template-columns:180px 1fr; gap:13px; margin-bottom:18px; padding:14px; border-radius:10px; }
.admin-body .scope-chip { padding:6px 8px; font-size:10px; }
.admin-body .attention-card { gap:10px; padding:13px; border-radius:9px; }
.admin-body .role-feature-panel summary,
.admin-body .role-preview-panel > summary { padding:14px 16px; }
.admin-body .role-preview-content { gap:18px; padding:16px; }
.admin-body .role-preview-menu-grid,
.admin-body .role-preview-module-list { gap:8px; }
.admin-body .role-preview-menu-grid a { min-height:78px; padding:11px; }

@media (max-width:1180px) and (min-width:761px) {
  .admin-body .admin-shell { grid-template-columns:220px minmax(0,1fr); }
  .admin-body .sidebar { padding-right:11px; padding-left:11px; }
  .admin-body .module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .mobile-portal-body .topbar { min-height:60px; padding:8px 11px; }
  .mobile-portal-body .student-menu-toggle { width:38px; height:38px; flex-basis:38px; }
  .mobile-portal-body .notification-bell,
  .mobile-portal-body .profile-link .user-avatar,
  .mobile-portal-body .profile-link .user-avatar-fallback { width:34px; height:34px; flex-basis:34px; }
  .mobile-portal-body .sidebar { padding:15px 12px; }
  .mobile-portal-body .sidebar nav { gap:2px; margin-top:12px; }
  .mobile-portal-body .sidebar nav a { padding:10px 11px; border-radius:9px; font-size:13px; }
  .mobile-portal-body .admin-main { padding:16px 12px 30px; }
  .admin-body .page-heading { align-items:stretch; flex-direction:column; gap:12px; margin-bottom:18px; }
  .admin-body .page-heading h1 { font-size:29px; }
  .admin-body .page-heading .form-actions { width:100%; }
  .admin-body .page-heading .form-actions .button { flex:1; }
  .admin-body .panel,
  .admin-body .form-panel { padding:14px; border-radius:10px; }
  .admin-body .form-grid,
  .admin-body .data-form { grid-template-columns:1fr; }
  .admin-body .full-field { grid-column:auto; }
  .admin-body .filter-row { align-items:stretch; flex-direction:column; }
  .admin-body .filter-row label,
  .admin-body .filter-row .button { width:100%; min-width:0; }
  .admin-body .module-grid { grid-template-columns:1fr; }
  .admin-body .module-grid a { padding:13px; border-radius:11px; box-shadow:none; }
  .admin-body .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-body .scope-strip { grid-template-columns:1fr; }
  .admin-body th,
  .admin-body td { padding:8px 9px; }
}

@media (max-width:420px) {
  .student-welcome-avatar { right:14px; top:16px; width:70px; height:70px; }
  .student-welcome h1 { padding-right:80px; font-size:25px; }
}

@media (max-width:760px) {
  .profile-admin-field { align-items:center; flex-direction:column; }
  .profile-admin-field > div { width:104px; min-width:104px; flex-basis:104px; }
  .profile-admin-field .profile-photo-large { width:104px; height:104px; min-width:104px; min-height:104px; flex-basis:104px; }
  .profile-admin-field label { width:100%; }
}
/* Spektrum keahlian: hierarki Bidang > Program > Konsentrasi */
.spectrum-tree-panel .panel-title{margin-bottom:18px}
.spectrum-tree-panel .spectrum-tree{display:grid;gap:18px}
.spectrum-tree-panel .spectrum-field{overflow:hidden;border:1px solid #cfe0d7;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(4,66,43,.05)}
.spectrum-tree-panel .spectrum-node{display:grid;grid-template-columns:150px minmax(240px,1fr) auto;align-items:center;gap:8px 14px}
.spectrum-tree-panel .spectrum-node>span:first-child{font-size:10px;font-weight:800;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:#597066}
.spectrum-tree-panel .spectrum-node>strong{font-size:15px;line-height:1.35;color:#14251e}
.spectrum-tree-panel .spectrum-level-1{padding:14px 16px;background:#e8f5ed;border-bottom:1px solid #cee4d7}
.spectrum-tree-panel .spectrum-level-1>strong{font-size:18px;color:#075b3a}
.spectrum-tree-panel .spectrum-program{margin:14px;border:1px solid #dce8e1;border-radius:12px;background:#fbfdfc}
.spectrum-tree-panel .spectrum-level-2{padding:12px 14px;border-bottom:1px solid #e1ebe5;background:#f5f9f7}
.spectrum-tree-panel .spectrum-level-2>strong{font-size:16px}
.spectrum-tree-panel .spectrum-concentrations{display:grid;gap:8px;padding:10px}
.spectrum-tree-panel .spectrum-level-3{padding:10px 12px;border:1px solid #e0ebe5;border-radius:9px;background:#fff}
.spectrum-tree-panel .spectrum-actions{grid-column:2/-1;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.spectrum-tree-panel .spectrum-actions form{display:inline-flex;margin:0}
.spectrum-tree-panel .spectrum-actions .button{min-height:32px;padding:6px 10px;border-radius:8px;font-size:11px;line-height:1.15;white-space:nowrap}
.spectrum-tree-panel .spectrum-actions .danger-button{margin-left:auto}
.spectrum-tree-panel .badge{white-space:nowrap}
.spectrum-tree-panel .spectrum-usage-summary{grid-column:2/-1;color:#64766d;font-size:11px}
.spectrum-sync-warning{display:flex;align-items:center;justify-content:space-between;gap:18px;border-left:4px solid #d99b12;background:#fffaf0}
.spectrum-sync-warning h2{margin:3px 0 5px}.spectrum-sync-warning p{margin:0;max-width:850px}.spectrum-sync-warning .row-actions{flex:0 0 auto}
.dependency-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.dependency-grid article{display:grid;gap:3px;padding:12px;border:1px solid #dce8e1;border-radius:10px;background:#f8fbf9}.dependency-grid article span{font-size:18px;font-weight:800;color:#075b3a}.dependency-grid article small{color:#68766f}
@media(max-width:800px){
  .spectrum-tree-panel .spectrum-field{border-radius:11px}
  .spectrum-tree-panel .spectrum-program{margin:9px}
  .spectrum-tree-panel .spectrum-node{grid-template-columns:minmax(0,1fr) auto;gap:5px 8px}
  .spectrum-tree-panel .spectrum-node>span:first-child{grid-column:1/-1}
  .spectrum-tree-panel .spectrum-actions{grid-column:1/-1;margin-top:3px}
  .spectrum-tree-panel .spectrum-actions .button{flex:1 1 auto;text-align:center;justify-content:center}
  .spectrum-tree-panel .spectrum-actions .danger-button{margin-left:0}
  .spectrum-tree-panel .spectrum-usage-summary{grid-column:1/-1}
  .spectrum-sync-warning{align-items:stretch;flex-direction:column}.spectrum-sync-warning .row-actions{display:flex;flex-wrap:wrap}
}
/* Lembar serah terima rapor wali kelas */
.handover-report-body{background:#e7ece9}.handover-tools{max-width:210mm;margin:12px auto}.handover-tools form{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.handover-tools label{display:grid;gap:4px;font-size:12px;font-weight:700}.handover-tools select{min-width:150px}
.handover-sheet{width:210mm;min-height:297mm;margin:0 auto 18px;padding:8mm;box-sizing:border-box;background:#fff;color:#000;font-family:Arial,sans-serif;box-shadow:0 10px 28px rgba(0,0,0,.12)}
.handover-sheet .school-letterhead{min-height:28mm;margin:0 0 4mm;padding:0 0 7mm;grid-template-columns:22mm minmax(0,1fr) 22mm}.handover-sheet .school-letterhead-logo{width:20mm;height:20mm}.handover-sheet .school-letterhead h1{font-size:13pt}.handover-sheet .school-letterhead h2{font-size:10pt}.handover-sheet .school-letterhead p{font-size:7pt;white-space:nowrap}
.handover-sheet>header{text-align:center;margin-bottom:3mm}.handover-sheet>header h1,.handover-sheet>header h2{margin:0 0 1mm;font-size:9pt;line-height:1.12}.handover-sheet>header h1{font-size:10pt}.handover-sheet>header p{margin:1.5mm 0 0;font-size:8pt;font-weight:700}
.handover-sheet table{width:100%;border:1.5px solid #111;border-collapse:collapse;table-layout:fixed;font-size:6.8pt}.handover-sheet th,.handover-sheet td{border:1px solid #111;padding:.55mm .8mm;height:5.25mm;box-sizing:border-box}.handover-sheet th{text-align:center;font-weight:700;line-height:1.05}.handover-sheet thead tr:first-child>th:nth-child(1){width:8mm}.handover-sheet thead tr:first-child>th:nth-child(2){width:19mm}.handover-sheet thead tr:first-child>th:nth-child(3){width:38mm}.handover-sheet thead tr:first-child>th:nth-child(4){width:14mm}.handover-sheet thead tr:first-child>th:nth-child(5){width:14mm}.handover-sheet thead tr:first-child>th:nth-child(6){width:69mm}.handover-sheet thead tr:first-child>th:nth-child(7){width:17mm}.handover-sheet thead tr:nth-child(2)>th{width:34.5mm;padding-left:.3mm;padding-right:.3mm;font-size:6.2pt;white-space:nowrap}.handover-sheet td:nth-child(1),.handover-sheet td:nth-child(2),.handover-sheet td:nth-child(4),.handover-sheet td:nth-child(5){text-align:center}.handover-sheet tbody tr:last-child td{border-bottom:1.5px solid #111!important}
.handover-signature{width:58mm;margin:5mm 3mm 0 auto;text-align:left;font-size:8pt;page-break-inside:avoid}.handover-signature p{margin:0 0 18mm}.handover-signature strong{display:inline-block;min-width:48mm;border-bottom:1px solid #111;padding-bottom:.5mm}
@media(max-width:760px){.handover-sheet{width:210mm}.handover-report-body{overflow-x:auto}.handover-tools{margin:8px}}
@media print{@page{size:A4 portrait;margin:6mm}.handover-report-body{background:#fff}.handover-tools{display:none!important}.handover-sheet{width:100%;min-height:0;margin:0;padding:0;box-shadow:none}.handover-sheet table{page-break-inside:avoid}.handover-sheet tr{page-break-inside:avoid}.handover-sheet th,.handover-sheet td{height:5.15mm;padding:.45mm .7mm}}

/* Buku Induk Digital dan arsip siswa */
.record-section-nav{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 18px;padding:10px;border:1px solid var(--border);border-radius:14px;background:#f7faf8;position:static}.record-section-nav a{padding:7px 10px;border-radius:999px;background:#fff;border:1px solid var(--border);font-size:12px;font-weight:800;color:var(--green)}
.record-section-nav + .form-grid h3[id],#prestasi-pembinaan,#arsip-dokumen{scroll-margin-top:18px}
.region-data-notice{grid-column:1/-1;margin:0;padding:10px 12px;border:1px solid #e6c66b;border-radius:10px;background:#fff7d8;color:#6f5200;font-size:12px;font-weight:700}
.record-upload-box{margin:12px 0 18px;border:1px solid var(--border);border-radius:14px;padding:12px;background:#f8fbf9}.record-upload-box summary{cursor:pointer;font-weight:900;color:var(--green)}.record-upload-box[open] summary{margin-bottom:14px}.record-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.record-history-grid article{padding:14px;border:1px solid var(--border);border-radius:13px}.record-history-grid article>p{padding:8px 0;margin:0;border-bottom:1px solid var(--border)}.record-history-grid small,.document-card small{display:block;color:var(--muted);margin-top:3px}
.document-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.document-card{display:flex;justify-content:space-between;gap:12px;padding:14px;border:1px solid var(--border);border-radius:14px;background:#fff}.document-card h3{margin:8px 0 3px}.document-card p{margin:0}.document-card .row-actions{align-content:flex-start;justify-content:flex-end}.document-card form{margin:0}
.student-register-print-body{background:#e7ece9}.student-register-print-tools{width:210mm;margin:12px auto;display:flex;gap:8px;align-items:center}.student-register-print-sheet{width:210mm;min-height:297mm;margin:0 auto 18px;padding:12mm 14mm;box-sizing:border-box;background:#fff;color:#000;font:9pt Arial,sans-serif;box-shadow:0 10px 28px rgba(0,0,0,.12)}.student-register-print-sheet>header{text-align:center;margin:4mm 0}.student-register-print-sheet>header h1{font-size:13pt;margin:0 0 2mm}.student-register-print-sheet>header p{margin:0}.student-register-print-section{margin:0 0 4mm;break-inside:avoid}.student-register-print-section h2{margin:0;padding:1.5mm 2mm;background:#e7f2ec;border:1px solid #333;font-size:9pt;text-transform:uppercase}.student-register-print-section table{width:100%;border-collapse:collapse;table-layout:fixed}.student-register-print-section th,.student-register-print-section td{border:1px solid #555;padding:1.2mm 1.6mm;text-align:left;vertical-align:top}.student-register-print-section tbody th{width:34%;font-weight:700}
@media(max-width:760px){.record-section-nav{position:static}.record-history-grid,.document-card-grid{grid-template-columns:1fr}.document-card{flex-direction:column}.student-register-print-body{overflow-x:auto}.student-register-print-tools{width:auto;margin:8px}.student-register-print-sheet{width:210mm}}
@media print{@page{size:A4 portrait;margin:8mm}.student-register-print-body{background:#fff}.student-register-print-tools{display:none!important}.student-register-print-sheet{width:100%;min-height:0;margin:0;padding:0;box-shadow:none}.student-register-print-sheet .school-letterhead{margin-bottom:4mm}.student-register-print-section{break-inside:avoid}.student-register-print-section th,.student-register-print-section td{padding:1mm 1.3mm}}