/* St. Anthony Commandery, #435 · Records system
   Every value here is taken from the screen designs on the Claude Design canvas, so the live
   screens look the same as the designs. Colours: red #B3141A, gold #F5C400, near-black #17171C.
   Accessibility: WCAG 2.2 AA contrast, 44px touch targets, visible focus, statuses always in words. */
:root {
  --red: #B3141A; --red-2: #A3121A; --red-dark: #7A0D13; --gold: #F5C400;
  --ink: #17171C; --ink-2: #33343B; --ink-3: #4A4B53; --muted: #55565F; --line: #DCDCE2; --line-2: #ECECF1; --line-3: #E4E4EA;
  --bg: #EEEEF1; --field: #7C7F8C; --soft: #F6F6F9; --soft-2: #F0F0F4;
  --ok-t: #0F5132; --ok-b: #E6F4EC; --ok-d: #1B7F4A;
  --warn-t: #6B4E00; --warn-b: #FFF4D1; --warn-d: #A87900;
  --bad-t: #7A1A12; --bad-b: #FDECEA; --bad-d: #B42318;
  --info-t: #1D3F8A; --info-b: #E8EEFB; --info-d: #2B59C3;
  --glass: rgba(255,255,255,0.72); --glass-border: 1px solid rgba(255,255,255,0.95);
  --dark: #141416;
  --btn-red: linear-gradient(180deg, #C4161D, #A3121A);
  --ink-900: #141416;
  --sidebar-bg: var(--ink-900); /* one flat colour for the sidebar, the icon rail and the mobile drawer */
  /* Light and dark mode: these are redefined under [data-theme="dark"] near the end of this file */
  --focus: #1D5BD8; --ctl-bg: #FFFFFF; --meter-off: #DCDCE2; --btn-bg: #FFFFFF; --btn-hover: #FAFAFC;
  --tint-0: #FCE3E4; --tint-1: #FFF1C2; --tint-2: #E6F4EC; --tint-3: #E8EEFB; --tint-4: #ECECF1;
  /* Status pills [text, background, dot]: the colour always comes with the word */
  --pk-green-t: #0F5132; --pk-green-b: #E6F4EC; --pk-green-d: #1B7F4A;
  --pk-blue-t: #1D3F8A; --pk-blue-b: #E8EEFB; --pk-blue-d: #2B59C3;
  --pk-red-t: #7A1A12; --pk-red-b: #FDECEA; --pk-red-d: #B42318;
  --pk-orange-t: #7A3A00; --pk-orange-b: #FFF0E0; --pk-orange-d: #C2560A;
  --pk-grey-t: #33343B; --pk-grey-b: #ECECF1; --pk-grey-d: #6B6C75;
  --pk-gold-t: #6B4E00; --pk-gold-b: #FFF4D1; --pk-gold-d: #A87900;
  --pk-red2-t: #9B1C14; --pk-red2-b: #FDECEA; --pk-red2-d: #C0281C;
  --pk-orange2-t: #9A4A06; --pk-orange2-b: #FFF0DC; --pk-orange2-d: #D9730D;
  --pk-gold2-t: #6E5200; --pk-gold2-b: #FFF4D1; --pk-gold2-d: #C99A06;
  --pk-none-d: #C9CAD2;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--red-2); }
a:hover { color: var(--red-dark); }
input:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, label:focus-within > input[type=file] + span, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boot { padding: 40px; color: var(--muted); }
h1, h2, h3 { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Shared controls ---------- */
.btn { height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--btn-bg); border: 1px solid var(--field); border-radius: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { color: var(--ink); background: var(--btn-hover); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-red { font-weight: 700; color: #FFFFFF; background: var(--btn-red); border: 0; box-shadow: 0 8px 20px rgba(179,20,26,0.25); }
.btn-red:hover { color: #FFFFFF; background: linear-gradient(180deg, #B3141A, #8E0F16); }
.btn-dark { font-weight: 700; color: #FFFFFF; background: var(--ink); border: 0; }
.btn-dark:hover { color: #FFFFFF; background: #000; }
.btn-danger { font-weight: 700; color: #FFFFFF; background: var(--bad-d); border: 0; box-shadow: 0 8px 20px rgba(180,35,24,0.25); }
.btn-danger:hover { color: #FFFFFF; background: #8F1C13; }
.btn-light { font-weight: 700; color: #A3121A; border: 1px solid var(--line); }
.btn-text { height: auto; padding: 10px 0; border: 0; background: transparent; font-weight: 600; color: var(--red-2); }
.btn-text:hover { background: transparent; }
.btn-sm { height: 36px; padding: 0 12px; font-size: 13px; font-weight: 700; border-radius: 10px; }
.btn-icon { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 12px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.input { width: 100%; height: 48px; padding: 0 14px; font: inherit; font-size: 15px; color: var(--ink); background: var(--soft); border: 1px solid var(--field); border-radius: 12px; }
textarea.input { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; }
select.input { padding: 0 12px; }
.input[aria-invalid="true"] { border: 2px solid var(--bad-d); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.card { padding: 24px; border-radius: 24px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--glass-border); }
.card-dark { color: #FFFFFF; background: #141416; border: 0; }
.muted { color: var(--muted); }
.empty { margin: 0; padding: 40px 20px; text-align: center; font-size: 15px; color: var(--muted); }
.spin-note { padding: 24px; color: var(--muted); }

/* ---------- Sign-in, forgot and reset ----------
   Matches the approved sign-in screenshot (reference viewport 1469 × 1008): a rounded near-white
   shell on a soft pastel page, the form on the left (45%) and a dark promotional panel on the
   right (55%). Field borders are darkened slightly from the mock-up to keep 3:1 contrast. */
.auth-page {
  --page-bg: #F1F0F2; --surface: #FAF9FA; --text-primary: #19181D; --text-secondary: #666571;
  --brand-red: #BD101A; --brand-red-dark: #A50D16; --brand-gold: #FFD000;
  --panel-muted: #D0C9CB; --field-border: #8E8D99; --field-bg: #F7F6F8;
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 48px 28px;
  background: radial-gradient(900px 600px at 0% 0%, #F3E4E7, transparent 70%), radial-gradient(800px 560px at 100% 100%, #F5EFD9, transparent 70%), var(--page-bg);
}
.auth-shell { width: 100%; max-width: 1680px; min-height: min(914px, calc(100dvh - 96px)); display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 10fr); gap: 28px; padding: 28px; border-radius: 38px; border: 1px solid rgba(255,255,255,0.9); background: radial-gradient(700px 520px at 0% 0%, rgba(243,214,220,0.55), transparent 70%), var(--surface); box-shadow: 0 34px 90px rgba(40,30,40,0.12), 0 2px 6px rgba(40,30,40,0.04); }
.auth-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 36px 24px 36px 36px; }
.auth-body { display: flex; flex-direction: column; gap: 36px; max-width: 520px; }
.auth-brand-row { display: flex; align-items: center; gap: 19px; }
.auth-seal { width: 83px; height: 83px; flex: none; border-radius: 23px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(40,30,40,0.10), 0 1px 3px rgba(40,30,40,0.06); display: flex; align-items: center; justify-content: center; padding: 11px; }
.auth-seal img { width: 100%; height: 100%; object-fit: contain; }
.auth-brand-row b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: var(--text-primary); }
.auth-brand-row span span { display: block; margin-top: 6px; font-size: 16.5px; color: var(--text-secondary); }
.auth-head { display: flex; flex-direction: column; gap: 10px; }
.auth-head h1 { font-size: 47px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: var(--text-primary); }
.auth-head p { margin: 0; max-width: 520px; font-size: 19px; line-height: 1.45; color: var(--text-secondary); }
.kicker { font-size: 13px; font-weight: 700; color: var(--red-2); letter-spacing: 0.06em; text-transform: uppercase; }
.auth-form { display: flex; flex-direction: column; gap: 22px; max-width: 505px; }
.auth-field { display: flex; flex-direction: column; gap: 10px; }
.auth-field > label { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.icon-input { position: relative; display: flex; }
.icon-input > svg { position: absolute; left: 20px; top: 20px; width: 22px; height: 22px; stroke: #4A4953; pointer-events: none; }
.icon-input input { flex: 1; min-width: 0; height: 62px; padding: 0 20px 0 58px; font: inherit; font-size: 17px; color: var(--text-primary); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 16px; transition: border-color 150ms ease-out, box-shadow 150ms ease-out, background 150ms ease-out; }
.icon-input.no-icon input { padding-left: 20px; }
.icon-input input.has-toggle { padding-right: 92px; }
.icon-input input:hover { border-color: #5E5D69; }
.icon-input input:focus { background: #FFFFFF; }
.icon-input input:focus-visible { outline: none; border-color: var(--brand-red); box-shadow: 0 0 0 4px rgba(189,16,26,0.16); }
.icon-input input[aria-invalid="true"] { border-color: var(--bad-d); box-shadow: 0 0 0 1px var(--bad-d); }
.icon-input input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 1px var(--bad-d), 0 0 0 5px rgba(180,35,24,0.16); }
.pw-toggle { position: absolute; right: 8px; top: 9px; height: 44px; min-width: 64px; padding: 0 14px; font: inherit; font-size: 17px; font-weight: 600; color: var(--brand-red); background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.pw-toggle:hover { background: rgba(189,16,26,0.07); }
.check-row { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 17px; color: #3B3A42; cursor: pointer; }
.check-row input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand-red); flex: none; }
.auth-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 4px; }
.auth-row a { font-size: 17.5px; font-weight: 600; padding: 10px 0; color: var(--brand-red); text-decoration: underline; text-underline-offset: 3px; }
.auth-row a:hover { color: var(--brand-red-dark); }
.btn-auth { height: 64px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; font: inherit; font-size: 18px; font-weight: 700; color: #FFFFFF; text-decoration: none; background: linear-gradient(180deg, #C8141E, #A80E17); border: 0; border-radius: 17px; box-shadow: 0 14px 30px rgba(189,16,26,0.28); cursor: pointer; transition: background 160ms ease-out, box-shadow 160ms ease-out, transform 100ms ease-out; }
.btn-auth:hover { color: #FFFFFF; }
.btn-auth:hover:not([disabled]) { background: linear-gradient(180deg, #B5111A, #920C14); box-shadow: 0 16px 34px rgba(189,16,26,0.34); }
.btn-auth:active:not([disabled]) { transform: translateY(1px); box-shadow: 0 8px 18px rgba(189,16,26,0.26); }
.btn-auth svg { width: 20px; height: 20px; }
.btn-auth[disabled] { color: #4A4B53; background: #DCDCE2; box-shadow: none; cursor: not-allowed; }
.btn-auth .spinner { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.45); border-top-color: #FFFFFF; animation: spin 0.8s linear infinite; }
.btn-auth.busy { color: #FFFFFF; background: linear-gradient(180deg, #C8141E, #A80E17); opacity: 0.85; cursor: progress; }
.btn-auth.busy .spinner { display: block; }
.btn-auth.busy svg { display: none; }
.auth-fine { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.auth-fine .line { display: block; }
#login-fine { margin-top: 10px; }
.auth-copyright { margin-top: 8px; font-size: 16px; }
.auth-copyright a { color: var(--brand-red); text-underline-offset: 3px; }
.auth-back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 10px 0; font-size: 16px; font-weight: 600; }
.auth-back svg { width: 18px; height: 18px; }
.auth-alert { padding: 14px 16px; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--bad-t); background: var(--bad-b); border: 1px solid #E59A92; }
.auth-badge { width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center; }
.auth-badge svg { width: 28px; height: 28px; }
.auth-note { padding: 16px; background: rgba(246,246,249,0.9); border: 1px solid var(--line-3); border-radius: 16px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.rules li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.rules li.met { color: var(--ok-d); }
.rules svg { width: 18px; height: 18px; flex: none; }
.meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.meter span { height: 6px; border-radius: 3px; background: #DCDCE2; }
.field-err, .field-warn { display: flex; align-items: flex-start; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.field-err { color: var(--bad-d); }
.field-warn { color: #6B4E00; }
.field-err svg, .field-warn svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }

/* Promotional panel */
.auth-aside { position: relative; isolation: isolate; min-width: 0; overflow: hidden; border-radius: 28px; padding: 60px 62px 56px; display: flex; flex-direction: column; color: #FFFFFF;
  background: #141416; }
.aside-lines { position: absolute; top: 0; right: 0; width: 300px; height: 260px; z-index: -1; pointer-events: none; }
.aside-emblem { position: relative; display: flex; justify-content: center; }
.aside-emblem span { width: 278px; height: 278px; border-radius: 66px; background: #EFEEEF; box-shadow: 0 0 0 14px rgba(120,22,30,0.38), 0 30px 80px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; }
.aside-emblem img { width: 220px; height: auto; aspect-ratio: 256 / 237; object-fit: contain; }
.aside-emblem.small span { width: 200px; height: 200px; border-radius: 48px; box-shadow: 0 0 0 10px rgba(120,22,30,0.38), 0 24px 60px rgba(0,0,0,0.35); }
.aside-emblem.small img { width: 158px; }
.aside-copy { position: relative; display: flex; flex-direction: column; gap: 14px; margin-top: 52px; margin-bottom: 48px; }
.aside-copy .eyebrow { font-size: 16.5px; font-weight: 700; color: var(--brand-gold); letter-spacing: 0.06em; text-transform: uppercase; }
.aside-copy h2 { max-width: 560px; font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
.aside-copy p { margin: 0; max-width: 570px; font-size: 18.5px; line-height: 1.5; color: var(--panel-muted); }
.aside-glass { position: relative; margin-top: auto; padding: 16px; background: rgba(255,255,255,0.07); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.16); border-radius: 24px; }
.aside-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 26px 28px; }
.aside-features div { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.aside-features svg, .aside-tips svg { width: 22px; height: 22px; stroke: var(--brand-gold); flex: none; }
.aside-features span { font-size: 16.5px; font-weight: 600; line-height: 1.4; color: #FFFFFF; }
.aside-steps { margin: 0; padding: 12px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.aside-steps li { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; border: 1px solid transparent; }
.aside-steps li[aria-current="step"] { background: rgba(255,255,255,0.12); border-color: rgba(255,208,0,0.6); }
.aside-steps .n { width: 32px; height: 32px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #FFFFFF; background: rgba(255,255,255,0.12); }
.aside-steps .n.on { color: var(--ink); background: var(--brand-gold); }
.aside-steps b { display: block; font-size: 16px; font-weight: 700; }
.aside-steps small { display: block; margin-top: 2px; font-size: 14px; color: rgba(255,255,255,0.82); }
.aside-tips { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.aside-tips div { display: flex; align-items: flex-start; gap: 14px; padding: 12px; font-size: 15px; line-height: 1.5; }

/* Entrance and press feedback */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.auth-shell.enter { animation: rise 280ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .auth-shell.enter { animation: none; } .btn-auth .spinner { animation-duration: 2.4s; } }

/* Laptop and tablet: same composition, scaled down */
@media (max-width: 1199px) {
  .auth-page { padding: 20px; }
  .auth-shell { min-height: calc(100dvh - 40px); gap: 20px; padding: 20px; border-radius: 32px; }
  .auth-main { padding: 24px 8px 24px 20px; gap: 28px; }
  .auth-body { gap: 30px; }
  .auth-head h1 { font-size: 40px; }
  .auth-head p { font-size: 17px; }
  .auth-brand-row b { font-size: 20px; }
  .auth-seal { width: 68px; height: 68px; border-radius: 19px; padding: 9px; }
  .auth-aside { padding: 44px 40px 40px; }
  .aside-emblem span { width: 220px; height: 220px; border-radius: 54px; box-shadow: 0 0 0 11px rgba(120,22,30,0.38), 0 26px 70px rgba(0,0,0,0.35); }
  .aside-emblem img { width: 172px; }
  .aside-copy { margin-top: 40px; }
  .aside-copy h2 { font-size: 34px; }
  .aside-copy p { font-size: 17px; }
  .aside-features { padding: 22px; }
  .aside-features span { font-size: 15px; }
  .auth-fine .line { display: inline; }
}
/* Short laptop screens (768px tall): same layout, tighter vertical rhythm so it fits without scrolling */
@media (min-width: 861px) and (max-height: 860px) {
  .auth-page { padding: 20px; }
  .auth-shell { min-height: calc(100dvh - 40px); gap: 20px; padding: 20px; border-radius: 32px; }
  .auth-main { gap: 22px; padding-block: 16px; }
  .auth-body { gap: 24px; }
  .auth-form { gap: 16px; }
  .auth-field { gap: 8px; }
  .icon-input input { height: 56px; }
  .icon-input > svg { top: 17px; }
  .pw-toggle { top: 6px; }
  .btn-auth { height: 56px; margin-top: 6px; }
  #login-fine { margin-top: 4px; }
  .auth-seal { width: 68px; height: 68px; border-radius: 19px; padding: 9px; }
  .auth-head h1 { font-size: 40px; }
  .auth-head p { font-size: 17px; }
  .auth-aside { padding: 40px 44px 36px; }
  .aside-emblem span { width: 196px; height: 196px; border-radius: 48px; box-shadow: 0 0 0 10px rgba(120,22,30,0.38), 0 24px 60px rgba(0,0,0,0.35); }
  .aside-emblem img { width: 152px; }
  .aside-copy { margin-top: 32px; margin-bottom: 32px; }
  .aside-copy h2 { font-size: 34px; }
  .aside-features { padding: 20px 22px; }
  .aside-emblem.small { display: none; }
}
/* Stacked: sign-in first, promotional panel below */
@media (max-width: 860px) {
  .auth-page { padding: 14px; align-items: flex-start; }
  .auth-shell { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px; border-radius: 26px; }
  .auth-main { padding: 24px 12px 28px; }
  .auth-body, .auth-form { max-width: none; }
  .auth-head h1 { font-size: 38px; }
  .auth-aside { padding: 36px 24px 24px; border-radius: 20px; }
  .aside-emblem span { width: 200px; height: 200px; border-radius: 48px; }
  .aside-emblem img { width: 156px; }
  .aside-emblem.small { display: none; }
  .aside-copy { margin-top: 36px; }
  .aside-copy h2 { font-size: 30px; }
  .aside-copy .eyebrow { font-size: 14px; }
  .aside-copy { margin-bottom: 32px; }
}
@media (max-width: 600px) {
  .aside-features { grid-template-columns: 1fr; gap: 14px; padding: 18px 20px; }
  .aside-features div { flex-direction: row; align-items: center; }
}
@media (max-width: 399px) {
  .auth-page { padding: 10px; }
  .auth-shell { padding: 10px; border-radius: 22px; }
  .auth-main { padding: 20px 8px 24px; }
  .auth-head h1 { font-size: 34px; }
  .auth-head p { font-size: 16px; }
  .auth-brand-row { gap: 14px; }
  .auth-seal { width: 60px; height: 60px; border-radius: 17px; padding: 8px; }
  .auth-brand-row b { font-size: 18px; }
  .auth-brand-row span span { font-size: 14px; }
  .check-row, .auth-row a { font-size: 16px; }
  .aside-copy h2 { font-size: 27px; }
  .aside-copy p { font-size: 16px; }
}

/* ---------- App shell and sidebar ---------- */
.shell { min-height: 100vh; display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; font-variant-numeric: tabular-nums; background: radial-gradient(700px 500px at 0% 0%, rgba(227,25,31,0.14), transparent 70%), radial-gradient(640px 460px at 100% 100%, rgba(245,196,0,0.18), transparent 70%), #EEEEF1; }
.side { flex: 1 1 248px; max-width: 280px; min-width: 240px; padding: 24px 16px; display: flex; flex-direction: column; gap: 28px; color: #FFFFFF; border-radius: 28px; background: var(--sidebar-bg); box-shadow: 0 20px 60px rgba(23,23,28,0.18); align-self: stretch; }
.side-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.side-brand .logo { width: 48px; height: 48px; flex: none; border-radius: 14px; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; }
.side-brand img { width: 38px; height: 38px; object-fit: contain; }
.side-brand b { display: block; font-size: 14px; font-weight: 800; line-height: 1.3; }
.side-brand small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,0.78); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav .group { padding: 14px 14px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.side-nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: 14px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.88); text-decoration: none; border: 1px solid transparent; }
.side-nav a:hover { color: #FFFFFF; background: rgba(255,255,255,0.06); }
.side-nav a[aria-current="page"] { font-weight: 700; color: #FFFFFF; background: rgba(255,255,255,0.10); border-color: rgba(245,196,0,0.55); }
.side-nav a[aria-current="page"] svg { stroke: var(--gold); }
.side-nav svg { width: 20px; height: 20px; flex: none; stroke-width: 1.8; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.side-card { padding: 16px; border-radius: 18px; background: rgba(255,255,255,0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.16); display: flex; flex-direction: column; gap: 8px; }
.side-card b { font-size: 14px; }
.side-card span { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.side-card a { font-size: 13px; font-weight: 700; color: var(--gold); }
.side-me { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-top: 1px solid rgba(255,255,255,0.12); }
.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: var(--ink); background: var(--gold); }
.side-me b { display: block; font-size: 14px; font-weight: 700; }
.side-me small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,0.78); }
.side-out { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.88); background: transparent; border: 1px solid rgba(255,255,255,0.20); border-radius: 12px; cursor: pointer; text-align: left; }
.side-out:hover { background: rgba(255,255,255,0.06); }
.side-out svg { width: 18px; height: 18px; }
.main-col { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* The account corner above every screen except the Dashboard (which has it beside its search) */
.topbar { display: flex; justify-content: flex-end; min-width: 0; }
.topbar .dh-me { height: 52px; }
.mobile-bar { display: none; }
@media (max-width: 980px) {
  .shell { padding: 12px; gap: 12px; }
  .side { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; max-width: 300px; width: 86vw; border-radius: 0 28px 28px 0; overflow-y: auto; transform: translateX(-105%); transition: transform 0.2s; }
  .side.open { transform: none; }
  .mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-basis: 100%; }
  .mobile-bar b { font-size: 14px; }
}
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(14,11,12,0.42); }

/* ---------- Page header ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: 24px; background: rgba(255,255,255,0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: var(--glass-border); box-shadow: 0 10px 30px rgba(23,23,28,0.06); }
.page-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.page-head .sub { font-size: 14px; color: var(--muted); }
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { font-weight: 600; }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.search-box { position: relative; display: flex; }
.search-box svg { position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; stroke: var(--muted); }
.search-box input { flex: 1; min-width: 0; height: 44px; padding: 0 14px 0 42px; font: inherit; font-size: 15px; color: var(--ink); background: #FFFFFF; border: 1px solid var(--field); border-radius: 14px; }

/* ---------- Dashboard ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.stat { padding: 20px; border-radius: 22px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--glass-border); display: flex; flex-direction: column; gap: 8px; }
.stat .label { font-size: 14px; font-weight: 600; color: var(--muted); }
.stat .value { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; }
.stat .value small { font-size: 18px; font-weight: 700; color: var(--muted); }
.stat .note { font-size: 13px; color: var(--ink-2); }
.stat.card-dark { color: #FFFFFF; background: #141416; border: 0; }
.stat.card-dark .label, .stat.card-dark .note { color: rgba(255,255,255,0.82); }
.stat.card-dark .value { font-size: 26px; letter-spacing: -0.01em; line-height: 1.2; }
.bar-track { flex: 1; height: 6px; border-radius: 3px; background: #DCDCE2; }
.bar-track span { display: block; height: 6px; border-radius: 3px; background: var(--ok-d); }
.row-wrap { display: flex; flex-wrap: wrap; gap: 20px; }
.sec-title { font-size: 18px; font-weight: 800; }
.sec-sub { font-size: 13px; color: var(--muted); }
.seg { display: flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--soft-2); border: 1px solid var(--line); }
.seg button { height: 36px; padding: 0 14px; font-size: 13px; font-weight: 700; color: var(--ink); background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: #FFFFFF; }
.attn { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.attn a { display: flex; gap: 12px; padding: 12px; border-radius: 14px; text-decoration: none; color: var(--ink); background: rgba(246,246,249,0.9); }
.attn .ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.attn .ic svg { width: 18px; height: 18px; }
.attn b { display: block; font-size: 14px; }
.attn small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.date-chip { width: 52px; flex: none; padding: 6px 0; border-radius: 12px; text-align: center; display: flex; flex-direction: column; background: var(--soft-2); }
.date-chip .mo { font-size: 11px; font-weight: 700; color: var(--red-2); }
.date-chip .d { font-size: 20px; font-weight: 800; }
.date-chip.dark { color: #FFFFFF; background: var(--ink); }
.date-chip.dark .mo { color: var(--gold); }
.cal-row { display: flex; gap: 14px; align-items: center; }
.cal-row b { display: block; font-size: 14px; }
.cal-row small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.bell { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--line); cursor: pointer; }
.bell svg { width: 20px; height: 20px; }
.bell .count { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font-size: 10px; font-weight: 800; line-height: 16px; color: #FFFFFF; background: var(--red); text-align: center; }
.pop { position: absolute; top: 54px; right: 0; z-index: 50; width: 380px; max-width: calc(100vw - 48px); padding: 16px; border-radius: 22px; background: rgba(255,255,255,0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: var(--glass-border); box-shadow: 0 24px 60px rgba(14,11,12,0.22); display: flex; flex-direction: column; gap: 10px; }
.pop ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pop li a { display: flex; gap: 12px; padding: 12px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.pop li a.unread { background: rgba(253,236,234,0.7); }
.pop .ndot { width: 8px; height: 8px; flex: none; margin-top: 6px; border-radius: 50%; background: #C9CAD2; }
.pop .unread .ndot { background: var(--red); }
.pop b { display: block; font-size: 14px; font-weight: 600; }
.pop .unread b { font-weight: 800; }
.pop small { display: block; font-size: 13px; color: var(--muted); }
.pop .when { font-size: 12px; color: #6B6C75; }
/* Dashboard layout, matched to the reference at 1440 px wide */
.dash-head { flex-wrap: nowrap; gap: 20px; padding: 18px 20px 18px 28px; border-radius: 26px; }
.dash-head .greet { display: flex; flex-direction: column; gap: 2px; flex: none; }
.dash-head h1 { font-size: 26px; letter-spacing: -0.02em; }
.dash-head .sub { font-size: 15px; color: var(--ink-3); }
.gsearch { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.gsearch > svg { position: absolute; left: 16px; top: 13px; width: 18px; height: 18px; stroke: var(--ink-2); pointer-events: none; }
.gsearch input { flex: 1; min-width: 0; height: 44px; padding: 0 16px 0 44px; font: inherit; font-size: 16px; color: var(--ink); background: rgba(255,255,255,0.9); border: 1px solid var(--field); border-radius: 14px; }
.gs-results { position: absolute; z-index: 40; top: 52px; left: 0; right: 0; max-height: 420px; overflow-y: auto; padding: 8px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(14,11,12,0.18); display: flex; flex-direction: column; gap: 2px; }
.gs-results button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; font: inherit; text-align: left; color: var(--ink); background: transparent; border: 0; border-radius: 12px; cursor: pointer; }
.gs-results button:hover, .gs-results button[aria-selected="true"] { background: var(--soft); }
.gs-results b { font-size: 14px; }
.gs-results small { font-size: 13px; color: var(--muted); }
.gs-g { padding: 8px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.gs-all { margin-top: 4px; padding: 10px 12px; font-size: 14px; font-weight: 700; border-top: 1px solid var(--line-2); }
.gs-none { margin: 0; padding: 12px; font-size: 14px; color: var(--muted); }
.dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dash-stats .stat { min-height: 134px; padding: 20px 21px; gap: 6px; border-radius: 24px; }
.dash-stats .label { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.dash-stats .value { font-size: 38px; line-height: 1.15; letter-spacing: -0.03em; }
.dash-stats .value small { font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.dash-stats .note { font-size: 15px; color: var(--ink-2); }
.dash-stats .up { font-weight: 800; color: var(--ok-d); }
.dash-stats .down { font-weight: 800; color: var(--bad-d); }
.standing { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.standing .bar-track { height: 6px; background: #DCDCE2; }
.standing b { font-size: 15px; font-weight: 700; color: var(--ink-2); }
a.next-meet { text-decoration: none; justify-content: flex-start; }
a.next-meet:hover { color: #FFFFFF; filter: brightness(1.08); }
.stat.card-dark .label { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.92); }
.stat.card-dark .value { margin-top: 2px; font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
.stat.card-dark .note { font-size: 14px; line-height: 1.3; color: rgba(255,255,255,0.86); }
.dash-mid { display: grid; grid-template-columns: minmax(0, 1.93fr) minmax(300px, 1fr); gap: 20px; align-items: stretch; }
.card-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card-h > div:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-mid .sec-title, .owed-card .sec-title { font-size: 20px; letter-spacing: -0.01em; }
.dash-mid .sec-sub, .owed-card .sec-sub { font-size: 14px; color: var(--ink-3); }
.dues-card { display: flex; flex-direction: column; gap: 22px; padding: 24px 24px 28px; border-radius: 26px; }
.dues-card .seg { padding: 4px; border-radius: 14px; }
.dues-card .seg button { height: 38px; padding: 0 16px; font-size: 15px; font-weight: 600; border-radius: 10px; }
.dash-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dash-side .card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 26px; }
.attn button { width: 100%; display: flex; gap: 14px; padding: 12px 14px; font: inherit; text-align: left; color: var(--ink); background: rgba(246,246,249,0.9); border: 0; border-radius: 14px; cursor: pointer; }
.attn button:hover { background: #EFEFF3; }
.attn .ic { width: 34px; height: 34px; border-radius: 10px; }
.attn b { font-size: 15px; font-weight: 700; }
.attn small { font-size: 14px; line-height: 1.35; color: var(--ink-3); }
.cal { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.cal a { color: var(--ink); text-decoration: none; }
.cal a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cal .date-chip { width: 50px; padding: 7px 0; border-radius: 13px; }
.cal b { font-size: 15px; font-weight: 700; }
.cal small { font-size: 14px; color: var(--ink-3); }
.chart { margin: 0; display: flex; gap: 14px; }
.chart .yax { height: 214px; width: 42px; flex: none; display: flex; flex-direction: column; justify-content: space-between; font-size: 13px; color: var(--ink-3); text-align: right; }
.chart .yax span { line-height: 0; }
.chart-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.chart .plot { position: relative; height: 214px; }
.chart .grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.chart .grid span { height: 1px; background: var(--line-3); }
.chart .grid span:last-child { height: 2px; background: #9A9BA6; }
.chart .bars { position: absolute; inset: 0; display: grid; gap: 4%; padding: 0 1.5%; }
.chart .bar { height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.chart .bar span { width: 100%; max-width: 46px; border-radius: 5px 5px 0 0; background: #8E8E9A; transition: height 400ms ease-out; }
.chart .bar.hl span { background: #B3141A; }
.chart .xax { display: grid; gap: 4%; padding: 0 1.5%; font-size: 14px; color: var(--ink-3); text-align: center; }
.chart .xax .cur { font-weight: 800; color: var(--ink); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tr.total td { border-top: 1px solid var(--line); }
.owed-card { display: flex; flex-direction: column; gap: 18px; padding: 26px 24px 22px; border-radius: 26px; }
.owed-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.owed-btns .btn { height: 44px; padding: 0 18px; font-size: 16px; font-weight: 700; border-radius: 12px; }
.owed-btns .btn-light { color: #A3121A; }
table.tbl.owed th { padding: 0 12px 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid #C9CAD2; }
table.tbl.owed td { height: 60px; padding: 8px 12px; font-size: 16px; }
table.tbl.owed td:first-child, table.tbl.owed th:first-child { padding-left: 12px; }
table.tbl.owed .ini { width: 32px; height: 32px; font-size: 12px; }
a.plain { font-weight: 600; color: var(--ink); text-decoration: none; }
a.plain:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
table.tbl.owed .pill { padding: 4px 10px; font-size: 14px; font-weight: 600; }
td.act { text-align: right; }
.btn-remind { height: 36px; padding: 0 16px; font-size: 15px; font-weight: 700; color: #A3121A; border: 1px solid var(--line); border-radius: 12px; }
.btn-remind:hover { color: #7A0D13; background: #FFF6F6; }
.foot-note { margin: 0; font-size: 13px; color: var(--ink-3); }
.rem-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.rem-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--soft); }
.rem-list b { display: block; font-size: 14px; }
.rem-list small { display: block; font-size: 13px; color: var(--muted); }
.rem-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.minutes-text { max-height: 50vh; overflow-y: auto; padding: 14px 16px; border-radius: 14px; background: var(--soft); font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.pop-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px; }
.pop-h h2 { font-size: 16px; font-weight: 800; }
.pop-h .btn-text { height: 36px; padding: 0 10px; font-size: 13px; font-weight: 700; border-radius: 10px; cursor: pointer; }
.pop li button { width: 100%; display: flex; gap: 12px; padding: 12px; font: inherit; text-align: left; color: var(--ink); background: transparent; border: 0; border-radius: 14px; cursor: pointer; }
.pop li button:hover { background: var(--soft); }
.pop li button.unread { background: rgba(253,236,234,0.7); }
.pop .nt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 1180px) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-mid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dash-head { flex-wrap: wrap; padding: 16px; }
  .gsearch { flex-basis: 100%; order: 3; }
  .dash-stats { grid-template-columns: minmax(0, 1fr); }
  .dash-stats .stat { min-height: 0; }
  .chart .yax { width: 34px; font-size: 12px; }
  .chart .xax { font-size: 11px; }
}

/* ---------- Tables ---------- */
.tbl-wrap { max-width: 100%; overflow-x: auto; }
#results { min-width: 0; max-width: 100%; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th { padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.tbl td { padding: 12px; border-bottom: 1px solid #EEEEF1; vertical-align: middle; }
table.tbl.list thead tr { background: rgba(240,240,244,0.9); }
table.tbl.list th { padding: 0 12px; height: 44px; }
table.tbl.list th:first-child { padding: 12px 8px 12px 20px; border-radius: 24px 0 0 0; width: 44px; }
table.tbl.list th:last-child { padding: 0 20px 0 12px; border-radius: 0 24px 0 0; }
table.tbl.list td { padding: 10px 12px; }
table.tbl.list td:first-child { padding: 10px 8px 10px 20px; }
table.tbl.list td:last-child { padding: 10px 20px 10px 12px; }
table.tbl tr.sel { background: rgba(245,196,0,0.12); }
.th-sort { height: 44px; display: flex; align-items: center; gap: 6px; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.cb { width: 18px; height: 18px; margin: 0; accent-color: var(--red); }
.person { display: flex; align-items: center; gap: 12px; }
.ini { width: 38px; height: 38px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--ink); background-size: cover; background-position: center; }
.person a.name { font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23,23,28,0.25); text-underline-offset: 3px; }
.person small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.menu-cell { position: relative; text-align: right; }
.kebab { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.kebab svg { width: 18px; height: 18px; fill: var(--ink); stroke: none; }
.menu { position: absolute; right: 20px; top: 52px; z-index: 5; min-width: 190px; padding: 6px; display: flex; flex-direction: column; text-align: left; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(23,23,28,0.16); }
.menu a, .menu button { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-align: left; text-decoration: none; background: transparent; border: 0; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.menu a:hover, .menu button:hover { background: var(--soft); color: var(--ink); }
.menu .warn { color: var(--bad-d); }
.menu .del { margin-top: 4px; font-weight: 700; color: var(--bad-d); border-top: 1px solid var(--line-2); border-radius: 0 0 10px 10px; }
.menu svg { width: 16px; height: 16px; }
.tabs { display: flex; padding: 4px; gap: 4px; border-radius: 14px; background: rgba(255,255,255,0.7); border: var(--glass-border); }
.tabs button { height: 38px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--ink); background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.tabs button[aria-selected="true"] { font-weight: 700; color: #FFFFFF; background: var(--ink); }
.filter-panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--glass-border); box-shadow: 0 14px 34px rgba(23,23,28,0.1); }
.filter-panel fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.filter-panel legend, .filter-panel label.lbl { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.chipbox { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; font-size: 14px; font-weight: 600; background: #FFFFFF; border: 1px solid var(--line); cursor: pointer; }
.filter-panel select { height: 40px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--ink); background: #FFFFFF; border: 1px solid var(--field); border-radius: 12px; }
.stat2 { padding: 18px 20px; border-radius: 22px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--glass-border); display: flex; flex-direction: column; gap: 14px; }
.stat2 .ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.stat2 .ic span { width: 12px; height: 12px; border-radius: 50%; }
.stat2 .v { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.stat2 .delta { margin-left: 10px; font-size: 13px; font-weight: 700; }
.stat2 .l { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--muted); }
.bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: 16px; color: #FFFFFF; background: var(--ink); }
.bulk b { font-size: 14px; }
.bulk button { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 13px; font-weight: 700; color: #FFFFFF; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; cursor: pointer; }
.bulk button.danger { background: var(--bad-d); border: 0; }
.bulk button.clear { color: var(--gold); background: transparent; border: 0; }
.bulk svg { width: 14px; height: 14px; }
.list-card { min-width: 0; max-width: 100%; overflow: hidden; border-radius: 24px; background: rgba(255,255,255,0.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--glass-border); display: flex; flex-direction: column; }
.list-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; }
.list-foot label { font-size: 13px; color: var(--muted); }
.list-foot select { height: 40px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink); background: #FFFFFF; border: 1px solid var(--field); border-radius: 12px; }
.pages { display: flex; align-items: center; gap: 6px; }
.pages button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--ink); background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pages button[aria-current="page"] { font-weight: 800; color: #FFFFFF; background: var(--ink); border: 0; }
.pages button[disabled] { background: var(--soft-2); cursor: not-allowed; }
.pages button svg { width: 16px; height: 16px; }
.pages .gap { width: 24px; text-align: center; color: var(--muted); }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.dir-card { padding: 20px; border-radius: 22px; background: rgba(255,255,255,0.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--glass-border); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.dir-card .ini { width: 64px; height: 64px; font-size: 20px; }
.dir-card h2 { font-size: 16px; font-weight: 800; }
.dir-card h2 a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23,23,28,0.25); text-underline-offset: 3px; }

/* Members screen, matched to the reference at 1719 px wide */
.mem-head { min-height: 78px; padding: 16px 20px 16px 24px; border-radius: 26px; }
.mem-head h1 { font-size: 26px; letter-spacing: -0.02em; }
.mem-head .btn { height: 44px; padding: 0 18px; font-size: 16px; border-radius: 14px; }
.perm-ok { height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 15px; font-weight: 700; color: #0F5132; background: #EAF6EF; border: 1.5px dashed #1B7F4A; border-radius: 13px; }
.perm-ok svg { width: 16px; height: 16px; }
.mem-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mem-tools .tabs { padding: 5px; border-radius: 15px; }
.mem-tools .tabs button { height: 38px; padding: 0 16px; font-size: 16px; }
.mem-tools-r { display: flex; flex-wrap: wrap; gap: 12px; flex: 1 1 420px; justify-content: flex-end; }
.mem-tools-r .search-box { flex: 0 1 300px; min-width: 200px; }
.mem-tools-r .search-box input { font-size: 15px; background: rgba(255,255,255,0.9); }
.mem-tools-r .btn { font-size: 16px; padding: 0 16px; }
.mem-tools-r .btn b { font-weight: 700; margin-left: 4px; }
#filter-btn.on { background: #FFF4D1; border-color: #A87900; }
.sort-menu { right: 0; left: auto; top: 52px; z-index: 30; min-width: 210px; }
.sort-menu button { justify-content: flex-start; }
.sort-menu .sp { display: inline-block; width: 16px; }
.menu-sep { height: 1px; margin: 4px 6px; background: var(--line-2); }
.menu-note { margin-left: auto; padding-left: 10px; font-size: 12px; font-weight: 700; color: var(--bad-d); }
.filter-panel .fcol { display: flex; flex-direction: column; }
.filter-panel input[type=date] { height: 40px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink); background: #FFFFFF; border: 1px solid var(--field); border-radius: 12px; }
.f-actions { display: flex; gap: 10px; margin-left: auto; }
.f-actions .btn-text { height: 40px; padding: 0 12px; font-size: 14px; font-weight: 700; border: 0; cursor: pointer; }
.f-actions .btn { height: 40px; border-radius: 12px; }
.mem-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
a.stat2 { min-height: 152px; padding: 20px 21px; color: var(--ink); text-decoration: none; border-radius: 26px; gap: 16px; }
a.stat2:hover { background: rgba(255,255,255,0.86); color: var(--ink); }
.stat2 .ic { width: 42px; height: 42px; border-radius: 13px; }
.stat2 .ic span { width: 13px; height: 13px; }
.stat2 .vrow { display: flex; align-items: baseline; }
.stat2 .v { font-size: 34px; line-height: 1.1; }
.stat2 .delta { margin-left: 12px; font-size: 14px; font-weight: 800; }
.stat2 .l { font-size: 16px; font-weight: 500; color: var(--ink-2); }
.stats-note { margin: -6px 0 0; font-size: 13px; color: var(--ink-3); }
table.tbl.list th, table.tbl.list .th-sort { font-size: 13px; font-weight: 600; color: var(--ink-2); }
table.tbl.list td { height: 61px; font-size: 16px; }
table.tbl.list .person a.name { font-size: 16px; font-weight: 600; }
table.tbl.list .person small { font-size: 13px; }
a.mno { font-size: 16px; font-weight: 600; color: var(--red-2); text-decoration: underline; text-underline-offset: 4px; }
table.tbl.list .pill { padding: 4px 12px; font-size: 14px; font-weight: 600; }
.list-foot .per { display: flex; align-items: center; gap: 12px; }
.list-foot label { font-size: 15px; color: var(--ink-3); }
.list-foot select { height: 44px; min-width: 72px; font-size: 16px; }
.list-foot .range { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.pages button { width: 42px; height: 42px; font-size: 16px; }
.dir-meta { font-size: 13px; color: var(--muted); }
.dir-phone { font-size: 13px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 1180px) { .mem-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .mem-stats { grid-template-columns: minmax(0, 1fr); }
  a.stat2 { min-height: 0; flex-direction: row; align-items: center; }
  .mem-tools-r { justify-content: stretch; }
  .mem-tools-r .search-box { flex: 1 1 100%; }
  .list-foot { justify-content: center; }
}

/* Dues and history dialogs */
.dialog.wide { width: 640px; }
.dues-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line-2); }
.dues-form h3, .dlg-h3 { font-size: 15px; font-weight: 800; }
.dlg-h3 { margin-bottom: 8px; }
.dues-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.dues-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.dues-form .input { height: 44px; background: #FFFFFF; }
.dues-form .span2 { grid-column: 1 / -1; }
.dues-form .dialog-foot { margin-top: 4px; }
.dlg-err { margin: 0; font-size: 13px; font-weight: 700; color: var(--bad-d); }
.ledger { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ledger li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft); font-size: 14px; }
.ledger li.void { opacity: 0.6; text-decoration: line-through; }
.ledger small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); text-decoration: none; }
.ledger .btn-text { height: 32px; padding: 0 10px; font-size: 13px; font-weight: 700; border: 0; border-radius: 8px; cursor: pointer; }
.ledger.hist { max-height: 55vh; overflow-y: auto; }

/* ---------- Add / edit member form ---------- */
.form-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.form-main { flex: 2 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.form-side { flex: 1 1 280px; min-width: 0; max-width: 360px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; }
.fsec { padding: 24px; border-radius: 24px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--glass-border); display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 20px; }
.fsec.bad { border: 2px solid var(--bad-d); }
.fsec-h { display: flex; align-items: center; gap: 12px; }
.fsec-h .num { width: 32px; height: 32px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #FFFFFF; background: var(--ink); }
.fsec-h h2 { font-size: 18px; font-weight: 800; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.fgrid.g200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fgrid.g220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.full { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld > label, .fld > .lbl { font-size: 14px; font-weight: 600; }
.fld .hint { font-size: 12px; color: var(--muted); }
.fld .err { font-size: 13px; font-weight: 600; color: var(--bad-d); }
.req { color: var(--red-2); }
.opt { font-weight: 500; color: var(--muted); }
.phone-grp { display: flex; }
.phone-grp .cc { height: 48px; display: flex; align-items: center; padding: 0 12px; font-size: 15px; font-weight: 700; color: var(--ink-2); background: var(--line-2); border: 1px solid var(--field); border-right: 0; border-radius: 12px 0 0 12px; }
.phone-grp .input { flex: 1; min-width: 0; border-radius: 0 12px 12px 0; }
.phone-grp:has([aria-invalid="true"]) .cc { border: 2px solid var(--bad-d); border-right: 0; }
.small-check { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.small-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--red); }
fieldset.picks { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
fieldset.picks legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; background: rgba(246,246,249,0.8); border: 1px solid var(--line); }
.pick:has(input:checked) { background: rgba(255,255,255,0.95); border: 2px solid var(--red); }
.pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--red); }
.pick.yn { min-height: 40px; padding: 0 12px; border-radius: 10px; background: #FFFFFF; }
.pick.yn input { width: 16px; height: 16px; }
.other-box { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.other-box label { font-size: 13px; font-weight: 600; }
.other-box .input { height: 44px; }
.deg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 16px; border-radius: 14px; background: rgba(246,246,249,0.9); border: 1px solid var(--line-3); }
.deg-row > b { flex: 0 0 200px; font-size: 14px; }
.deg-row .yn-grp { display: flex; gap: 6px; }
.deg-row .dt { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.deg-row .dt input { height: 40px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--ink); background: #FFFFFF; border: 1px solid var(--field); border-radius: 10px; }
.sub-box { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 14px; background: rgba(246,246,249,0.9); border: 1px solid var(--line-3); }
.sub-box .input { background: #FFFFFF; }
.decl { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font-size: 15px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.decl input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--red); }
.fsec.official { color: #FFFFFF; background: #141416; border: 0; }
.fsec.official .input { background: #FFFFFF; border: 0; }
.fsec.official .input[readonly] { color: var(--ink-2); background: rgba(255,255,255,0.85); }
.fsec.official .input.idno { font-weight: 800; color: var(--ink); background: var(--gold); }
.fsec.official .hint, .fsec.official .sub { font-size: 12px; color: rgba(255,255,255,0.82); }
.fsec.official .sub { font-size: 13px; }
.fsec.official h3 { font-size: 14px; font-weight: 800; color: var(--gold); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; }
.form-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-radius: 22px; background: rgba(255,255,255,0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--glass-border); box-shadow: 0 10px 30px rgba(23,23,28,0.08); }
.form-bar a { padding: 12px 4px; font-size: 15px; font-weight: 600; }
.form-bar .btn { height: 48px; padding: 0 18px; }
.form-bar .btn-red { padding: 0 22px; }
.ok-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-radius: 22px; background: var(--ok-b); border: 1px solid #7CC29A; }
.ok-banner .ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--ok-d); }
.ok-banner .ic svg { width: 22px; height: 22px; stroke: #FFFFFF; }
.ok-banner b { display: block; font-size: 16px; font-weight: 800; color: var(--ok-t); }
.ok-banner span span { display: block; font-size: 14px; color: var(--ok-t); }
.ok-banner a.btn { color: var(--ok-t); border-color: #7CC29A; font-size: 14px; font-weight: 700; border-radius: 12px; }
.ok-banner button.btn { color: #FFFFFF; background: var(--ok-d); border: 0; font-size: 14px; font-weight: 700; border-radius: 12px; }
.err-banner { display: flex; gap: 14px; padding: 18px 22px; border-radius: 22px; background: var(--bad-b); border: 1px solid var(--bad-d); }
.err-banner > svg { width: 22px; height: 22px; flex: none; margin-top: 2px; stroke: var(--bad-d); }
.err-banner b { font-size: 15px; font-weight: 800; color: var(--bad-t); }
.err-banner ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.err-banner a { color: var(--bad-t); font-weight: 600; }
.photo-card { align-items: center; text-align: center; }
.photo-card h2 { align-self: flex-start; }
.photo-frame { width: 150px; height: 190px; border-radius: 18px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(120px 120px at 70% 20%, rgba(227,25,31,0.18), transparent 70%), var(--soft); border: 2px dashed #9A9BA6; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-frame svg { width: 64px; height: 64px; stroke: var(--muted); stroke-width: 1.4; }
.photo-frame .big { font-size: 44px; font-weight: 800; }
.photo-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.photo-btns label, .photo-btns button { flex: 1 1 120px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); background: #FFFFFF; border: 1px solid var(--field); border-radius: 12px; cursor: pointer; }
.photo-btns svg { width: 16px; height: 16px; }
.photo-btns input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-hint { font-size: 13px; line-height: 1.45; color: #55565F; }
.photo-remove { height: 36px; padding: 0 10px; font-size: 13px; font-weight: 700; color: var(--bad-d); border: 0; border-radius: 10px; cursor: pointer; background: transparent; }
.cam-frame { width: 100%; aspect-ratio: 600 / 760; max-height: 60vh; overflow: hidden; border-radius: 18px; background: #111; display: flex; align-items: center; justify-content: center; }
.cam-frame video, .cam-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-btns label:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.prog { color: #FFFFFF; background: #141416; border: 0; gap: 14px; }
.prog-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.prog-h span { font-size: 13px; font-weight: 700; color: var(--gold); }
.prog ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.prog ol a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #FFFFFF; text-decoration: none; background: rgba(255,255,255,0.06); }
.prog ol a:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; }
.prog .mk { width: 24px; height: 24px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #FFFFFF; border: 1.5px solid rgba(255,255,255,0.6); }
.prog .mk.done { color: var(--ink); background: var(--gold); border: 0; }
.prog .st { font-size: 12px; color: rgba(255,255,255,0.82); }
.prog > p { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.78); }

/* ---------- Member profile ---------- */
.cover { position: relative; overflow: hidden; height: 210px; padding: 22px 28px; border-radius: 28px; color: #FFFFFF; background: #141416; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cover nav { font-size: 13px; color: rgba(255,255,255,0.82); }
.cover nav a { color: var(--gold); font-weight: 700; }
.cover h1 { margin-top: 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.cover-btns { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cbtn { height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 700; color: #FFFFFF; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); border-radius: 12px; cursor: pointer; text-decoration: none; }
.cbtn:hover { color: #FFFFFF; background: rgba(255,255,255,0.2); }
.cbtn.sq { width: 42px; padding: 0; }
.cbtn.red { background: rgba(180,35,24,0.85); }
.cbtn svg { width: 16px; height: 16px; }
.prof-body { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin-top: -96px; padding: 0 24px; }
.prof-card { flex: 1 1 290px; max-width: 340px; min-width: 0; padding: 28px 22px 22px; border-radius: 26px; background: rgba(255,255,255,0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: var(--glass-border); box-shadow: 0 24px 60px rgba(14,11,12,0.14); display: flex; flex-direction: column; gap: 20px; }
.prof-id { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.big-av { position: relative; }
.big-av .av { width: 116px; height: 116px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 40px; font-weight: 800; color: var(--ink); box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 8px var(--gold), 0 18px 40px rgba(179,20,26,0.25); background-size: cover; background-position: center; }
.big-av label { position: absolute; right: -2px; bottom: 2px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--red); border: 3px solid #FFFFFF; border-radius: 50%; cursor: pointer; }
.big-av label:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.big-av label svg { width: 16px; height: 16px; stroke: #FFFFFF; }
.big-av input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.prof-id h2 { margin-top: 8px; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.prof-id .ro { font-size: 14px; color: var(--muted); }
.prof-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.contact { display: flex; gap: 8px; margin-top: 4px; }
.contact a, .contact span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--ink); background: #F3F3F6; border-radius: 50%; }
.contact span { opacity: 0.4; }
.contact svg { width: 17px; height: 17px; }
.mini-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 18px; background: var(--soft); border: 1px solid var(--line-2); }
.mini-stats div { padding: 12px 6px; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; text-align: center; }
.mini-stats div + div { border-left: 1px solid var(--line-2); }
.mini-stats dd { margin: 0; font-size: 20px; font-weight: 800; }
.mini-stats dt { font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.sec-nav { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sec-nav button { width: 100%; height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-align: left; background: transparent; border: 0; border-radius: 14px; cursor: pointer; }
.sec-nav button:hover { background: var(--soft); }
.sec-nav button[aria-current="true"] { font-weight: 800; color: var(--red-dark); background: #FCE3E4; }
.sec-nav .d { width: 8px; height: 8px; border-radius: 50%; background: #C9CAD2; }
.sec-nav button[aria-current="true"] .d { background: var(--red); }
.sec-nav .t { flex: 1; }
.sec-nav .b { font-size: 12px; font-weight: 700; color: var(--muted); }
.btn-big { height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; color: #FFFFFF; background: var(--btn-red); border: 0; border-radius: 16px; box-shadow: 0 10px 24px rgba(179,20,26,0.25); cursor: pointer; text-decoration: none; }
.btn-big:hover { color: #FFFFFF; }
.btn-big svg { width: 18px; height: 18px; }
.prof-main { flex: 3 1 560px; min-width: 0; padding: 26px 28px 28px; border-radius: 26px; background: rgba(255,255,255,0.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: var(--glass-border); box-shadow: 0 24px 60px rgba(14,11,12,0.12); display: flex; flex-direction: column; gap: 22px; }
.prof-main-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.prof-main-h h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.prof-main-h .sub { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.editing-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #5A4300; background: var(--warn-b); border: 1px solid #E8C65A; }
.saved-msg { margin: 0; padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 700; color: var(--ok-t); background: var(--ok-b); border: 1px solid #7CC29A; }
.panel { padding: 20px; border-radius: 20px; background: #FAFAFC; border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel h3 { font-size: 16px; font-weight: 800; }
.journey { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.journey li { display: flex; gap: 14px; }
.journey .rail { width: 22px; flex: none; display: flex; flex-direction: column; align-items: center; }
.journey .dotj { width: 18px; height: 18px; margin-top: 18px; border-radius: 50%; background: #FFFFFF; border: 2.5px solid #9A9BA6; }
.journey .dotj.got { background: var(--red); border: 0; }
.journey .line { flex: 1; width: 2px; background: var(--line); }
.journey .line.got { background: var(--red); }
.journey li:last-child .line { background: transparent; }
.journey .box { flex: 1; min-width: 0; margin-bottom: 10px; padding: 14px 16px; border-radius: 16px; background: #FFFFFF; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.journey .box.got { background: #FFFBEA; }
.journey b { display: block; font-size: 14px; font-weight: 800; }
.journey small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.tagc { padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 800; }
.att-dark { padding: 20px; border-radius: 20px; color: #FFFFFF; background: #141416; display: flex; flex-direction: column; gap: 12px; }
.att-dark a { font-size: 13px; font-weight: 700; color: var(--gold); }
.att-dark .pct { font-size: 34px; font-weight: 800; }
.att-dark .pl { font-size: 13px; color: rgba(255,255,255,0.82); }
.att-dark .boxes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.att-dark .boxes span { height: 26px; border-radius: 7px; border: 1px dashed rgba(255,255,255,0.35); }
.att-dark .boxes span.p { background: #3DBB78; border: 0; }
.att-dark .boxes span.a { border: 2px solid rgba(255,255,255,0.55); }
.att-dark .boxes span.e { border: 2px solid #F5C400; }
.att-dark small { font-size: 12px; color: rgba(255,255,255,0.78); }
.kv { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.kv span { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-red { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #FFFFFF; background: var(--red); }
.chip-gold { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #5A4300; background: var(--warn-b); border: 1px solid #E8C65A; }
.chip-none { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--line-2); }
.groups { display: flex; flex-direction: column; gap: 26px; }
.group h3 { margin-bottom: 14px; padding-bottom: 10px; font-size: 15px; font-weight: 800; border-bottom: 1px solid var(--line-2); }
.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.vfield { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vfield > span:first-child, .vfield > label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.vfield .val { min-height: 48px; display: flex; align-items: center; padding: 10px 14px; font-size: 15px; color: var(--ink); background: #F3F3F6; border-radius: 14px; overflow-wrap: anywhere; }
.vfield .input { height: 48px; background: #FFFFFF; border-radius: 14px; }
.vfield textarea.input { height: auto; min-height: 48px; }
.vfield .pick-row { min-height: 48px; align-items: center; }
.edit-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.edit-bar button { min-width: 180px; height: 48px; padding: 0 20px; font-size: 15px; font-weight: 700; border-radius: 14px; cursor: pointer; }
.edit-bar .discard { color: var(--red-2); background: #FFFFFF; border: 1.5px solid var(--red); }
.edit-bar .save { color: #FFFFFF; background: var(--btn-red); border: 0; box-shadow: 0 8px 20px rgba(179,20,26,0.25); }
.att-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.att-list li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--soft); }
.att-list .sq { width: 22px; height: 22px; flex: none; border-radius: 7px; }
.att-list .t { flex: 1; font-size: 14px; font-weight: 600; }
.note-card { padding: 16px 18px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 6px; }
.note-card .meta { font-size: 12px; font-weight: 700; color: var(--muted); }
.note-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; }
@media (max-width: 720px) {
  .cover { height: auto; padding: 18px; flex-direction: column; }
  .cover-btns { justify-content: flex-start; }
  .prof-body { margin-top: 16px; padding: 0; }
  .prof-card { max-width: none; }
  .prof-main { padding: 20px; }
  .vgrid { grid-template-columns: 1fr; }
}

/* Member profile: adjustments for the profile design */
.cover-btns .perm-ok { height: 42px; color: #0F5132; background: #EAF6EF; }
.journey .box { flex-wrap: nowrap; }
.journey .box > span:first-child { min-width: 0; }
.journey .tagc { flex: none; }
.att-dark ol.boxes { margin: 0; padding: 0; list-style: none; }
.att-dark .boxes li { height: 34px; border-radius: 9px; border: 1.5px solid rgba(255,255,255,0.45); }
.att-dark .boxes li.p { background: #3DBB78; border: 0; }
.att-dark .boxes li.e { border: 2px solid #F5C400; }
.att-dark .boxes li:not(.p):not(.a):not(.e) { border-style: dashed; border-color: rgba(255,255,255,0.3); }
dl.lead { margin: 0; display: flex; flex-direction: column; gap: 10px; }
dl.lead dt { color: var(--muted); }
dl.lead dd { margin: 0; font-weight: 700; }
dl.lead .prev { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
dl.lead .prev dd { font-weight: 600; }
a.chip-red { text-decoration: none; }
a.chip-red:hover { color: #FFFFFF; background: var(--red-dark); }

/* ---------- Attendance ---------- */
.att-head { padding: 24px 28px; border-radius: 26px; }
.att-title { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.att-head h1 { font-size: 34px; letter-spacing: -0.025em; }
.att-head h1 span { color: var(--ink-3); }
.att-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 15px; }
.date-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; font-size: 15px; font-weight: 700; color: #6E5200; background: #FFF6DC; border: 1.5px solid #E2B100; border-radius: 999px; }
.date-pill svg { width: 16px; height: 16px; }
.att-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.att-controls .btn, .att-controls .sel { height: 46px; font-size: 16px; border-radius: 12px; }
.sel { min-width: 0; padding: 0 14px; font: inherit; color: var(--ink); background: #FFFFFF; border: 1px solid var(--field); }
.btn-save { padding: 0 20px; box-shadow: 0 8px 20px rgba(179,20,27,0.28); }
.btn-save[disabled] { box-shadow: none; }
.att-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.att-card { min-width: 0; padding: 24px; border-radius: 26px; background: var(--glass); border: var(--glass-border); display: flex; flex-direction: column; gap: 14px; }
.att-card.dark { color: #FFFFFF; border: 0; background: #141416; }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.eyebrow.gold { color: var(--gold); }
.eyebrow.red { color: #A3121A; }
.eyebrow-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.held { font-size: 14px; color: rgba(255,255,255,0.86); }
.att-card .big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.att-card .big b { font-size: 48px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.att-card .big span { font-size: 16px; color: rgba(255,255,255,0.86); }
.stack { display: flex; gap: 4px; height: 12px; }
.stack span { border-radius: 999px; }
.stack .p { background: #3DBB78; } .stack .e { background: #F5C400; } .stack .a { background: #EF5B5B; } .stack .u { background: rgba(255,255,255,0.2); }
dl.four { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
dl.four dt { font-size: 13px; white-space: nowrap; color: rgba(255,255,255,0.86); }
dl.four dd { margin: 2px 0 0; font-size: 26px; font-weight: 800; }
.att-card .cap { margin: 0; font-size: 13px; color: var(--ink-3); }
.att-card.dark .cap { color: rgba(255,255,255,0.82); }
.remark-bars { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.remark-bars li { display: grid; grid-template-columns: 116px minmax(0, 1fr) 36px; align-items: center; gap: 12px; }
.remark-bars b { text-align: right; font-size: 16px; font-weight: 800; }
.rpill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.rpill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rpill.ok { color: #17643A; background: #E6F6EC; } .rpill.sick { color: #A9470A; background: #FDEBDD; } .rpill.far { color: #2348B8; background: #E8EEFC; }
.rpill.bad { color: #B02020; background: #FDE8E8; } .rpill.gone { color: #3F3F48; background: #EDEDF0; } .rpill.none { color: var(--ink-2); background: #FFFFFF; }
.rpill.none .dot { background: #C9CAD2; }
.rbar { height: 8px; border-radius: 999px; background: #EDEDF0; overflow: hidden; }
.rbar span { display: block; height: 100%; border-radius: 999px; }
.rbar .ok { background: #1B8A4C; } .rbar .sick { background: #D9620F; } .rbar .far { background: #2D57D6; } .rbar .bad { background: #C62828; } .rbar .gone { background: #6B6B76; } .rbar .none { background: #C9CAD2; }
dl.mship { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
dl.mship .grp { font-weight: 700; margin-top: 2px; }
dl.mship div { display: flex; justify-content: space-between; gap: 8px; }
dl.mship dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
dl.mship hr { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid var(--line); }
.roll-card { padding: 0; border-radius: 26px; overflow: hidden; }
.roll-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 24px; }
.roll-h > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.roll-h .sec-title { font-size: 22px; }
.roll-h .sec-sub { font-size: 14px; color: var(--ink-3); }
.roll-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.roll-seg { border-radius: 14px; }
.roll-seg button { height: 38px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.roll-seg button[aria-pressed="true"] { font-weight: 800; }
.roll-tools .search-box { width: 260px; max-width: 100%; }
.roll-wrap { max-height: none; }
table.tbl.roll thead th { position: sticky; top: 0; z-index: 2; height: 46px; padding: 0 14px; font-size: 14px; font-weight: 600; color: #FFFFFF; background: #141416; border: 0; }
table.tbl.roll td { height: 60px; padding: 6px 14px; font-size: 16px; }
table.tbl.roll td.no { color: var(--ink-3); }
table.tbl.roll tr.changed { background: rgba(245,196,0,0.08); }
.roll .nm a { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23,23,28,0.35); text-underline-offset: 4px; }
.chip-rank { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #6E4B00; background: #FFF6DC; white-space: nowrap; }
.chip-s { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.chip-s.grey { color: #3F3F48; background: #EDEDF0; } .chip-s.blue { color: #2348B8; background: #E8EEFC; } .chip-s.green { color: #17643A; background: #E6F6EC; }
.rollpick { display: flex; gap: 6px; }
.rp { position: relative; height: 40px; min-width: 82px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 15px; font-weight: 500; color: var(--ink-3); background: #FFFFFF; border: 1px solid #C9CAD2; border-radius: 10px; cursor: pointer; transition: background 150ms ease-out, border-color 150ms ease-out; }
.rp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rp:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.rp:has(input:disabled) { cursor: default; }
.rp.present:has(input:checked) { font-weight: 700; color: #17643A; background: #E6F6EC; border: 1.5px solid #1B8A4C; }
.rp.excuse:has(input:checked) { font-weight: 700; color: #3D2E00; background: #FDF0B8; border: 1.5px solid #C99A06; }
.rp.absent:has(input:checked) { font-weight: 700; color: #B02020; background: #FDE8E8; border: 1.5px solid #C62828; }
.rsel { height: 42px; min-width: 150px; padding: 0 12px; font: inherit; font-size: 15px; font-weight: 600; border-radius: 10px; border: 1.5px solid #C9CAD2; background: #FFFFFF; color: var(--ink); cursor: pointer; }
.rsel.ok { color: #17643A; background: #E6F6EC; border-color: #1B8A4C; } .rsel.sick { color: #A9470A; background: #FDEBDD; border-color: #D9620F; } .rsel.far { color: #2348B8; background: #E8EEFC; border-color: #2D57D6; }
.rsel.bad { color: #B02020; background: #FDE8E8; border-color: #C62828; } .rsel.gone { color: #3F3F48; background: #EDEDF0; border-color: #6B6B76; }
.roll-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; font-size: 14px; color: var(--ink-3); border-top: 1px solid var(--line-2); }
.pager { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; color: var(--ink); }
.pager .sq { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: 1px solid var(--field); border-radius: 12px; cursor: pointer; }
.pager .sq[disabled] { background: var(--soft-2); border-color: var(--line); cursor: not-allowed; }
.pager .sq svg { width: 16px; height: 16px; }
.roll-foot .legend { font-size: 13px; }
.empty-box { padding: 36px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-box p { margin: 0; font-size: 15px; color: var(--ink-3); }
@media (max-width: 1180px) { .att-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .att-cards .dark { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .att-cards { grid-template-columns: minmax(0, 1fr); }
  .att-head h1 { font-size: 26px; }
  .att-controls > * { flex: 1 1 100%; }
  .roll-tools, .roll-tools .search-box { width: 100%; }
  .roll-seg { width: 100%; overflow-x: auto; }
  /* Roll call rows become cards */
  table.tbl.roll, table.tbl.roll tbody, table.tbl.roll tr, table.tbl.roll td { display: block; width: 100%; }
  table.tbl.roll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.tbl.roll tr { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
  table.tbl.roll td { height: auto; padding: 0; border: 0; }
  table.tbl.roll td.no { grid-column: 1; align-self: center; }
  table.tbl.roll td.nm { grid-column: 2; font-size: 17px; align-self: center; }
  table.tbl.roll td:nth-child(2) { grid-column: 1 / -1; order: 3; }
  table.tbl.roll td:nth-child(4), table.tbl.roll td:nth-child(5) { display: inline-block; width: auto; order: 4; }
  table.tbl.roll td.rc, table.tbl.roll td:last-child { grid-column: 1 / -1; order: 5; }
  .rollpick .rp { flex: 1; min-width: 0; }
  .rsel { width: 100%; }
  .roll-foot { justify-content: center; text-align: center; }
}

/* ---------- Departments ---------- */
.dept-head { align-items: flex-start; padding: 24px 28px; border-radius: 26px; }
.dept-head h1 { font-size: 34px; letter-spacing: -0.025em; }
.dept-head .sub { margin: 8px 0 0; max-width: 780px; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.dept-head .btn { height: 46px; font-size: 16px; border-radius: 12px; }
.dept-head .btn-red { padding: 0 20px; box-shadow: 0 8px 20px rgba(179,20,27,0.28); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { min-width: 0; padding: 22px 22px; border-radius: 24px; background: var(--glass); border: var(--glass-border); display: flex; flex-direction: column; gap: 6px; }
.kpi.dark { color: #FFFFFF; border: 0; background: #141416; }
.kpi .l { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.kpi.dark .l, .kpi.dark .c { color: rgba(255,255,255,0.86); }
.kpi .v { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.kpi .c { font-size: 14px; color: var(--ink-3); }
.dept-tabs { align-self: flex-start; padding: 5px; border-radius: 15px; }
.dept-tabs button { height: 40px; padding: 0 18px; font-size: 15px; }
#dept-panel { display: flex; flex-direction: column; gap: 20px; }
.dept-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dept-card { min-width: 0; padding: 20px; font: inherit; text-align: left; color: var(--ink); background: var(--glass); border: 1.5px solid rgba(255,255,255,0.95); border-radius: 24px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; }
.dept-card:hover { border-color: #E4B7B9; }
.dept-card.on { border-color: #B3141B; box-shadow: 0 10px 30px rgba(179,20,27,0.14); }
.dc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.tile { width: 46px; height: 46px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #B3141B; background: #FDECEC; }
.tile svg { width: 22px; height: 22px; }
.dept-card.on .tile, .tile.solid { color: #FFFFFF; background: #B3141B; }
.cnt { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.cnt b { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cnt small { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.dc-name { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.dc-desc { min-height: 42px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.dc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-2); min-width: 0; }
.dc-foot .av-stack { flex: none; }
.dc-head { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.av-stack { display: flex; }
.av-stack .av { width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; border: 2px solid #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--ink); }
.av-stack .av:first-child { margin-left: 0; }
.dc-head { font-size: 14px; color: var(--ink-2); }
.dc-head b { font-weight: 700; color: var(--ink); }
.dept-detail { padding: 0; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; }
.dd-h { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding: 22px 24px; }
.dd-h .tile { width: 52px; height: 52px; border-radius: 14px; }
.dd-t { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dd-t h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.015em; }
.dd-t span { font-size: 15px; color: var(--ink-3); }
.dd-tools { display: flex; flex-wrap: wrap; gap: 12px; }
.dd-tools .search-box { width: 250px; max-width: 100%; }
.dd-tools .btn { height: 44px; font-size: 15px; border-radius: 12px; }
table.tbl.dd thead tr { background: rgba(240,240,244,0.9); }
table.tbl.dd th { height: 44px; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
table.tbl.dd th:first-child, table.tbl.dd td:first-child { padding-left: 24px; }
table.tbl.dd th:last-child, table.tbl.dd td:last-child { padding-right: 24px; }
table.tbl.dd td { height: 60px; padding: 6px 14px; font-size: 16px; }
.chip-role { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #A3121A; background: #FDECEC; white-space: nowrap; }
.chip-role.grey { color: #3F3F48; background: #EDEDF0; }
.btn-remove { height: 38px; padding: 0 16px; font-size: 15px; font-weight: 700; color: #A3121A; border: 1px solid var(--line); border-radius: 12px; }
.btn-remove:hover { color: #7A0D13; background: #FFF6F6; }
.dd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; font-size: 14px; color: var(--ink-3); border-top: 1px solid var(--line-2); }
.pick-list { margin: 0; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.pick-list label { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--soft); cursor: pointer; }
.pick-list label.in { opacity: 0.6; cursor: default; }
.pick-list input { width: 18px; height: 18px; accent-color: var(--red); }
.pick-list b { display: block; font-size: 14px; } .pick-list small { display: block; font-size: 12px; color: var(--muted); }
.lblk { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.lblk .input { height: 44px; }
.lblk.span2 { grid-column: 1 / -1; }
@media (max-width: 1279px) { .dept-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .kpi-grid, .dept-grid { grid-template-columns: minmax(0, 1fr); }
  .dept-head h1 { font-size: 26px; }
  .dd-tools, .dd-tools .search-box { width: 100%; }
  /* Keep the member column in view while the roster scrolls sideways */
  table.tbl.dd { min-width: 720px; }
  table.tbl.dd .mcol { position: sticky; left: 0; z-index: 1; background: #FAFAFC; }
}

/* ---------- Shared: event types, tiles and chips ---------- */
:root { --ev-meeting: #6B6B76; --ev-mass: #B3141B; --ev-degree: #D9A400; --ev-parade: #2D57D6; --ev-outreach: #1F8A4C; }
.sample-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #6E5200; background: #FFF6DC; border: 1.5px solid #E2B100; }
.perm-ok.big { height: 46px; }
.btn-outline-red { color: #A3121A; border: 1.5px solid #E4A8AB; }
.btn-outline-red:hover { color: #7A0D13; background: #FFF6F6; }
.btn-white { height: 48px; padding: 0 20px; font-weight: 700; color: var(--ink); background: #FFFFFF; border: 0; border-radius: 14px; }
.btn-white:hover { color: var(--ink); background: #F3F3F6; }
.btn-ghost { height: 48px; padding: 0 20px; font-weight: 700; color: #FFFFFF; background: transparent; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 14px; }
.btn-ghost:hover { color: #FFFFFF; background: rgba(255,255,255,0.08); }
.btn-ghost[disabled] { color: rgba(255,255,255,0.6); background: transparent; border-color: rgba(255,255,255,0.22); }
.ev-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.ev-chip.meeting { color: #3F3F48; background: #EDEDF0; } .ev-chip.mass { color: #9B1218; background: #FDECEC; } .ev-chip.degree { color: #6E4B00; background: #FFF6DC; }
.ev-chip.parade { color: #2348B8; background: #E8EEFC; } .ev-chip.outreach { color: #17643A; background: #E6F6EC; }
.ev-chip.light { color: var(--ink); background: rgba(255,255,255,0.92); } .ev-chip.gold { color: #3D2E00; background: #F5C400; } .ev-chip.grey { color: #3F3F48; background: #DCDCE2; }
.dtile { width: 56px; height: 56px; flex: none; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #FFFFFF; background: #141416; line-height: 1; }
.dtile .mo { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--gold); }
.dtile .d { margin-top: 3px; font-size: 24px; font-weight: 800; }
.dtile.big { width: 96px; height: 104px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.2); background: rgba(20,20,22,0.7); }
.dtile.big .mo { font-size: 15px; } .dtile.big .d { margin-top: 6px; font-size: 40px; } .dtile.big .wd { margin-top: 6px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.86); }
.tbc { font-style: italic; color: var(--muted); }
.ferr { display: block; min-height: 0; font-size: 13px; font-weight: 600; color: var(--bad-d); }
.ferr:empty { display: none; }
.hint { margin: 0; font-size: 13px; color: var(--muted); }
.ch-tiles, .when, .pick-one { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ch-tiles legend, .when legend, .pick-one legend { width: 100%; padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.tile-check, .tile-radio { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; font-size: 15px; font-weight: 600; background: #FFFFFF; border: 1px solid #C9CAD2; border-radius: 12px; cursor: pointer; }
.tile-check input, .tile-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--red); }
.tile-check:has(input:checked), .tile-radio:has(input:checked) { border: 1.5px solid #B3141B; }
.tile-check:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.tile-check:has(input:focus-visible), .tile-radio:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.pick-one { flex-direction: column; }

/* ---------- Events ---------- */
.ev-head { flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 28px; border-radius: 26px; }
.ev-title { display: flex; align-items: center; gap: 12px; }
.ev-head h1 { font-size: 34px; letter-spacing: -0.025em; }
.ev-head .sub { margin: 0; font-size: 15px; color: var(--ink-3); }
.ev-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ev-actions .btn { height: 46px; font-size: 16px; border-radius: 12px; }
.ev-actions .btn-red { padding: 0 20px; box-shadow: 0 8px 20px rgba(179,20,27,0.28); }
.ev-mid { display: grid; grid-template-columns: minmax(0, 1.37fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ev-card { padding: 0; overflow: hidden; border-radius: 26px; }
.ev-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px; min-height: 152px; padding: 24px 28px; color: #FFFFFF; background: #141416; }
.ev-hero .wm { position: absolute; right: -40px; top: -30px; width: 240px; height: 240px; object-fit: contain; opacity: 0.16; pointer-events: none; }
.ev-hero-t { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ev-hero .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-hero h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.ev-hero.cancelled h2 { text-decoration: line-through; opacity: 0.8; }
.ev-hero p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 16px; color: rgba(255,255,255,0.86); }
.ev-hero .tbc { color: rgba(255,255,255,0.75); }
.ev-body { display: flex; flex-direction: column; gap: 20px; padding: 26px 28px; }
.ev-desc { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.ev-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ev-tiles > div { padding: 14px 16px; border-radius: 16px; background: #F4F4F7; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ev-tiles span { font-size: 13px; color: var(--ink-3); }
.ev-tiles b, .ev-tiles a { font-size: 16px; font-weight: 700; color: var(--ink); }
.ev-tiles a { text-decoration: underline; text-underline-offset: 3px; }
.ev-replies { display: flex; flex-direction: column; gap: 12px; }
.r-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.r-h h3 { font-size: 18px; font-weight: 800; }
.r-h span { font-size: 15px; color: var(--ink-2); }
.stack.r { height: 12px; }
.stack .g { background: #1F8A4C; } .stack .m { background: #D9A400; } .stack .n { background: #C62828; } .stack .x { background: #D4D4DA; }
dl.r-legend { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
dl.r-legend div { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
dl.r-legend dt { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
dl.r-legend dd { margin: 0; font-weight: 800; }
.dot.g { background: #1F8A4C; } .dot.m { background: #D9A400; } .dot.n { background: #C62828; } .dot.x { background: #C2C3CB; }
.r-legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ev-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.ev-btns .btn { height: 46px; font-size: 15px; border-radius: 12px; }
.ev-btns .push { margin-left: auto; }
.more-wrap { position: relative; }
.more-wrap .btn svg { width: 14px; height: 14px; }
.more-menu { right: 0; top: auto; bottom: 54px; min-width: 190px; }
.btn-text.cancel { height: 46px; padding: 0 10px; font-size: 15px; font-weight: 700; color: #A3121A; background: transparent; border: 0; cursor: pointer; }
.cal-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 26px; }
.cal-h { display: flex; justify-content: space-between; align-items: center; }
.cal-h h2 { font-size: 22px; font-weight: 800; }
.cal-nav { display: flex; gap: 8px; }
.cal-nav .sq, .pager .sq { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: 1px solid var(--field); border-radius: 12px; cursor: pointer; }
.cal-nav svg { width: 16px; height: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-grid .wd { padding: 6px 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.cd { position: relative; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 1.5px solid transparent; border-radius: 13px; cursor: pointer; }
.cd.blank { cursor: default; }
.cd.has { font-weight: 700; background: #EFEFF2; }
.cd.today { border-color: #B3141B; }
.cd.sel { color: #FFFFFF; font-weight: 800; background: #141416; }
.cd:hover:not(.blank):not(.sel) { background: #E6E6EB; }
.cd .bars { display: flex; gap: 3px; }
.cd .bars i, .cal-legend i { display: block; width: 18px; height: 3px; border-radius: 2px; }
.cd .bars i.meeting, .cal-legend i.meeting { background: var(--ev-meeting); } .cd .bars i.mass, .cal-legend i.mass { background: var(--ev-mass); }
.cd .bars i.degree, .cal-legend i.degree { background: var(--ev-degree); } .cd .bars i.parade, .cal-legend i.parade { background: var(--ev-parade); }
.cd .bars i.outreach, .cal-legend i.outreach { background: var(--ev-outreach); }
/* On the dark selected day, the bar keeps its colour but lighter, so it stays visible. */
.cd.sel .bars i.meeting { background: #C9C9D1; } .cd.sel .bars i.mass { background: #FF8A8F; } .cd.sel .bars i.degree { background: #FFD24D; } .cd.sel .bars i.parade { background: #8FB0FF; } .cd.sel .bars i.outreach { background: #74D9A0; }
.cal-legend { margin: 6px 0 0; padding: 12px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--line-2); }
.cal-legend li { display: flex; align-items: center; gap: 8px; }
.cal-cap { margin: 0; font-size: 13px; color: var(--ink-3); }
.ev-list { padding: 22px 16px 16px; border-radius: 26px; display: flex; flex-direction: column; gap: 12px; }
.ev-list-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 0 8px; }
.ev-list-h .sec-title { font-size: 22px; }
.ev-list-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.ev-list-tools .sel { height: 44px; min-width: 180px; border-radius: 12px; font-size: 15px; }
.ev-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ev-row { width: 100%; display: flex; align-items: center; gap: 18px; padding: 12px 16px; font: inherit; text-align: left; color: var(--ink); background: transparent; border: 1.5px solid transparent; border-bottom-color: var(--line-2); border-radius: 0; cursor: pointer; }
.ev-row:hover { background: rgba(240,240,244,0.6); border-radius: 18px; }
.ev-row.on { border: 1.5px solid #B3141B; border-radius: 18px; }
.ev-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-row .t b { font-size: 17px; font-weight: 800; }
.ev-row .t small { font-size: 14px; color: var(--ink-3); }
.ev-row.cancelled .t b { text-decoration: line-through; color: var(--ink-3); }
.ev-row .s { width: 190px; flex: none; text-align: right; font-size: 15px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 1279px) { .ev-mid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .ev-tiles, dl.r-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-hero { align-items: flex-start; } .ev-hero h2 { font-size: 24px; } .dtile.big { width: 72px; height: 84px; } .dtile.big .d { font-size: 30px; }
  .ev-btns .push { margin-left: 0; }
  .cd { height: 44px; font-size: 14px; } .cal-grid { gap: 3px; }
  .ev-row { flex-wrap: wrap; row-gap: 8px; } .ev-row .t { flex-basis: calc(100% - 80px); } .ev-row .ev-chip { margin-left: 74px; } .ev-row .s { width: auto; flex: 1 1 100%; margin-left: 74px; text-align: left; }
}

/* ---------- Announcements ---------- */
.ann-head { padding: 22px 28px; border-radius: 26px; }
.ann-head h1 { font-size: 34px; letter-spacing: -0.025em; }
.ann-head .sub { margin: 6px 0 0; font-size: 15px; color: var(--ink-3); }
.ann-head .btn-red { height: 46px; padding: 0 20px; font-size: 16px; border-radius: 12px; box-shadow: 0 8px 20px rgba(179,20,27,0.28); }
.ann-cols { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.ann-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ann-list .sec-title { font-size: 20px; }
.ann-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.seg.ink { padding: 5px; border-radius: 14px; background: rgba(255,255,255,0.75); border: var(--glass-border); }
.seg.ink button { height: 36px; font-size: 14px; font-weight: 600; }
.seg.ink button[aria-pressed="true"] { color: #FFFFFF; background: #141416; }
.ann-tools .search-box { width: 240px; max-width: 100%; }
#cards { display: flex; flex-direction: column; gap: 14px; }
.ann-card { padding: 20px 22px; border-radius: 24px; background: var(--glass); border: 1.5px solid rgba(255,255,255,0.95); display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color 150ms ease-out; }
.ann-card:hover { border-color: #E4B7B9; }
.ann-card.open { border-color: #B3141B; }
.ann-card.pinned { background: #FFF8E1; border-color: #E9C24A; }
.ac-top { display: flex; align-items: center; gap: 10px; }
.ac-top .chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.ac-top .when { font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.ann-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.ann-chip svg { width: 13px; height: 13px; }
.ann-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ann-chip.pin { color: #3D2E00; background: #F5C400; }
.cat-meeting { color: #2348B8; background: #E8EEFC; } .cat-event { color: #6E4B00; background: #FFF6DC; } .cat-general { color: #3F3F48; background: #EDEDF0; }
.cat-prayer { color: #9B1218; background: #FDECEC; } .cat-finance { color: #17643A; background: #E6F6EC; } .cat-urgent { color: #FFFFFF; background: #B3141B; }
.st-sent { color: #17643A; background: #E6F6EC; } .st-scheduled { color: #2348B8; background: #E8EEFC; } .st-draft { color: #3F3F48; background: #EDEDF0; }
.sq-del { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; color: #B3141B; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.sq-del svg { width: 16px; height: 16px; }
.ann-card h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.ac-open { padding: 0; font: inherit; text-align: left; color: var(--ink); background: transparent; border: 0; cursor: pointer; }
.ac-body { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-body.full { display: block; }
.btn-text.more { align-self: flex-start; height: 28px; padding: 0; font-size: 14px; font-weight: 700; color: #A3121A; background: transparent; border: 0; cursor: pointer; }
.ac-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); }
.ac-foot .chs { display: flex; gap: 6px; }
.ac-foot .ch { height: 24px; display: inline-flex; align-items: center; padding: 0 8px; font-size: 13px; font-weight: 600; color: #3F3F48; background: #EDEDF0; border-radius: 6px; }
.ac-foot .reads { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.readbar { width: 100px; height: 5px; border-radius: 999px; background: #E4E4EA; overflow: hidden; }
.readbar span { display: block; height: 100%; background: #1F8A4C; }
.composer { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 26px; }
.composer h2 { font-size: 20px; font-weight: 800; }
.composer .sub { margin: 0 0 8px; font-size: 14px; color: var(--ink-3); }
#cmp { display: flex; flex-direction: column; gap: 14px; }
.cf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf > label, .cf-h label { font-size: 14px; font-weight: 700; }
.cf-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cf-h span { font-size: 13px; color: var(--ink-3); }
.composer .input { height: 48px; background: #FFFFFF; border-radius: 12px; }
.composer textarea.input { height: 120px; resize: vertical; }
.composer .input[readonly], .composer select:disabled { background: #F4F4F7; }
.cf-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf.ch-tiles, .cf.when { flex-direction: row; flex-wrap: wrap; }
.composer .ch-tiles .tile-check { flex: 0 0 auto; }
.when .tile-radio { flex: 1 1 140px; }
.sched { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.sched label { flex: 1 1 140px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.preview { padding: 14px; border-radius: 18px; background: #141416; display: flex; flex-direction: column; gap: 10px; }
.pv-l { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.86); }
.bubble { padding: 12px 14px; border-radius: 14px; background: #FFFFFF; display: flex; flex-direction: column; gap: 3px; }
.bubble .from { font-size: 12px; font-weight: 800; color: #B3141B; }
.bubble .pt { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.bubble .pb { font-size: 13px; line-height: 1.45; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble .ph { color: var(--muted); font-weight: 600; }
.cmp-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.cmp-btns .btn { height: 50px; font-size: 16px; border-radius: 13px; }
.cmp-btns .btn-red { box-shadow: 0 8px 20px rgba(179,20,27,0.28); }
@media (max-width: 1023px) { .ann-cols { grid-template-columns: minmax(0, 1fr); } .composer { position: static; order: -1; } }

/* ---------- Reports ---------- */
.rep-head { padding: 22px 28px; border-radius: 26px; }
.rep-head h1 { font-size: 34px; letter-spacing: -0.025em; }
.rep-head .sub { margin: 6px 0 0; font-size: 15px; color: var(--ink-3); }
.rep-head .btn, .rep-head .sel { height: 46px; font-size: 16px; border-radius: 12px; }
.rep-head .sel { min-width: 190px; }
.rep-head .btn-red { padding: 0 20px; box-shadow: 0 8px 20px rgba(179,20,27,0.28); }
.rep-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; padding: 28px; border-radius: 28px; color: #FFFFFF;
  background: #141416; }
.rh-l { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.due-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 800; color: #3D2E00; background: #F5C400; }
.rh-l h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.rh-l p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.86); }
.pbar { width: 100%; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.15); overflow: hidden; }
.pbar span { display: block; height: 100%; border-radius: 999px; background: #F5C400; }
.rh-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.rh-l .why { font-size: 14px; color: #F7C6C6; }
.rh-list { position: relative; margin: 0; padding: 8px; list-style: none; border-radius: 22px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); }
.rh-list button { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 14px; font: inherit; text-align: left; color: #FFFFFF; background: transparent; border: 0; border-radius: 14px; cursor: pointer; }
.rh-list button:hover { background: rgba(255,255,255,0.06); }
.rh-list b { flex: 1; font-size: 16px; font-weight: 700; }
.si { width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.si svg { width: 16px; height: 16px; }
.si.ok { background: #2FBF71; color: #FFFFFF; } .si.prog, .si.wait { border: 1.5px solid rgba(255,255,255,0.75); color: #FFFFFF; }
.rh-list .prog { background: none; box-shadow: none; } /* not the member form's progress card, which shares the class */
.sd { font-size: 14px; font-weight: 700; white-space: nowrap; } .sd.ok, .sd.prog { color: #F5C400; } .sd.wait { color: #F7A1A1; }
.kpi .c .down { color: #B3141B; } .kpi .c .up { color: #1F8A4C; }
.rep-mid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 20px; }
.att5, .glance, .quick, .saved { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 26px; min-width: 0; }
.att5 .sec-title, .glance .sec-title, .quick .sec-title, .saved .sec-title { font-size: 21px; }
.att5 .sec-sub, .glance .sec-sub, .quick .sec-sub, .saved .sec-sub { font-size: 14px; color: var(--ink-3); }
.hbars { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.hbars li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 128px; align-items: center; gap: 14px; font-size: 15px; }
.hbars .tr { height: 22px; border-radius: 6px; background: #EEEEF2; overflow: hidden; }
.hbars .tr span { display: block; height: 100%; border-radius: 6px; background: #9B9BA5; }
.hbars .vl { text-align: right; font-variant-numeric: tabular-nums; }
.hbars li.last { font-weight: 800; } .hbars li.last .tr span { background: #B3141B; }
.att5 .cap { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.gl { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.gl h3 { font-size: 15px; font-weight: 800; }
.gbar { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: #EEEEF2; }
.gbar span { min-width: 3px; }
.gbar .blue, .glegend .blue { background: #2D57D6; } .gbar .grey, .glegend .grey { background: #C9C9D1; } .gbar .red, .glegend .red { background: #B3141B; } .gbar .gold, .glegend .gold { background: #D9A400; }
.gbar .green, .glegend .green { background: #1F8A4C; } .gbar .orange, .glegend .orange { background: #C2550E; } .gbar .dark, .glegend .dark { background: #6B6B76; } .gbar .light, .glegend .light { background: #DCDCE2; }
.glegend { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink-2); }
.glegend li { display: flex; align-items: center; gap: 6px; }
.glegend .dot { width: 10px; height: 10px; border-radius: 3px; }
.glegend b { font-weight: 800; color: var(--ink); }
.rep-bottom { display: grid; grid-template-columns: minmax(0, 1.17fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.qtile { padding: 18px; border-radius: 20px; background: #F6F6F9; border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 6px; }
.qi { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #B3141B; background: #FDECEC; margin-bottom: 6px; }
.qi svg { width: 20px; height: 20px; }
.qtile h3 { font-size: 17px; font-weight: 800; }
.qtile p { margin: 0; min-height: 40px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.qbtn { width: 100%; height: 42px; margin-top: 6px; font-size: 15px; font-weight: 700; border: 1.5px solid #3F3F48; border-radius: 12px; }
.qbtn .spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(23,23,28,0.25); border-top-color: var(--ink); animation: spin 0.8s linear infinite; }
.qbtn.busy .spinner { display: inline-block; }
.sv-list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sv-list li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.sv-list li:last-child { border-bottom: 0; }
.ftile { width: 40px; height: 48px; flex: none; border-radius: 8px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-size: 10px; font-weight: 800; color: #FFFFFF; }
.ftile.pdf { background: #B3141B; } .ftile.sheet { background: #1F8A4C; }
.sv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-t b { font-size: 16px; font-weight: 800; }
.sv-t small { font-size: 13px; color: var(--ink-3); }
.sv-st { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sv-st .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sv-st.submitted { color: #17643A; background: #E6F6EC; } .sv-st.generated { color: #2348B8; background: #E8EEFC; } .sv-st.draft { color: #6E4B00; background: #FFF6DC; }
.sv-dl { height: 40px; font-size: 14px; font-weight: 700; border-radius: 12px; }
.sum { padding: 12px 14px; border-radius: 14px; background: var(--soft); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.inp { display: flex; flex-direction: column; gap: 6px; }
.inp-h { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.inp-h .ok { color: #17643A; font-weight: 700; } .inp-h .wait { color: #A3121A; font-weight: 700; }
.inp textarea.input { height: auto; }
@media (max-width: 1279px) { .rep-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023px) { .rep-mid, .rep-bottom { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .qgrid { grid-template-columns: minmax(0, 1fr); }
  .hbars li { grid-template-columns: 1fr auto; } .hbars .tr { grid-column: 1 / -1; order: 3; }
  .sv-list li { flex-wrap: wrap; } .sv-list .sv-t { flex-basis: calc(100% - 60px); }
  .rh-l h2 { font-size: 22px; }
}

/* ---------- Sidebar as an icon rail between 981 and 1279 px ---------- */
@media (min-width: 981px) and (max-width: 1279px) {
  .side { flex: 0 0 88px; max-width: 88px; min-width: 88px; padding: 20px 12px; align-items: center; }
  .side-brand { padding: 0; justify-content: center; }
  .side-brand > span:last-child, .side-nav .lbl, .side-out .lbl, .side-me > span:last-child { display: none; }
  .side-nav .group { height: 1px; padding: 0; margin: 8px 10px; overflow: hidden; color: transparent; background: rgba(255,255,255,0.12); }
  .side-nav { width: 100%; align-items: center; }
  .side-nav a { width: 56px; justify-content: center; padding: 0; }
  .side-foot { width: 100%; align-items: center; }
  .side-me { justify-content: center; padding: 12px 0; }
  .side-out { width: 56px; justify-content: center; padding: 0; }
}

/* ---------- Cadet Commandery ---------- */
.cadet-head { flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 22px; padding: 24px 28px; border-radius: 26px; }
.cadet-emblem { flex: none; width: 96px; height: auto; mix-blend-mode: multiply; }
.ch-t { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ch-t h1 { font-size: 34px; letter-spacing: -0.025em; }
.ch-t .sub { margin: 0; max-width: 780px; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.cadet-kpi { position: relative; overflow: hidden; }
.cadet-kpi > span { position: relative; }
.cadet-kpi .wm { position: absolute; right: -10px; top: -8px; width: 112px; height: auto; opacity: 0.4; mix-blend-mode: multiply; pointer-events: none; }
.cadet-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 20px; }
.cadet-roll .cname { font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23,23,28,0.25); text-underline-offset: 4px; }
.cadet-roll .cname:hover { color: var(--red-2); }
.cadet-roll .person small { font-size: 13px; }
/* Wide enough that dates and phone numbers stay on one line; the roll scrolls sideways when the column is narrower */
table.tbl.roll.cadets { min-width: 1020px; }
table.tbl.roll.cadets .person { min-width: 180px; }
table.tbl.roll.cadets td:nth-child(3) { min-width: 170px; }
table.tbl.roll.cadets .nowrap { white-space: nowrap; }
table.tbl.roll.cadets .needs { max-width: 160px; }
.cs { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.cs.ok { color: #17643A; background: #E6F6EC; }
.cs.no { color: #A9470A; background: #FDEBDD; }
.needs { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--warn-t); }
.roll-note { margin: 0; padding: 16px 24px; font-size: 14px; color: var(--ink-3); border-top: 1px solid var(--line-2); }
.cadet-side { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.leaders { padding: 24px; border-radius: 26px; display: flex; flex-direction: column; gap: 14px; }
.ld-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.leaders .sec-title { font-size: 22px; }
.leaders ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.leaders li { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--soft); }
.lav { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: var(--ink); background: var(--gold); }
.leaders li b { display: block; font-size: 16px; font-weight: 700; }
.leaders li small { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-3); }
.leaders .cap { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.protect { padding: 24px; border-radius: 26px; color: #FFFFFF; background: var(--dark); }
.protect h2 { font-size: 19px; font-weight: 800; color: var(--gold); }
.protect ul { margin: 14px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.92); }
.note-banner { padding: 14px 20px; border-radius: 18px; font-size: 14px; font-weight: 600; color: var(--warn-t); background: var(--warn-b); border: 1px solid #E2B100; }
.form-quote { margin: 0; padding: 12px 16px; font-size: 14px; line-height: 1.55; font-style: italic; color: var(--ink-2); background: rgba(246,246,249,0.9); border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; }
@media (max-width: 1180px) { .cadet-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .cadet-head { flex-wrap: wrap; padding: 20px; }
  .cadet-emblem { width: 64px; }
  .ch-t h1 { font-size: 26px; }
  /* The cadet roll stays a table and scrolls sideways, with the cadet's name kept in view */
  table.tbl.roll.cadets { display: table; }
  table.tbl.roll.cadets thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  table.tbl.roll.cadets tbody { display: table-row-group; }
  table.tbl.roll.cadets tr { position: static; display: table-row; padding: 0; border: 0; }
  table.tbl.roll.cadets td { display: table-cell; width: auto; height: 60px; padding: 6px 14px; border-bottom: 1px solid #EEEEF1; }
  table.tbl.roll.cadets td:first-child { position: sticky; left: 0; z-index: 1; background: #FAFAFC; }
}

/* ---------- Dashboard (home) ---------- */
:root { --dh-line: #E4E4EA; --dh-ctl: #8C8D98; --dh-rail: #F7F7FA; --dh-red: #B3141B; --dh-red-tint: #FDECEC; --dh-bar: #D46A70; }
.home { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 24px; }
.home-main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.dh-search { position: relative; min-width: 0; display: flex; }
.dh-search .gsearch > svg { left: 20px; top: 19px; }
.dh-search .gsearch input { height: 56px; padding: 0 20px 0 50px; font-size: 15px; background: #FFFFFF; border: 1px solid var(--dh-ctl); border-radius: 999px; }
.dh-search .gs-results { top: 64px; }
.dh-search .dh-search-open { display: none; }
.dh-me { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 56px; }
.dh-rel { position: relative; }
.dh-ib { position: relative; width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--ink); background: #FFFFFF; border: 1px solid var(--dh-ctl); border-radius: 50%; cursor: pointer; text-decoration: none; transition: background 150ms ease-out; }
.dh-ib:hover { color: var(--ink); background: #F3F3F6; }
.dh-ib svg { width: 20px; height: 20px; }
.dh-ib .kv { fill: currentColor; stroke: none; }
.dh-ib.sm { width: 40px; height: 40px; } .dh-ib.sm svg { width: 18px; height: 18px; }
.dh-ib.xs { width: 34px; height: 34px; } .dh-ib.xs svg { width: 16px; height: 16px; }
.dh-ib.solid { color: #FFFFFF; background: var(--dh-red); border-color: var(--dh-red); }
.dh-ib.solid:hover { background: #8F0F15; }
.dh-ib:disabled { opacity: 0.4; cursor: default; }
.dh-dot { position: absolute; top: 10px; right: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--dh-red); box-shadow: 0 0 0 2px #FFFFFF; }
.dh-div { width: 1px; height: 32px; background: #D4D4DA; }
.dh-who { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 4px 0 0; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); background: none; border: 0; border-radius: 999px; cursor: pointer; }
.dh-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-av { width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--ink); background: var(--dh-red-tint); border-radius: 50%; }
.dh-who .dh-av { color: #8F0F15; }
.dh-av.sm { width: 36px; height: 36px; font-size: 12px; } .dh-av.md { width: 46px; height: 46px; font-size: 14px; }
.dh-menu { right: 0; top: 58px; z-index: 50; }
.dh-km { position: relative; margin-left: auto; flex: none; }
.dh-km .menu { right: 0; top: 46px; z-index: 30; }
/* Hero: the next event */
.dh-hero { position: relative; overflow: hidden; min-height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 36px 40px; color: #FFFFFF; background: linear-gradient(100deg, var(--dh-red) 45%, #8F0F15); border-radius: 28px; }
.dh-hero > :not(svg) { position: relative; z-index: 1; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.dh-eye { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.86); }
.dh-hero h2 { max-width: 640px; margin: 0; font-size: 34px; font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dh-pill { display: inline-flex; align-items: center; gap: 14px; height: 48px; margin-top: 6px; padding: 0 6px 0 22px; font-size: 15px; font-weight: 600; color: #FFFFFF; text-decoration: none; background: #141416; border-radius: 999px; }
.dh-pill:hover { color: #FFFFFF; background: #000000; }
.dh-pill-go { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--dh-red); background: #FFFFFF; border-radius: 50%; }
.dh-pill-go svg { width: 18px; height: 18px; }
.dh-hero .dh-pill:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
/* Three figures */
.dh-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dh-tile { min-width: 0; min-height: 88px; display: flex; align-items: center; gap: 10px; padding: 16px 6px 16px 14px; background: #FFFFFF; border-radius: 20px; }
.dh-ti { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.dh-tt small, .dh-tt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The tile menus are plain icons, as in the reference */
.dh-tile .dh-km .dh-ib { width: 28px; height: 40px; border-color: transparent; background: transparent; border-radius: 10px; }
.dh-tile .dh-km .dh-ib:hover { background: #F3F3F6; }
.dh-ti svg { width: 22px; height: 22px; }
.dh-ti.red { color: var(--dh-red); background: var(--dh-red-tint); } .dh-ti.blue { color: #2348B8; background: #E8EEFC; } .dh-ti.green { color: #17643A; background: #E6F6EC; }
.dh-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dh-tt small { font-size: 13px; color: #6B6B76; font-variant-numeric: tabular-nums; }
.dh-tt b { font-size: 16px; font-weight: 700; }
/* Sections */
.dh-sec { display: flex; flex-direction: column; gap: 14px; }
.dh-sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dh-sh h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.dh-arrows { display: flex; gap: 10px; }
.dh-all { font-size: 14px; font-weight: 600; color: var(--dh-red); text-decoration: underline; text-underline-offset: 3px; }
.dh-card { min-width: 0; padding: 20px; background: #FFFFFF; border-radius: 24px; }
.dh-empty { margin: 0; font-size: 14px; color: #6B6B76; }
/* Upcoming events row */
.dh-evrow { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.dh-evrow::-webkit-scrollbar { display: none; }
.dh-evrow:focus-visible { outline-offset: 4px; }
.dh-ev { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; scroll-snap-align: start; }
.dh-ev-img { position: relative; width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; color: #8C8D98; border-radius: 16px;
  background: repeating-linear-gradient(135deg, rgba(23,23,28,0.035) 0 10px, transparent 10px 20px), #F1F1F4; }
.dh-ev-img > svg { width: 46px; height: 46px; }
.dh-ev-date { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--ink); background: #FFFFFF; border-radius: 999px; }
.dh-cal { position: absolute; z-index: 2; top: 12px; right: 12px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--ink); background: rgba(255,255,255,0.9); border-radius: 50%; }
.dh-cal svg { width: 17px; height: 17px; }
.dh-ev h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dh-ev-link { color: var(--ink); text-decoration: none; }
.dh-ev-link::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.dh-ev-link:hover { color: var(--dh-red); }
.dh-prog { width: 100%; height: 4px; overflow: hidden; background: #EDEDF0; border-radius: 999px; }
.dh-prog span { display: block; height: 100%; background: var(--dh-red); border-radius: 999px; }
.dh-org { display: flex; align-items: center; gap: 10px; min-width: 0; padding-top: 2px; }
.dh-org .dh-av { width: 32px; height: 32px; font-size: 11px; }
.dh-org b { display: block; font-size: 14px; font-weight: 600; } .dh-org small { display: block; font-size: 12px; color: #6B6B76; }
.dh-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; border-radius: 999px; }
.dh-chip svg { width: 13px; height: 13px; }
.dh-chip.ev-meeting, .dh-chip.t-grey { color: #3F3F48; background: #EDEDF0; } .dh-chip.ev-mass, .dh-chip.t-red { color: #9B1218; background: var(--dh-red-tint); }
.dh-chip.ev-degree, .dh-chip.t-gold { color: #6E4B00; background: #FFF6DC; } .dh-chip.ev-parade, .dh-chip.t-blue { color: #2348B8; background: #E8EEFC; }
.dh-chip.ev-outreach, .dh-chip.t-green { color: #17643A; background: #E6F6EC; }
/* Recent activity */
.dh-tbl { width: 100%; border-collapse: collapse; }
.dh-tbl th { padding: 0 12px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6B6B76; text-align: left; }
.dh-tbl td { height: 72px; padding: 10px 12px; vertical-align: middle; border-top: 1px solid #F0F0F3; }
.dh-tbl tr > :first-child { padding-left: 4px; } .dh-tbl tr > :last-child { padding-right: 4px; }
.dh-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dh-person b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; } .dh-person small { display: block; font-size: 12px; color: #6B6B76; }
.dh-what { font-size: 15px; line-height: 1.45; }
.dh-open { width: 50px; text-align: right; }
/* Right rail */
.home-rail { min-width: 0; display: flex; flex-direction: column; gap: 28px; padding: 24px; background: var(--dh-rail); border-radius: 28px; }
.dh-ov, .dh-off { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dh-ring { position: relative; width: 132px; height: 132px; margin: 6px auto 0; }
.dh-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dh-ring circle { fill: none; stroke-width: 6; }
.dh-ring .trk { stroke: #E6E6EC; } .dh-ring .val { stroke: var(--dh-red); stroke-linecap: round; }
.dh-av.xl { position: absolute; inset: 14px; width: auto; height: auto; font-size: 30px; color: #8F0F15; background: #FFFFFF; }
.dh-pct { position: absolute; top: 4px; right: -14px; padding: 3px 9px; font-size: 12px; font-weight: 700; color: #FFFFFF; background: var(--dh-red); border-radius: 999px; box-shadow: 0 0 0 3px var(--dh-rail); }
.dh-greet { margin: 4px 0 0; font-size: 20px; font-weight: 700; text-align: center; }
.dh-sub { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: #6B6B76; text-align: center; }
.dh-inner { position: relative; padding: 20px; background: #FFFFFF; border-radius: 20px; }
.dh-ct { margin: 0 0 14px; font-size: 14px; font-weight: 600; }
.dh-chart { display: grid; grid-template-columns: 26px minmax(0, 1fr); height: 150px; }
.dh-y { display: flex; flex-direction: column; justify-content: space-between; margin: -7px 0; padding-right: 6px; font-size: 12px; color: #6B6B76; text-align: right; font-variant-numeric: tabular-nums; }
.dh-plot { position: relative; }
.dh-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.dh-grid span { border-top: 1px dashed #E6E6EC; }
.dh-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-around; }
.dh-bar { width: 28px; height: 100%; display: flex; align-items: flex-end; border-radius: 8px 8px 0 0; }
.dh-bar > span { width: 100%; background: var(--dh-bar); border-radius: 8px 8px 0 0; }
.dh-bar.hl > span { background: var(--dh-red); }
.dh-tip { position: absolute; top: -8px; z-index: 3; transform: translate(-50%, -100%); padding: 6px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; color: #FFFFFF; background: #141416; border-radius: 8px; pointer-events: none; }
.dh-x { display: flex; justify-content: space-around; margin: 8px 0 0 26px; font-size: 12px; color: #6B6B76; }
.dh-offl { margin: 0; padding: 0; list-style: none; }
.dh-offl li { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.dh-offl li + li { border-top: 1px dashed #D4D4DA; }
.dh-offl li:first-child { padding-top: 0; } .dh-offl li:last-child { padding-bottom: 0; }
.dh-on { flex: 1; min-width: 0; }
.dh-on a, .dh-on small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-on a { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
.dh-on a:hover { text-decoration: underline; }
.dh-on small { font-size: 13px; color: #6B6B76; }
.dh-off .dh-inner { padding: 16px; }
.dh-msg { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; background: #FFFFFF; border: 1px solid var(--dh-ctl); border-radius: 999px; }
.dh-msg:hover { color: var(--ink); background: #F3F3F6; }
.dh-msg svg { width: 15px; height: 15px; }
.dh-seeall { display: flex; align-items: center; justify-content: center; height: 48px; font-size: 15px; font-weight: 700; color: #A3121A; text-decoration: none; background: var(--dh-red-tint); border-radius: 999px; }
.dh-seeall:hover { color: #7A0D13; background: #FADADC; }
.skel { background: linear-gradient(90deg, #E9E9EE 0%, #F4F4F7 50%, #E9E9EE 100%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
@keyframes skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
@media (max-width: 1279px) { .home { grid-template-columns: minmax(0, 1fr) 320px; } }
/* Narrow main column: each figure tile puts its icon above the words; narrow rail: "Message" shows its icon only */
@media (min-width: 768px) and (max-width: 1279px) {
  .dh-tile { position: relative; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .dh-tile .dh-km { position: absolute; top: 10px; right: 6px; }
}
@media (min-width: 1024px) and (max-width: 1279px), (max-width: 480px) {
  .dh-msg { width: 36px; padding: 0; justify-content: center; }
  .dh-msg-l { display: none; }
}
@media (max-width: 1023px) {
  .home { grid-template-columns: minmax(0, 1fr); }
  .dh-me { justify-content: flex-start; }
  .home-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
}
@media (max-width: 767px) {
  .home { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .home-main, .home-rail { grid-column: 1 / -1; }
  .dh-search .gsearch { display: none; }
  .dh-search .dh-search-open { display: inline-flex; }
  .dh-search.open { grid-column: 1 / -1; }
  .dh-search.open .gsearch { display: flex; flex: 1; }
  .dh-search.open .dh-search-open { display: none; }
  .dh-hero h2 { -webkit-line-clamp: 3; }
  .dh-me { gap: 8px; }
  .dh-who { font-size: 15px; } .dh-who .dh-av { width: 40px; height: 40px; }
  .dh-hero { min-height: 0; padding: 26px 22px; border-radius: 24px; }
  .dh-hero h2 { font-size: 24px; }
  .dh-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dh-evrow { grid-auto-columns: 78%; }
  .home-rail { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  /* Activity becomes a list: name, then the area chip, then what happened */
  .dh-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dh-tbl, .dh-tbl tbody { display: block; }
  .dh-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 14px 0; border-top: 1px solid #F0F0F3; }
  .dh-tbl tr:first-child { border-top: 0; }
  .dh-tbl td { height: auto; padding: 0 !important; border: 0; }
  .dh-tbl td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .dh-tbl td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .dh-tbl td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; font-size: 14px; }
  .dh-tbl td:nth-child(4) { grid-column: 2; grid-row: 1; width: auto; }
  .dh-person b { white-space: normal; }
}

/* ---------- Users and permissions ---------- */
.nowrap { white-space: nowrap; }
.linkish { padding: 0; font: inherit; font-weight: 700; color: inherit; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kpi.dark .linkish { color: var(--gold); }
.users-head, .set-head { flex-wrap: nowrap; padding: 24px 28px; border-radius: 26px; }
.uh-t { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.uh-t h1 { font-size: 34px; letter-spacing: -0.025em; }
.uh-t .sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.users-head .btn-red { height: 50px; padding: 0 22px; font-size: 16px; }
.users-tabs { align-self: flex-start; max-width: 100%; overflow-x: auto; }
.users-tabs button { height: 42px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
.users-tabs button[aria-selected="true"] { font-weight: 800; color: #FFFFFF; background: #141416; }
.users-card { padding: 0; border-radius: 28px; overflow: hidden; }
.ut-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 22px 24px; }
.ut-bar .search-box { width: 340px; max-width: 100%; }
.ut-help { flex: 1 1 280px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-align: right; align-self: center; }
.lblk.inl { min-width: 200px; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 14px; font-size: 14px; font-weight: 700; color: var(--ink); background: #FFF6DC; border: 1.5px solid #E2B100; border-radius: 999px; align-self: center; }
.filter-chip button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: 0; border-radius: 50%; cursor: pointer; }
.filter-chip svg { width: 12px; height: 12px; }
table.tbl.users-tbl thead tr, table.tbl.roles-tbl thead tr, table.tbl.log-tbl thead tr { background: #F3F3F6; }
table.tbl.users-tbl th, table.tbl.roles-tbl thead th, table.tbl.log-tbl th { height: 46px; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
table.tbl.users-tbl th { padding: 0 8px; white-space: normal; line-height: 1.25; }
table.tbl.users-tbl td { height: 74px; padding: 8px 8px; font-size: 15px; }
table.tbl.users-tbl .role-sel { min-width: 140px; font-size: 14px; }
table.tbl.users-tbl .switch { gap: 8px; font-size: 14px; }
table.tbl.users-tbl .ts { font-size: 14px; }
table.tbl.users-tbl tr > :first-child, table.tbl.roles-tbl tr > :first-child, table.tbl.log-tbl tr > :first-child { padding-left: 24px; }
table.tbl.users-tbl tr > :last-child, table.tbl.log-tbl tr > :last-child { padding-right: 24px; }
.users-tbl .ini { width: 44px; height: 44px; font-size: 14px; }
.who { min-width: 0; display: flex; flex-direction: column; }
.who b { font-size: 16px; font-weight: 700; white-space: nowrap; }
.who small { font-size: 14px; color: var(--muted); }
.you { display: inline-flex; align-items: center; height: 22px; margin-left: 6px; padding: 0 8px; vertical-align: 2px; font-size: 12px; font-weight: 800; color: #3D2E00; background: var(--gold); border-radius: 6px; }
.role-sel { height: 44px; min-width: 150px; padding: 0 34px 0 12px; font: inherit; font-size: 15px; font-weight: 700; border: 1.5px solid; border-radius: 10px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333343B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.role-sel.admin { color: #A3121A; background-color: #FDECEC; border-color: #B3141B; }
.role-sel.officer { color: #2348B8; background-color: #E8EEFC; border-color: #2D57D6; }
.role-sel.clerk { color: #6E4B00; background-color: #FFF6DC; border-color: #C99A06; }
.role-sel.viewer { color: var(--ink); background-color: #F6F6F8; border-color: #8C8D98; }
.role-sel:disabled { cursor: not-allowed; opacity: 0.85; }
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink-3); background: none; border: 0; cursor: pointer; }
.switch .track { position: relative; width: 48px; height: 28px; flex: none; border-radius: 999px; background: #C9CAD2; transition: background 150ms ease-out; }
.switch .track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 150ms ease-out; }
.switch[aria-checked="true"] { color: #17643A; font-weight: 700; }
.switch[aria-checked="true"] .track { background: #1B7F4A; }
.switch[aria-checked="true"] .track::after { transform: translateX(20px); }
.switch:disabled { cursor: not-allowed; opacity: 0.6; }
.chip-t { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.chip-t.dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-t.green { color: #17643A; background: #E6F6EC; } .chip-t.grey { color: #3F3F48; background: #EDEDF0; } .chip-t.blue { color: #2348B8; background: #E8EEFC; } .chip-t.red { color: #9B1218; background: #FDECEC; }
.ts { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.ts svg { width: 18px; height: 18px; flex: none; }
.ts.on { color: #17643A; } .ts.off { color: #A3121A; } .ts.none { font-weight: 600; color: var(--ink-3); }
.users-tbl td.act, .log-tbl td.act { text-align: right; }
.users-tbl .act .btn { height: 42px; padding: 0 12px; font-size: 14px; border-radius: 12px; }
.ut-note { margin: 0; padding: 18px 24px 22px; font-size: 14px; line-height: 1.6; color: var(--ink-3); border-top: 1px solid var(--line-2); }
.ut-note b { color: var(--ink); }
table.tbl.roles-tbl tbody th { padding: 12px 14px 12px 24px; font-size: 15px; font-weight: 600; color: var(--ink); text-align: left; white-space: normal; border-bottom: 1px solid #EEEEF1; }
table.tbl.roles-tbl td { font-size: 15px; }
.pm { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.pm svg { width: 16px; height: 16px; }
.pm.yes { color: #17643A; } .pm.no { font-weight: 500; color: var(--muted); } .pm.with { color: #6E4B00; }
table.tbl.log-tbl td { padding: 12px 14px; font-size: 15px; vertical-align: top; }
.iv-ml { display: flex; flex-direction: column; gap: 4px; }
.iv-pick { display: flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); text-align: left; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.iv-pick:hover { background: #FFFFFF; border-color: var(--field); }
.iv-pick small { font-weight: 500; color: var(--muted); }
@media (max-width: 767px) {
  .users-head, .set-head { flex-wrap: wrap; padding: 20px; }
  .uh-t h1 { font-size: 26px; }
  .ut-help { text-align: left; }
  /* Each user becomes a card */
  table.tbl.users-tbl, table.tbl.users-tbl tbody, table.tbl.users-tbl tr, table.tbl.users-tbl td { display: block; width: 100%; }
  table.tbl.users-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.tbl.users-tbl tr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px; border-bottom: 1px solid var(--line-2); }
  table.tbl.users-tbl td { width: auto; height: auto; padding: 0 !important; border: 0; }
  table.tbl.users-tbl td:first-child, table.tbl.users-tbl td:nth-child(2) { width: 100%; }
  table.tbl.users-tbl td.act { width: 100%; text-align: left; }
  table.tbl.users-tbl td.act:empty { display: none; }
  table.tbl.roles-tbl, table.tbl.log-tbl { min-width: 640px; }
}

/* ---------- Settings ---------- */
.save-chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; flex: none; font-size: 15px; font-weight: 700; border: 1.5px solid; border-radius: 999px; white-space: nowrap; }
.save-chip svg { width: 16px; height: 16px; }
.save-chip.is-saved { color: #0F5132; background: #EAF6EF; border-color: #1B7F4A; }
.save-chip.is-dirty { color: #6E4B00; background: #FFF6DC; border-color: #C99A06; }
.save-chip.is-saving { color: var(--ink-2); background: #F3F3F6; border-color: #9B9BA5; }
.set-cols { display: grid; grid-template-columns: 380px minmax(0, 1fr); align-items: start; gap: 24px; }
.set-menu { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 28px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--glass-border); }
.set-menu a { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 12px 14px; color: var(--ink); text-decoration: none; border-radius: 18px; }
.set-menu a:hover { color: var(--ink); background: rgba(246,246,249,0.9); }
.set-menu a b { display: block; font-size: 17px; font-weight: 600; }
.set-menu a small { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-3); }
.st-ic { width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--ink); background: #F0F0F4; border-radius: 14px; }
.st-ic svg { width: 21px; height: 21px; }
.set-menu a[aria-current="page"] { background: #FDECEC; }
.set-menu a[aria-current="page"] b { font-weight: 800; }
.set-menu a[aria-current="page"] .st-ic { color: #FFFFFF; background: #B3141B; }
.set-pick { display: none; }
.set-panel { padding: 36px; border-radius: 32px; }
#set-form { display: flex; flex-direction: column; gap: 24px; }
.set-panel h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.set-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
#set-form > .set-sub { margin-top: -18px; }
.note-grey { margin: 0; padding: 12px 16px; font-size: 14px; line-height: 1.55; color: var(--ink-2); background: #F3F3F6; border-radius: 14px; }
.emblem-box { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; padding: 22px; background: #F8F8FA; border: 1px solid var(--line-2); border-radius: 24px; }
.emb-tile { width: 120px; height: 120px; flex: none; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: 1px solid var(--line); border-radius: 22px; }
.emb-tile img { max-width: 86%; max-height: 86%; object-fit: contain; }
.emb-t { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.emb-t b { font-size: 19px; font-weight: 700; }
.emb-t span { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.emb-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.emb-act .btn { height: 50px; padding: 0 20px; font-size: 16px; font-weight: 700; }
.emb-q { font-size: 14px; font-weight: 700; color: var(--ink-3); }
.emb-err { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; color: var(--bad-d); }
.btn-ghost-dark { color: var(--ink-2); background: transparent; border-color: var(--line); }
.set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.set-panel .fld > label { font-size: 15px; font-weight: 700; }
.set-panel .input { height: 56px; font-size: 16px; background: #F6F6F8; border: 1.5px solid #9B9BA5; border-radius: 14px; }
.set-panel .input[readonly], .set-panel .input:disabled { color: var(--ink-2); background: #F3F3F6; border-color: var(--line); }
.set-panel .fld .hint { font-size: 13px; }
.save-bar { position: sticky; bottom: 16px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 20px; font-size: 15px; font-weight: 700; color: #FFFFFF; background: #141416; border-radius: 18px; box-shadow: 0 16px 40px rgba(14,11,12,0.3); }
.save-bar > div { display: flex; gap: 10px; }
.save-bar .btn:not(.btn-red) { color: #FFFFFF; background: transparent; border-color: rgba(255,255,255,0.4); }
.set-group { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.set-group h3 { font-size: 18px; font-weight: 800; }
.set-group > .set-sub { margin-top: -6px; }
.set-info { margin: 0; display: flex; flex-direction: column; }
.set-info > div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 4px 20px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.set-info > div:last-child { border-bottom: 0; }
.set-info dt { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.set-info dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.remark-list, .chan-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.remark-list li { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 15px; }
.remark-list .pill { justify-self: start; font-size: 13px; }
.rank-list { margin: 0; padding-left: 22px; columns: 2; font-size: 15px; line-height: 1.9; }
.chan-list li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #F8F8FA; border-radius: 16px; }
.chan-list li > span:nth-child(2) { flex: 1; min-width: 0; }
.chan-list b { display: block; font-size: 16px; } .chan-list small { display: block; font-size: 13px; color: var(--ink-3); }
.exp-row { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 1023px) {
  .set-cols { grid-template-columns: minmax(0, 1fr); }
  .set-menu { flex-direction: row; overflow-x: auto; padding: 8px; border-radius: 20px; }
  .set-menu a { flex: none; min-height: 52px; padding: 8px 14px 8px 8px; }
  .set-menu a small { display: none; }
  .set-menu .st-ic { width: 36px; height: 36px; border-radius: 10px; }
  .set-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .set-menu { padding: 12px; }
  .set-menu a { display: none; }
  .set-pick { display: block; }
  .set-panel { padding: 22px; border-radius: 24px; }
  .set-panel h2 { font-size: 24px; }
  .set-info > div { grid-template-columns: minmax(0, 1fr); }
  .remark-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rank-list { columns: 1; }
}

/* ---------- Dialogs and messages ---------- */
.overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(14,11,12,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dialog { width: 520px; max-width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; padding: 28px; border-radius: 28px; background: rgba(255,255,255,0.97); border: var(--glass-border); box-shadow: 0 30px 80px rgba(14,11,12,0.4); display: flex; flex-direction: column; gap: 16px; }
.dialog-h { display: flex; gap: 14px; align-items: flex-start; }
.dialog-h .ic { width: 48px; height: 48px; flex: none; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.dialog-h .ic svg { width: 24px; height: 24px; }
.dialog h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.dialog p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.dialog .reason { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.dialog .reason select { height: 44px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); background: #FFFFFF; border: 1px solid var(--field); border-radius: 12px; }
.dialog .reason select[aria-invalid="true"] { border: 2px solid var(--bad-d); }
.dialog .facts { margin: 0; padding: 12px 14px 12px 30px; border-radius: 14px; background: var(--soft); display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
#toast-root { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: flex; flex-direction: column; gap: 10px; max-width: calc(100% - 48px); }
.toast { width: 420px; max-width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; color: #FFFFFF; background: #141416; box-shadow: 0 20px 50px rgba(14,11,12,0.35); }
.toast > svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.toast div { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.toast strong { font-size: 14px; word-break: break-word; }
.toast span { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.82); }
.toast .x, .undo .x { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; background: rgba(255,255,255,0.12); border: 0; border-radius: 10px; cursor: pointer; }
.toast .x svg, .undo .x svg { width: 14px; height: 14px; }
.undo { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 75; width: 560px; max-width: calc(100% - 48px); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-radius: 18px; color: #FFFFFF; background: var(--ink); box-shadow: 0 20px 50px rgba(14,11,12,0.35); }
.undo > svg { width: 20px; height: 20px; flex: none; stroke: var(--gold); }
.undo span { flex: 1; font-size: 14px; line-height: 1.4; }
.undo .go { height: 38px; padding: 0 14px; font-size: 14px; font-weight: 800; color: var(--ink); background: var(--gold); border: 0; border-radius: 12px; cursor: pointer; }
.undo .x { width: 38px; height: 38px; border-radius: 12px; }

/* ---------- Light and dark mode: the sidebar switch and Settings > Appearance ---------- */
.side-foot { margin-top: auto; padding: 0 8px; }
.theme-tg { position: relative; width: 76px; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; cursor: pointer; }
.theme-tg:hover { background: rgba(255,255,255,0.12); }
.theme-tg svg { position: relative; z-index: 1; width: 17px; height: 17px; transition: color 200ms ease-out; }
.tg-knob { position: absolute; left: 3px; top: 3px; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); transition: transform 200ms ease-out, background 200ms ease-out; }
.theme-tg[data-on="light"] .tg-sun { color: #141416; }
.theme-tg[data-on="dark"] .tg-knob { transform: translateX(38px); background: #F3F3F6; }
.theme-tg[data-on="dark"] .tg-moon { color: #141416; }
@media (min-width: 981px) and (max-width: 1279px) { .side-foot { padding: 0; display: flex; justify-content: center; width: 100%; } .theme-tg { width: 60px; padding: 0 6px; } .theme-tg[data-on="dark"] .tg-knob { transform: translateX(22px); } }
/* A short cross-fade between modes; never for people who ask for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after { transition: background-color 250ms ease-out, border-color 250ms ease-out, color 250ms ease-out, fill 250ms ease-out !important; }
}
.ap-cards { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ap-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 16px; background: var(--ctl-bg); border: 1.5px solid var(--line); border-radius: 22px; cursor: pointer; }
.ap-card:hover { border-color: var(--field); }
.ap-card:has(input:checked) { border: 2px solid var(--red); padding: 11.5px 11.5px 15.5px; }
.ap-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ap-t { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.ap-t b { font-size: 16px; font-weight: 700; }
.ap-t small { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.ap-mark { position: absolute; top: 20px; right: 20px; z-index: 2; width: 26px; height: 26px; display: none; align-items: center; justify-content: center; color: #FFFFFF; background: #B3141A; border-radius: 50%; box-shadow: 0 0 0 2px #FFFFFF; }
.ap-mark svg { width: 14px; height: 14px; }
.ap-card:has(input:checked) .ap-mark { display: flex; }
/* The little previews: a sidebar and a content card in each look */
.ap-prev { position: relative; height: 112px; display: flex; gap: 8px; padding: 10px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); }
.ap-prev i { display: block; }
.ap-side { width: 26%; border-radius: 8px; }
.ap-card-m { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 10px; }
.ap-card-m b { display: block; height: 7px; border-radius: 4px; }
.ap-card-m b:first-child { width: 70%; } .ap-card-m b:last-child { width: 45%; }
.ap-light { background: radial-gradient(120px 80px at 0% 0%, rgba(227,25,31,0.14), transparent 70%), #EEEEF1; }
.ap-light .ap-side { background: #141416; }
.ap-light .ap-card-m { background: #FFFFFF; }
.ap-light .ap-card-m b { background: #C9CAD2; } .ap-light .ap-card-m b:first-child { background: #B3141A; }
.ap-dark { background: radial-gradient(120px 80px at 0% 0%, rgba(227,25,31,0.18), transparent 70%), radial-gradient(120px 80px at 100% 100%, rgba(245,196,0,0.12), transparent 70%), #0E0B0C; }
.ap-dark .ap-side { background: #1E1B1F; border: 1px solid rgba(255,255,255,0.10); }
.ap-dark .ap-card-m { background: rgba(27,20,22,0.8); border: 1px solid rgba(255,255,255,0.10); }
.ap-dark .ap-card-m b { background: #55565F; } .ap-dark .ap-card-m b:first-child { background: #F5C400; }
.ap-system { padding: 0; }
.ap-half { position: absolute; inset: 0; display: flex; gap: 8px; padding: 10px; }
.ap-half.ap-dark { clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%); }
@media (max-width: 1100px) { .ap-cards { grid-template-columns: minmax(0, 1fr); } .ap-card { flex-direction: row; align-items: center; } .ap-prev { width: 170px; height: 96px; flex: none; } .ap-mark { top: auto; right: 16px; } }
@media (max-width: 480px) { .ap-prev { width: 120px; } }

/* ---------- Dark mode ----------
   Only on screen: printed pages always use the light look on white paper. Contrast is checked for
   WCAG 2.2 AA (4.5:1 text, 3:1 large text, icons and borders) against the dark glass cards. */
@media screen {
:root[data-theme="dark"] {
  --red-2: #FF8A8F; --red-dark: #FFB8BB;
  --ink: #F3F3F6; --ink-2: #DCDDE3; --ink-3: #B9BAC4; --muted: #B9BAC4;
  --line: rgba(255,255,255,0.16); --line-2: rgba(255,255,255,0.08); --line-3: rgba(255,255,255,0.10);
  --bg: #0E0B0C; --field: #7A7B86; --soft: #17171C; --soft-2: #202026;
  --ok-t: #8BDDB0; --ok-b: rgba(61,187,120,0.16); --ok-d: #3DBB78;
  --warn-t: #F5D45E; --warn-b: rgba(245,196,0,0.14); --warn-d: #E2B100;
  --bad-t: #FFB3AE; --bad-b: rgba(240,80,72,0.16); --bad-d: #FF7A72;
  --info-t: #A9C1FF; --info-b: rgba(91,130,240,0.18); --info-d: #6F95FF;
  --glass: rgba(27,20,22,0.8); --glass-border: 1px solid rgba(255,255,255,0.10);
  --sidebar-bg: #1C191C;
  --focus: #5B9BFF; --ctl-bg: #17171C; --meter-off: #3A3A42; --btn-bg: #1F1F25; --btn-hover: #26262D;
  --tint-0: #4A2226; --tint-1: #463813; --tint-2: #173A28; --tint-3: #1F2D55; --tint-4: #33333B;
  --pk-green-t: #8BDDB0; --pk-green-b: rgba(61,187,120,0.16); --pk-green-d: #3DBB78;
  --pk-blue-t: #A9C1FF; --pk-blue-b: rgba(91,130,240,0.18); --pk-blue-d: #6F95FF;
  --pk-red-t: #FFA39E; --pk-red-b: rgba(240,80,72,0.17); --pk-red-d: #F0605A;
  --pk-orange-t: #FFBE8A; --pk-orange-b: rgba(240,138,60,0.17); --pk-orange-d: #F08A3C;
  --pk-grey-t: #D6D7DE; --pk-grey-b: rgba(255,255,255,0.09); --pk-grey-d: #9B9CA6;
  --pk-gold-t: #F5D45E; --pk-gold-b: rgba(245,196,0,0.14); --pk-gold-d: #E2B100;
  --pk-red2-t: #FFA39E; --pk-red2-b: rgba(240,80,72,0.17); --pk-red2-d: #F0605A;
  --pk-orange2-t: #FFBE8A; --pk-orange2-b: rgba(240,138,60,0.17); --pk-orange2-d: #F08A3C;
  --pk-gold2-t: #F5D45E; --pk-gold2-b: rgba(245,196,0,0.14); --pk-gold2-d: #E2B100;
  --pk-none-d: #5A5B64;
  --ev-meeting: #8C8D98; --ev-mass: #E0464D; --ev-parade: #5B82F0; --ev-outreach: #2FA866;
  --dh-line: rgba(255,255,255,0.10); --dh-ctl: var(--field); --dh-rail: rgba(20,16,18,0.85); --dh-red-tint: rgba(227,25,31,0.18);
  /* Dark surfaces used below */
  --d-card: #1B1618; --d-raised: #1F1F25; --d-hover: #26262D; --d-menu: #201B1D; --d-track: #2A2A31; --d-sticky: #1A1517;
  --d-red-line: #E0464D;
}
[data-theme="dark"] .shell { background: radial-gradient(700px 500px at 0% 0%, rgba(227,25,31,0.11), transparent 70%), radial-gradient(640px 460px at 100% 100%, rgba(245,196,0,0.07), transparent 70%), #0E0B0C; }
[data-theme="dark"] .side { border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.45); }
[data-theme="dark"] .ap-card { background: var(--d-raised); }
[data-theme="dark"] .ap-card:has(input:checked) { border-color: var(--d-red-line); }
[data-theme="dark"] .ap-mark { box-shadow: 0 0 0 2px var(--d-raised); }
[data-theme="dark"] .ap-prev { border-color: rgba(255,255,255,0.10); }

/* Shared controls */
[data-theme="dark"] .btn-red { box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
[data-theme="dark"] .pages button[disabled], [data-theme="dark"] .pager .sq[disabled] { background: var(--soft-2); }
[data-theme="dark"] .btn-dark { color: #FFFFFF; background: #3A3A43; border: 1px solid rgba(255,255,255,0.22); }
[data-theme="dark"] .btn-dark:hover { color: #FFFFFF; background: #45454F; }
[data-theme="dark"] .btn-danger { background: #B42318; }
[data-theme="dark"] .btn-danger:hover { background: #8F1C13; }
[data-theme="dark"] .btn-light, [data-theme="dark"] .owed-btns .btn-light, [data-theme="dark"] .btn-remind, [data-theme="dark"] .btn-remove,
[data-theme="dark"] .btn-text.cancel, [data-theme="dark"] .btn-text.more, [data-theme="dark"] .eyebrow.red, [data-theme="dark"] .ts.off, [data-theme="dark"] .inp-h .wait { color: var(--red-2); }
[data-theme="dark"] .btn-remind:hover, [data-theme="dark"] .btn-remove:hover, [data-theme="dark"] .btn-outline-red:hover { color: var(--red-dark); background: rgba(227,25,31,0.14); }
[data-theme="dark"] .btn-outline-red { color: var(--red-2); border-color: rgba(255,138,143,0.55); }
[data-theme="dark"] .btn-white, [data-theme="dark"] .btn-white:hover { color: #141416; }
[data-theme="dark"] .input:focus, [data-theme="dark"] .search-box input:focus, [data-theme="dark"] .gsearch input:focus, [data-theme="dark"] .sel:focus,
[data-theme="dark"] .filter-panel select:focus, [data-theme="dark"] .filter-panel input:focus, [data-theme="dark"] .dialog .reason select:focus,
[data-theme="dark"] .list-foot select:focus, [data-theme="dark"] .deg-row .dt input:focus, [data-theme="dark"] .icon-input input:focus-visible { border-color: var(--gold); }
[data-theme="dark"] .card-dark, [data-theme="dark"] .fsec.official, [data-theme="dark"] .prog, [data-theme="dark"] .att-dark, [data-theme="dark"] .cover, [data-theme="dark"] .att-card.dark,
[data-theme="dark"] .kpi.dark, [data-theme="dark"] .ev-hero, [data-theme="dark"] .rep-hero, [data-theme="dark"] .protect, [data-theme="dark"] .toast, [data-theme="dark"] .preview,
[data-theme="dark"] .dtile, [data-theme="dark"] .stat.card-dark { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); }
/* Text on gold stays near-black in both modes */
[data-theme="dark"] .avatar, [data-theme="dark"] .aside-steps .n.on, [data-theme="dark"] .prog .mk.done, [data-theme="dark"] .lav, [data-theme="dark"] .undo .go,
[data-theme="dark"] .fsec.official .input.idno { color: #141416; }

/* Sign-in, forgot and reset password */
[data-theme="dark"] .auth-page { --page-bg: #0E0B0C; --surface: #151113; --text-primary: #F3F3F6; --text-secondary: #B9BAC4; --field-border: #7A7B86; --field-bg: #17171C;
  --brand-red: #FF8A8F; --brand-red-dark: #FFB8BB;
  background: radial-gradient(900px 600px at 0% 0%, rgba(227,25,31,0.12), transparent 70%), radial-gradient(800px 560px at 100% 100%, rgba(245,196,0,0.08), transparent 70%), var(--page-bg); }
[data-theme="dark"] .auth-shell { border-color: rgba(255,255,255,0.08); background: radial-gradient(700px 520px at 0% 0%, rgba(227,25,31,0.08), transparent 70%), var(--surface); box-shadow: 0 34px 90px rgba(0,0,0,0.5); }
[data-theme="dark"] .auth-aside { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
[data-theme="dark"] .icon-input > svg { stroke: #B9BAC4; }
[data-theme="dark"] .icon-input input:hover { border-color: #A3A4AE; }
[data-theme="dark"] .icon-input input:focus { background: #17171C; }
[data-theme="dark"] .icon-input input:focus-visible { box-shadow: 0 0 0 4px rgba(245,196,0,0.18); }
[data-theme="dark"] .pw-toggle:hover { background: rgba(255,138,143,0.10); }
[data-theme="dark"] .check-row { color: var(--text-primary); }
[data-theme="dark"] .btn-auth[disabled] { color: #B9BAC4; background: #2A2A31; }
[data-theme="dark"] .auth-alert { border-color: rgba(240,96,90,0.55); }
[data-theme="dark"] .auth-note { background: #17171C; }
[data-theme="dark"] .field-warn { color: var(--warn-t); }

/* Page frame, headers and search */
[data-theme="dark"] .page-head, [data-theme="dark"] .tabs, [data-theme="dark"] .list-card, [data-theme="dark"] .dir-card, [data-theme="dark"] .form-bar, [data-theme="dark"] .seg.ink { background: var(--glass); }
[data-theme="dark"] .page-head, [data-theme="dark"] .form-bar { box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
[data-theme="dark"] .search-box input, [data-theme="dark"] .gsearch input, [data-theme="dark"] .mem-tools-r .search-box input, [data-theme="dark"] .dh-search .gsearch input,
[data-theme="dark"] .bell, [data-theme="dark"] .kebab, [data-theme="dark"] .chipbox, [data-theme="dark"] .filter-panel select, [data-theme="dark"] .filter-panel input[type=date],
[data-theme="dark"] .list-foot select, [data-theme="dark"] .pages button, [data-theme="dark"] .dues-form .input, [data-theme="dark"] .pick.yn, [data-theme="dark"] .deg-row .dt input,
[data-theme="dark"] .sub-box .input, [data-theme="dark"] .photo-btns label, [data-theme="dark"] .photo-btns button, [data-theme="dark"] .vfield .input, [data-theme="dark"] .sel,
[data-theme="dark"] .pager .sq, [data-theme="dark"] .cal-nav .sq, [data-theme="dark"] .tile-check, [data-theme="dark"] .tile-radio, [data-theme="dark"] .sq-del,
[data-theme="dark"] .composer .input, [data-theme="dark"] .dh-ib, [data-theme="dark"] .dh-msg, [data-theme="dark"] .dialog .reason select, [data-theme="dark"] .set-panel .input,
[data-theme="dark"] .rp, [data-theme="dark"] .rsel, [data-theme="dark"] .filter-chip button { background-color: var(--ctl-bg); }
[data-theme="dark"] .tile-check, [data-theme="dark"] .tile-radio, [data-theme="dark"] .rp, [data-theme="dark"] .rsel, [data-theme="dark"] .set-panel .input, [data-theme="dark"] .qbtn { border-color: var(--field); }
[data-theme="dark"] .tile-check:has(input:checked), [data-theme="dark"] .tile-radio:has(input:checked) { border-color: var(--d-red-line); }
[data-theme="dark"] .pages button[aria-current="page"], [data-theme="dark"] .tabs button[aria-selected="true"], [data-theme="dark"] .users-tabs button[aria-selected="true"],
[data-theme="dark"] .seg.ink button[aria-pressed="true"], [data-theme="dark"] .fsec-h .num { color: #141416; background: #F3F3F6; }
[data-theme="dark"] .seg button[aria-pressed="true"] { background: #2E2E36; }
[data-theme="dark"] .menu, [data-theme="dark"] .gs-results { background: var(--d-menu); border-color: rgba(255,255,255,0.12); box-shadow: 0 18px 44px rgba(0,0,0,0.55); }
[data-theme="dark"] .pop, [data-theme="dark"] .dialog { background: rgba(30,24,26,0.98); box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
[data-theme="dark"] .pop li a.unread, [data-theme="dark"] .pop li button.unread { background: rgba(227,25,31,0.14); }
[data-theme="dark"] .pop .ndot { background: #5A5B64; }
[data-theme="dark"] .pop .when { color: var(--muted); }
[data-theme="dark"] .filter-panel { background: rgba(30,24,26,0.96); box-shadow: 0 14px 34px rgba(0,0,0,0.4); }
[data-theme="dark"] .bulk, [data-theme="dark"] .undo { background: #2A2A31; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 20px 50px rgba(0,0,0,0.45); }
[data-theme="dark"] .save-bar { background: #2A2A31; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 16px 40px rgba(0,0,0,0.5); }
[data-theme="dark"] .date-chip.dark { background: #141416; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
[data-theme="dark"] .attn a, [data-theme="dark"] .attn button, [data-theme="dark"] .form-quote, [data-theme="dark"] .pick { background: var(--soft); }
[data-theme="dark"] .attn button:hover { background: var(--d-hover); }
[data-theme="dark"] .bar-track, [data-theme="dark"] .standing .bar-track, [data-theme="dark"] .rbar, [data-theme="dark"] .readbar, [data-theme="dark"] .hbars .tr, [data-theme="dark"] .gbar, [data-theme="dark"] .dh-prog { background: var(--d-track); }
[data-theme="dark"] a.stat2:hover { background: rgba(40,32,35,0.92); }
[data-theme="dark"] .perm-ok, [data-theme="dark"] .cover-btns .perm-ok { color: var(--ok-t); background: var(--ok-b); border-color: var(--ok-d); }
[data-theme="dark"] #filter-btn.on { background: var(--warn-b); border-color: var(--warn-d); }

/* Tables: header row #17171C, rows separated by white at 8% */
[data-theme="dark"] table.tbl td, [data-theme="dark"] table.tbl.roll.cadets td, [data-theme="dark"] table.tbl.roles-tbl tbody th { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] table.tbl.list thead tr, [data-theme="dark"] table.tbl.dd thead tr, [data-theme="dark"] table.tbl.users-tbl thead tr, [data-theme="dark"] table.tbl.roles-tbl thead tr,
[data-theme="dark"] table.tbl.log-tbl thead tr, [data-theme="dark"] table.tbl.roll thead th { background: #17171C; }
[data-theme="dark"] table.tbl.owed th { border-bottom-color: var(--line); }
[data-theme="dark"] .person a.name, [data-theme="dark"] .dir-card h2 a, [data-theme="dark"] .roll .nm a, [data-theme="dark"] .cadet-roll .cname { text-decoration-color: rgba(255,255,255,0.35); }
[data-theme="dark"] table.tbl.dd .mcol, [data-theme="dark"] table.tbl.roll.cadets td:first-child { background: var(--d-sticky); }

/* Member form and profile */
[data-theme="dark"] .pick:has(input:checked) { background: #24242B; border-color: var(--d-red-line); }
[data-theme="dark"] .deg-row, [data-theme="dark"] .sub-box { background: var(--soft); }
[data-theme="dark"] .fsec.official .input { color: var(--ink); background: #17171C; border: 1px solid var(--field); }
[data-theme="dark"] .fsec.official .input[readonly] { color: var(--ink-2); background: #222228; }
[data-theme="dark"] .fsec.official .input.idno { background: var(--gold); border: 0; }
[data-theme="dark"] .ok-banner { border-color: rgba(61,187,120,0.45); }
[data-theme="dark"] .ok-banner .ic, [data-theme="dark"] .ok-banner button.btn { background: #1B7F4A; }
[data-theme="dark"] .ok-banner a.btn { border-color: rgba(61,187,120,0.55); }
[data-theme="dark"] .photo-hint { color: var(--muted); }
[data-theme="dark"] .prof-card, [data-theme="dark"] .prof-main { background: rgba(27,20,22,0.94); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
[data-theme="dark"] .big-av .av { box-shadow: 0 0 0 5px #1B1416, 0 0 0 8px var(--gold), 0 18px 40px rgba(0,0,0,0.4); }
[data-theme="dark"] .big-av label, [data-theme="dark"] .av-stack .av { border-color: #1B1416; }
[data-theme="dark"] .contact a, [data-theme="dark"] .contact span { background: #24242B; }
[data-theme="dark"] .sec-nav button[aria-current="true"] { background: rgba(227,25,31,0.18); }
[data-theme="dark"] .sec-nav .d { background: #5A5B64; }
[data-theme="dark"] .editing-tag, [data-theme="dark"] .chip-gold { color: var(--warn-t); border-color: rgba(245,196,0,0.45); }
[data-theme="dark"] .saved-msg { border-color: rgba(61,187,120,0.45); }
[data-theme="dark"] .panel, [data-theme="dark"] .emblem-box, [data-theme="dark"] .chan-list li { background: #1A1A1F; }
[data-theme="dark"] .journey .dotj { background: #1A1A1F; }
[data-theme="dark"] .journey .box { background: #222228; }
[data-theme="dark"] .journey .box.got { background: rgba(245,196,0,0.10); }
[data-theme="dark"] .vfield .val, [data-theme="dark"] .ev-tiles > div, [data-theme="dark"] .qtile, [data-theme="dark"] .note-grey,
[data-theme="dark"] .composer .input[readonly], [data-theme="dark"] .composer select:disabled, [data-theme="dark"] .set-panel .input[readonly], [data-theme="dark"] .set-panel .input:disabled { background: var(--d-raised); }
[data-theme="dark"] .edit-bar .discard { background: transparent; border-color: var(--d-red-line); }

/* Status chips: same meaning, dark versions, always with the word */
[data-theme="dark"] .rpill.ok, [data-theme="dark"] .chip-s.green, [data-theme="dark"] .ev-chip.outreach, [data-theme="dark"] .cat-finance, [data-theme="dark"] .st-sent, [data-theme="dark"] .sv-st.submitted,
[data-theme="dark"] .chip-t.green, [data-theme="dark"] .dh-chip.ev-outreach, [data-theme="dark"] .dh-chip.t-green, [data-theme="dark"] .cs.ok, [data-theme="dark"] .dh-ti.green { color: var(--pk-green-t); background: var(--pk-green-b); }
[data-theme="dark"] .rpill.far, [data-theme="dark"] .chip-s.blue, [data-theme="dark"] .ev-chip.parade, [data-theme="dark"] .cat-meeting, [data-theme="dark"] .st-scheduled, [data-theme="dark"] .sv-st.generated,
[data-theme="dark"] .chip-t.blue, [data-theme="dark"] .dh-chip.ev-parade, [data-theme="dark"] .dh-chip.t-blue, [data-theme="dark"] .dh-ti.blue { color: var(--pk-blue-t); background: var(--pk-blue-b); }
[data-theme="dark"] .rpill.bad, [data-theme="dark"] .ev-chip.mass, [data-theme="dark"] .cat-prayer, [data-theme="dark"] .chip-t.red, [data-theme="dark"] .chip-role,
[data-theme="dark"] .dh-chip.ev-mass, [data-theme="dark"] .dh-chip.t-red { color: var(--pk-red-t); background: var(--pk-red-b); }
[data-theme="dark"] .rpill.sick, [data-theme="dark"] .cs.no { color: var(--pk-orange-t); background: var(--pk-orange-b); }
[data-theme="dark"] .rpill.gone, [data-theme="dark"] .chip-s.grey, [data-theme="dark"] .ev-chip.meeting, [data-theme="dark"] .ev-chip.grey, [data-theme="dark"] .cat-general, [data-theme="dark"] .st-draft,
[data-theme="dark"] .chip-t.grey, [data-theme="dark"] .chip-role.grey, [data-theme="dark"] .ac-foot .ch, [data-theme="dark"] .dh-chip.ev-meeting, [data-theme="dark"] .dh-chip.t-grey,
[data-theme="dark"] .chip-none { color: var(--pk-grey-t); background: var(--pk-grey-b); }
[data-theme="dark"] .chip-rank, [data-theme="dark"] .ev-chip.degree, [data-theme="dark"] .cat-event, [data-theme="dark"] .sv-st.draft, [data-theme="dark"] .dh-chip.ev-degree, [data-theme="dark"] .dh-chip.t-gold { color: var(--pk-gold-t); background: var(--pk-gold-b); }
[data-theme="dark"] .rpill.none { color: var(--ink-2); background: var(--d-raised); }
[data-theme="dark"] .rpill.none .dot { background: var(--pk-none-d); }
[data-theme="dark"] .ev-chip.light { color: #141416; }
[data-theme="dark"] .date-pill, [data-theme="dark"] .sample-chip, [data-theme="dark"] .filter-chip { color: var(--warn-t); background: var(--warn-b); border-color: rgba(226,177,0,0.7); }
/* Roll call marks and remarks */
[data-theme="dark"] .rp { color: var(--ink-3); }
[data-theme="dark"] .rp.present:has(input:checked) { color: var(--pk-green-t); background: var(--pk-green-b); border-color: var(--pk-green-d); }
[data-theme="dark"] .rp.excuse:has(input:checked) { color: var(--pk-gold-t); background: var(--pk-gold-b); border-color: var(--pk-gold-d); }
[data-theme="dark"] .rp.absent:has(input:checked) { color: var(--pk-red-t); background: var(--pk-red-b); border-color: var(--pk-red-d); }
[data-theme="dark"] .rsel { color: var(--ink); }
[data-theme="dark"] .rsel.ok { color: var(--pk-green-t); background-color: #15281E; border-color: var(--pk-green-d); }
[data-theme="dark"] .rsel.sick { color: var(--pk-orange-t); background-color: #2E1F14; border-color: var(--pk-orange-d); }
[data-theme="dark"] .rsel.far { color: var(--pk-blue-t); background-color: #182037; border-color: var(--pk-blue-d); }
[data-theme="dark"] .rsel.bad { color: var(--pk-red-t); background-color: #301818; border-color: var(--pk-red-d); }
[data-theme="dark"] .rsel.gone { color: var(--pk-grey-t); background-color: #24242B; border-color: var(--pk-grey-d); }
/* Role menus on Users (solid colours, so the menu list that opens from them stays readable) */
[data-theme="dark"] .role-sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCDDE3' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
[data-theme="dark"] .role-sel.admin { color: var(--pk-red-t); background-color: #301818; border-color: var(--pk-red-d); }
[data-theme="dark"] .role-sel.officer { color: var(--pk-blue-t); background-color: #182037; border-color: var(--pk-blue-d); }
[data-theme="dark"] .role-sel.clerk { color: var(--pk-gold-t); background-color: #2C2410; border-color: var(--pk-gold-d); }
[data-theme="dark"] .role-sel.viewer { color: var(--ink); background-color: #24242B; border-color: var(--pk-grey-d); }
[data-theme="dark"] .switch .track { background: #4A4A52; }
[data-theme="dark"] .switch[aria-checked="true"], [data-theme="dark"] .ts.on, [data-theme="dark"] .pm.yes, [data-theme="dark"] .inp-h .ok { color: var(--ok-t); }
[data-theme="dark"] .pm.with { color: var(--warn-t); }
[data-theme="dark"] .save-chip.is-saved { color: var(--ok-t); background: var(--ok-b); border-color: var(--ok-d); }
[data-theme="dark"] .save-chip.is-dirty { color: var(--warn-t); background: var(--warn-b); border-color: var(--warn-d); }
[data-theme="dark"] .save-chip.is-saving { background: var(--d-raised); border-color: var(--field); }
[data-theme="dark"] .iv-pick:hover { background: var(--d-hover); }

/* Departments, Events, Announcements and Reports */
[data-theme="dark"] .dept-card, [data-theme="dark"] .ann-card { border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .dept-card:hover, [data-theme="dark"] .ann-card:hover { border-color: rgba(255,138,143,0.5); }
[data-theme="dark"] .dept-card.on, [data-theme="dark"] .ann-card.open, [data-theme="dark"] .ev-row.on { border-color: var(--d-red-line); box-shadow: none; }
[data-theme="dark"] .ann-card.pinned { background: rgba(245,196,0,0.08); border-color: rgba(245,196,0,0.5); }
[data-theme="dark"] .tile, [data-theme="dark"] .qi { color: var(--red-2); background: rgba(227,25,31,0.16); }
[data-theme="dark"] .dept-card.on .tile, [data-theme="dark"] .tile.solid { color: #FFFFFF; background: #B3141B; }
[data-theme="dark"] .sq-del { color: var(--red-2); }
[data-theme="dark"] .cd.has { background: #24242B; }
[data-theme="dark"] .cd.today { border-color: var(--d-red-line); }
[data-theme="dark"] .cd.sel { color: #FFFFFF; background: #34343C; border-color: var(--gold); }
[data-theme="dark"] .cd:hover:not(.blank):not(.sel) { background: var(--d-hover); }
[data-theme="dark"] .ev-row:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .stack .x, [data-theme="dark"] .dot.x { background: #4A4A52; }
[data-theme="dark"] .kpi .c .down { color: var(--red-2); }
[data-theme="dark"] .kpi .c .up { color: var(--ok-t); }
/* The message preview on Announcements stays a white phone notification */
[data-theme="dark"] .bubble { color: #17171C; }
[data-theme="dark"] .bubble .pb { color: #33343B; }
[data-theme="dark"] .bubble .ph { color: #55565F; }
[data-theme="dark"] .qbtn .spinner { border-color: rgba(255,255,255,0.25); border-top-color: var(--ink); }

/* Cadet Commandery: the emblem keeps a white rounded tile */
[data-theme="dark"] .cadet-emblem { mix-blend-mode: normal; padding: 8px; background: #FFFFFF; border-radius: 22px; }
[data-theme="dark"] .cadet-kpi .wm { display: none; }

/* Dashboard */
[data-theme="dark"] .dh-ib:hover, [data-theme="dark"] .dh-msg:hover, [data-theme="dark"] .dh-tile .dh-km .dh-ib:hover { color: var(--ink); background: var(--d-hover); }
[data-theme="dark"] .dh-ib.solid { color: #FFFFFF; background: #B3141B; }
[data-theme="dark"] .dh-dot { background: var(--d-red-line); box-shadow: 0 0 0 2px #17171C; }
[data-theme="dark"] .dh-div { background: rgba(255,255,255,0.16); }
[data-theme="dark"] .dh-who .dh-av, [data-theme="dark"] .dh-av.xl { color: var(--red-dark); }
[data-theme="dark"] .dh-av.xl { background: #241C1E; }
[data-theme="dark"] .dh-tile, [data-theme="dark"] .dh-card, [data-theme="dark"] .dh-inner { background: var(--d-card); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); }
[data-theme="dark"] .home-rail { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); }
[data-theme="dark"] .dh-ti.red { color: var(--red-2); }
[data-theme="dark"] .dh-tt small, [data-theme="dark"] .dh-empty, [data-theme="dark"] .dh-org small, [data-theme="dark"] .dh-tbl th, [data-theme="dark"] .dh-person small,
[data-theme="dark"] .dh-sub, [data-theme="dark"] .dh-y, [data-theme="dark"] .dh-x, [data-theme="dark"] .dh-on small { color: var(--muted); }
[data-theme="dark"] .dh-ev-img { color: #8C8D98; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px), var(--d-raised); }
[data-theme="dark"] .dh-ev-date, [data-theme="dark"] .dh-cal { color: #F3F3F6; background: rgba(20,20,22,0.88); }
[data-theme="dark"] .dh-ev-link:hover, [data-theme="dark"] .dh-all { color: var(--red-2); }
[data-theme="dark"] .dh-prog span, [data-theme="dark"] .dh-bar.hl > span { background: var(--d-red-line); }
[data-theme="dark"] .dh-ring .trk { stroke: var(--d-track); }
[data-theme="dark"] .dh-ring .val { stroke: var(--d-red-line); }
[data-theme="dark"] .dh-tbl td, [data-theme="dark"] .dh-tbl tr { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .dh-grid span { border-top-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .dh-tip { background: #2A2A31; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
[data-theme="dark"] .dh-offl li + li { border-top-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .dh-seeall { color: var(--red-dark); }
[data-theme="dark"] .dh-seeall:hover { color: #FFD3D5; background: rgba(227,25,31,0.28); }
[data-theme="dark"] .skel { background: linear-gradient(90deg, #1F1F25 0%, #2A2A31 50%, #1F1F25 100%); background-size: 200% 100%; }

/* Settings */
[data-theme="dark"] .set-menu a:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .st-ic { background: #24242B; }
[data-theme="dark"] .set-menu a[aria-current="page"] { background: rgba(227,25,31,0.16); }
[data-theme="dark"] .emb-tile { border-color: rgba(255,255,255,0.12); }
}

/* ---------- Printing a member record ---------- */
@media print {
  body, .shell { background: #FFFFFF !important; }
  .side, .mobile-bar, .topbar, .cover-btns, .sec-nav, .btn-big, .big-av label, .edit-bar, #toast-root, .no-print { display: none !important; }
  .shell { padding: 0; }
  .cover { height: auto; padding: 12px 0; color: var(--ink); background: none; }
  .cover nav { display: none; }
  .prof-body { margin-top: 0; padding: 0; }
  .prof-card, .prof-main { box-shadow: none; border: 1px solid #DCDCE2; max-width: none; }
}