/* Account palettes use application tokens; school gender and danger keep their meanings. */
html[data-theme] .sidebar { background: radial-gradient(ellipse at 100% 0%,var(--navy-2),transparent 60%),linear-gradient(170deg,var(--navy),var(--navy-2)); }
html[data-theme] .nav-item.active { background: var(--blue); box-shadow: 0 6px 18px #0002; color: white; }
html[data-theme] .nav-item:hover:not(.active) { background: #ffffff12; }
html[data-theme] .nav-group-title { color: #dfeaf3; }
html[data-theme] .button-primary { background: var(--blue); border-color: var(--blue); }
html[data-theme] .button-primary:hover { background: var(--blue-2); }
html[data-theme] .overview-hero { background: linear-gradient(120deg,var(--navy),var(--navy-2)); }
html[data-theme] .school-card-boys, html[data-theme] .school-tone-boys { --blue:#245ca7; --blue-2:#3475bf; --blue-soft:#eaf0f9; }
.theme-banner { display:flex; justify-content:space-between; align-items:center; gap:22px; padding:28px; border-radius:22px; background:linear-gradient(120deg,var(--navy),var(--navy-2)); color:#fff; margin-bottom:22px; box-shadow:var(--shadow); }
.theme-banner h2 { font-size:26px; margin:5px 0; }
.theme-banner p { color:#f1f5fc; font-size:14px; margin:0; }
.theme-banner .eyebrow { color:#e1eaf9; }
.theme-banner-mark { font-size:76px; opacity:.75; line-height:1; }
.theme-choice-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:14px; }
.theme-choice { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; border:2px solid var(--line); border-radius:17px; padding:18px 13px; min-height:170px; background:var(--surface); transition:transform .18s,border-color .18s,box-shadow .18s; }
.theme-choice:has(input:checked) { border-color:var(--blue); background:var(--blue-soft); box-shadow:0 5px 18px #14203812; }
.theme-choice:hover { transform:translateY(-3px); border-color:var(--blue); }
.theme-choice input { position:absolute; inset-inline-start:12px; top:12px; width:18px; height:18px; accent-color:var(--blue); }
.theme-choice b { color:var(--ink); font-size:15px; }
.theme-choice small { color:#59647b; font-size:12px; }
.theme-swatch { display:flex; height:60px; width:115px; border-radius:17px; overflow:hidden; margin:9px 0 4px; transform:rotate(-8deg); box-shadow:0 4px 10px #0002; }
.theme-swatch i { flex:1; background:var(--swatch-a); }
.theme-swatch i:nth-child(2) { background:var(--swatch-b); }
.theme-swatch i:nth-child(3) { background:var(--swatch-c); }
.theme-inherit-symbol { font-size:45px; color:var(--blue); margin:9px 0 4px; height:60px; }
.overview-complex-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr)); gap:20px; perspective:1400px; }
.overview-complex-card { --complex-accent:var(--blue); position:relative; min-width:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--complex-accent) 22%,var(--line)); border-radius:23px; background:linear-gradient(145deg,#fff 0%,color-mix(in srgb,var(--blue-soft) 48%,#fff) 100%); box-shadow:0 18px 35px rgba(20,32,56,.10),inset 0 1px 0 rgba(255,255,255,.9); transform-style:preserve-3d; transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease; }
.overview-complex-card::before { content:""; position:absolute; width:170px; height:170px; inset-inline-end:-70px; top:-92px; border-radius:50%; background:radial-gradient(circle,rgba(36,92,167,.18),transparent 68%); pointer-events:none; }
.overview-complex-card::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(122deg,rgba(255,255,255,.58),transparent 30%,transparent 72%,rgba(36,92,167,.06)); pointer-events:none; }
.overview-complex-card:hover,.overview-complex-card[open] { border-color:color-mix(in srgb,var(--complex-accent) 48%,var(--line)); box-shadow:0 27px 46px rgba(20,32,56,.16),0 7px 14px rgba(20,32,56,.07),inset 0 1px 0 #fff; transform:translateY(-6px) rotateX(1.3deg); }
.overview-complex-summary { position:relative; z-index:1; display:block; padding:22px; cursor:pointer; list-style:none; }
.overview-complex-summary::-webkit-details-marker { display:none; }
.overview-complex-summary:focus-visible { outline:3px solid color-mix(in srgb,var(--complex-accent) 43%,#fff); outline-offset:-4px; }
.overview-complex-top { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.overview-complex-identity { display:flex; align-items:center; gap:13px; min-width:0; }
.overview-complex-symbol { display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,var(--blue-2),var(--blue)); width:48px; height:48px; border:1px solid rgba(255,255,255,.55); border-radius:16px; box-shadow:0 9px 16px rgba(36,92,167,.24),inset 0 1px 0 rgba(255,255,255,.35); font-size:26px; flex-shrink:0; transform:translateZ(12px); }
.overview-complex-top h3 { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:5px 0; color:var(--navy); font-size:18px; }
.overview-complex-ring { --ring-color:var(--complex-accent); position:relative; display:grid; place-items:center; width:94px; height:94px; flex:0 0 auto; border-radius:50%; background:conic-gradient(var(--ring-color) var(--overview-progress-angle),rgba(36,92,167,.12) 0deg); box-shadow:0 12px 22px rgba(26,46,89,.15),inset 0 1px 1px rgba(255,255,255,.66); transform:translateZ(18px); }
.overview-complex-ring::before { content:""; position:absolute; inset:8px; border-radius:inherit; background:linear-gradient(145deg,#fff,#eef3fb); box-shadow:inset 0 2px 6px rgba(31,52,93,.1); }
.overview-complex-ring > div { position:relative; z-index:1; display:grid; gap:1px; text-align:center; }
.overview-complex-ring strong { color:var(--navy); font-size:16px; line-height:1.2; font-variant-numeric:tabular-nums; }
.overview-complex-ring span { color:var(--muted); font-size:9px; }
.overview-complex-ring.is-complete { --ring-color:var(--green); }
.overview-complex-ring.is-pending { --ring-color:var(--amber); }
.overview-complex-ring.is-empty { --ring-color:#a5adbd; }
.overview-complex-counts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:18px 0; }
.overview-complex-counts .complex-count-badge { position:static; background:var(--blue-soft); color:var(--blue); padding:5px 10px; font-size:12px; border-radius:9px; }
.overview-complex-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; color:#626c83; font-size:12px; }
.overview-complex-foot small { color:#626c83; font-size:11px; }
.overview-complex-disclosure { display:flex; align-items:center; justify-content:space-between; margin-top:15px; padding-top:12px; border-top:1px solid color-mix(in srgb,var(--complex-accent) 14%,var(--line)); color:var(--blue); font-size:11px; font-weight:700; }
.overview-complex-disclosure b { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#fff; background:var(--blue); line-height:1; transition:transform .2s ease; }
.overview-complex-card[open] .overview-complex-disclosure b { transform:rotate(180deg); }
.overview-complex-details { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:0 22px 22px; animation:complexDetailIn .25s ease both; }
.overview-complex-details > div { min-width:0; padding:11px 12px; border:1px solid rgba(36,92,167,.11); border-radius:12px; background:rgba(255,255,255,.70); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
.overview-complex-details span,.overview-complex-details b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.overview-complex-details span { margin-bottom:4px; color:var(--muted); font-size:10px; }
.overview-complex-details b { color:var(--navy); font-size:11px; }
.overview-complex-details b.is-complete { color:var(--green); }.overview-complex-details b.is-pending { color:var(--amber); }.overview-complex-details b.is-none { color:var(--muted); }
@keyframes complexDetailIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.job-capability-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; }
.job-capability-grid .answer-option { align-items:start; padding:13px; border:1px solid var(--line); border-radius:12px; }
.job-title-card { border:1px solid var(--line); border-radius:16px; padding:20px; background:var(--surface); }
.job-title-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:7px; font-size:12px; font-weight:600; background:var(--blue-soft); color:var(--blue); }
.date-choice-control { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.date-choice-control select { min-width:70px; flex:1; }
@media(max-width:650px) { .theme-banner { padding:20px; } .theme-banner-mark { font-size:45px; } .overview-complex-summary { padding:17px; } .overview-complex-top { align-items:start; gap:10px; } .overview-complex-top h3 { font-size:16px; } .overview-complex-ring { width:78px; height:78px; } .overview-complex-ring::before { inset:7px; } .overview-complex-ring strong { font-size:13px; } .overview-complex-foot { flex-direction:column; align-items:start; } .overview-complex-details { grid-template-columns:1fr; padding:0 17px 17px; } .theme-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .theme-choice,.overview-complex-card,.overview-complex-disclosure b { transition:none; } .overview-complex-card:hover,.overview-complex-card[open] { transform:none; } .overview-complex-details { animation:none; } }
@media print { .theme-banner,.theme-choice-grid { display:none; } .overview-complex-card { box-shadow:none; break-inside:avoid; } }

.sidebar-personal-actions { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:4px; }
.sidebar-personal-actions .logout-button { font-size:11px; gap:5px; padding-inline:8px; }
.sidebar-personal-actions #appearance-button { color:#e2eefb; background:#ffffff0b; border-radius:8px; }

.qiyam-date-choice { display:flex; flex-wrap:wrap; gap:8px; align-items:start; }
.qiyam-date-choice-field { flex:1 1 75px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.qiyam-date-choice-field span { font-size:11px; color:var(--muted); }
.qiyam-date-choice-field select { min-width:0; width:100%; padding-inline:8px; }
.page-heading { position:relative; overflow:hidden; padding:24px; border:1px solid color-mix(in srgb,var(--blue) 15%,var(--line)); border-radius:21px; background:linear-gradient(135deg,rgba(255,255,255,.98),color-mix(in srgb,var(--blue-soft) 45%,#fff)); box-shadow:0 14px 30px rgba(22,38,67,.06),inset 0 1px 0 #fff; }
.page-heading::after { content:""; position:absolute; inset-inline-end:-55px; top:-68px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle,rgba(36,92,167,.16),transparent 67%); pointer-events:none; }
.page-heading > * { position:relative; z-index:1; }
.page-heading h1 { letter-spacing:-.025em; }
.panel { border-color:color-mix(in srgb,var(--navy) 9%,var(--line)); box-shadow:0 9px 24px rgba(22,38,67,.055),inset 0 1px 0 rgba(255,255,255,.92); }
.table-wrap { border:1px solid color-mix(in srgb,var(--navy) 9%,var(--line)); border-radius:15px; background:rgba(255,255,255,.76); box-shadow:inset 0 1px 0 #fff; }
.table-wrap thead th { background:linear-gradient(180deg,#fbfdff,#f0f5fb); color:var(--navy); }
.member-directory-shell { display:grid; gap:16px; }
.member-directory-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.member-directory-tab { display:grid; grid-template-columns:1fr auto; grid-template-areas:"label count" "hint hint"; gap:3px 10px; min-width:0; padding:14px 15px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:linear-gradient(145deg,#fff,#f7faff); text-align:start; cursor:pointer; box-shadow:0 5px 13px rgba(18,37,67,.035); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.member-directory-tab:hover { border-color:color-mix(in srgb,var(--blue) 46%,var(--line)); box-shadow:0 11px 20px rgba(22,38,67,.09); transform:translateY(-2px); }
.member-directory-tab.active { color:#fff; border-color:var(--blue); background:linear-gradient(135deg,var(--blue),var(--blue-2)); box-shadow:0 12px 22px color-mix(in srgb,var(--blue) 27%,transparent); }
.member-directory-tab.guardian { border-color:color-mix(in srgb,#bf5a89 25%,var(--line)); background:linear-gradient(145deg,#fff,#fff4f8); }
.member-directory-tab.guardian:hover { border-color:#bf5a89; }
.member-directory-tab span { grid-area:label; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; font-size:14px; }
.member-directory-tab b { grid-area:count; align-self:center; display:grid; place-items:center; min-width:28px; height:28px; border-radius:10px; color:var(--blue); background:var(--blue-soft); font-size:13px; font-variant-numeric:tabular-nums; }
.member-directory-tab.active b { color:var(--blue); background:#fff; }
.member-directory-tab.guardian b { color:#a83e70; background:#ffe5f0; }
.member-directory-tab small { grid-area:hint; min-height:29px; color:var(--muted); font-size:10px; line-height:1.45; }
.member-directory-tab.active small { color:#edf5ff; }
.member-directory-heading { display:flex; justify-content:space-between; align-items:end; gap:18px; padding:4px 4px 0; }
.member-directory-heading h2 { margin:4px 0; color:var(--navy); font-size:21px; }
.member-directory-heading p { margin:0; color:var(--muted); font-size:12px; }
.member-directory-count { flex:0 0 auto; padding:7px 10px; border-radius:10px; color:var(--blue); background:var(--blue-soft); font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
.member-directory-search { display:flex; align-items:end; justify-content:space-between; gap:12px; padding:13px 15px; border:1px solid color-mix(in srgb,var(--blue) 12%,var(--line)); border-radius:15px; background:rgba(255,255,255,.68); }
.member-directory-search label { display:block; min-width:120px; color:var(--navy); font-size:12px; font-weight:800; }
.member-directory-search > div { display:flex; align-items:center; justify-content:end; flex:1; gap:7px; }
.member-directory-search input { max-width:360px; }
.member-directory-panel { overflow:hidden; }
.member-job-title { display:inline-flex; max-width:180px; align-items:center; gap:5px; padding:5px 8px; border:1px dashed color-mix(in srgb,var(--muted) 30%,var(--line)); border-radius:8px; color:var(--muted); font-size:11px; }
.member-job-title.assigned { border-style:solid; border-color:color-mix(in srgb,var(--blue) 28%,var(--line)); color:var(--blue); background:var(--blue-soft); font-weight:750; }
.field .answer-option > input[type="checkbox"],.field .answer-option > input[type="radio"] { width:16px; min-width:16px; height:16px; min-height:16px; margin:0; padding:0; flex:0 0 16px; accent-color:var(--blue); }
.member-role-selection { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:6px; max-height:170px; padding:7px; }
.member-role-selection .answer-option { display:grid; grid-template-columns:16px minmax(0,1fr); align-items:center; gap:7px; min-height:38px; padding:7px 8px; border-radius:8px; color:#4e5870; font-size:10.5px; line-height:1.32; }
.member-role-selection .answer-option:has(input:checked) { border-color:color-mix(in srgb,var(--blue) 55%,var(--line)); color:var(--blue); background:var(--blue-soft); font-weight:750; box-shadow:inset 0 0 0 1px rgba(36,92,167,.06); }
.member-role-selection .answer-option:hover { border-color:color-mix(in srgb,var(--blue) 38%,var(--line)); background:#fbfdff; }
.job-title-capability-group { margin:9px 0; border:1px solid color-mix(in srgb,var(--blue) 15%,var(--line)); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.72); }
.job-title-capability-group[open] { border-color:color-mix(in srgb,var(--blue) 34%,var(--line)); box-shadow:0 7px 16px rgba(22,38,67,.05); }
.job-title-capability-group summary { display:grid; grid-template-columns:minmax(0,1fr) auto 18px; align-items:center; gap:10px; padding:11px 12px; color:var(--navy); cursor:pointer; list-style:none; font-size:13px; font-weight:800; }
.job-title-capability-group summary::-webkit-details-marker { display:none; }
.job-title-capability-group summary:focus-visible { outline:3px solid color-mix(in srgb,var(--blue) 40%,#fff); outline-offset:-3px; }
.job-title-capability-group summary b { padding:3px 7px; border-radius:999px; color:var(--muted); background:#f0f4f8; font-size:10px; white-space:nowrap; font-weight:700; }
.job-title-capability-group.has-selection summary b { color:var(--blue); background:var(--blue-soft); }
.job-title-capability-group summary i { display:grid; place-items:center; width:18px; height:18px; border-radius:6px; color:var(--blue); background:var(--blue-soft); font-style:normal; line-height:1; transition:transform .2s ease; }
.job-title-capability-group[open] summary i { transform:rotate(180deg); }
.job-title-capability-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:6px; padding:0 10px 10px; }
.job-capability-option { display:flex; align-items:center; gap:7px; min-width:0; min-height:37px; padding:7px 8px; border:1px solid rgba(36,92,167,.11); border-radius:9px; color:var(--ink); background:#fff; cursor:pointer; font-size:11px; line-height:1.35; }
.job-capability-option:has(input:checked) { border-color:var(--blue); color:var(--blue); background:var(--blue-soft); font-weight:700; }
.job-capability-option input { flex:0 0 auto; width:15px; height:15px; accent-color:var(--blue); }
.job-capability-option span { overflow:hidden; text-overflow:ellipsis; }
@media(max-width:850px) { .member-directory-tabs { grid-template-columns:1fr; } .member-directory-tab small { min-height:auto; } .member-directory-heading { align-items:start; flex-direction:column; gap:8px; } .member-directory-search { align-items:stretch; flex-direction:column; } .member-directory-search > div { justify-content:stretch; flex-wrap:wrap; } .member-directory-search input { flex:1 1 190px; max-width:none; } }
@media(max-width:650px) { .page-heading { padding:19px; border-radius:17px; } .member-directory-tabs { gap:7px; } .member-directory-tab { padding:11px 12px; } .member-directory-heading h2 { font-size:18px; } .member-role-selection { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:164px; } .member-role-selection .answer-option { min-height:36px; padding:6px 7px; font-size:10px; } .job-title-capability-grid { grid-template-columns:1fr; } .job-title-capability-group summary { padding:10px; } .member-job-title { max-width:130px; } }