/* The school this workspace belongs to, named in the top bar. */
.topbar-school { flex: 1 1 auto; min-width: 170px; max-width: none; display: flex; align-items: center; gap: 10px; padding-inline: 0; }
.topbar-school img, .topbar-school .brand-monogram { flex: none; width: 40px; height: 40px; object-fit: contain; border-radius: 9px; }
.topbar-school > div { min-width: 0; display: grid; }
.topbar-school strong { overflow: hidden; color: var(--ink); font-size: 16px; font-weight: 850; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.topbar-school span { overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .topbar-school span { display: none; } }
:root {
  --ink: #201a1b;
  --muted: #736a6b;
  --line: #e9e3e1;
  --canvas: #f7f5f3;
  --surface: #ffffff;
  --brand: #820d25;
  --brand-deep: #580719;
  --brand-soft: #f9ebee;
  --accent: #dba72f;
  --accent-soft: #fff7dd;
  --success: #147a52;
  --success-soft: #e8f7f0;
  --warning: #a96600;
  --warning-soft: #fff4d8;
  --danger: #b52d3f;
  --danger-soft: #fcecef;
  --shadow: 0 14px 35px rgba(51, 31, 32, .07);
  --sidebar: 224px;
}

* { box-sizing: border-box; }
/* The browser hides [hidden] with a user-agent rule, which any author rule that
   sets display beats — and `label { display: grid }` below does exactly that.
   Without this, a field hidden by the conditional-field logic stays on screen. */
[hidden] { display: none !important; }

/* A dropdown whose options are tick boxes, so several can be chosen without a
   modifier key while the closed control stays the size of a normal field. */
.field-group { display: grid; gap: 7px; }
.field-group-label { color: #50363d; font-size: 12px; font-weight: 750; }
.field-group-hint { color: var(--muted); font-size: 11px; }
.tick-picker { position: relative; }
.tick-picker-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid #d8c4c1; border-radius: 11px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.tick-picker-toggle:hover { border-color: color-mix(in srgb, var(--brand) 36%, var(--line)); }
.tick-picker-toggle[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 9%, transparent); }
.tick-picker-toggle > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tick-picker-toggle b { color: var(--brand); font-size: 15px; transition: transform .16s; }
.tick-picker-toggle[aria-expanded="true"] b { transform: rotate(180deg); }
/* A school subject list runs to forty entries, so the rows are tight enough to
   scan without scrolling past the ones that matter. */
.tick-picker-panel { position: absolute; z-index: 40; top: calc(100% - 16px); left: 0; right: 0; max-height: 300px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 0; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 44px rgba(59,39,42,.16); }
.export-field-picker .tick-picker-panel { position: relative; inset: auto; margin-top: 8px; max-height: min(360px,50vh); box-shadow: 0 12px 32px rgba(59,39,42,.11); }
.tick-picker-search { position: sticky; top: -6px; z-index: 1; grid-column: 1/-1; padding: 2px 2px 6px; background: #fff; }
.tick-picker-search input { width: 100%; min-height: 32px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; font-weight: 600; }
.tick-picker-search input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tick-picker-options { grid-column: 1/-1; display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 0; }
.tick-picker-group { grid-column: 1/-1; margin: 2px 2px 4px; color: var(--brand); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.tick-picker-empty { grid-column: 1/-1; margin: 6px 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.tick-option, .form-grid .tick-option, .dialog-form .tick-option { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 7px; cursor: pointer; }
.tick-option:hover { background: var(--brand-soft); }
.tick-option input[type="checkbox"], .form-grid .tick-option input[type="checkbox"], .dialog-form .tick-option input[type="checkbox"] { flex: 0 0 auto; width: 15px; min-width: 15px; max-width: 15px; height: 15px; margin: 0; padding: 0; accent-color: var(--brand); cursor: pointer; }
.tick-option span { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.tick-option small { color: var(--muted); font-size: 10px; font-weight: 500; }
.tick-option:focus-within { outline: 2px solid color-mix(in srgb, var(--brand) 26%, transparent); }
.document-name-list { display: grid; gap: 8px; }
.document-name-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) auto; gap: 8px; align-items: center; }
.document-name-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; font-weight: 600; }
@media (max-width: 640px) { .document-name-row { grid-template-columns: 1fr; gap: 4px; } }
/* Documents are attached a row at a time: a name beside its file, with the
   control that takes the row back off. The Add button sits under the list so
   the next row appears where the eye already is. */
.document-row-list { display: grid; gap: 10px; margin-bottom: 8px; }
.document-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); }
.document-row label { display: grid; gap: 4px; min-width: 0; font-size: 12px; font-weight: 650; }
.document-row button { align-self: end; }
.document-rows > [data-document-add] { justify-self: start; }
@media (max-width: 640px) { .document-row { grid-template-columns: 1fr; } }

/* Student and staff photographs can come from a protected file upload or any
   camera the browser exposes, including an attached USB/external camera. */
.photo-capture-field { display: grid; grid-column: 1/-1; gap: 11px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb,var(--canvas) 62%,#fff); }
.photo-capture-field > legend { padding: 0 7px; color: var(--ink); font-size: 12px; font-weight: 750; }
.photo-source-actions,.photo-camera-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.photo-file-panel { max-width: 520px; }
.photo-file-panel[hidden],.photo-camera-panel[hidden] { display: none; }
.photo-file-panel > label { display: grid; gap: 6px; }
.photo-camera-panel { display: grid; gap: 10px; }
.photo-camera-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) auto; gap: 9px; align-items: end; }
.photo-camera-toolbar label { display: grid; gap: 6px; }
.photo-camera-stage { position: relative; width: min(100%,620px); aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #171315; }
.photo-camera-stage video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.photo-camera-stage > span { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: #f7f3f4; background: linear-gradient(135deg,#2d2226,#171315); text-align: center; font-size: 12px; }
.photo-camera-stage.live > span { display: none; }
.photo-camera-status { min-height: 18px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.photo-camera-status.error { color: var(--danger); font-weight: 700; }
.photo-capture-preview { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 12px; align-items: center; width: min(100%,520px); margin: 0; padding: 10px; border: 1px solid color-mix(in srgb,var(--brand) 22%,var(--line)); border-radius: 12px; background: #fff; }
.photo-capture-preview[hidden] { display: none; }
.photo-capture-preview img { width: 96px; height: 120px; border-radius: 9px; object-fit: cover; background: var(--canvas); }
.photo-capture-preview figcaption { display: grid; justify-items: start; gap: 9px; min-width: 0; color: var(--ink); font-size: 12px; font-weight: 700; }
.photo-capture-preview figcaption span { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 640px) { .photo-camera-toolbar { grid-template-columns: 1fr; }.photo-camera-toolbar .btn { justify-self: start; }.photo-camera-stage { width: 100%; }.photo-capture-preview { grid-template-columns: 76px minmax(0,1fr); }.photo-capture-preview img { width: 76px; height: 95px; } }

html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; }
button, input, select, textarea { font: inherit; }
.brand strong, .notification-panel > div strong, .page-heading h1, .stat-card > strong,
.panel-head h2, .register-head h2, .attendance-aside h2, .module-tools h2,
.mini-stat-grid strong, .pipeline-summary strong, .module-stat-grid strong,
.attendance-count strong, .donut strong, .finance-hero strong, .document-icon,
.module-hero h2, .modal h2 { font-family: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(130,13,37,.18); outline-offset: 2px; }
/* The palette must come from applyAppearance(), which writes the selected theme
   as inline custom properties on <html>. Redeclaring them here would win over
   that inherited value for the whole workspace subtree and pin the ERP to the
   default maroon no matter which theme the school chooses. Defaults live in
   :root only. --brand-soft is derived from the live --brand further down. */
.erp-app { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); padding: 0 10px 16px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 30; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 7px 15px; }
.brand img { flex: 0 0 42px; width: 42px; height: 42px; object-fit: contain; padding: 3px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 4px 14px rgba(89,7,25,.14); }
.brand-monogram { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, var(--brand-deep), var(--brand)); font: 800 14px/1 "Manrope", sans-serif; letter-spacing: .04em; box-shadow: 0 4px 14px rgba(89,7,25,.22); }
.brand div, .school-chip div, .sidebar-user div, .sync-card div { min-width: 0; display: flex; flex-direction: column; }
.brand strong { font: 800 15px/1.18 "Manrope", sans-serif; letter-spacing: -.2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brand span { margin-top: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.school-chip { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; align-items: center; gap: 9px; background: #fbfaf9; }
.school-monogram { flex: 0 0 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 14px; }
.school-chip strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.school-chip div span { color: var(--muted); font-size: 13px; margin-top: 3px; }
.chevron { color: var(--muted); margin-left: auto; }
.nav-search { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fbfaf9; margin: 12px 0 4px; border-radius: 10px; padding: 0 10px; color: var(--muted); }
.nav-search input { min-width: 0; width: 100%; height: 36px; border: 0; outline: 0; background: transparent; font-size: 15px; }
.sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; flex: 1; }
.nav-group > p { color: #9b9091; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: 12px; margin: 16px 10px 5px; }
.nav-group button { border: 0; background: transparent; width: 100%; min-height: 38px; border-radius: 9px; display: flex; align-items: center; gap: 10px; padding: 7px 9px; cursor: pointer; color: #655b5c; font-size: 15px; font-weight: 650; text-align: left; transition: .18s ease; }
.nav-group button:hover { background: #f8f4f3; color: var(--ink); }
.nav-group button.active { background: var(--brand-soft); color: var(--brand); }
.module-icon { flex: 0 0 25px; width: 25px; height: 25px; border-radius: 7px; background: #f2eeee; color: #6e6263; display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.nav-group button.active .module-icon { background: var(--brand); color: white; box-shadow: 0 3px 9px rgba(130,13,37,.2); }
.nav-badge { margin-left: auto; border-radius: 10px; min-width: 20px; padding: 2px 6px; text-align: center; background: #f7dfe5; color: var(--danger); font-size: 12px; }
.nav-badge.muted { background: #eeeae9; color: var(--muted); }
.nav-empty { padding: 30px 15px; text-align: center; color: var(--muted); font-size: 15px; }
.sync-card { display: flex; gap: 9px; align-items: center; margin: 15px 4px 10px; padding: 10px; border-radius: 10px; background: var(--success-soft); color: var(--success); }
.sync-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--success); color: white; display: grid; place-items: center; font-weight: 800; }
.sync-card strong { font-size: 13px; }
.sync-card span { font-size: 12px; margin-top: 2px; opacity: .8; }
.sidebar-user { flex: none; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 9px 6px 0; }
.sidebar-user .avatar { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
.avatar, .top-avatar { border: 0; background: var(--brand); color: #fff; width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; font-size: 13px; }
.sidebar-user strong { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 12.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user span { color: var(--muted); font-size: 12px; margin-top: 2px; }
.sidebar-user button { flex: none; margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: rgba(255,255,255,.1); color: #fff; font-size: 13px; cursor: pointer; }
.main-shell { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { height: 66px; padding: 0 24px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; backdrop-filter: blur(12px); }
.breadcrumb { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 190px; font-size: 14px; white-space: nowrap; }
.breadcrumb span, .breadcrumb b { color: #9a9090; font-weight: 500; }
.breadcrumb strong { font-weight: 700; }
.menu-button { display: none; border: 0; background: none; font-size: 20px; }
.global-search-wrap { flex: 1; max-width: 530px; margin: 0 auto; position: relative; }
.global-search { flex: 1 1 190px; min-width: 0; max-width: 460px; display: flex; height: 38px; align-items: center; gap: 8px; background: #f7f5f3; border: 1px solid #ece6e4; border-radius: 10px; padding: 0 10px; color: #8d8383; }
.global-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; }
kbd { font-family: inherit; font-size: 12px; border: 1px solid #ded7d5; color: #8b8182; background: #fff; padding: 2px 5px; border-radius: 5px; }
.search-results { position: absolute; top: 45px; inset-inline: 0; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 40; }
.search-results button { border: 0; width: 100%; background: transparent; padding: 8px; border-radius: 8px; display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer; }
.search-results button:hover { background: var(--brand-soft); }
.search-results button span:not(.module-icon) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.search-results strong { font-size: 14px; }
.search-results small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.search-results b { color: var(--brand); }
.top-actions { display: flex; gap: 7px; align-items: center; margin-left: auto; }
.topbar-school-id { flex:none; display:grid; gap:2px; min-width:146px; padding:7px 10px; border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line)); border-radius:10px; color:var(--ink); background:var(--brand-soft); text-align:left; cursor:pointer; }
.topbar-school-id small { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.09em; }
.topbar-school-id code { color:var(--brand); font:800 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.035em; }
.topbar-school-id:disabled { opacity:.62; cursor:wait; }
@media (max-width:1180px) { .topbar-school-id { min-width:0; padding-inline:8px; } .topbar-school-id small { display:none; } .topbar-school-id code { font-size:9px; } }
@media (max-width:920px) { .topbar-school-id { display:none; } }
.product-brand { flex: none; display: flex; align-items: center; gap: 9px; margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--line); color: inherit; text-decoration: none; }
.product-brand img { flex: none; width: 30px; height: 30px; object-fit: contain; border-radius: 8px; }
.product-brand span { display: flex; flex-direction: column; line-height: 1.2; }
.product-brand strong { font-size: 12px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.product-brand small { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.product-brand:hover strong, .product-brand:focus-visible strong { color: var(--brand); }
@media (max-width: 1320px) { .product-brand span { display: none; } .product-brand { padding-left: 12px; margin-left: 0; } }
@media (max-width: 1020px) { .product-brand { display: none; } }
.icon-button { position: relative; border: 1px solid var(--line); background: #fff; width: 35px; height: 35px; border-radius: 9px; cursor: pointer; display: grid; place-items: center; }
.notification-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); top: 6px; right: 7px; border: 1px solid #fff; }
.notification-wrap { position: relative; }
.notification-panel { position: absolute; right: 0; top: 44px; width: 340px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 14px; padding: 8px; }
.notification-panel > div { padding: 8px 9px 10px; display: flex; justify-content: space-between; align-items: center; }
.notification-panel > div strong { font: 700 14px "Manrope",sans-serif; }
.notification-panel > div button { border: 0; background: transparent; font-size: 20px; cursor: pointer; }
.notification-panel article { display: flex; align-items: start; gap: 9px; padding: 10px 9px; border-radius: 9px; }
.notification-panel article:hover { background: #faf8f7; }
.notice-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; margin-top: 4px; }
.notice-dot.danger { background: var(--danger); }.notice-dot.warning { background: var(--accent); }.notice-dot.success { background: var(--success); }
.notification-panel p { flex: 1; margin: 0; display: flex; flex-direction: column; }
.notification-panel p strong { font-size: 13px; }.notification-panel p small { color: var(--muted); font-size: 12px; margin-top: 2px; }.notification-panel time { color: #9c9292; font-size: 12px; }
.top-avatar { cursor: pointer; border-radius: 50%; }
.refresh-button span { display: block; font-size: 18px; line-height: 1; }
.refresh-button.refreshing span { animation: refresh-spin .75s linear infinite; }
.refresh-button:disabled { cursor: wait; opacity: .72; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
.page-wrap { max-width: 1450px; margin: 0 auto; padding: 27px 30px 60px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; }
.page-heading h1 { font: 800 clamp(23px,2.3vw,31px)/1.2 "Manrope",sans-serif; margin: 3px 0 6px; letter-spacing: -.7px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 15px; }
.eyebrow { text-transform: uppercase; color: var(--brand); letter-spacing: .1em; font-weight: 800; font-size: 12px; }
.heading-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.btn { border-radius: 9px; min-height: 38px; padding: 0 14px; font-weight: 700; font-size: 14px; border: 1px solid transparent; cursor: pointer; transition: .18s ease; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 5px 14px rgba(96,10,29,.15); }.btn-primary:hover { background: var(--brand-deep); transform: translateY(-1px); }
.btn-secondary { background: #fff; border-color: var(--line); }.btn-secondary:hover { border-color: #cfc5c3; background: #fbfaf9; }
.btn-ghost { background: transparent; color: var(--brand); }
.priority-banner { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; background: linear-gradient(95deg,var(--brand-deep),var(--brand)); color: #fff; margin-bottom: 17px; box-shadow: 0 8px 24px rgba(88,7,25,.15); }
.priority-mark { width: 30px; height: 30px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 9px; font-weight: 800; }
.priority-banner div:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.priority-banner strong { font-size: 14px; }.priority-banner span { color: rgba(255,255,255,.72); font-size: 13px; margin-top: 2px; }
.priority-banner button { margin-left: auto; border: 0; border-radius: 8px; background: #fff; color: var(--brand); padding: 8px 11px; font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap; }
.priority-banner button b { margin-left: 6px; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 16px; }
.stat-card { position: relative; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 14px 15px; box-shadow: 0 3px 10px rgba(52,36,37,.025); cursor: pointer; transition: .2s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #ddd3d1; }
.stat-icon { position: absolute; right: 14px; top: 14px; width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.stat-icon.blue { background: #e9f1ff; color: #2d5fac; }.stat-icon.green { background: var(--success-soft); color: var(--success); }.stat-icon.gold { background: var(--accent-soft); color: #9a6a00; font-size: 14px; }.stat-icon.plum { background: #f3ecfa; color: #79509e; }
.stat-top { display: flex; align-items: center; gap: 7px; }
.stat-top span { color: var(--muted); font-size: 13px; font-weight: 650; }.stat-top b { background: var(--success-soft); color: var(--success); font-size: 11px; border-radius: 8px; padding: 2px 5px; }
.stat-card > strong { display: block; font: 800 23px "Manrope",sans-serif; margin-top: 8px; letter-spacing: -.5px; }.stat-card small { color: var(--muted); font-size: 12px; }
.dashboard-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 3px 10px rgba(52,36,37,.025); overflow: hidden; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 13px; }
.panel-head h2, .register-head h2, .attendance-aside h2, .module-tools h2 { margin: 0; font: 700 16px "Manrope",sans-serif; }.panel-head p, .register-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.panel-head select { border: 1px solid var(--line); padding: 6px 8px; border-radius: 8px; background: #fff; font-size: 12px; }
.attendance-trend { padding: 16px; min-height: 285px; }
.chart-area { height: 165px; display: flex; gap: 10px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; color: #a19898; font-size: 11px; padding-bottom: 22px; }
.bar-chart { flex: 1; display: grid; grid-template-columns: repeat(7,1fr); gap: 10px; align-items: end; padding: 8px 0 0; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom,transparent,transparent 32px,#f1edeb 33px); }
.bar-item { align-self: stretch; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 7px; }
.bar-item b { width: min(28px,65%); min-height: 50px; border-radius: 6px 6px 2px 2px; background: linear-gradient(to top,var(--brand),#bb566d); position: relative; transition: .2s; }
.bar-item:hover b { filter: brightness(.9); }.bar-item b i { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-style: normal; color: var(--muted); font-size: 10px; }.bar-item > span { color: var(--muted); font-size: 11px; height: 14px; }
.chart-summary { display: flex; gap: 22px; margin: 13px 0 0 40px; }.chart-summary span { color: var(--muted); font-size: 11px; }.chart-summary strong { color: var(--ink); margin-left: 5px; }.legend { width: 6px; height: 6px; display: inline-block; border-radius: 50%; margin-right: 5px; }.legend.current { background: var(--brand); }.legend.previous { background: #d5cecc; }
.actions-panel { padding: 16px; }.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.quick-grid button { min-height: 65px; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px; text-align: left; display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 7px; cursor: pointer; }.quick-grid button:hover { background: var(--brand-soft); border-color: #e9cdd4; }.quick-grid button span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: #f4efee; color: var(--brand); font-weight: 800; }.quick-grid button strong { font-size: 12px; }.quick-grid button b { color: #a49a9a; }
.attention-panel, .activity-panel { padding: 16px; }.text-button { border: 0; background: transparent; color: var(--brand); font-size: 12px; font-weight: 700; cursor: pointer; }
.attention-list > button { border: 0; border-top: 1px solid #f1edeb; background: transparent; width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 0; text-align: left; cursor: pointer; }.attention-list > button:hover { background: #fcfaf9; }.attention-icon { flex: 0 0 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; font-size: 11px; font-weight: 800; }.attention-icon.red { background: var(--danger-soft); color: var(--danger); }.attention-icon.amber { background: var(--warning-soft); color: var(--warning); }.attention-icon.purple { background: #f2eafa; color: #79509e; }.attention-icon.blue { background: #e9f1ff; color: #3566af; }
.attention-list button > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }.attention-list strong { font-size: 12px; }.attention-list small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.status { display: inline-flex; align-items: center; gap: 4px; width: fit-content; border-radius: 10px; padding: 3px 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }.status-dot { width: 4px; height: 4px; border-radius: 50%; }.status-success { color: var(--success); background: var(--success-soft); }.status-success .status-dot { background: var(--success); }.status-warning { color: var(--warning); background: var(--warning-soft); }.status-warning .status-dot { background: var(--warning); }.status-danger { color: var(--danger); background: var(--danger-soft); }.status-danger .status-dot { background: var(--danger); }.status-neutral { color: #666; background: #f0eeee; }.status-neutral .status-dot { background: #8c8383; }
.timeline article { border-top: 1px solid #f1edeb; padding: 10px 0; display: flex; align-items: center; gap: 9px; }.timeline article > span { flex: 0 0 29px; height: 29px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 11px; font-weight: 800; }.timeline article div { min-width: 0; flex: 1; display: flex; flex-direction: column; }.timeline strong { font-size: 12px; }.timeline small { margin-top: 2px; color: var(--muted); font-size: 11px; }.timeline time { color: #9c9292; font-size: 11px; }
.mini-stat-grid, .pipeline-summary, .module-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 15px; }.mini-stat-grid > div, .pipeline-summary > div, .module-stat-grid > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; display: flex; flex-direction: column; }.mini-stat-grid span, .pipeline-summary span, .module-stat-grid span { color: var(--muted); font-size: 12px; }.mini-stat-grid strong, .pipeline-summary strong, .module-stat-grid strong { font: 800 20px "Manrope",sans-serif; margin: 5px 0 2px; }.mini-stat-grid small, .pipeline-summary small, .module-stat-grid small { color: var(--muted); font-size: 11px; }.mini-stat-grid .positive, .pipeline-summary > div:first-child small { color: var(--success); }.warning-text { color: var(--warning)!important; }
.table-panel { overflow: hidden; }.table-toolbar { min-height: 58px; padding: 11px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }.table-search { width: 320px; max-width: 40%; height: 35px; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; gap: 7px; padding: 0 9px; color: var(--muted); }.table-search input { min-width: 0; flex: 1; border: 0; outline: 0; font-size: 12px; }.table-toolbar select, .filter-button { border: 1px solid var(--line); background: #fff; height: 35px; border-radius: 8px; padding: 0 10px; font-size: 12px; }.filter-button { cursor: pointer; }.row-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 760px; } th { padding: 10px 14px; text-align: left; background: #faf8f7; color: #827778; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } td { padding: 11px 14px; border-top: 1px solid #f0eceb; font-size: 13px; } tbody tr:hover { background: #fcfbfa; }.person-cell { display: flex; align-items: center; gap: 9px; }.person-cell > span, .student-avatar { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 800; }.person-cell div { display: flex; flex-direction: column; }.person-cell strong { font-size: 13px; }.person-cell small { color: var(--muted); font-size: 11px; margin-top: 2px; } code { font: 600 12px "DM Sans",sans-serif; color: #514849; }.row-action { border: 1px solid var(--line); background: #fff; width: 27px; height: 27px; border-radius: 7px; cursor: pointer; color: var(--brand); }.table-footer { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }.table-footer div { display: flex; gap: 4px; align-items: center; }.table-footer button { min-width: 26px; height: 25px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 11px; cursor: pointer; }.table-footer button.active { background: var(--brand); color: #fff; border-color: var(--brand); }.table-footer button:disabled { opacity: .4; }.empty-state { text-align: center; padding: 45px; color: var(--muted); }.empty-state > span { font-size: 24px; }.empty-state strong { display: block; color: var(--ink); margin-top: 8px; }.empty-state p { font-size: 13px; }
.pipeline { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; align-items: start; overflow-x: auto; padding-bottom: 8px; }.pipeline-column { min-width: 240px; background: #efedeb; border-radius: 12px; padding: 9px; }.pipeline-column > header { display: flex; align-items: center; gap: 7px; padding: 3px 3px 10px; }.pipeline-column > header strong { font-size: 13px; }.pipeline-column > header b { background: #fff; border-radius: 8px; padding: 2px 6px; font-size: 11px; }.pipeline-column > header button { margin-left: auto; border: 0; background: transparent; font-size: 16px; cursor: pointer; }.pipeline-dot { width: 7px; height: 7px; border-radius: 50%; }.pipeline-dot.blue { background: #3974bb; }.pipeline-dot.purple { background: #8251a8; }.pipeline-dot.amber { background: #d19419; }.pipeline-dot.green { background: var(--success); }.pipeline-column article { background: #fff; border: 1px solid #e6e0de; border-radius: 10px; padding: 10px; margin-bottom: 8px; }.pipeline-meta { display: flex; justify-content: space-between; margin-top: 10px; color: var(--muted); font-size: 11px; }.pipeline-meta b { color: var(--ink); }.progress-line { height: 3px; border-radius: 3px; background: #eeeae8; margin-top: 7px; overflow: hidden; }.progress-line i { display: block; height: 100%; background: var(--brand); }.enrol-button { width: 100%; border: 0; background: var(--success-soft); color: var(--success); padding: 7px; border-radius: 7px; margin-top: 9px; font-size: 11px; font-weight: 800; cursor: pointer; }.view-stage { width: 100%; border: 0; background: transparent; color: var(--muted); font-size: 11px; padding: 5px; cursor: pointer; }
.attendance-layout { display: grid; grid-template-columns: 1fr 280px; gap: 14px; }.attendance-register { padding: 16px; }.register-head { display: flex; justify-content: space-between; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 12px; }.attendance-count { display: flex; flex-direction: column; align-items: flex-end; }.attendance-count strong { font: 800 18px "Manrope",sans-serif; color: var(--success); }.attendance-count span { color: var(--muted); font-size: 11px; }.bulk-actions { display: flex; align-items: center; gap: 6px; background: #faf8f7; margin: 11px 0 4px; padding: 7px 9px; border-radius: 8px; }.bulk-actions span { color: var(--muted); font-size: 11px; margin-right: 5px; }.bulk-actions button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 5px 8px; font-size: 11px; cursor: pointer; }.attendance-row { display: grid; grid-template-columns: 28px 32px 1fr 112px 75px; align-items: center; gap: 9px; border-bottom: 1px solid #f1edeb; min-height: 52px; }.roll { color: var(--muted); font-size: 12px; }.attendance-row > strong { font-size: 13px; }.attendance-toggle { border: 0; border-radius: 8px; padding: 7px 8px; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 5px; cursor: pointer; }.attendance-toggle span { width: 5px; height: 5px; border-radius: 50%; }.attendance-toggle b { margin-left: auto; }.attendance-toggle.present { background: var(--success-soft); color: var(--success); }.attendance-toggle.present span { background: var(--success); }.attendance-toggle.absent { background: var(--danger-soft); color: var(--danger); }.attendance-toggle.absent span { background: var(--danger); }.attendance-toggle.leave { background: var(--warning-soft); color: var(--warning); }.attendance-toggle.leave span { background: var(--warning); }.remark-button { border: 0; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }.attendance-aside { display: flex; flex-direction: column; gap: 12px; }.attendance-aside .panel { padding: 16px; }.donut { --percent: 75%; width: 140px; height: 140px; margin: 18px auto; background: conic-gradient(var(--success) var(--percent),#eeeae8 0); border-radius: 50%; display: grid; place-items: center; }.donut::before { content: ""; position: absolute; width: 104px; height: 104px; border-radius: 50%; background: #fff; }.donut div { position: relative; display: flex; flex-direction: column; align-items: center; }.donut strong { font: 800 21px "Manrope",sans-serif; }.donut span { color: var(--muted); font-size: 11px; }.attendance-legend { padding: 0; margin: 0; list-style: none; }.attendance-legend li { display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--line); padding: 8px 0; font-size: 12px; }.attendance-legend li > span { width: 6px; height: 6px; border-radius: 50%; }.attendance-legend span.green { background: var(--success); }.attendance-legend span.red { background: var(--danger); }.attendance-legend span.amber { background: var(--warning); }.attendance-legend strong { margin-left: auto; }.info-card { padding: 13px; border: 1px solid #efdfaf; background: var(--accent-soft); border-radius: 12px; color: #735211; }.info-card strong { font-size: 13px; }.info-card p { margin: 5px 0 0; font-size: 11px; line-height: 1.5; }
.finance-hero { background: linear-gradient(110deg,var(--brand-deep),var(--brand) 60%,#9f2c46); color: #fff; border-radius: 15px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 18px; gap: 20px; margin-bottom: 12px; box-shadow: 0 10px 28px rgba(88,7,25,.16); }.finance-hero > div { display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.18); padding-left: 18px; }.finance-hero > div:first-child { border-left: 0; padding-left: 0; }.finance-hero span { color: rgba(255,255,255,.72); font-size: 12px; }.finance-hero strong { font: 800 21px "Manrope",sans-serif; margin: 5px 0 2px; }.finance-hero small { color: rgba(255,255,255,.65); font-size: 11px; }.finance-progress { height: 4px; background: rgba(255,255,255,.2); border-radius: 4px; overflow: hidden; margin-top: 11px; }.finance-progress i { display: block; height: 100%; background: var(--accent); }.transport-separation { display: flex; align-items: center; gap: 11px; border: 1px solid #dce8f5; background: #f1f7fd; color: #24527e; border-radius: 11px; padding: 10px 12px; margin-bottom: 12px; }.transport-separation > span, .form-note > span { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; background: #dcebf8; font-weight: 800; flex: 0 0 23px; }.transport-separation div { flex: 1; }.transport-separation strong { font-size: 12px; }.transport-separation p { margin: 2px 0 0; font-size: 11px; }.transport-separation button { border: 0; background: transparent; color: #24527e; font-weight: 800; font-size: 11px; cursor: pointer; }.panel-head.padded { padding: 15px 15px 10px; }
.notice-register { overflow: hidden; }.notice-register article { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-top: 1px solid var(--line); }.document-icon { width: 34px; height: 40px; background: var(--brand-soft); color: var(--brand); border-radius: 6px 6px 9px 6px; display: grid; place-items: center; font: 800 14px "Manrope",sans-serif; }.notice-main { flex: 1; display: flex; flex-direction: column; }.notice-main code { color: var(--brand); font-size: 11px; }.notice-main strong { font-size: 13px; margin: 3px 0; }.notice-main span { color: var(--muted); font-size: 11px; }.notice-actions { display: flex; gap: 5px; }.notice-actions button { border: 1px solid var(--line); background: #fff; border-radius: 7px; height: 28px; padding: 0 9px; font-size: 11px; cursor: pointer; }
.module-hero { display: flex; align-items: center; justify-content: space-between; color: #fff; background: linear-gradient(105deg,var(--brand-deep),var(--brand)); padding: 20px; border-radius: 15px; margin-bottom: 14px; box-shadow: 0 10px 28px rgba(88,7,25,.14); }.module-hero > div { display: flex; gap: 14px; align-items: center; }.module-hero .module-icon { width: 48px; height: 48px; flex-basis: 48px; background: rgba(255,255,255,.13); color: #fff; border: 1px solid rgba(255,255,255,.18); font-size: 15px; }.module-hero span { color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }.module-hero h2 { margin: 2px 0; font: 800 19px "Manrope",sans-serif; }.module-hero p { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; }.module-hero > .status { background: rgba(255,255,255,.13); color: #fff; }.module-hero > .status .status-dot { background: #6fe7ac; }.module-stat-grid { grid-template-columns: repeat(3,1fr); }.module-grid { display: grid; grid-template-columns: 1fr 330px; gap: 14px; }.records-panel, .module-tools { padding: 16px; }.records-panel article { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 11px 0; }.record-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--brand); background: var(--brand-soft); font-size: 11px; font-weight: 800; }.records-panel article > div { flex: 1; display: flex; flex-direction: column; }.records-panel article strong { font-size: 13px; }.records-panel article small { color: var(--muted); font-size: 11px; margin-top: 2px; }.module-tools > button { display: flex; width: 100%; align-items: center; gap: 9px; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 12px 0; text-align: left; cursor: pointer; }.module-tools > button > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #f3efee; color: var(--brand); font-weight: 800; }.module-tools > button div { flex: 1; display: flex; flex-direction: column; }.module-tools > button strong { font-size: 12px; }.module-tools > button small { color: var(--muted); font-size: 11px; margin-top: 2px; }.module-tools > button b { color: var(--brand); }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(30,19,21,.52); backdrop-filter: blur(4px); }.modal { width: min(540px,100%); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(40,20,24,.25); }.modal > header { display: flex; justify-content: space-between; align-items: start; padding: 19px 20px 15px; border-bottom: 1px solid var(--line); }.modal h2 { margin: 0; font: 800 18px "Manrope",sans-serif; }.modal header p { color: var(--muted); margin: 4px 0 0; font-size: 12px; }.modal header button { border: 0; background: #f4f0ef; border-radius: 8px; width: 30px; height: 30px; font-size: 18px; cursor: pointer; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 18px 20px 20px; }.form-grid label { display: flex; flex-direction: column; gap: 6px; color: #564c4d; font-weight: 700; font-size: 12px; }.form-grid .full { grid-column: 1 / -1; }.form-grid input:not([type="checkbox"]), .form-grid select, .form-grid textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px; outline: 0; background: #fff; font-size: 13px; resize: vertical; }.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }.check-row { flex-direction: row!important; align-items: center; }.check-row input { accent-color: var(--brand); }.form-note { display: flex; flex-direction: row!important; align-items: center; padding: 9px; border-radius: 9px; background: #f1f7fd; color: #24527e!important; font-weight: 500!important; }.modal-actions { display: flex!important; flex-direction: row!important; justify-content: flex-end; gap: 8px!important; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 120; min-width: 270px; max-width: 420px; background: #1d2823; color: #fff; border-radius: 11px; box-shadow: 0 12px 35px rgba(0,0,0,.2); padding: 12px 15px; display: flex; align-items: center; gap: 9px; font-size: 13px; animation: toast-in .25s ease-out; }.toast span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: #164f38; background: #8ae1b5; font-weight: 800; }
.mobile-backdrop { display: none; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 1100px) {
  :root { --sidebar: 206px; }.page-wrap { padding-inline: 20px; }.breadcrumb { min-width: auto; }.breadcrumb span,.breadcrumb b { display: none; }.stat-grid { grid-template-columns: 1fr 1fr; }.dashboard-grid { grid-template-columns: 1fr; }.quick-grid { grid-template-columns: repeat(3,1fr); }.pipeline { grid-template-columns: repeat(4,260px); }.finance-hero { grid-template-columns: 1fr 1fr; }.finance-hero > div:nth-child(3) { border-left: 0; padding-left: 0; }.module-grid { grid-template-columns: 1fr 280px; }
}

@media (max-width: 760px) {
  .sidebar { transform: translateX(-100%); box-shadow: 15px 0 40px rgba(25,14,16,.14); transition: transform .25s ease; }.sidebar.open { transform: translateX(0); }.mobile-backdrop { display: block; position: fixed; inset: 0; z-index: 29; border: 0; background: rgba(20,12,14,.42); opacity: 0; visibility: hidden; transition: .2s; }.mobile-backdrop.visible { opacity: 1; visibility: visible; }.main-shell { margin-left: 0; }.topbar { padding: 0 14px; gap: 10px; height: 60px; }.menu-button { display: block; }.breadcrumb { display: none; }.global-search { height: 36px; }.global-search kbd { display: none; }.top-actions .icon-button:first-child { display: none; }.page-wrap { padding: 20px 14px 50px; }.page-heading { align-items: start; flex-direction: column; margin-bottom: 16px; }.heading-actions { width: 100%; }.heading-actions .btn { flex: 1; }.priority-banner { align-items: start; }.priority-banner span { display: none; }.priority-banner button { align-self: center; }.stat-grid, .mini-stat-grid, .pipeline-summary, .module-stat-grid { grid-template-columns: 1fr 1fr; }.quick-grid { grid-template-columns: 1fr 1fr; }.attendance-layout, .module-grid { grid-template-columns: 1fr; }.attendance-aside { display: grid; grid-template-columns: 1fr 1fr; }.finance-hero { grid-template-columns: 1fr 1fr; }.table-search { max-width: none; flex: 1; width: auto; }.filter-button { display: none; }.row-count { display: none; }.transport-separation button { display: none; }.notification-panel { position: fixed; right: 12px; top: 64px; width: calc(100vw - 24px); }.toast { left: 14px; right: 14px; bottom: 14px; min-width: 0; }.notice-register article { flex-wrap: wrap; }.notice-main { min-width: calc(100% - 60px); }.notice-actions { margin-left: 45px; }.module-hero > .status { display: none; }
}

@media (max-width: 480px) {
  .stat-grid, .mini-stat-grid, .pipeline-summary, .module-stat-grid { grid-template-columns: 1fr; }.stat-card { min-height: 105px; }.global-search input::placeholder { color: transparent; }.top-actions { gap: 4px; }.priority-banner { flex-wrap: wrap; }.priority-banner > div:nth-child(2) { flex: 1; }.priority-banner button { width: 100%; }.chart-summary { margin-left: 0; }.quick-grid { grid-template-columns: 1fr 1fr; }.quick-grid button { grid-template-columns: 28px 1fr; }.quick-grid button b { display: none; }.attendance-row { grid-template-columns: 25px 30px 1fr 95px; }.remark-button { display: none; }.attendance-aside { grid-template-columns: 1fr; }.finance-hero { grid-template-columns: 1fr; }.finance-hero > div { border-left: 0; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.15); }.finance-hero > div:first-child { border-top: 0; }.form-grid { grid-template-columns: 1fr; }.form-grid label { grid-column: 1!important; }.table-footer > span { display: none; }.table-footer { justify-content: center; }.module-hero p { display: none; }
}

@media print {
  .sidebar,.topbar,.heading-actions,.priority-banner,.quick-grid,.text-button,.row-action,.transport-separation button { display: none!important; }.main-shell { margin: 0; }.page-wrap { max-width: none; padding: 8mm; }.panel,.stat-card,.mini-stat-grid>div,.module-stat-grid>div { box-shadow: none; break-inside: avoid; }.dashboard-grid { grid-template-columns: 1fr; } body { background: #fff; }
}

/* Portal privacy and setup controls. */
.setup-choice { display:grid; grid-template-columns:minmax(230px,1fr) 150px 150px; gap:10px; align-items:stretch; padding:16px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.setup-choice>div { display:grid; align-content:center; gap:3px; }.setup-choice>div span { color:var(--brand); font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.setup-choice>div strong { font-size:14px; }.setup-choice>div small { color:var(--muted); font-size:11px; line-height:1.45; }
.setup-choice>label { position:relative; display:grid; align-content:center; gap:3px; min-height:64px; padding:11px 12px 11px 34px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }.setup-choice>label.selected { border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 7%,transparent); }.setup-choice>label input { position:absolute; left:12px; top:23px; width:13px; height:13px; accent-color:var(--brand); }.setup-choice>label span { font-size:13px; font-weight:850; }.setup-choice>label small { color:var(--muted); font-size:10px; }
.portal-security-bar { min-height:62px; position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:10px max(28px,calc((100vw - 1220px)/2)); border-bottom:1px solid color-mix(in srgb,var(--portal-deep) 10%,transparent); background:rgba(255,255,255,.94); box-shadow:0 8px 24px rgba(44,21,27,.04); }
.portal-security-bar>div { display:flex; align-items:center; gap:14px; }.portal-security-bar b { padding:7px 11px; border-radius:20px; color:#0b714e; background:#e9f8f1; font-size:11px; }.portal-security-bar span { color:#786d70; font-size:11px; }.portal-security-bar a { padding:8px 12px; border:1px solid color-mix(in srgb,var(--portal-primary) 18%,transparent); border-radius:9px; color:var(--portal-primary); font-size:11px; font-weight:800; text-decoration:none; }
.portal-money { color:var(--portal-primary); font-size:14px; }.portal-privacy-note { display:flex; gap:14px; align-items:center; margin-top:22px; padding:17px 20px; border-left:4px solid var(--portal-accent); border-radius:0 13px 13px 0; color:#74696c; background:#fff8eb; font-size:12px; line-height:1.55; }.portal-privacy-note b { flex:0 0 auto; color:var(--portal-deep); }.portal-personal-heading { margin-bottom:18px; }.portal-personal-heading span { color:var(--portal-primary); font-size:11px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }.portal-personal-heading h2 { margin:5px 0; font-size:24px; }.portal-personal-heading p { margin:0; color:#786e70; font-size:12px; }
@media(max-width:760px){.setup-choice{grid-template-columns:1fr 1fr}.setup-choice>div{grid-column:1/-1}.portal-security-bar{align-items:flex-start;flex-direction:column;padding:13px 18px}.portal-security-bar>div{width:100%;justify-content:space-between}.portal-security-bar>div:first-child span{display:none}}

/* Integrated cloud portals — always inherit the saved school design system. */
.portal-app { --portal-primary:#85122d; --portal-deep:#4a0718; --portal-accent:#d9ab43; --portal-canvas:#f5f3f1; --portal-font:Poppins; min-height:100vh; color:#241d1f; background:var(--portal-canvas); font-family:var(--portal-font),Arial,sans-serif; }
.portal-app * { box-sizing:border-box; }
.portal-app::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--portal-accent) 15%,transparent),transparent 26%),linear-gradient(145deg,rgba(255,255,255,.55),transparent 45%); }
.portal-topbar,.portal-hero,.portal-content,.portal-footer { position:relative; z-index:1; }
.portal-topbar { min-height:82px; display:flex; align-items:center; gap:32px; padding:12px max(28px,calc((100vw - 1320px)/2)); border-bottom:1px solid color-mix(in srgb,var(--portal-deep) 10%,transparent); background:rgba(255,255,255,.88); backdrop-filter:blur(18px); }
.portal-brand { min-width:245px; display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.portal-brand img,.portal-footer img { width:42px; height:42px; object-fit:cover; border-radius:11px; box-shadow:0 6px 18px color-mix(in srgb,var(--portal-primary) 24%,transparent); }
.portal-brand span,.portal-user div,.portal-footer span { display:grid; gap:2px; }.portal-brand b { font-size:16px; }.portal-brand small,.portal-user small { color:#756a6d; font-size:12px; text-transform:capitalize; }
.portal-topbar nav { flex:1; display:flex; justify-content:center; gap:5px; }.portal-topbar nav a { padding:10px 13px; border-radius:10px; color:#665c5e; font-size:13px; font-weight:700; text-decoration:none; }.portal-topbar nav a:hover,.portal-topbar nav a.active { color:var(--portal-primary); background:color-mix(in srgb,var(--portal-primary) 8%,white); }
.portal-user { min-width:200px; display:flex; align-items:center; justify-content:flex-end; gap:10px; }.portal-user>span { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(145deg,var(--portal-primary),var(--portal-deep)); font-size:15px; font-weight:900; }.portal-user b { max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.portal-topbar a.portal-user { color:inherit; text-decoration:none; }.portal-topbar a.portal-user:hover b { color:var(--portal-primary); }
.portal-hero { min-height:300px; display:flex; justify-content:space-between; align-items:flex-end; gap:50px; padding:62px max(28px,calc((100vw - 1220px)/2)); overflow:hidden; color:#fff; background:linear-gradient(120deg,var(--portal-deep),var(--portal-primary)); }
.portal-hero::after { content:""; position:absolute; width:430px; height:430px; right:-110px; top:-210px; border:72px solid color-mix(in srgb,var(--portal-accent) 28%,transparent); border-radius:50%; }.portal-hero>div,.portal-hero aside { position:relative; z-index:1; }
.portal-hero>div { max-width:730px; }.portal-hero>div>span,.portal-form-heading span,.portal-side-card>span,.portal-register>header span,.portal-learner>span { color:var(--portal-accent); font-size:12px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }.portal-hero h1 { margin:10px 0 12px; font-size:clamp(38px,5vw,64px); line-height:1; letter-spacing:-.045em; }.portal-hero p { max-width:650px; margin:0; color:rgba(255,255,255,.76); font-size:14px; line-height:1.7; }
.portal-hero aside { width:250px; padding:20px; border:1px solid rgba(255,255,255,.2); border-radius:16px; background:rgba(255,255,255,.09); backdrop-filter:blur(10px); }.portal-hero aside small,.portal-hero aside b,.portal-hero aside a { display:block; }.portal-hero aside small { color:rgba(255,255,255,.6); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }.portal-hero aside b { margin:7px 0; font-size:16px; }.portal-hero aside a { color:var(--portal-accent); font-size:12px; font-weight:800; text-decoration:none; }
.portal-content { max-width:1220px; min-height:450px; margin:0 auto; padding:36px 0 70px; }.portal-two-col,.portal-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(290px,.75fr); gap:22px; align-items:start; }
.portal-form,.portal-side-card,.portal-register,.portal-learner,.portal-success { border:1px solid rgba(74,7,24,.1); border-radius:20px; background:rgba(255,255,255,.92); box-shadow:0 16px 50px rgba(44,21,27,.07); }
.portal-form { padding:30px; }.portal-form-heading { display:flex; justify-content:space-between; gap:20px; margin-bottom:24px; }.portal-form-heading h2,.portal-side-card h2,.portal-register h2,.portal-learner h2 { margin:5px 0; font-size:22px; letter-spacing:-.025em; }.portal-form-heading>b { align-self:center; color:#807578; font-size:11px; font-weight:650; }
.portal-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; }.portal-form-grid label { display:grid; gap:7px; color:#554b4e; font-size:12px; font-weight:750; }.portal-form-grid .wide { grid-column:1/-1; }.portal-form input,.portal-form select,.portal-form textarea { width:100%; padding:12px 13px; border:1px solid #ddd5d7; border-radius:10px; outline:0; color:#271f21; background:#fff; font:500 14px var(--portal-font),Arial,sans-serif; resize:vertical; }.portal-form input:focus,.portal-form select:focus,.portal-form textarea:focus { border-color:var(--portal-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--portal-primary) 10%,transparent); }
.portal-consent { display:flex; align-items:flex-start; gap:10px; margin:20px 0; color:#6d6265; font-size:12px; line-height:1.5; }.portal-consent input { width:16px; height:16px; margin-top:1px; accent-color:var(--portal-primary); }.portal-primary,.portal-success button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:26px; padding:0 20px; border:0; border-radius:11px; color:#fff; background:linear-gradient(135deg,var(--portal-primary),var(--portal-deep)); box-shadow:0 9px 25px color-mix(in srgb,var(--portal-primary) 22%,transparent); font:800 13px var(--portal-font),Arial,sans-serif; cursor:pointer; }.portal-primary:disabled { opacity:.6; cursor:wait; }.portal-security { margin-left:14px; color:#8b8183; font-size:10px; }.portal-error { padding:10px 12px; border-radius:9px; color:#9b2038; background:#fff0f2; font-size:12px; }
.portal-side-card { padding:28px; color:#fff; background:linear-gradient(155deg,var(--portal-deep),color-mix(in srgb,var(--portal-primary) 82%,black)); }.portal-side-card h2 { margin-bottom:24px; }.portal-step { display:grid; grid-template-columns:35px 1fr; gap:12px; align-items:center; padding:14px 0; border-top:1px solid rgba(255,255,255,.12); }.portal-step b { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--portal-deep); background:var(--portal-accent); font-size:11px; }.portal-step p { margin:0; color:rgba(255,255,255,.79); font-size:13px; line-height:1.45; }.portal-side-card>small { display:block; margin-top:14px; color:rgba(255,255,255,.55); font-size:11px; }
.portal-register { margin-top:22px; overflow:hidden; }.portal-dashboard-grid>.portal-register { margin-top:0; }.portal-register>header { display:flex; justify-content:space-between; align-items:center; padding:24px 26px 18px; border-bottom:1px solid #eee8e9; }.portal-register>header h2 { font-size:18px; }.portal-register>header p { margin:3px 0 0; color:#807578; font-size:11px; }.portal-register>header>b { padding:7px 10px; border-radius:20px; color:#147251; background:#e9f8f1; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.portal-register>div>article { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:17px 26px; border-bottom:1px solid #f0ebec; }.portal-register>div>article:last-child { border-bottom:0; }.portal-register article>div { display:grid; grid-template-columns:minmax(115px,auto) 1fr; column-gap:15px; align-items:center; }.portal-register code { grid-row:1/3; color:var(--portal-primary); font:800 11px var(--portal-font),Arial,sans-serif; }.portal-register article b { font-size:13px; }.portal-register article small { color:#857a7d; font-size:11px; }
.portal-status { flex:0 0 auto; padding:6px 9px; border-radius:20px; color:#6f5c12; background:#fff6d5; font-size:10px; font-weight:850; }.portal-status.published,.portal-status.completed,.portal-status.approved,.portal-status.issued { color:#08704b; background:#e8f8f1; }.portal-status.application,.portal-status.under-review { color:#1e5d8e; background:#eaf5ff; }
.portal-success { padding:48px; text-align:center; }.portal-success>span { color:#16825b; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }.portal-success h2 { margin:12px 0; color:var(--portal-primary); font-size:30px; }.portal-success p { max-width:480px; margin:0 auto; color:#74696c; font-size:14px; line-height:1.6; }.portal-success>div { display:flex; justify-content:space-between; max-width:350px; margin:25px auto; padding:12px; border-radius:10px; background:#f6f3f4; font-size:12px; }.portal-success button { margin:auto; }
.portal-learner { padding:30px; color:#fff; background:linear-gradient(145deg,var(--portal-deep),var(--portal-primary)); }.portal-learner h2 { margin-top:14px; font-size:30px; }.portal-learner>p { margin:0 0 28px; color:rgba(255,255,255,.7); font-size:13px; }.portal-learner>div { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.portal-learner article { padding:14px; border:1px solid rgba(255,255,255,.13); border-radius:12px; background:rgba(255,255,255,.07); }.portal-learner article small,.portal-learner article b { display:block; }.portal-learner article small { color:rgba(255,255,255,.55); font-size:10px; }.portal-learner article b { margin-top:6px; font-size:16px; }
.portal-empty { padding:55px 25px; text-align:center; }.portal-empty>b { width:44px; height:44px; display:grid; place-items:center; margin:auto; border-radius:14px; color:var(--portal-primary); background:color-mix(in srgb,var(--portal-primary) 8%,white); font-size:18px; }.portal-empty h3 { margin:13px 0 5px; font-size:16px; }.portal-empty p { max-width:440px; margin:auto; color:#817679; font-size:12px; line-height:1.6; }
.portal-footer { min-height:105px; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:20px max(28px,calc((100vw - 1220px)/2)); color:rgba(255,255,255,.72); background:#211a1c; }.portal-footer>div { display:flex; align-items:center; gap:11px; }.portal-footer img { width:36px; height:36px; }.portal-footer b { color:#fff; font-size:12px; }.portal-footer a { color:var(--portal-accent); font-size:11px; text-decoration:none; }.portal-footer p { font-size:11px; }
@media(max-width:900px){.portal-topbar{gap:15px}.portal-topbar nav{display:none}.portal-user{min-width:0;margin-left:auto}.portal-user div{display:none}.portal-content{padding-inline:18px}.portal-two-col,.portal-dashboard-grid{grid-template-columns:1fr}.portal-hero{padding-inline:28px}.portal-register article>div{grid-template-columns:1fr}.portal-register code{grid-row:auto}.portal-footer{padding-inline:25px}}
@media(max-width:600px){.portal-topbar{min-height:68px;padding:9px 14px}.portal-brand{min-width:0}.portal-brand img{width:36px;height:36px}.portal-brand b{font-size:13px}.portal-hero{min-height:330px;display:block;padding:45px 20px}.portal-hero aside{width:100%;margin-top:25px}.portal-content{padding:20px 12px 45px}.portal-form{padding:20px}.portal-form-heading{display:block}.portal-form-heading>b{display:block;margin-top:8px}.portal-form-grid{grid-template-columns:1fr}.portal-form-grid .wide{grid-column:auto}.portal-primary{width:100%}.portal-security{display:block;margin:10px 0;text-align:center}.portal-side-card{padding:22px}.portal-register>header{align-items:flex-start;padding:20px}.portal-register>header>b{display:none}.portal-register>div>article{padding:15px 20px}.portal-learner>div{grid-template-columns:1fr}.portal-footer{align-items:flex-start;flex-direction:column}.portal-footer p{margin:0}}

/* Dedicated Parent and Staff sign-in gateways. */
.portal-login { --portal-primary:#85122d; --portal-deep:#4a0718; --portal-accent:#d9ab43; --portal-canvas:#f5f3f1; --portal-font:Poppins; min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.15fr) minmax(430px,.85fr); color:#261f21; background:var(--portal-canvas); font-family:var(--portal-font),Arial,sans-serif; }
.portal-login * { box-sizing:border-box; }.portal-login-story { position:relative; min-height:100vh; display:flex; flex-direction:column; overflow:hidden; padding:42px clamp(36px,6vw,90px); color:#fff; background:linear-gradient(140deg,var(--portal-deep),var(--portal-primary)); }.portal-login-story::before,.portal-login-story::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }.portal-login-story::before { width:520px; height:520px; right:-210px; top:-210px; border:86px solid color-mix(in srgb,var(--portal-accent) 24%,transparent); }.portal-login-story::after { width:230px; height:230px; left:-115px; bottom:-80px; border:42px solid rgba(255,255,255,.05); }
.portal-login-brand,.portal-login-copy,.portal-login-story footer { position:relative; z-index:1; }.portal-login-brand { display:flex; align-items:center; gap:13px; color:#fff; text-decoration:none; }.portal-login-brand img { width:52px; height:52px; object-fit:cover; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.2); }.portal-login-brand span { display:grid; gap:3px; }.portal-login-brand b { font-size:16px; }.portal-login-brand small { color:rgba(255,255,255,.57); font-size:11px; }
.portal-login-copy { max-width:650px; margin:auto 0; padding:75px 0; }.portal-login-copy>span,.portal-login-card>span { color:var(--portal-accent); font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }.portal-login-copy h1 { max-width:620px; margin:13px 0 18px; font-size:clamp(42px,5vw,68px); line-height:1.02; letter-spacing:-.05em; }.portal-login-copy>p { max-width:580px; margin:0; color:rgba(255,255,255,.72); font-size:16px; line-height:1.75; }.portal-login-copy>div { max-width:570px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:36px; }.portal-login-copy article { min-height:105px; padding:16px; border:1px solid rgba(255,255,255,.13); border-radius:13px; background:rgba(255,255,255,.07); backdrop-filter:blur(9px); }.portal-login-copy article b,.portal-login-copy article span { display:block; }.portal-login-copy article b { color:var(--portal-accent); font-size:11px; }.portal-login-copy article span { margin-top:14px; color:rgba(255,255,255,.82); font-size:12px; line-height:1.45; }
.portal-login-story footer { display:flex; gap:12px; align-items:center; color:rgba(255,255,255,.65); font-size:11px; }.portal-login-story footer a { color:var(--portal-accent); text-decoration:none; }
.portal-login-panel { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:24px; padding:50px clamp(30px,5vw,75px); background:radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--portal-accent) 13%,transparent),transparent 30%); }.portal-login-card { width:100%; max-width:470px; padding:38px; border:1px solid color-mix(in srgb,var(--portal-deep) 10%,transparent); border-radius:22px; background:rgba(255,255,255,.94); box-shadow:0 24px 70px rgba(48,25,31,.09); }.portal-login-card h2 { margin:8px 0 9px; font-size:25px; letter-spacing:-.035em; }.portal-login-card>p { margin:0; color:#786e70; font-size:13px; line-height:1.65; }
.portal-login-account,.portal-login-shield { display:flex; align-items:center; gap:13px; margin:23px 0; padding:14px; border:1px solid #e8e1e3; border-radius:13px; background:#faf8f8; }.portal-login-account>b,.portal-login-shield>b { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(145deg,var(--portal-primary),var(--portal-deep)); font-size:16px; }.portal-login-shield>b { color:var(--portal-deep); background:var(--portal-accent); }.portal-login-account span,.portal-login-shield span { min-width:0; display:grid; gap:2px; }.portal-login-account strong,.portal-login-shield strong { overflow:hidden; color:#31282a; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.portal-login-account small,.portal-login-shield small { overflow:hidden; color:#857a7d; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.portal-login-account em { width:max-content; margin-top:5px; padding:4px 7px; border-radius:10px; color:var(--portal-primary); background:color-mix(in srgb,var(--portal-primary) 8%,white); font-size:10px; font-style:normal; font-weight:800; text-transform:capitalize; }
.portal-login-primary { min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 17px; border-radius:11px; color:#fff; background:linear-gradient(135deg,var(--portal-primary),var(--portal-deep)); box-shadow:0 10px 28px color-mix(in srgb,var(--portal-primary) 20%,transparent); font-size:13px; font-weight:850; text-decoration:none; }.portal-login-primary:hover { transform:translateY(-1px); }.portal-login-secondary { display:block; margin:14px auto 0; color:var(--portal-primary); font-size:11px; font-weight:750; text-align:center; text-decoration:none; }.portal-login-note { display:grid; gap:4px; margin-top:25px; padding:13px; border-left:3px solid var(--portal-accent); border-radius:0 9px 9px 0; color:#786d70; background:#faf7f1; font-size:11px; line-height:1.5; }.portal-login-note b { color:#3d3235; }.portal-login-help { display:block; margin-top:20px; color:#8a7f82; font-size:11px; text-align:center; }.portal-login-help a { color:var(--portal-primary); font-weight:750; text-decoration:none; }.portal-login-panel>nav { display:flex; gap:18px; }.portal-login-panel>nav a { color:#786e70; font-size:11px; font-weight:700; text-decoration:none; }.portal-login-panel>nav a:hover { color:var(--portal-primary); }
@media(max-width:920px){.portal-login{grid-template-columns:1fr}.portal-login-story{min-height:auto;padding:30px}.portal-login-copy{padding:70px 0 45px}.portal-login-copy h1{font-size:46px}.portal-login-panel{min-height:auto;padding:55px 25px}.portal-login-story footer{margin-top:10px}}
@media(max-width:560px){.portal-login-story{padding:22px}.portal-login-copy{padding:55px 0 32px}.portal-login-copy h1{font-size:37px}.portal-login-copy>div{grid-template-columns:1fr}.portal-login-copy article{min-height:auto}.portal-login-panel{padding:35px 14px}.portal-login-card{padding:25px 20px}.portal-login-panel>nav{flex-wrap:wrap;justify-content:center}}

/* Modern heritage design system */
:root {
  --ink: #241b1d;
  --muted: #756a6d;
  --line: #e8e1df;
  --canvas: #f5f3f1;
  --surface: #ffffff;
  --brand: #85122d;
  --brand-deep: #4a0718;
  --brand-soft: #f9edf0;
  --accent: #d9ab43;
  --accent-soft: #fff7df;
  --shadow: 0 14px 38px rgba(54, 34, 38, .075);
  --shadow-soft: 0 5px 18px rgba(54, 34, 38, .05);
  --sidebar: 232px;
}

body {
  background:
    radial-gradient(circle at 88% -8%, rgba(217,171,67,.12), transparent 30%),
    linear-gradient(180deg, #faf8f6 0, var(--canvas) 220px);
  font-size: 15px;
  letter-spacing: -.005em;
}

.erp-app {
  isolation: isolate;
  --brand-soft: color-mix(in srgb, var(--brand) 9%, white);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, white);
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--canvas) 35%, white) 0, var(--canvas) 220px);
  font-family: var(--ui-font), sans-serif;
}
.erp-app * { font-family: var(--ui-font), sans-serif!important; }
.erp-app::before {
  content: "";
  position: fixed;
  z-index: -1;
  width: 420px;
  height: 420px;
  right: -180px;
  top: 180px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 4%, transparent);
  filter: blur(4px);
  pointer-events: none;
}

.sidebar {
  padding: 20px 16px 16px;
  color: #fff;
  background:
    radial-gradient(circle at 20% 0, rgba(217,171,67,.16), transparent 25%),
    linear-gradient(170deg, #3d0614 0%, #650b22 54%, #390611 100%);
  border-right: 0;
  box-shadow: 12px 0 35px rgba(49,4,16,.13);
  scrollbar-color: rgba(255,255,255,.18) transparent;
}

.sidebar::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent 5%, var(--accent) 42%, #f4d88e 55%, transparent 95%);
}

.brand { padding: 2px 7px 18px; gap: 12px; }
.brand img,.brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
}
.brand-logo,.product-logo { display: block; flex: 0 0 auto; background-color: var(--brand); background-image: url("/jpraxc-school-erp-logo.png"); background-position: center; background-repeat: no-repeat; background-size: cover; }
.brand strong { color: #fff; font-size: 16px; letter-spacing: -.3px; }
.brand span { color: rgba(255,255,255,.58); font-size: 13px; letter-spacing: .035em; }

.school-chip {
  min-height: 58px;
  padding: 11px;
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.085);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.school-monogram { flex-basis: 34px; height: 34px; background: var(--accent); color: #4a2600; border-radius: 10px; }
.school-chip strong { color: #fff; font-size: 14px; }
.school-chip div span, .school-chip .chevron { color: rgba(255,255,255,.55); }

.nav-search {
  height: 42px;
  margin: 14px 0 7px;
  border-color: rgba(255,255,255,.12);
  background: rgba(20,0,5,.16);
  color: rgba(255,255,255,.62);
}
.nav-search input { color: #fff; font-size: 14px; }
.nav-search input::placeholder { color: rgba(255,255,255,.46); }
.nav-group > p { margin: 18px 10px 6px; color: rgba(255,255,255,.38); font-size: 11px; letter-spacing: .15em; }
.nav-group button { min-height: 42px; color: rgba(255,255,255,.66); font-size: 14px; padding: 8px 10px; border-radius: 11px; }
.nav-group button:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-group button.active {
  color: #3b0c17;
  background: linear-gradient(100deg, #fff 0%, #fff8eb 100%);
  box-shadow: 0 8px 22px rgba(26,0,7,.2);
}
.module-icon { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; background: rgba(255,255,255,.09); color: rgba(255,255,255,.7); }
.nav-group button.active .module-icon { background: var(--brand); color: #fff; box-shadow: none; }
.nav-badge { background: rgba(255,255,255,.13); color: #fff; }
.nav-group button.active .nav-badge { color: var(--brand); background: var(--brand-soft); }
.nav-badge.muted { background: rgba(255,255,255,.1); color: rgba(255,255,255,.68); }

.sync-card {
  margin: 17px 2px 11px;
  padding: 11px;
  color: #d5f6e5;
  background: rgba(33,156,99,.15);
  border: 1px solid rgba(139,230,185,.17);
}
.sync-icon { background: #63cf9c; color: #153c2b; }
.sync-card strong { font-size: 12px; }.sync-card span { color: rgba(218,250,233,.66); }
.sidebar-user { border-top-width: 2px; border-color: var(--accent); padding: 9px 6px 4px; }
.sidebar-user strong { color: #fff; }.sidebar-user span { color: rgba(255,255,255,.5); }.sidebar-user button { color: rgba(255,255,255,.55); }
.sidebar-user a { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: rgba(255,255,255,.55); text-decoration: none; transition: .18s ease; }
.sidebar-user a:hover { color: #fff; background: rgba(255,255,255,.09); }
.avatar { background: linear-gradient(145deg,#f5d989,var(--accent)); color: #4a2500; }
/* Class-then-section filter above a register. */
.register-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: #fbfaf9; }
.register-filter label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.register-filter select { min-width: 150px; min-height: 36px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 650; cursor: pointer; }
.register-filter select:disabled { opacity: .55; cursor: not-allowed; }
.register-filter .btn { align-self: end; }
@media (max-width: 620px) { .register-filter select { min-width: 0; width: 100%; } .register-filter label { flex: 1 1 100%; } }

/* A search box belonging to one register, matching the filter bar above it. */
/* The day at a glance: both registers summarised where the day is chosen. */
.attendance-day-overview { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 12px; padding: 14px 15px; border-top: 1px solid var(--line); background: #fbfaf9; }
.attendance-day-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.attendance-day-card h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; color: var(--brand); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.attendance-day-card h4 small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.attendance-day-empty { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.attendance-day-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(64px,1fr)); gap: 8px; }
.attendance-day-stat { display: grid; gap: 2px; padding: 7px 8px; border-radius: 9px; background: #f5f2f1; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-align: center; }
.attendance-day-stat b { color: var(--ink); font-size: 17px; font-weight: 900; line-height: 1; }
.attendance-day-stat.is-present { background: #dff5e8; } .attendance-day-stat.is-present b { color: #075c35; }
.attendance-day-stat.is-absent { background: #fde5e8; } .attendance-day-stat.is-absent b { color: #9e182b; }
.attendance-day-stat.is-late { background: #fff0c9; } .attendance-day-stat.is-late b { color: #825900; }
.attendance-day-stat.is-leave { background: #e8eefc; } .attendance-day-stat.is-leave b { color: #1c3f8f; }
.attendance-day-stat.is-unmarked { background: #ececec; } .attendance-day-stat.is-unmarked b { color: #55504f; }
.register-search { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: #fbfaf9; }
.register-search label { flex: 1 1 auto; display: block; }
.register-search input { width: 100%; min-height: 36px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; }
.register-search input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.register-filter + /* The day at a glance: both registers summarised where the day is chosen. */
.attendance-day-overview { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 12px; padding: 14px 15px; border-top: 1px solid var(--line); background: #fbfaf9; }
.attendance-day-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.attendance-day-card h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; color: var(--brand); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.attendance-day-card h4 small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.attendance-day-empty { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.attendance-day-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(64px,1fr)); gap: 8px; }
.attendance-day-stat { display: grid; gap: 2px; padding: 7px 8px; border-radius: 9px; background: #f5f2f1; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-align: center; }
.attendance-day-stat b { color: var(--ink); font-size: 17px; font-weight: 900; line-height: 1; }
.attendance-day-stat.is-present { background: #dff5e8; } .attendance-day-stat.is-present b { color: #075c35; }
.attendance-day-stat.is-absent { background: #fde5e8; } .attendance-day-stat.is-absent b { color: #9e182b; }
.attendance-day-stat.is-late { background: #fff0c9; } .attendance-day-stat.is-late b { color: #825900; }
.attendance-day-stat.is-leave { background: #e8eefc; } .attendance-day-stat.is-leave b { color: #1c3f8f; }
.attendance-day-stat.is-unmarked { background: #ececec; } .attendance-day-stat.is-unmarked b { color: #55504f; }
.register-search { border-top: 0; }
/* Documents already attached to a record, each removable from the dialog. */
.document-list { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.document-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.document-list strong, .document-list small { display: block; }
.document-list strong { font-size: 12.5px; }
.document-list small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.field-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.5; }


/* Academic session chooser. The sidebar is dark, so this follows the nav
   heading and nav button treatment rather than the light form styling used in
   the page body. */
.sidebar-school-id { display:grid; gap:5px; margin:0 0 9px; padding:10px; border:1px solid rgba(255,255,255,.2); border-radius:10px; background:rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.sidebar-school-id header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sidebar-school-id button { padding:3px 6px; border:1px solid rgba(255,255,255,.22); border-radius:6px; color:#fff; background:rgba(255,255,255,.1); font-size:8px; font-weight:800; cursor:pointer; }
.sidebar-school-id small { color:rgba(255,255,255,.58); font-size:10px; font-weight:760; letter-spacing:1.05px; }
.sidebar-school-id code { color:#fff; font:800 12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.045em; overflow-wrap:anywhere; user-select:all; }
.sidebar-school-id p { margin:0; color:rgba(255,255,255,.64); font-size:8px; font-weight:620; line-height:1.35; }
.session-switch { flex: none; display: grid; gap: 6px; margin: 0 0 10px; padding: 6px 0 12px; border: 0; border-bottom: 2px solid var(--accent); background: transparent; }
.session-switch > span { padding: 0 10px; color: rgba(255,255,255,.56); font-size: 11px; font-weight: 730; letter-spacing: 1.1px; text-transform: uppercase; }
.session-switch select { width: 100%; min-height: 38px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; background: rgba(255,255,255,.10); color: #fff; font-size: 13px; font-weight: 650; cursor: pointer; transition: background .16s, border-color .16s; }
.session-switch select:hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.16); }
.session-switch select:focus-visible { outline: 3px solid rgba(255,255,255,.28); outline-offset: 1px; }
/* The native dropdown list is drawn by the OS, so it needs readable colours. */
.session-switch select option { color: #251c1e; background: #fff; }
.sync-card.syncing .sync-icon,.sync-card.loading .sync-icon { animation: sync-spin 1.25s linear infinite; }
.sync-card.error { color: #ffe4e8; background: rgba(222,72,93,.16); border-color: rgba(255,170,183,.18); }
.sync-card.error .sync-icon { background: #f28a9c; color: #4b101b; }
@keyframes sync-spin { to { transform: rotate(360deg); } }

.topbar {
  height: 72px;
  padding: 0 34px;
  border-bottom-color: rgba(226,217,214,.8);
  background: rgba(255,255,255,.88);
  box-shadow: 0 4px 20px rgba(51,31,35,.035);
}
.breadcrumb { min-width: 255px; font-size: 13px; }
.breadcrumb strong { font-size: 14px; color: var(--brand); }
.global-search-wrap { max-width: 570px; }
.global-search {
  height: 42px;
  padding: 0 12px;
  border-color: #e6dddb;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(61,39,42,.045);
}
.global-search input { font-size: 14px; }
kbd { padding: 3px 7px; color: #8e8184; background: #f8f5f4; border-color: #e5dddb; }
.icon-button { width: 39px; height: 39px; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px rgba(59,39,42,.04); transition: .18s ease; }
.icon-button:hover { color: var(--brand); border-color: #d7c9c7; transform: translateY(-1px); }
.top-avatar { width: 38px; height: 38px; background: linear-gradient(145deg,var(--brand),var(--brand-deep)); border: 2px solid #fff; box-shadow: 0 4px 14px rgba(78,7,23,.2); }

.page-wrap { max-width: 1480px; padding: 34px 38px 70px; }
.page-heading { margin-bottom: 27px; align-items: center; }
.page-heading h1 { margin: 5px 0 7px; font-size: clamp(28px,2.5vw,38px); line-height: 1.1; letter-spacing: -1.2px; }
.page-heading p { max-width: 680px; color: #7c7173; font-size: 15px; line-height: 1.55; }
.eyebrow {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 20px;
  color: var(--brand);
  background: var(--brand-soft);
  letter-spacing: .12em;
  font-size: 11px;
}
.heading-actions { gap: 10px; }
.btn { min-height: 42px; padding: 0 17px; border-radius: 11px; font-size: 13px; }
.btn-primary { background: linear-gradient(135deg,var(--brand),var(--brand-deep)); box-shadow: 0 8px 20px rgba(108,10,32,.17); }
.btn-secondary { background: rgba(255,255,255,.92); box-shadow: 0 3px 12px rgba(59,39,42,.035); }

.priority-banner {
  position: relative;
  min-height: 65px;
  padding: 15px 18px;
  border-radius: 16px;
  margin-bottom: 19px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(105deg,#4a0718 0%,#85122d 70%,#a02d48 100%);
  box-shadow: 0 12px 28px rgba(84,7,25,.16);
}
.priority-banner::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg,var(--accent),#f6dd94,transparent 75%); }
.priority-mark { width: 34px; height: 34px; border-radius: 10px; color: #ffe6a1; }
.priority-banner strong { font-size: 14px; }.priority-banner span { margin-top: 3px; font-size: 12px; }
.priority-banner button { padding: 9px 13px; border-radius: 9px; }

.stat-grid { gap: 16px; margin-bottom: 18px; }
.stat-card {
  min-height: 136px;
  padding: 19px;
  border-color: rgba(228,219,216,.9);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.stat-card::after { content: ""; position: absolute; width: 74px; height: 74px; border-radius: 50%; right: -28px; bottom: -32px; background: var(--brand-soft); opacity: .7; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #ddcfcc; }
.stat-icon { width: 39px; height: 39px; right: 17px; top: 17px; border-radius: 11px; z-index: 1; }
.stat-top span { font-size: 13px; }.stat-top b { font-size: 11px; padding: 3px 6px; }
.stat-card > strong { margin-top: 12px; font-size: 28px; letter-spacing: -1px; }
.stat-card small { font-size: 12px; }

.dashboard-grid { gap: 17px; grid-template-columns: minmax(0,1.48fr) minmax(320px,.92fr); }
.panel { border-color: rgba(228,219,216,.9); border-radius: 18px; box-shadow: var(--shadow-soft); }
.panel:hover { border-color: #ded1ce; }
.panel-head { padding-bottom: 16px; }
.panel-head h2, .register-head h2, .attendance-aside h2, .module-tools h2 { font-size: 14px; letter-spacing: -.3px; }
.panel-head p, .register-head p { font-size: 12px; line-height: 1.5; }
.attendance-trend, .actions-panel, .attention-panel, .activity-panel { padding: 20px; }
.attendance-trend { min-height: 320px; }
.chart-area { height: 185px; }.bar-chart { gap: 13px; }.bar-item b { border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg,#b9425e,var(--brand)); }
.quick-grid { gap: 10px; }.quick-grid button { min-height: 72px; padding: 11px; border-radius: 12px; transition: .18s ease; }.quick-grid button:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(85,42,50,.07); }.quick-grid button span { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); }.quick-grid button strong { font-size: 12px; }
.attention-list > button { padding: 12px 2px; border-radius: 9px; }.attention-icon { flex-basis: 34px; height: 34px; border-radius: 10px; }.attention-list strong,.timeline strong { font-size: 12px; }.attention-list small,.timeline small { font-size: 11px; }
.status { padding: 4px 8px; border-radius: 20px; font-size: 11px; }
.timeline article { padding: 12px 2px; }.timeline article > span { flex-basis: 34px; height: 34px; }

.mini-stat-grid, .pipeline-summary, .module-stat-grid { gap: 16px; margin-bottom: 18px; }
.mini-stat-grid > div, .pipeline-summary > div, .module-stat-grid > div { min-height: 112px; padding: 18px; border-color: rgba(228,219,216,.9); border-radius: 16px; box-shadow: var(--shadow-soft); }
.mini-stat-grid span, .pipeline-summary span, .module-stat-grid span { font-size: 12px; }
.mini-stat-grid strong, .pipeline-summary strong, .module-stat-grid strong { margin: 8px 0 3px; font-size: 24px; }
.mini-stat-grid small, .pipeline-summary small, .module-stat-grid small { font-size: 11px; }

.table-panel { border-radius: 18px; }.table-toolbar { min-height: 67px; padding: 14px 18px; }.table-search { height: 39px; border-radius: 10px; padding: 0 11px; }.table-search input { font-size: 13px; }.table-toolbar select,.filter-button { height: 39px; border-radius: 10px; font-size: 12px; }
th { padding: 13px 17px; font-size: 11px; background: #faf7f6; } td { padding: 14px 17px; font-size: 13px; }.person-cell > span,.student-avatar { width: 34px; height: 34px; border-radius: 10px; }.person-cell strong { font-size: 13px; }.person-cell small { font-size: 11px; }.row-action { width: 31px; height: 31px; border-radius: 9px; }
.table-footer { min-height: 56px; padding: 13px 17px; }

.pipeline { gap: 14px; }.pipeline-column { padding: 11px; border-radius: 16px; background: #ece9e7; }.pipeline-column > header { padding: 5px 4px 12px; }.pipeline-column article { padding: 13px; border: 0; border-radius: 13px; box-shadow: 0 4px 14px rgba(62,42,45,.055); }.pipeline-column article:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(62,42,45,.08); }.progress-line { height: 4px; }.enrol-button { min-height: 31px; border-radius: 8px; }
.admission-safety { display: flex; align-items: center; gap: 11px; margin: -2px 0 15px; padding: 12px 14px; border: 1px solid color-mix(in srgb,var(--success) 22%,var(--line)); border-radius: 13px; color: #286040; background: var(--success-soft); }.admission-safety > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; border-radius: 50%; color: #fff; background: var(--success); font-weight: 900; }.admission-safety strong { font-size: 12px; }.admission-safety p { margin: 3px 0 0; font-size: 11px; line-height: 1.45; }
.stage-action { width: 100%; min-height: 31px; margin-top: 9px; border: 0; border-radius: 8px; color: var(--brand); background: var(--brand-soft); font-size: 11px; font-weight: 800; cursor: pointer; }.stage-action:hover { color: #fff; background: var(--brand); }
.pipeline-empty { min-height: 128px; display: grid; place-items: center; align-content: center; gap: 6px; margin-bottom: 8px; border: 1px dashed #d6cecb; border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.48); text-align: center; }.pipeline-empty span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; }.pipeline-empty p { margin: 0; font-size: 11px; }
.admission-register { margin-top: 14px; padding: 20px; }.admission-register article { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 14px; padding: 12px 2px; border-top: 1px solid var(--line); }.admission-register article > div { display: flex; flex-direction: column; }.admission-register article strong { font-size: 12px; }.admission-register article small { margin-top: 3px; color: var(--muted); font-size: 11px; }

.attendance-layout { gap: 17px; grid-template-columns: minmax(0,1fr) 310px; }.attendance-register,.attendance-aside .panel { padding: 20px; }.attendance-row { min-height: 60px; grid-template-columns: 30px 36px 1fr 120px 78px; }.attendance-toggle { min-height: 32px; padding: 7px 10px; border-radius: 9px; }.donut { width: 152px; height: 152px; }.donut::before { width: 112px; height: 112px; }.info-card { padding: 16px; border-radius: 14px; }

.finance-hero {
  padding: 22px;
  margin-bottom: 15px;
  border-radius: 18px;
  background: radial-gradient(circle at 88% 0,rgba(255,255,255,.14),transparent 26%),linear-gradient(110deg,#4b0718,#86132e 64%,#a5334d);
  box-shadow: 0 14px 32px rgba(84,7,25,.16);
}
.finance-hero strong { font-size: 25px; }.finance-hero span { font-size: 12px; }.finance-progress { height: 5px; border-radius: 10px; }
.transport-separation { min-height: 58px; padding: 12px 15px; border-radius: 14px; }

.notice-register { border-radius: 18px; }.notice-register article { padding: 15px 18px; }.document-icon { width: 38px; height: 44px; border-radius: 8px 8px 11px 8px; }.notice-main strong { font-size: 13px; }.notice-actions button { height: 32px; border-radius: 9px; }

.module-hero {
  position: relative;
  min-height: 116px;
  padding: 24px;
  border-radius: 19px;
  margin-bottom: 17px;
  overflow: hidden;
  background: radial-gradient(circle at 85% 0,rgba(255,255,255,.14),transparent 26%),linear-gradient(110deg,#470615,#86122e 68%,#a7344e);
  box-shadow: 0 14px 34px rgba(82,8,25,.16);
}
.module-hero::after { content: ""; position: absolute; width: 160px; height: 160px; right: -60px; bottom: -110px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.module-hero .module-icon { width: 56px; height: 56px; flex-basis: 56px; border-radius: 15px; font-size: 16px; }.module-hero h2 { font-size: 22px; }.module-hero p { margin-top: 4px; font-size: 12px; }
.module-grid { gap: 17px; grid-template-columns: minmax(0,1fr) 350px; }.records-panel,.module-tools { padding: 20px; }.records-panel article { padding: 14px 0; }.record-mark,.module-tools > button > span { width: 36px; height: 36px; border-radius: 10px; }.module-tools > button { padding: 14px 0; }
.capability-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0 0 17px; }
.capability-strip > div { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb,var(--brand) 13%,var(--line)); border-radius: 13px; background: #fff; box-shadow: 0 6px 18px rgba(45,28,31,.04); }
.capability-strip b { color: var(--brand); font-size: 12px; }.capability-strip span { color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.3; }
.register-toolbar { display: flex; gap: 8px; padding: 12px 0 4px; border-top: 1px solid var(--line); }
.register-toolbar label { flex: 1; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #fbfaf9; }
.register-toolbar input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 12px; }
.register-toolbar select { height: 38px; max-width: 145px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: #fff; font-size: 12px; }
.operational-register article > div:not(.record-actions) code { margin-bottom: 3px; color: var(--brand); font-size: 11px; }
.record-actions { flex: 0 0 auto!important; flex-direction: row!important; gap: 5px; }
.record-actions button { min-height: 29px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--brand); background: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.record-actions button:last-child { border-color: color-mix(in srgb,var(--brand) 22%,var(--line)); background: var(--brand-soft); }
.empty-register { min-height: 150px; display: grid; place-content: center; text-align: center; color: var(--muted); }.empty-register b,.empty-register span { display: block; }.empty-register b { color: var(--ink); font-size: 15px; }.empty-register span { margin-top: 5px; font-size: 12px; }
.integrity-note { margin-top: 12px; padding: 13px; border-radius: 11px; background: var(--brand-soft); }.integrity-note b,.integrity-note span { display: block; }.integrity-note b { color: var(--brand); font-size: 12px; }.integrity-note span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.print-preview-overlay { position: fixed; inset: 0; z-index: 200; overflow: auto; padding: 78px 24px 40px; background: #e9e5e2; }
.print-preview-toolbar { position: fixed; z-index: 201; inset: 0 0 auto; height: 58px; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 18px; background: #241b1d; box-shadow: 0 5px 18px rgba(0,0,0,.18); }
.print-preview-toolbar button { height: 34px; padding: 0 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; color: #fff; background: rgba(255,255,255,.09); font-size: 12px; font-weight: 800; cursor: pointer; }.print-preview-toolbar button:nth-child(2) { color: var(--brand-deep); background: var(--accent); }
.print-document { width: 210mm; min-height: 297mm; margin: auto; padding: 8mm; border: 1px solid #d5ceca; color: #241b1d; background: #fff; box-shadow: 0 18px 55px rgba(32,20,23,.18); }
.print-document > header { min-height: 31mm; display: flex; align-items: center; gap: 6mm; padding: 4mm 5mm; border: 1px solid var(--brand); border-bottom: 3px solid var(--brand); }.print-logo { width: 22mm; height: 22mm; flex: 0 0 22mm; border-radius: 4mm; background: url("/jpraxc-school-erp-logo.png") center/cover no-repeat; }.print-document header h1 { margin: 0; color: var(--brand-deep); font-size: 22px; }.print-document header p { margin: 2mm 0 0; color: #6f6567; font-size: 13px; }
.print-document-meta { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 5mm; border: 1px solid #ddd5d2; }.print-document-meta > div { min-height: 18mm; padding: 4mm; border-left: 1px solid #ddd5d2; }.print-document-meta > div:first-child { border-left: 0; }.print-document-meta span,.print-document-meta strong { display: block; }.print-document-meta span { color: #786e70; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }.print-document-meta strong { margin-top: 2mm; font-size: 13px; }
.print-document > section { min-height: 150mm; padding: 14mm 8mm; }.print-document section h2 { margin: 3mm 0 5mm; color: var(--brand-deep); font-size: 24px; }.print-document section > p { max-width: 150mm; color: #4d4446; font-size: 15px; line-height: 1.8; white-space: pre-wrap; }.print-amount { width: 70mm; margin-top: 12mm; padding: 5mm; border-radius: 3mm; background: var(--brand-soft); }.print-amount span,.print-amount strong { display: block; }.print-amount span { color: #786e70; font-size: 12px; }.print-amount strong { margin-top: 2mm; color: var(--brand); font-size: 20px; }
.print-document > footer { display: grid; grid-template-columns: 1fr 1fr; gap: 22mm; margin: 0 8mm 8mm; }.print-document footer div { display: flex; flex-direction: column; gap: 12mm; color: #6f6567; font-size: 12px; }.print-document footer i { border-top: 1px solid #51484a; }.print-document > small { display: block; padding-top: 3mm; border-top: 1px solid #ddd5d2; color: #847a7c; text-align: center; font-size: 11px; }

.setup-overlay { position: fixed; inset: 0; z-index: 220; display: grid; place-items: stretch; padding: 0; background: rgba(27,16,19,.72); backdrop-filter: blur(10px); }
.setup-shell { width: 100%; min-height: 100dvh; max-height: 100dvh; display: grid; grid-template-columns: 280px minmax(0,1fr); overflow: hidden; border-radius: 0; background: #fff; box-shadow: 0 35px 100px rgba(0,0,0,.32); }
.setup-page > .setup-form-grid, .setup-page > .appearance-gallery { max-width: 1180px; margin-inline: auto; }
.setup-mode-card { text-align: left; display: grid; gap: 7px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; cursor: pointer; font: inherit; }
.setup-mode-card b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--brand); background: var(--brand-soft); font-size: 12px; font-weight: 800; }
.setup-mode-card strong { font-size: 16px; }
.setup-mode-card small { color: var(--muted); font-size: 12px; line-height: 1.55; }
.setup-mode-card em { justify-self: start; padding: 6px 11px; border-radius: 999px; color: var(--muted); background: #f4f0ee; font-size: 11px; font-style: normal; font-weight: 800; }
.setup-mode-card.selected { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.setup-mode-card.selected b { color: #fff; background: var(--brand); }
.setup-mode-card.selected em { color: #fff; background: var(--brand); }
.setup-data-choice { display: grid; gap: 10px; padding: 16px; border: 1px dashed color-mix(in srgb,var(--brand) 36%,var(--line)); border-radius: 13px; background: color-mix(in srgb,var(--brand-soft) 42%,#fff); }
.setup-data-choice > span { color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.setup-data-choice .inline-check { display: flex; align-items: flex-start; gap: 9px; color: #574d4f; font-size: 13px; font-weight: 600; line-height: 1.5; cursor: pointer; }
.setup-data-choice .inline-check input { width: auto; min-height: 0; margin-top: 3px; flex: none; }
.setup-shell > aside { display: flex; flex-direction: column; padding: 28px 24px; color: #fff; background: radial-gradient(circle at 20% 0,color-mix(in srgb,var(--accent) 22%,transparent),transparent 26%),linear-gradient(165deg,var(--brand-deep),var(--brand)); }.setup-product-logo,.setup-welcome-logo { display: block; background: url("/jpraxc-school-erp-logo.png") center/cover no-repeat; }.setup-product-logo { width: 52px; height: 52px; margin-bottom: 12px; border-radius: 14px; }.setup-shell > aside > strong { font-size: 16px; }.setup-shell > aside > p { margin: 4px 0 24px; color: rgba(255,255,255,.62); font-size: 12px; }.setup-shell aside ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.setup-shell aside li { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 11px; color: rgba(255,255,255,.5); font-size: 12px; }.setup-shell aside li b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.08); font-size: 11px; }.setup-shell aside li.active { color: #fff; background: rgba(255,255,255,.12); }.setup-shell aside li.active b { color: var(--brand-deep); background: var(--accent); }.setup-shell aside li.complete { color: rgba(255,255,255,.8); }.setup-shell aside li.complete b { color: #154f38; background: #82dbad; }.setup-shell > aside > small { margin-top: auto; color: var(--accent); font-size: 12px; font-weight: 800; }
.setup-shell > form { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; }.setup-shell form > header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid var(--line); }.setup-shell form > header span { color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .12em; }.setup-shell form > header h2 { margin: 3px 0 0; font-size: 19px; }.setup-shell form > header button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: #f1eeec; font-size: 18px; cursor: pointer; }
.setup-page { overflow-y: auto; padding: 30px; }.setup-welcome { max-width: 590px; margin: 12px auto; text-align: center; }.setup-welcome-logo { width: 86px; height: 86px; margin: auto; border-radius: 22px; box-shadow: 0 14px 30px color-mix(in srgb,var(--brand) 20%,transparent); }.setup-welcome > span,.setup-review > span,.setup-activation > span { display: block; margin-top: 20px; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .13em; }.setup-welcome h1,.setup-review h1 { margin: 8px 0; font-size: 34px; letter-spacing: -.04em; }.setup-welcome p { max-width: 540px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.7; }.setup-welcome > div { display: flex; justify-content: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }.setup-welcome > div b { padding: 9px 11px; border-radius: 9px; color: var(--success); background: var(--success-soft); font-size: 11px; }
.setup-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.setup-form-grid label,.setup-activation label { display: flex; flex-direction: column; gap: 6px; color: #574d4f; font-size: 12px; font-weight: 700; }.setup-form-grid .full { grid-column: 1/-1; }.setup-form-grid input,.setup-form-grid textarea,.setup-form-grid select,.setup-activation input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--ink); background: #fff; font-size: 13px; }.setup-form-grid input:focus,.setup-form-grid textarea:focus,.setup-form-grid select:focus,.setup-activation input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }.setup-divider { margin: 5px 0 -2px; border-bottom: 1px solid var(--line); }.setup-divider span { position: relative; top: 5px; padding-right: 8px; color: var(--brand); background: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.setup-info { padding: 11px 13px; border-radius: 10px; color: #285678; background: #eef6fc; font-size: 12px; line-height: 1.5; }.setup-code { text-transform: uppercase; letter-spacing: .2em; font-size: 17px!important; font-weight: 900; }.setup-reference { padding: 16px; border-radius: 13px; color: #fff; background: linear-gradient(120deg,var(--brand-deep),var(--brand)); }.setup-reference span,.setup-reference strong,.setup-reference small { display: block; }.setup-reference span { color: rgba(255,255,255,.65); font-size: 11px; text-transform: uppercase; }.setup-reference strong { margin: 6px 0; color: var(--accent); font-size: 18px; }.setup-reference small { color: rgba(255,255,255,.65); font-size: 11px; }
.setup-logo-choice{padding:15px;border:1px dashed color-mix(in srgb,var(--brand) 36%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--brand-soft) 42%,#fff)}.setup-logo-choice>span{display:flex;align-items:center;justify-content:space-between;gap:10px}.setup-logo-choice>span em{padding:4px 7px;border-radius:999px;color:var(--brand);background:#fff;font-size:9px;font-style:normal;font-weight:800;text-transform:uppercase}.setup-logo-choice input[type=file]{padding:8px;background:#fff}.setup-logo-choice small{color:var(--muted);font-size:10px;line-height:1.5}.setup-logo-choice>strong{color:var(--brand);font-size:11px}
.setup-activation { max-width: 560px; margin: 15px auto; text-align: center; }.activation-lock,.review-badge { width: 68px; height: 68px; display: grid; place-items: center; margin: auto; border-radius: 22px; color: var(--brand); background: var(--brand-soft); font-size: 26px; }.setup-activation h2 { margin: 7px 0; font-size: 26px; }.setup-activation > p { color: var(--muted); font-size: 13px; line-height: 1.65; }.setup-activation label { margin-top: 23px; text-align: left; }.setup-activation label > span { color: var(--muted); font-size: 11px; font-weight: 500; }.setup-activation > div:last-child { display: grid; gap: 7px; margin-top: 18px; text-align: left; }.setup-activation > div:last-child b { padding: 9px 11px; border-radius: 9px; color: var(--success); background: var(--success-soft); font-size: 11px; }
.setup-review { max-width: 650px; margin: auto; text-align: center; }.review-badge { color: #fff; background: var(--success); }.setup-review > p { color: var(--muted); font-size: 13px; }.setup-review > div:nth-of-type(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0; text-align: left; }.setup-review article { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }.setup-review article span,.setup-review article strong,.setup-review article small { display: block; }.setup-review article span { color: var(--muted); font-size: 10px; text-transform: uppercase; }.setup-review article strong { margin: 5px 0 2px; font-size: 14px; }.setup-review article small { color: var(--muted); font-size: 11px; }
.setup-shell form > footer { min-height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; border-top: 1px solid var(--line); background: #fbfaf9; }.setup-shell form > footer > div { display: flex; align-items: center; gap: 12px; }.setup-shell form > footer span { color: var(--muted); font-size: 11px; }.setup-shell form > footer button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px; color: #fff; background: var(--brand); font-size: 12px; font-weight: 800; cursor: pointer; }.setup-shell form > footer button:disabled { opacity: .6; cursor: wait; }.setup-shell form > footer .setup-back { color: var(--brand); background: transparent; }

.modal { border-radius: 20px; box-shadow: 0 28px 80px rgba(40,20,24,.28); }.modal > header { padding: 22px 23px 18px; }.modal h2 { font-size: 20px; }.form-grid { padding: 21px 23px 23px; gap: 15px; }.form-grid input:not([type="checkbox"]),.form-grid select,.form-grid textarea { min-height: 42px; border-radius: 11px; padding: 11px 12px; }.toast { padding: 14px 17px; border-radius: 13px; font-size: 13px; }

.erp-app .sidebar {
  background:
    radial-gradient(circle at 20% 0,color-mix(in srgb,var(--accent) 18%,transparent),transparent 25%),
    linear-gradient(170deg,var(--brand-deep),var(--brand) 54%,color-mix(in srgb,var(--brand-deep) 88%,black));
  box-shadow: 12px 0 35px color-mix(in srgb,var(--brand-deep) 18%,transparent);
}
.erp-app .priority-banner,.erp-app .module-hero,.erp-app .finance-hero {
  background:
    radial-gradient(circle at 85% 0,rgba(255,255,255,.14),transparent 26%),
    linear-gradient(110deg,var(--brand-deep),var(--brand) 68%,color-mix(in srgb,var(--brand) 82%,white));
  box-shadow: 0 14px 34px color-mix(in srgb,var(--brand-deep) 19%,transparent);
}
.erp-app .btn-primary { box-shadow: 0 8px 20px color-mix(in srgb,var(--brand) 20%,transparent); }
.erp-app .top-avatar { box-shadow: 0 4px 14px color-mix(in srgb,var(--brand-deep) 24%,transparent); }
.erp-app .bar-item b { background: linear-gradient(180deg,color-mix(in srgb,var(--brand) 72%,white),var(--brand)); }

.brand-credit { margin: 3px 5px 13px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.055); }
.brand-credit span,.brand-credit strong,.brand-credit a { display: block; }
.brand-credit span { color: rgba(255,255,255,.42); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.brand-credit strong { margin-top: 4px; color: #fff; font-size: 13px; }
.brand-credit a { margin-top: 3px; color: color-mix(in srgb,var(--accent) 72%,white); font-size: 11px; text-decoration: none; overflow-wrap: anywhere; }
.brand-credit a:hover { color: #fff; }

.theme-gallery { margin-bottom: 18px; padding: 22px; }
.gallery-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.gallery-heading span { color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gallery-heading h2 { margin: 4px 0 4px; font-size: 18px; }.gallery-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.gallery-heading > b { padding: 6px 9px; border-radius: 20px; color: var(--brand); background: var(--brand-soft); font-size: 11px; white-space: nowrap; }
.theme-suggestion-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.theme-suggestion-grid > button { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: color-mix(in srgb,var(--canvas) 28%,white); text-align: left; cursor: pointer; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.theme-suggestion-grid > button:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--brand) 32%,var(--line)); box-shadow: 0 8px 22px color-mix(in srgb,var(--brand) 9%,transparent); }
.theme-suggestion-grid > button.selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.theme-suggestion-grid > button > b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: var(--brand); background: #fff; font-size: 12px; }
.theme-swatches { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); height: 25px; overflow: hidden; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 2px 7px rgba(0,0,0,.08); }.theme-swatches i { display: block; }
.suggestion-copy { min-width: 0; }.suggestion-copy strong,.suggestion-copy small,.suggestion-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.suggestion-copy strong { font-size: 12px; }.suggestion-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }.suggestion-copy em { margin-top: 6px; color: var(--brand); font-size: 11px; font-style: normal; font-weight: 700; }

.theme-studio { display: grid; grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr); gap: 18px; align-items: start; }
.theme-controls,.theme-preview-wrap,.product-identity { padding: 22px; }
.theme-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.theme-section-head h2,.product-identity h2 { margin: 0 0 5px; font-size: 17px; }
.theme-section-head p,.product-identity p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.color-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-select-control { display: block; margin-bottom: 14px; padding: 14px; border: 1px solid color-mix(in srgb,var(--brand) 18%,var(--line)); border-radius: 13px; background: var(--brand-soft); }
.theme-select-control > span { display: block; margin-bottom: 7px; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.theme-select-control select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid color-mix(in srgb,var(--brand) 28%,var(--line)); border-radius: 11px; color: var(--ink); background: #fff; font-weight: 700; cursor: pointer; }
.theme-select-control small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.school-code-control { display: block; margin-bottom: 20px; padding: 16px; border: 1px solid color-mix(in srgb,var(--brand) 22%,var(--line)); border-radius: 14px; background: linear-gradient(135deg,var(--brand-soft),#fff); }
.school-code-control > span { display: block; margin-bottom: 8px; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.school-code-control > div { display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 10px; align-items: center; }
.school-code-control input { width: 100%; height: 48px; border: 1px solid color-mix(in srgb,var(--brand) 35%,var(--line)); border-radius: 11px; background: #fff; color: var(--brand-deep); text-align: center; text-transform: uppercase; font-size: 19px; font-weight: 900; letter-spacing: .18em; outline: none; }
.school-code-control input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.school-code-control code { overflow: hidden; padding: 14px; border-radius: 10px; background: color-mix(in srgb,var(--brand-deep) 94%,#000); color: #fff; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 800; letter-spacing: .03em; }
.school-code-control small { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.color-control { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb,var(--canvas) 35%,white); }
.color-control input[type="color"] { width: 42px; height: 42px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.color-control span,.font-control span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.color-control strong { display: block; margin-top: 3px; font-size: 13px; text-transform: uppercase; }
.font-control { margin-top: 13px; }.font-control select { width: 100%; height: 44px; margin-top: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; }
.theme-assurance { display: flex; gap: 10px; margin-top: 15px; padding: 13px; border-radius: 12px; color: var(--brand-deep); background: var(--brand-soft); }
.theme-assurance b { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--brand); }
.theme-assurance strong,.theme-assurance small { display: block; }.theme-assurance strong { font-size: 12px; }.theme-assurance small { margin-top: 2px; opacity: .72; font-size: 11px; line-height: 1.4; }
.theme-preview-wrap { overflow: hidden; }.preview-label { margin-bottom: 10px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.theme-preview { min-height: 340px; display: grid; grid-template-columns: 118px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--canvas); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.preview-sidebar { padding: 16px 10px; color: #fff; background: linear-gradient(165deg,var(--brand-deep),var(--brand)); }
.preview-logo { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 9px; color: color-mix(in srgb,var(--accent) 20%,black); background: var(--accent); font-weight: 900; }
.preview-sidebar i { display: block; height: 7px; margin: 11px 2px; border-radius: 5px; background: rgba(255,255,255,.18); }.preview-sidebar i:first-of-type { background: rgba(255,255,255,.8); }
.preview-main { min-width: 0; }.preview-top { height: 42px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); }
.preview-content { padding: 15px; }.preview-content h3 { margin: 0 0 14px; font-size: 15px; }
.preview-top { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; color: var(--muted); font-size: 10px; }.preview-top b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--brand); }
.preview-content > small { color: var(--brand); font-size: 6px; letter-spacing: .08em; }.preview-content > p { margin: -8px 0 13px; color: var(--muted); font-size: 10px; }
.preview-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }.preview-stats article { min-height: 62px; padding: 10px; border-radius: 10px; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.045); }.preview-stats span,.preview-stats strong { display: block; }.preview-stats span { color: var(--muted); font-size: 6px; }.preview-stats strong { margin-top: 7px; font-size: 15px; }
.preview-panel { height: 135px; margin-top: 10px; border-radius: 11px; background: linear-gradient(110deg,var(--brand-deep),var(--brand)); position: relative; overflow: hidden; }.preview-panel::after { content: ""; position: absolute; width: 80px; height: 80px; right: -24px; bottom: -36px; border: 12px solid color-mix(in srgb,var(--accent) 40%,transparent); border-radius: 50%; }
.product-identity { margin-top: 18px; display: flex; align-items: center; gap: 15px; }.product-logo { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 7px 18px color-mix(in srgb,var(--brand) 18%,transparent); }.product-identity div { flex: 1; }.product-identity span:not(.product-logo) { color: var(--muted); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }.product-identity h2 { margin-top: 3px; }.product-identity a { display: inline-block; margin-top: 6px; color: var(--brand); font-size: 13px; font-weight: 800; text-decoration: none; }.product-identity a:hover { text-decoration: underline; }
.settings-directory { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 16px; }.settings-card { display: flex; gap: 14px; padding: 19px; }.settings-card-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px; color: var(--brand); background: var(--brand-soft); font-size: 12px; font-weight: 900; }.settings-card > div:last-child { flex: 1; }.settings-card span { color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.settings-card h2 { margin: 3px 0 5px; font-size: 14px; }.settings-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.settings-card > div > button { margin-top: 9px; padding: 0; border: 0; color: var(--brand); background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }.portal-settings > div:last-child > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }.portal-settings > div:last-child > div button { display: flex; justify-content: space-between; padding: 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; cursor: pointer; }.portal-settings > div:last-child > div button span { color: var(--ink); font-size: 10px; letter-spacing: 0; text-transform: none; }.portal-settings button b { color: var(--brand); font-size: 10px; }

@media (max-width: 1100px) {
  :root { --sidebar: 214px; }
  .page-wrap { padding: 28px 24px 60px; }
  .topbar { padding: 0 24px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: repeat(3,1fr); }
  .module-grid { grid-template-columns: 1fr 290px; }
  .theme-studio { grid-template-columns: 1fr; }
  .theme-suggestion-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  :root { --sidebar: 232px; }
  .topbar { height: 64px; padding: 0 14px; }
  .page-wrap { padding: 23px 15px 54px; }
  .page-heading { margin-bottom: 21px; }
  .page-heading h1 { font-size: 29px; }
  .page-heading p { font-size: 14px; }
  .stat-grid,.mini-stat-grid,.pipeline-summary,.module-stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 126px; }
  .attendance-aside { grid-template-columns: 1fr 1fr; }
  .module-grid { grid-template-columns: 1fr; }
  .theme-preview { min-height: 300px; }
  .theme-suggestion-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-directory { grid-template-columns: 1fr; }
  .admission-register article { grid-template-columns: 1fr auto; }.admission-register article code { grid-column: 1 / -1; }
  .capability-strip { grid-template-columns: 1fr 1fr; }
  .operational-register article { flex-wrap: wrap; }.record-actions { width: 100%; padding-left: 46px; }.record-actions button { flex: 1; }
  .print-preview-overlay { padding: 70px 10px 24px; }.print-document { width: 100%; min-height: auto; }.print-document-meta { grid-template-columns: 1fr 1fr; }.print-document-meta > div:nth-child(3) { border-left: 0; border-top: 1px solid #ddd5d2; }.print-document-meta > div:nth-child(4) { border-top: 1px solid #ddd5d2; }
  .setup-overlay { padding: 0; }.setup-shell { width: 100%; min-height: 100vh; max-height: 100vh; grid-template-columns: 1fr; border-radius: 0; }.setup-shell > aside { display: none; }.setup-page { padding: 22px 18px; }.setup-shell form > header,.setup-shell form > footer { padding-inline: 18px; }
}

@media (max-width: 480px) {
  .page-wrap { padding-inline: 12px; }
  .page-heading h1 { font-size: 26px; }
  .stat-grid,.mini-stat-grid,.pipeline-summary,.module-stat-grid { grid-template-columns: 1fr; }
  .stat-card { min-height: 120px; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .attendance-aside { grid-template-columns: 1fr; }
  .module-hero { min-height: 105px; padding: 19px; }
  .finance-hero { padding: 18px; }
  .color-control-grid { grid-template-columns: 1fr; }
  .theme-controls,.theme-preview-wrap,.product-identity { padding: 17px; }
  .theme-preview { grid-template-columns: 82px 1fr; }
  .product-identity { align-items: flex-start; }
  .theme-gallery { padding: 17px; }
  .gallery-heading { align-items: flex-start; }.gallery-heading > b { display: none; }
  .theme-suggestion-grid { grid-template-columns: 1fr; }
  .capability-strip { grid-template-columns: 1fr; }.register-toolbar { flex-direction: column; }.register-toolbar select { max-width: none; width: 100%; }.print-preview-toolbar button { padding: 0 8px; font-size: 10px; }
  .setup-form-grid { grid-template-columns: 1fr; }.setup-form-grid .full { grid-column: 1; }.setup-welcome h1,.setup-review h1 { font-size: 27px; }.setup-review > div:nth-of-type(2) { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; }
}

@media print {
  body { background: #fff; }
  .erp-app,.erp-app * { font-family: var(--ui-font), sans-serif!important; }
  .erp-app::before { display: none; }
  .panel,.stat-card,.mini-stat-grid>div,.module-stat-grid>div { border: 1px solid #bbb; box-shadow: none; }
  body:has(.print-preview-overlay) .erp-app > :not(.print-preview-overlay) { display: none!important; }
  .print-preview-overlay { position: static; overflow: visible; padding: 0; background: #fff; }
  .print-preview-toolbar { display: none!important; }
  .print-document { width: 210mm; min-height: 297mm; margin: 0; padding: 8mm; border: 0; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Serial number column in every register. */
.data-table th.row-serial-heading { width: 46px; text-align: right; }
.data-table td.row-serial { width: 46px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }

/* Document verification scanner. */
.verify-hint { margin: 0; color: var(--muted); font-size: 12px; }
.scanner-stage { position: relative; display: grid; gap: 10px; justify-items: center; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #12090b; }
.scanner-stage video { width: 100%; max-width: 520px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #000; }
.scanner-reticle { position: absolute; top: 50%; left: 50%; width: min(78%, 430px); height: 2px; transform: translate(-50%, -50%); background: rgba(255,90,90,.85); box-shadow: 0 0 12px rgba(255,60,60,.6); pointer-events: none; }
.scanner-stage p { margin: 0; color: rgba(255,255,255,.82); font-size: 12px; text-align: center; }

/* The scanner is a fixture of the code box itself: an icon seated at its
   right edge, so scanning and typing share one field. */
.verify-code-row { position: relative; display: block; }
.verify-code-row input { width: 100%; padding-right: 48px; }
.verify-scan { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; color: var(--brand); background: var(--brand-soft); cursor: pointer; }
.verify-scan svg { width: 19px; height: 19px; }
.verify-scan:hover, .verify-scan:focus-visible { background: color-mix(in srgb, var(--brand) 16%, #fff); }

/* The verification form reads as one row from the left: the code field with
   the scanner seated inside it, the verify button at its shoulder, and the
   hint on its own line beneath. */
.verification-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 10px; }
.verification-form label.verify-code { flex: 0 1 570px; }

/* Actions repeated above the register need clearance from the first row. */
.attendance-register-form .form-actions:first-of-type { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.attendance-register-form .attendance-grid { margin-top: 0; }

/* The staff register carries two extra columns for the punch times. */
.attendance-grid--staff .attendance-grid-head, .attendance-grid--staff .attendance-grid-row { grid-template-columns: minmax(0,2fr) 130px 104px 104px minmax(0,1.4fr); }
.attendance-grid--staff input[type="time"] { min-height: 34px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; font-weight: 650; }

/* Months to include in a session report: a plain grid of tick boxes, so the
   whole academic year is visible at once rather than hidden behind a dropdown. */
.report-months { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft, transparent); }
.report-months .form-note { margin: 0; }
.report-months .tick-picker-options { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 2px 10px; }

/* Import outcome: the counts first, then a line per row of the source file so
   a correction can be made where it has to be made — in the sheet. */
.import-summary { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 10px; }
.import-summary span { display: grid; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.import-summary b { color: var(--ink); font-size: 21px; font-weight: 900; }
.import-summary .is-bad b { color: #b32338; }
.import-rows { max-height: 320px; overflow-y: auto; display: grid; gap: 4px; margin-top: 8px; }
.import-row { display: grid; grid-template-columns: 62px minmax(0,1.4fr) 90px minmax(0,1.6fr); gap: 10px; align-items: center; padding: 6px 10px; border-left: 3px solid var(--line); border-radius: 7px; background: var(--canvas); font-size: 12px; }
.import-row span { color: var(--muted); overflow-wrap: anywhere; }
.import-row strong { overflow-wrap: anywhere; }
.import-row.is-success { border-left-color: #1f8a4c; } .import-row.is-info { border-left-color: var(--brand); }
.import-row.is-error { border-left-color: #b32338; } .import-row.is-error span:last-child { color: #b32338; font-weight: 700; }

/* Opening next year: what exists now, and the one control that opens it. */
.next-session-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--canvas); }
.next-session-card strong { display: block; font-size: 13px; }
.next-session-card p { max-width: 62ch; margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* The register says which biometric rules are in force before anyone marks. */
.biometric-banner { display: grid; gap: 3px; margin-bottom: 12px; padding: 10px 13px; border-left: 3px solid var(--brand); border-radius: 9px; background: var(--brand-soft); }
.biometric-banner strong { font-size: 12px; }
.biometric-banner span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.form-subheading { margin: 12px 0 0; color: var(--brand); font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }

/* A panel whose whole content is one thing to do: a sentence of context and
   the button that starts it, on one line until the width runs out. */
.panel-action-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.panel-action-row p { max-width: 66ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* One line per paper: the subject, then the day, the hours and the marks it
   carries. The head row names the columns once instead of every field doing it. */
.exam-paper-list { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--canvas); }
.exam-paper-list .form-note { margin: 0; }
.exam-paper-list { overflow-x: auto; }
.exam-paper-head, .exam-paper-row { display: grid; grid-template-columns: minmax(84px,1.5fr) minmax(112px,1.4fr) minmax(74px,.95fr) minmax(74px,.95fr) minmax(84px,1.2fr) minmax(66px,.85fr) minmax(66px,.85fr); gap: 8px; align-items: center; min-width: 0; }
.exam-paper-head span, .exam-paper-row > * { min-width: 0; }
.exam-paper-head span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.exam-paper-row strong { font-size: 13px; overflow-wrap: anywhere; }
.exam-paper-row input { width: 100%; }
@media (max-width: 900px) { .exam-paper-head { display: none; }
  .exam-paper-row { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 9px 0; border-top: 1px solid var(--line); }
  .exam-paper-row strong { grid-column: 1/-1; } }

/* Marks entry: candidates down, papers across. The grid scrolls sideways when
   a class studies more subjects than the panel is wide. */
.marks-entry-grid { overflow-x: auto; display: grid; gap: 4px; margin-bottom: 14px; }
.marks-entry-head, .marks-entry-row { display: grid; grid-template-columns: minmax(150px,1.2fr) minmax(150px,1.4fr) repeat(var(--marks-subjects,1), minmax(96px,1fr)); gap: 8px; align-items: center; min-width: max-content; }
.marks-entry-head { position: sticky; top: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); background: var(--surface,#fff); }
.marks-entry-head span { display: grid; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.marks-entry-head small { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.marks-entry-row { padding: 5px 0; border-bottom: 1px solid var(--line); }
.marks-entry-row > span:first-child { display: grid; }
.marks-entry-row strong { font-size: 13px; }
.marks-entry-row small { color: var(--muted); font-size: 11px; }
.marks-entry-cell { display: grid; }
.marks-entry-cell input, .marks-entry-cell select { width: 100%; min-width: 0; }

/* A senior secondary row carries two more fields than a junior one. */
.exam-paper-head[data-senior="true"], .exam-paper-list:has([data-senior="true"]) .exam-paper-row {
  grid-template-columns: minmax(76px,1.3fr) minmax(104px,1.2fr) minmax(66px,.85fr) minmax(66px,.85fr) minmax(76px,1fr) repeat(4, minmax(58px,.75fr));
}

/* Theory beside practical, in one subject column. */
.marks-entry-cell--split { grid-template-columns: 1fr 1fr; display: grid; gap: 4px; }

/* The language toggle: one letterform, either script. */
.lang-button span { font-size: 15px; font-weight: 800; line-height: 1; }

/* The cloud-push card: what to program into the machine, and today's pulse. */
.biometric-sync { margin-bottom: 14px; padding: 12px 14px; border-left: 3px solid var(--brand); border-radius: 10px; background: var(--brand-soft); }
.biometric-sync strong { font-size: 13px; }
.biometric-sync p { margin: 4px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.biometric-sync-device { display: inline-flex; gap: 6px; align-items: baseline; margin: 2px 12px 2px 0; font-size: 12px; }
.biometric-sync-device b { font-size: 12px; }

/* v3.1.7 — JPRAXC School ERP product marks use contain; school/student photos and
   uploaded organisation logos intentionally keep their existing crop rules. */
.product-brand img,.portal-brand img,.portal-footer img,.portal-login-brand img,.setup-product-logo,.setup-welcome-logo,.print-logo{object-fit:contain;object-position:center;border:0;background-color:transparent;background-size:contain;box-shadow:none}
.product-brand img{width:34px;height:34px;border-radius:0}
.portal-brand img,.portal-footer img{width:46px;height:46px;border-radius:0}
.portal-login-brand img{width:56px;height:56px;border-radius:0;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))}
.setup-product-logo,.setup-welcome-logo{border-radius:0}
.print-logo{border-radius:0}