:root {
    --green-950: #0a3f2b;
    --green-800: #176b4a;
    --green-700: #21845e;
    --green-100: #dff3e9;
    --green-50: #f0faf5;
    --ink: #17332a;
    --muted: #63736d;
    --line: #dce6e1;
    --surface: #ffffff;
    --canvas: #f4f7f5;
    --danger: #b83a3a;
    --warning: #ad6c06;
    --shadow: 0 14px 40px rgba(20, 61, 46, .09);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--canvas);
    font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--canvas); }

body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); }

.app-layout, .app-content { min-width: 0; min-height: 100vh; }
.desktop-sidebar, .desktop-page-context { display: none; }

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .45rem; font-size: clamp(1.65rem, 5vw, 2.35rem); line-height: 1.08; letter-spacing: -.035em; }
h2 { margin-bottom: .25rem; font-size: 1.25rem; letter-spacing: -.02em; }
h3 { margin-bottom: .25rem; }
p { color: var(--muted); line-height: 1.55; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 68px; padding: .75rem max(1rem, env(safe-area-inset-left));
    background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.brand { display: inline-flex; gap: .7rem; align-items: center; }
.brand > span:last-child { display: grid; line-height: 1.05; }
.brand strong { font-size: .98rem; }
.brand small { margin-top: .2rem; color: var(--muted); font-size: .72rem; }
.brand-mark {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px;
    color: #fff; background: linear-gradient(145deg, var(--green-700), var(--green-950));
    box-shadow: 0 7px 18px rgba(23, 107, 74, .24); font-weight: 800; letter-spacing: -.04em;
}
.brand-mark svg { width: 27px; height: 27px; }
.brand-mark-large { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 21px; }
.brand-mark-large svg { width: 42px; height: 42px; }
.operator-menu { display: flex; align-items: center; gap: .65rem; }
.operator-name { display: none; color: var(--muted); font-size: .85rem; }
.header-account { display: flex; min-width: 0; align-items: center; gap: .55rem; }
.header-account > span { display: grid; flex: 0 0 40px; height: 40px; place-items: center; border: 1px solid #b8ddcc; border-radius: 13px; color: var(--green-800); background: var(--green-50); font-weight: 900; }
.header-account > strong { display: none; max-width: 150px; overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.header-settings { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--green-800); background: #fff; }
.header-settings.active, .header-settings:hover { background: var(--green-50); border-color: #b8ddcc; }
.header-settings svg { width: 20px; height: 20px; }

.page-shell { width: min(100%, 1060px); margin: 0 auto; padding: 1.1rem 1rem 7rem; }
.page-shell:has(.floating-add-button) { padding-bottom: calc(10.5rem + env(safe-area-inset-bottom)); }

.bottom-nav {
    position: fixed; z-index: 40; right: 0; bottom: 0; left: 0;
    display: grid; grid-template-columns: repeat(3, 1fr);
    padding: .65rem max(.75rem, env(safe-area-inset-right)) calc(.45rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(19, 63, 46, .07);
}
.bottom-nav a { display: grid; place-items: center; gap: .15rem; min-height: 54px; border-radius: 14px; color: #718079; font-size: .72rem; font-weight: 700; }
.bottom-nav a.active { color: var(--green-800); background: var(--green-50); }
.nav-icon { font-size: 1.45rem; line-height: 1; }
.nav-icon svg { display: block; width: 1em; height: 1em; }
.bottom-nav a.nav-primary {
    position: relative; min-height: 54px; padding-top: 1.75rem;
    color: var(--green-800); background: transparent;
}
.bottom-nav a.nav-primary.active { color: var(--green-950); background: transparent; }
.nav-primary-icon {
    position: absolute; top: -2rem; left: 50%;
    display: grid; place-items: center; width: 62px; height: 62px;
    color: #fff; background: linear-gradient(145deg, var(--green-700), var(--green-950));
    border: 5px solid #fff; border-radius: 50%;
    box-shadow: 0 10px 25px rgba(10, 63, 43, .34); transform: translateX(-50%);
    transition: transform .15s ease, box-shadow .15s ease;
}
.bottom-nav a.nav-primary:active .nav-primary-icon { box-shadow: 0 6px 16px rgba(10, 63, 43, .25); transform: translateX(-50%) scale(.94); }
.bottom-nav a.nav-primary.active .nav-primary-icon { box-shadow: 0 0 0 4px var(--green-100), 0 10px 25px rgba(10, 63, 43, .34); }
.nav-primary-icon svg { width: 28px; height: 28px; }

.button {
    display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: .4rem;
    padding: .7rem 1rem; border: 1px solid transparent; border-radius: 13px; cursor: pointer;
    font-weight: 750; transition: transform .15s ease, background .15s ease, opacity .15s ease;
}
.button:active { transform: scale(.98); }
.button:disabled { cursor: not-allowed; opacity: .45; }
.button.is-processing,
.button[aria-disabled="true"] { cursor: wait; opacity: .55; pointer-events: none; }
.button.is-processing:active { transform: none; }
.button-primary { color: #fff; background: var(--green-800); box-shadow: 0 7px 18px rgba(23, 107, 74, .18); }
.button-primary:hover { background: var(--green-950); }
.button-secondary { background: #fff; border-color: var(--line); color: var(--ink); }
.button-light { color: var(--green-950); background: #fff; }
.button-quiet { color: var(--green-800); background: var(--green-50); }
.button-danger { color: var(--danger); background: #fff1f1; border-color: #f3d2d2; }
.button-small { min-height: 38px; padding: .48rem .75rem; border-radius: 11px; font-size: .82rem; }
.button-full { width: 100%; }

.floating-add-button {
    position: fixed; z-index: 35; right: max(1rem, env(safe-area-inset-right)); bottom: calc(5.6rem + env(safe-area-inset-bottom));
    display: inline-flex; min-height: 52px; align-items: center; gap: .55rem; padding: .7rem 1rem .7rem .8rem;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; cursor: pointer; color: #fff;
    background: linear-gradient(145deg, var(--green-700), var(--green-950)); box-shadow: 0 14px 30px rgba(10, 63, 43, .32);
    font-size: .82rem; font-weight: 850; transition: transform .15s ease, box-shadow .15s ease;
}
.floating-add-button svg { width: 23px; height: 23px; }
.floating-add-button:active { box-shadow: 0 8px 18px rgba(10, 63, 43, .25); transform: scale(.96); }

.app-modal {
    position: fixed; inset: 0; width: min(calc(100% - 2rem), 680px); max-height: min(88dvh, 760px); margin: auto; padding: 0;
    overflow: visible; border: 1px solid rgba(184, 215, 201, .9); border-radius: 24px; color: var(--ink); background: #fff;
    box-shadow: 0 28px 80px rgba(8, 44, 31, .3);
}
.app-modal[open] { animation: modal-rise .18s ease-out; }
.app-modal::backdrop { background: rgba(7, 34, 25, .58); backdrop-filter: blur(4px); }
.app-modal-panel { display: flex; max-height: min(88dvh, 760px); overflow: hidden; flex-direction: column; border-radius: inherit; background: #fff; }
.app-modal-header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.15rem .95rem; border-bottom: 1px solid var(--line); background: linear-gradient(145deg, #f4fbf7, #fff); }
.app-modal-header > div { min-width: 0; }
.app-modal-header h2 { margin: .12rem 0 .2rem; }
.app-modal-header p { margin: 0; font-size: .76rem; }
.app-modal-close { display: grid; flex: 0 0 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; color: var(--muted); background: #fff; }
.app-modal-close svg { width: 20px; height: 20px; }
.app-modal-body { min-height: 0; padding: 1.1rem; overflow-y: auto; overscroll-behavior: contain; }
.modal-form-error { margin-bottom: 1rem; }
.app-modal-actions { position: sticky; bottom: -1.1rem; display: flex; gap: .65rem; margin: .15rem -1.1rem -1.1rem; padding: .85rem 1.1rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); }
.app-modal-actions .button { flex: 1 1 0; }
body.modal-open { overflow: hidden; }

@keyframes modal-rise {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.alert { display: grid; gap: .2rem; margin-bottom: 1rem; padding: .9rem 1rem; border-radius: 14px; font-size: .9rem; }
.alert-success { color: #0b5739; background: #ddf4e7; border: 1px solid #bce3cd; }
.alert-error { color: #8c2b2b; background: #fff0f0; border: 1px solid #f0caca; }

.eyebrow { margin-bottom: .35rem; color: var(--green-700); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.hero-panel { display: grid; gap: 1.2rem; margin-bottom: 1rem; padding: 1.35rem; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #176b4a 0%, #0b4d34 100%); box-shadow: var(--shadow); overflow: hidden; }
.hero-panel h1 { margin: 0; }
.hero-panel .eyebrow, .hero-panel p { color: #cde9dc; }
.hero-panel p:last-child { margin-bottom: 0; }

.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 1rem 0; }
.stat-card { display: grid; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 7px 22px rgba(20, 61, 46, .04); }
.stat-card span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.stat-card strong { margin: .3rem 0 .05rem; font-size: 1.8rem; line-height: 1; letter-spacing: -.04em; }
.stat-card small { color: var(--muted); }
.stat-total { grid-column: 1 / -1; color: #fff; background: #244d3e; border-color: #244d3e; }
.stat-total span, .stat-total small { color: #cae1d8; }
.two-columns .stat-card { grid-column: auto; }
.compact-stats { margin-top: 0; }
.attendance-overview { display: grid; gap: .75rem; margin: 1rem 0; }
.monthly-percentage-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #244d3e, #176b4a); box-shadow: var(--shadow); }
.monthly-percentage-card h2 { margin-bottom: .35rem; }
.monthly-percentage-card p:last-child { max-width: 540px; margin: 0; color: #d6ebe2; font-size: .82rem; }
.monthly-percentage-card .eyebrow { color: #bfe3d4; }
.percentage-large { display: grid; place-items: center; flex: 0 0 78px; height: 78px; border: 7px solid rgba(255, 255, 255, .28); border-top-color: #fff; border-radius: 50%; font-size: 1.25rem; font-weight: 900; }
.category-percentage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.category-percentage-card { display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.category-percentage-card > div { display: grid; gap: .15rem; }
.category-percentage-card span { font-size: .83rem; font-weight: 800; }
.category-percentage-card small { color: var(--muted); font-size: .7rem; }
.category-percentage-card strong { font-size: 1.35rem; }
.category-percentage-card.category-bapak { border-left: 4px solid #4f98d9; }
.category-percentage-card.category-ibu { border-left: 4px solid #d4779f; }

.dashboard-overview { margin-bottom: 1.05rem; }
.dashboard-hero { position: relative; isolation: isolate; margin-bottom: 0; padding-bottom: 3.4rem; }
.dashboard-hero::after { position: absolute; z-index: -1; top: -65px; right: -42px; width: 180px; height: 180px; border: 34px solid rgba(255, 255, 255, .08); border-radius: 50%; content: ''; }
.dashboard-hero-copy { display: grid; min-width: 0; gap: .35rem; }
.dashboard-hero-topline { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.dashboard-hero-label { width: max-content; padding: .25rem .55rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; color: #d8eee4; background: rgba(255, 255, 255, .08); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-hero-period { color: #d8eee4; font-size: .75rem; font-weight: 750; }
.dashboard-hero h1 { margin-top: .15rem; overflow-wrap: anywhere; font-size: clamp(1.45rem, 5vw, 2.15rem); text-wrap: balance; }
.dashboard-hero p { margin: 0; color: #d8eee4; font-size: .82rem; }
.dashboard-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.dashboard-hero-meta span { display: inline-flex; min-width: 0; align-items: center; gap: .35rem; padding: .36rem .52rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; color: #e9f6f0; background: rgba(255, 255, 255, .08); font-size: .72rem; font-weight: 750; }
.dashboard-hero-meta svg { flex: 0 0 14px; width: 14px; height: 14px; }
.dashboard-stat-dock { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; width: calc(100% - 1.25rem); margin: -2.65rem auto 0; padding: .42rem; border: 1px solid rgba(255, 255, 255, .72); border-radius: 20px; background: rgba(255, 255, 255, .95); box-shadow: 0 12px 28px rgba(14, 61, 44, .12), 0 2px 8px rgba(14, 61, 44, .06); backdrop-filter: blur(14px); }
.dashboard-metric { display: flex; min-width: 0; align-items: center; gap: .6rem; padding: .68rem; border-radius: 16px; }
.dashboard-metric-total { grid-column: 1 / -1; border: 1px solid #cae6d9; background: linear-gradient(135deg, #eaf7f1 0%, #f8fcfa 100%); }
.dashboard-metric-icon { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--green-800); background: #dff2e9; }
.dashboard-metric-icon svg { width: 21px; height: 21px; }
.dashboard-metric-copy { display: grid; min-width: 0; gap: .1rem; }
.dashboard-metric-copy > span { overflow: hidden; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-metric-copy > strong, .dashboard-metric-copy > div > strong { color: var(--ink); font-size: 1.4rem; line-height: 1; letter-spacing: -.04em; }
.dashboard-metric-copy > div { display: flex; align-items: baseline; gap: .42rem; }
.dashboard-metric-copy > div > strong { color: var(--green-950); font-size: 1.75rem; }
.dashboard-metric-copy > div > small { color: var(--green-700); font-size: .68rem; font-weight: 750; }
.dashboard-metric-bapak .dashboard-metric-icon { color: #236ea9; background: #e7f2ff; }
.dashboard-metric-ibu .dashboard-metric-icon { color: #a74d74; background: #fce9f1; }
.dashboard-overview + .dashboard-attendance { margin-top: 0; }
.dashboard-attendance { display: grid; gap: .8rem; margin-top: 1.15rem; padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.dashboard-attendance-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.dashboard-attendance-heading > div { display: grid; gap: .12rem; }
.dashboard-attendance-heading > div > span { color: var(--green-700); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-attendance-heading h2 { margin: 0; font-size: 1.05rem; }
.month-badge { flex: 0 0 auto; padding: .36rem .55rem; border-radius: 999px; color: var(--green-800); background: var(--green-50); font-size: .72rem; font-weight: 800; }
.dashboard-attendance-main { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #244d3e, #176b4a); }
.dashboard-attendance-ring { display: grid; flex: 0 0 82px; width: 82px; height: 82px; place-items: center; padding: 7px; border-radius: 50%; background: conic-gradient(#dff7eb calc(var(--attendance-progress) * 1%), rgba(255, 255, 255, .17) 0); }
.dashboard-attendance-ring > div { display: grid; width: 100%; height: 100%; place-content: center; border-radius: 50%; background: #1d6249; text-align: center; }
.dashboard-attendance-ring strong { font-size: 1.14rem; line-height: 1; }
.dashboard-attendance-ring span { max-width: 58px; margin: .14rem auto 0; color: #cce9dc; font-size: .62rem; font-weight: 800; letter-spacing: .04em; line-height: 1.15; text-transform: uppercase; }
.dashboard-attendance-ring.is-empty { background: rgba(255, 255, 255, .17); }
.dashboard-attendance-copy { display: grid; gap: .25rem; }
.dashboard-attendance-copy strong { font-size: 1.2rem; }
.dashboard-attendance-copy span { color: #d8eee4; font-size: .8rem; line-height: 1.4; }
.dashboard-attendance-copy .dashboard-attendance-status { width: max-content; padding: .2rem .4rem; border-radius: 7px; color: #d8eee4; background: rgba(255, 255, 255, .1); font-size: .68rem; font-weight: 800; }
.dashboard-category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.dashboard-category-card { display: grid; gap: .55rem; min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 14px; background: #fbfdfc; }
.dashboard-category-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .5rem; }
.dashboard-category-heading > div { display: grid; min-width: 0; gap: .12rem; }
.dashboard-category-card span { font-size: .78rem; font-weight: 800; }
.dashboard-category-card small { color: var(--muted); font-size: .7rem; }
.dashboard-category-heading > strong { font-size: 1.25rem; }
.dashboard-category-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #e7eeea; }
.dashboard-category-progress span { display: block; width: calc(var(--category-progress) * 1%); height: 100%; border-radius: inherit; background: var(--green-700); }
.dashboard-category-card p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.dashboard-category-card p strong { color: var(--ink); font-size: .78rem; }
.dashboard-category-card.category-bapak { border-left: 4px solid #4f98d9; }
.dashboard-category-card.category-ibu { border-left: 4px solid #d4779f; }
.dashboard-category-card.category-bapak .dashboard-category-progress span { background: #4f98d9; }
.dashboard-category-card.category-ibu .dashboard-category-progress span { background: #d4779f; }
.dashboard-record-section { margin-top: 1.15rem; }
.dashboard-record-heading { align-items: stretch; flex-direction: column; }
.dashboard-record-heading > div { display: grid; gap: .12rem; }
.dashboard-section-kicker { color: var(--green-700); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-record-heading p { margin: 0; font-size: .74rem; }
.dashboard-empty-state { gap: .25rem; padding-block: 2rem; }
.dashboard-empty-state .empty-icon svg { width: 25px; height: 25px; }
.dashboard-empty-state h3 { margin: .35rem 0 0; }
.dashboard-empty-state p { margin: 0 0 .75rem; font-size: .78rem; }

.section-block { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.section-heading, .page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.desktop-heading-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .55rem; }
.desktop-page-action, .desktop-heading-intro { display: none; }
.desktop-page-action svg { width: 18px; height: 18px; }
.section-heading { align-items: center; margin-bottom: 1rem; }
.section-heading h2, .page-heading h1 { margin-bottom: .15rem; }
.page-heading { margin: .35rem 0 1.1rem; }
.page-heading p:last-child { margin-bottom: 0; }
.attendance-page-heading p:last-child { font-size: .76rem; line-height: 1.45; }
.form-heading { display: block; }
.attendance-form-heading p:last-child { max-width: 620px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.back-link { display: inline-block; margin-bottom: 1rem; color: var(--green-800); font-size: .9rem; font-weight: 750; }
.count-pill { padding: .35rem .6rem; border-radius: 999px; color: var(--green-800); background: var(--green-50); font-size: .78rem; font-weight: 800; white-space: nowrap; }

.empty-state { display: grid; justify-items: center; padding: 2.5rem 1rem; text-align: center; border-radius: 16px; background: var(--green-50); }
.empty-state p { max-width: 410px; }
.empty-state.compact { padding: 1.5rem 1rem; }
.attendance-empty-state p { margin-top: .35rem; font-size: .72rem; line-height: 1.5; }
.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: .75rem; border-radius: 50%; color: var(--green-700); background: #fff; font-size: 1.6rem; }

.record-list { display: grid; gap: .75rem; }
.record-card { display: block; padding: 1rem; border: 1px solid var(--line); border-radius: 17px; background: #fff; transition: border-color .15s ease, transform .15s ease; }
a.record-card:hover { border-color: #9bc9b5; transform: translateY(-1px); }
.record-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.record-topline h3 { margin: .5rem 0 .15rem; font-size: 1rem; }
.record-topline small { color: var(--muted); }
.group-badge { display: inline-flex; padding: .25rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.group-bapak { color: #155ca1; background: #e7f2ff; }
.group-ibu { color: #9a3d65; background: #fce9f1; }
.percentage-ring { display: grid; place-items: center; flex: 0 0 53px; height: 53px; border: 5px solid #d9efe5; border-top-color: var(--green-700); border-radius: 50%; color: var(--green-950); font-size: .82rem; font-weight: 850; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: .9rem; }
.mini-stats span { display: grid; padding: .5rem; border-radius: 10px; color: var(--muted); background: #f6f8f7; font-size: .7rem; }
.mini-stats b { color: var(--ink); font-size: 1rem; }
.mini-stats .alpha { color: #9a4242; background: #fff1f1; }
.mini-stats .alpha b { color: #9a4242; }
.record-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.record-actions form { margin: 0; }
.attendance-card-action { gap: .36rem; min-height: 38px; padding: .5rem .65rem; }
.attendance-card-action svg { width: 16px; height: 16px; }
.record-list.attendance-date-list { grid-template-columns: 1fr; }
.attendance-date-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.attendance-date-card[open] { border-color: #9bc9b5; box-shadow: 0 12px 28px rgba(23, 107, 74, .08); }
.attendance-date-summary { display: flex; min-height: 92px; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; cursor: pointer; list-style: none; }
.attendance-date-summary::-webkit-details-marker { display: none; }
.attendance-date-copy { display: grid; min-width: 0; gap: .16rem; }
.attendance-date-copy .eyebrow { margin: 0; }
.attendance-date-copy strong { font-size: 1rem; }
.attendance-date-copy small { color: var(--muted); font-size: .72rem; }
.attendance-detail-label { display: flex; flex: 0 0 auto; align-items: center; gap: .25rem; color: var(--green-800); font-size: .75rem; font-weight: 800; }
.attendance-detail-label svg { width: 18px; height: 18px; transition: transform .18s ease; }
.attendance-date-card[open] .attendance-detail-label svg { transform: rotate(90deg); }
.attendance-date-detail { display: grid; gap: .75rem; padding: 1rem; border-top: 1px solid var(--line); background: #f8fbf9; }
.group-recap-panel { display: grid; grid-column: 1 / -1; gap: .75rem; padding: .9rem; border: 1px solid #b8ddcc; border-radius: 15px; background: linear-gradient(145deg, #f2fbf7, #fff); }
.group-recap-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.group-recap-heading > div { display: grid; min-width: 0; gap: .1rem; }
.group-recap-heading .eyebrow { margin: 0; }
.group-recap-heading h3 { margin: 0; font-size: .92rem; }
.group-recap-total-percentage { flex: 0 0 auto; color: var(--green-800); font-size: 1.5rem; }
.group-percentage-list { display: grid; gap: .5rem; }
.group-percentage-card { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.group-percentage-card > div { display: grid; min-width: 0; gap: .12rem; }
.group-percentage-card strong, .group-percentage-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-percentage-card strong { font-size: .8rem; }
.group-percentage-card small { color: var(--muted); font-size: .66rem; }
.group-percentage-card > span { display: grid; flex: 0 0 48px; height: 48px; place-items: center; border-radius: 50%; color: var(--green-800); background: var(--green-50); font-size: .78rem; font-weight: 900; }
.attendance-group-card { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-left-width: 4px; border-radius: 15px; background: #fff; }
.attendance-group-card.category-bapak { border-left-color: #4f98d9; }
.attendance-group-card.category-ibu { border-left-color: #d4779f; }
.attendance-group-empty { display: grid; align-content: start; gap: .8rem; }
.attendance-group-empty h3 { margin: 0 0 .2rem; font-size: .95rem; }
.attendance-group-empty p { margin: 0; color: var(--muted); font-size: .76rem; }
.attendance-group-empty .button { align-self: end; }

.filter-bar, .search-bar { gap: .65rem; margin-bottom: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.filter-bar { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.filter-bar .field { min-width: 0; }
.filter-bar .button { width: 100%; }
.attendance-floating-create { text-decoration: none; }
.attendance-control-panel { overflow: hidden; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 7px 22px rgba(20, 61, 46, .05); }
.attendance-filter-form { display: grid; gap: .7rem; padding: .85rem; }
.attendance-filter-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; }
.attendance-filter-submit { width: 100%; gap: .42rem; }
.attendance-filter-submit svg { width: 18px; height: 18px; }
.attendance-document-tools { display: grid; gap: .75rem; padding: .8rem .85rem; border-top: 1px solid var(--line); background: #f8fbf9; }
.attendance-document-copy { display: flex; min-width: 0; align-items: center; gap: .65rem; }
.attendance-document-copy > span:last-child { display: grid; min-width: 0; gap: .1rem; }
.attendance-document-copy strong { font-size: .8rem; }
.attendance-document-copy small { overflow: hidden; color: var(--muted); font-size: .66rem; line-height: 1.35; text-overflow: ellipsis; }
.attendance-document-icon { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--green-800); background: #fff; box-shadow: 0 4px 12px rgba(20, 61, 46, .08); }
.attendance-document-icon svg { width: 20px; height: 20px; }
.attendance-tool-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.attendance-tool-button { width: 100%; min-width: 0; min-height: 42px; gap: .32rem; padding: .55rem .5rem; font-size: .72rem; white-space: nowrap; }
.attendance-pdf-button { color: var(--green-800); border-color: #c5e1d4; white-space: nowrap; }
.attendance-pdf-button svg { width: 18px; height: 18px; }
.search-bar { display: flex; align-items: flex-end; }
.search-bar input { min-width: 0; flex: 1; }

.field { display: grid; gap: .42rem; color: var(--ink); font-size: .84rem; font-weight: 750; }
.field small { color: var(--muted); font-weight: 500; }
input, select, textarea { width: 100%; min-width: 0; min-height: 48px; padding: .72rem .8rem; color: var(--ink); background: #fff; border: 1px solid #cfdad5; border-radius: 12px; outline: none; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(33, 132, 94, .13); }
.compact-field input, .compact-field select { min-height: 42px; }
.dashboard-record-filters { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: .45rem; }
.dashboard-record-filters .compact-field { min-width: 0; }
.stack-form { display: grid; gap: 1rem; }
.check-row { display: flex; align-items: center; gap: .65rem; color: var(--muted); font-size: .86rem; }
.check-row input { width: 20px; min-height: 20px; accent-color: var(--green-700); }

.attendance-form { display: grid; gap: 1rem; }
.attendance-activity-field { margin-top: 1rem; }
.form-card { padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.form-section-title { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; }
.form-section-title > span { display: grid; place-items: center; flex: 0 0 31px; height: 31px; border-radius: 10px; color: #fff; background: var(--green-800); font-weight: 850; }
.form-section-title h2 { margin-bottom: .12rem; }
.form-section-title p { margin: 0; font-size: .82rem; }
.group-picker { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: 1rem 0 0; padding: 0; border: 0; }
.group-picker legend { margin-bottom: .5rem; font-size: .84rem; font-weight: 750; }
.group-picker label { position: relative; }
.group-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.group-picker label > span { display: grid; min-height: 70px; align-content: center; padding: .75rem; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; }
.group-picker label > span small { margin-top: .2rem; color: var(--muted); }
.group-picker input:checked + span { border-color: var(--green-700); background: var(--green-50); box-shadow: 0 0 0 3px rgba(33, 132, 94, .1); }
.group-switch-help { margin: .55rem 0 0; color: var(--muted); font-size: .75rem; }
.required-attendance-field { margin-bottom: 1rem; padding: .85rem; border: 1px solid #b8ddcc; border-radius: 15px; background: var(--green-50); }
.required-attendance-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.required-attendance-heading small { padding: .2rem .45rem; border-radius: 999px; color: var(--green-800); background: #fff; font-size: .65rem; font-weight: 800; }
.required-attendance-field input { max-width: 180px; min-height: 54px; font-size: 1.35rem; font-weight: 850; text-align: center; }
.number-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.number-field { display: grid; gap: .4rem; padding: .75rem; border-radius: 15px; background: #f4f7f5; font-size: .82rem; font-weight: 800; }
.number-field input { min-height: 58px; padding: .55rem; border: 0; background: #fff; font-size: 1.55rem; font-weight: 850; text-align: center; }
.number-field input[readonly] { color: #386a8e; background: #f5f9fc; cursor: not-allowed; }
.number-field.status-present { background: #e7f6ee; }
.number-field.status-home { background: #e9f2fb; }
.number-field.status-excused { background: #fff4d9; }
.number-field.status-sick { background: #fdecec; }
.number-field.status-other { grid-column: 1 / -1; background: #f1eef8; }
.notes-field { margin-top: 1rem; }
.inline-warning { margin-top: .85rem; padding: .75rem; border-radius: 12px; color: #8a5310; background: #fff1d5; font-size: .85rem; font-weight: 700; }
.live-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
.live-summary > div { display: grid; padding: .85rem; background: #fff; }
.live-summary span { color: var(--muted); font-size: .72rem; }
.live-summary strong { margin-top: .15rem; font-size: 1.25rem; }
.live-summary .summary-alpha { background: #fff2f2; }
.live-summary .summary-alpha strong { color: #a03636; }
.sticky-submit { position: sticky; z-index: 20; bottom: 70px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 -.35rem; padding: .75rem; border: 1px solid var(--line); border-radius: 17px; background: rgba(255, 255, 255, .96); box-shadow: 0 12px 40px rgba(16, 58, 42, .18); backdrop-filter: blur(12px); }
.sticky-submit > div { display: none; }
.sticky-submit > .button { margin-left: auto; }

.add-person-card { margin-bottom: 1rem; }
.add-person-card > summary { min-height: 44px; padding: .2rem; color: var(--green-800); cursor: pointer; font-weight: 800; }
.form-inside-details { padding-top: 1rem; border-top: 1px solid var(--line); }
.form-row { display: flex; gap: .65rem; }
.small-field { flex: 0 0 90px; }
.grow-field { flex: 1; min-width: 0; }
.tab-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-bottom: .75rem; padding: .3rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.tab-switcher a { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: .4rem; border-radius: 11px; color: var(--muted); font-weight: 750; }
.tab-switcher a.active { color: #fff; background: var(--green-800); }
.tab-switcher b { display: inline-grid; place-items: center; min-width: 25px; height: 25px; padding: 0 .35rem; border-radius: 999px; color: var(--green-950); background: var(--green-100); font-size: .72rem; }
.people-list { display: grid; gap: .55rem; }
.person-card { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 65px; padding: .7rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.person-card.inactive { opacity: .65; }
.person-number { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; color: var(--green-800); background: var(--green-50); font-size: .78rem; font-weight: 850; }
.person-main { display: grid; flex: 1; gap: .2rem; min-width: 0; }
.person-main strong { overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.status-label { width: max-content; font-size: .68rem; font-weight: 800; }
.status-label.active { color: var(--green-700); }
.status-label.inactive { color: var(--danger); }
.person-actions > summary { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; color: var(--muted); background: #f5f7f6; font-weight: 900; list-style: none; }
.person-actions > summary::-webkit-details-marker { display: none; }
.person-popover { position: absolute; z-index: 15; right: .7rem; left: .7rem; top: 58px; display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 18px 45px rgba(14, 50, 37, .2); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; font-size: .78rem; }
.pagination a, .pagination .disabled { padding: .65rem .55rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.pagination .disabled { color: #9aa5a0; }

.family-page-heading { align-items: center; }
.source-badge { flex: 0 0 auto; padding: .42rem .65rem; border-radius: 999px; color: var(--green-800); background: var(--green-100); font-size: .72rem; font-weight: 850; }
.organization-filter-panel { display: grid; gap: .8rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid #cfe3d9; border-radius: 20px; background: linear-gradient(145deg, #f7fbf9, #fff); box-shadow: 0 8px 24px rgba(20, 61, 46, .05); }
.organization-filter-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.organization-filter-heading h2 { margin: .12rem 0 0; font-size: 1rem; }
.active-filter-badge { flex: 0 0 auto; padding: .3rem .5rem; border-radius: 999px; color: var(--green-800); background: var(--green-100); font-size: .62rem; font-weight: 850; }
.organization-filter-form { display: grid; gap: .7rem; }
.organization-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.organization-filter-actions .button { flex: 1 1 130px; }
.family-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.family-stat-card { position: relative; display: grid; min-width: 0; gap: .75rem; overflow: hidden; padding: 1rem; border: 1px solid #dce7e2; border-radius: 20px; background: linear-gradient(145deg, #fff, #f8fbf9); box-shadow: 0 8px 24px rgba(20, 61, 46, .06); }
.family-stat-card-primary { grid-column: 1 / -1; color: #fff; border-color: #176b4a; background: linear-gradient(135deg, #176b4a 0%, #0d5138 100%); box-shadow: 0 12px 28px rgba(18, 83, 57, .2); }
.family-stat-card-primary::after { position: absolute; top: -42px; right: -28px; width: 128px; height: 128px; border: 24px solid rgba(255, 255, 255, .06); border-radius: 50%; content: ''; }
.family-stat-heading { position: relative; z-index: 1; display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: .65rem; }
.family-stat-heading > div { display: grid; min-width: 0; gap: .08rem; }
.family-stat-label { overflow: hidden; color: var(--ink); font-size: .78rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.family-stat-heading small { overflow: hidden; color: var(--muted); font-size: .6rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.family-stat-icon { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--green-800); background: var(--green-50); }
.family-stat-icon svg { width: 20px; height: 20px; }
.family-stat-value { position: relative; z-index: 1; display: flex; min-width: 0; align-items: baseline; gap: .35rem; }
.family-stat-value strong { font-size: 2rem; line-height: .95; letter-spacing: -.045em; }
.family-stat-value span { color: var(--muted); font-size: .62rem; font-weight: 800; }
.family-stat-card p { position: relative; z-index: 1; margin: -.2rem 0 0; color: var(--muted); font-size: .63rem; line-height: 1.35; }
.family-stat-card-primary .family-stat-label, .family-stat-card-primary .family-stat-value span { color: #fff; }
.family-stat-card-primary .family-stat-heading small, .family-stat-card-primary p { color: #cde9dc; }
.family-stat-card-primary .family-stat-icon { color: #fff; background: rgba(255, 255, 255, .14); }
.family-stat-card-active .family-stat-icon { color: #176b4a; background: #e8f6ef; }
.family-stat-card-attendance .family-stat-icon { color: #9a6815; background: #fff4d9; }
.family-stat-breakdown { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: -.2rem; }
.family-stat-breakdown span { flex: 1 1 54px; padding: .32rem .42rem; border-radius: 9px; color: #596761; background: #f0f5f2; font-size: .58rem; font-weight: 750; white-space: nowrap; }
.family-stat-breakdown strong { float: right; color: var(--green-800); font-size: .66rem; }
.organization-accumulation { display: grid; gap: .85rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.organization-accumulation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .85rem; }
.organization-accumulation-heading h2 { margin: .12rem 0 .2rem; font-size: 1rem; }
.organization-accumulation-heading p { margin: 0; color: var(--muted); font-size: .72rem; }
.organization-accumulation-total { display: grid; flex: 0 0 auto; min-width: 92px; gap: .08rem; padding: .65rem .75rem; border-radius: 15px; color: #fff; background: var(--green-800); text-align: right; }
.organization-accumulation-total small { font-size: .58rem; font-weight: 750; opacity: .8; text-transform: uppercase; }
.organization-accumulation-total strong { font-size: 1.35rem; line-height: 1; }
.organization-accumulation-total span { font-size: .58rem; opacity: .82; }
.organization-breakdown-grid { display: grid; gap: .55rem; }
.organization-breakdown-card { display: grid; min-width: 0; gap: .12rem; padding: .75rem; border: 1px solid var(--line); border-radius: 15px; color: inherit; background: #fbfdfc; text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.organization-breakdown-card:hover { border-color: #9fcab6; background: var(--green-50); transform: translateY(-1px); }
.organization-breakdown-card.active { border-color: var(--green-700); background: var(--green-50); box-shadow: inset 0 0 0 1px var(--green-700); }
.organization-breakdown-card > span { color: var(--green-700); font-size: .58rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.organization-breakdown-card > strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.organization-breakdown-card > div { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; margin-top: .22rem; }
.organization-breakdown-card b { color: var(--green-800); font-size: .7rem; }
.organization-breakdown-card small { color: var(--muted); font-size: .64rem; }
.census-summary { margin: 1rem 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.census-summary-heading { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem; cursor: pointer; list-style: none; transition: background .15s ease; }
.census-summary-heading::-webkit-details-marker { display: none; }
.census-summary-heading:hover { background: var(--green-50); }
.census-summary-heading:focus-visible { outline: 3px solid rgba(33, 132, 94, .22); outline-offset: -3px; }
.census-summary-heading h2 { margin: 0; }
.census-summary-toggle { display: grid; flex: 0 0 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--green-800); background: var(--green-50); transition: transform .18s ease; }
.census-summary-toggle svg { width: 17px; height: 17px; }
.census-summary[open] > .census-summary-heading { border-bottom: 1px solid var(--line); background: #f7fbf9; }
.census-summary[open] .census-summary-toggle { transform: rotate(180deg); }
.census-summary-content { display: grid; gap: 1rem; padding: 1rem; }
.census-summary-group { display: grid; gap: .55rem; }
.census-summary-group h3 { margin: 0; color: var(--muted); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.census-count-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.census-count-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; min-width: 0; padding: .72rem; border: 1px solid var(--line); border-radius: 14px; background: #f8faf9; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.census-count-card:active { transform: scale(.98); }
.census-count-card.active { border-color: var(--green-700); background: var(--green-50); box-shadow: 0 0 0 2px rgba(33, 132, 94, .1); }
.census-count-card > span:not(.census-count-copy) { overflow: hidden; color: var(--ink); font-size: .75rem; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.census-count-copy { display: grid; gap: .12rem; min-width: 0; }
.census-count-copy > span { overflow: hidden; color: var(--ink); font-size: .75rem; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.census-count-copy > small { overflow: hidden; color: var(--muted); font-size: .62rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.census-count-card > strong { color: var(--green-800); font-size: 1.45rem; line-height: 1; }
.marital-summary-group, .membership-summary-group { padding-top: .85rem; border-top: 1px solid var(--line); }
.gender-field { flex: 0 0 145px; }
.family-filter-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-bottom: .75rem; padding: .3rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.family-filter-tabs a { display: grid; min-height: 44px; place-items: center; padding: .45rem; border-radius: 11px; color: var(--muted); font-size: .78rem; font-weight: 780; text-align: center; }
.family-filter-tabs a.active { color: #fff; background: var(--green-800); }
.family-search { margin-bottom: .5rem; }
.family-directory-toolbar { margin: 0; }
.filter-result { display: flex; justify-content: flex-end; margin: 0 0 .65rem; font-size: .78rem; }
.filter-result a { padding: .35rem .55rem; border-radius: 999px; color: var(--green-800); background: var(--green-50); font-weight: 800; }
.family-group-list { display: grid; gap: 1rem; }
.family-group-section { min-width: 0; border: 1px solid var(--line); border-radius: 20px; background: #f8faf9; box-shadow: 0 7px 22px rgba(20, 61, 46, .04); }
.family-group-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem; cursor: pointer; list-style: none; transition: background .15s ease; }
.family-group-heading::-webkit-details-marker { display: none; }
.family-group-heading:hover { background: var(--green-50); }
.family-group-heading:focus-visible { outline: 3px solid rgba(33, 132, 94, .22); outline-offset: -3px; }
.family-group-section[open] > .family-group-heading { border-bottom: 1px solid var(--line); background: #f3f8f5; }
.family-group-copy { display: grid; min-width: 0; gap: .16rem; }
.family-group-copy h2 { overflow: hidden; margin: 0; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.family-group-copy .organizational-path { margin-top: .2rem; }
.family-group-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .45rem; color: var(--muted); font-size: .66rem; font-weight: 800; white-space: nowrap; }
.family-group-chevron { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--green-800); background: #fff; box-shadow: inset 0 0 0 1px #cfe0d8; transition: transform .18s ease; }
.family-group-chevron svg { width: 17px; height: 17px; }
.family-group-section[open] .family-group-chevron { transform: rotate(180deg); }
.family-group-content { padding: .8rem; }
.family-list { display: grid; gap: .75rem; }
.family-card { overflow: visible; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(20, 61, 46, .05); }
.family-card-header { display: flex; align-items: center; gap: .85rem; padding: 1rem; }
.family-number { display: grid; flex: 0 0 52px; height: 56px; place-items: center; align-content: center; border-radius: 15px; color: var(--green-800); background: var(--green-50); font-size: .58rem; font-weight: 850; line-height: 1.05; letter-spacing: .08em; text-align: center; }
.family-number strong { font-size: 1.05rem; letter-spacing: 0; }
.family-title { min-width: 0; }
.family-title h2 { display: -webkit-box; overflow: hidden; margin: .12rem 0 .3rem; font-size: 1rem; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.family-kicker { color: var(--muted); font-size: .67rem; font-weight: 760; }
.family-meta, .member-meta { display: flex; flex-wrap: wrap; gap: .3rem .65rem; color: var(--muted); font-size: .68rem; }
.family-meta span { position: relative; }
.family-meta span + span::before { position: absolute; left: -.42rem; content: '•'; color: #aab5b0; }
.family-meta .inferred-head { color: var(--warning); font-weight: 750; }
.family-members { border-top: 1px solid var(--line); }
.family-members > summary { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: .7rem 1rem; cursor: pointer; color: var(--green-800); font-size: .78rem; font-weight: 800; list-style: none; }
.family-members > summary::-webkit-details-marker { display: none; }
.family-chevron { transition: transform .15s ease; }
.family-members[open] .family-chevron { transform: rotate(180deg); }
.family-member-list { display: grid; padding: 0 .65rem .65rem; }
.family-member { position: relative; display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .7rem .35rem; border-top: 1px solid #edf1ef; }
.family-member.inactive > .member-avatar, .family-member.inactive > .member-main { opacity: .62; }
.family-member.segment-match { margin-inline: -.15rem; padding-inline: .5rem; border-color: #b8ddcc; border-radius: 12px; background: var(--green-50); }
.member-avatar { display: grid; flex: 0 0 39px; height: 39px; place-items: center; border-radius: 13px; font-size: .84rem; font-weight: 850; }
.member-l { color: #155ca1; background: #e7f2ff; }
.member-p { color: #9a3d65; background: #fce9f1; }
.member-main { display: grid; flex: 1; gap: .22rem; min-width: 0; }
.member-main > small { overflow: hidden; color: var(--muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.organizational-path { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.organizational-path-item { display: inline-flex; min-width: 0; align-items: baseline; gap: .28rem; padding: .28rem .48rem; border: 1px solid #dbe9e2; border-radius: 999px; color: var(--green-900); background: #f7fbf9; line-height: 1.15; }
.organizational-path-item small { flex: 0 0 auto; color: var(--green-700); font-size: .55rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.organizational-path-item strong { overflow: hidden; min-width: 0; font-size: .64rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.organizational-path-compact { gap: .25rem; margin-top: .3rem; }
.organizational-path-compact .organizational-path-item { padding: .22rem .38rem; }
.organizational-path-desa { border-color: #d8e5f3; background: #f4f8fd; }
.organizational-path-daerah { border-color: #e5dcf3; background: #f9f6fd; }
.organizational-path-pusat { border-color: #eadfca; background: #fffaf0; }
.member-name-row { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.member-name-row strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.head-badge { flex: 0 0 auto; padding: .18rem .38rem; border-radius: 999px; color: var(--green-800); background: var(--green-100); font-size: .58rem; font-weight: 850; }
.member-meta span { padding-right: .45rem; border-right: 1px solid var(--line); }
.member-meta span:last-child { padding-right: 0; border-right: 0; }
.member-meta .inactive-text { color: var(--danger); font-weight: 750; }
.member-meta .manual-stage-badge { color: var(--warning); font-weight: 800; }
.member-meta .member-status-badge { font-weight: 800; }
.member-meta .status-aktif { color: var(--green-700); }
.member-meta .status-pulang, .member-meta .status-pindah, .member-meta .status-nonaktif { color: var(--warning); }
.member-meta .status-meninggal { color: var(--danger); }
.life-stage-control { display: grid; gap: .7rem; padding: .75rem; border: 1px solid var(--line); border-radius: 13px; background: #f8faf9; }
.life-stage-control [hidden] { display: none; }
.settings-heading p:last-child { max-width: 580px; margin-bottom: 0; font-size: .74rem; line-height: 1.45; }
.settings-rule-card { display: flex; align-items: flex-start; gap: .75rem; margin: 1rem 0; padding: .9rem; border: 1px solid #b8ddcc; border-radius: 16px; background: var(--green-50); }
.settings-rule-card p { margin: .18rem 0 0; font-size: .7rem; line-height: 1.45; }
.settings-rule-icon { display: grid; flex: 0 0 28px; height: 28px; place-items: center; border-radius: 9px; color: #fff; background: var(--green-800); font-weight: 900; }
.settings-form { display: grid; gap: 1rem; }
.age-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.age-settings-header h2 { margin: 0; }
.age-settings-header p { margin: .18rem 0 0; font-size: .7rem; line-height: 1.45; }
.age-settings-header > span { flex: 0 0 auto; padding: .35rem .55rem; border-radius: 999px; color: var(--green-800); background: var(--green-50); font-size: .7rem; font-weight: 800; }
.age-range-list { display: grid; gap: .65rem; }
.age-range-row { display: grid; gap: .65rem; padding: .8rem; border: 1px solid var(--line); border-radius: 15px; background: #f8faf9; }
.age-range-name { display: grid; gap: .12rem; }
.age-range-name small { color: var(--muted); font-size: .7rem; }
.age-range-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: .5rem; }
.age-range-inputs input { min-height: 44px; text-align: center; font-weight: 800; }
.age-range-separator { padding-bottom: .75rem; color: var(--muted); font-weight: 800; }
.age-range-open-ended { display: grid; min-height: 69px; align-content: end; gap: .42rem; }
.age-range-open-ended span { font-size: .84rem; font-weight: 750; }
.age-range-open-ended strong { display: grid; min-height: 44px; place-items: center; border: 1px dashed #b9c8c1; border-radius: 12px; color: var(--muted); background: #fff; font-size: .82rem; }
.field-error { color: var(--danger); font-size: .72rem; font-weight: 700; }
.settings-submit { margin-top: 0; }
.settings-submit small { font-size: .66rem; }
.family-person-actions { flex: 0 0 auto; }
.family-person-actions > summary { width: 38px; height: 38px; }
.family-person-popover { top: 52px; right: -.35rem; left: -.35rem; max-height: min(72vh, 620px); overflow-y: auto; }
.person-profile-link { display: inline-block; min-width: 0; color: inherit; font-weight: inherit; text-decoration: none; }
.person-profile-link:hover { color: var(--green-700); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.person-profile-link:focus-visible { border-radius: 4px; outline: 3px solid rgba(33, 132, 94, .2); outline-offset: 2px; }
.member-name-row .person-profile-link, .officer-copy .person-profile-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-profile-back { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .8rem; padding: .35rem .1rem; color: var(--green-800); font-size: .76rem; font-weight: 800; }
.person-profile-back svg { width: 18px; height: 18px; transition: transform .15s ease; }
.person-profile-back:hover svg { transform: translateX(-2px); }
.person-profile-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1.25rem; overflow: hidden; border-radius: 22px; color: #fff; background: radial-gradient(circle at 90% 10%, rgba(255, 255, 255, .14), transparent 35%), linear-gradient(135deg, var(--green-800), var(--green-950)); box-shadow: var(--shadow); }
.person-profile-avatar { display: grid; flex: 0 0 66px; height: 66px; place-items: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 21px; color: #dff5eb; background: rgba(255, 255, 255, .13); font-size: 1.55rem; font-weight: 900; }
.person-profile-avatar.is-female { color: #ffe4f0; background: rgba(255, 222, 237, .16); }
.person-profile-intro { display: grid; min-width: 0; gap: .25rem; }
.person-profile-overline { color: #bfe3d4; font-size: .65rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.person-profile-intro h1 { overflow: hidden; margin: 0; font-size: clamp(1.25rem, 5vw, 1.75rem); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.person-profile-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .1rem; }
.person-profile-badge { padding: .25rem .48rem; border-radius: 999px; color: #ffe5bc; background: rgba(162, 106, 20, .36); font-size: .62rem; font-weight: 850; }
.person-profile-badge.is-active { color: #d9f9e9; background: rgba(46, 167, 110, .26); }
.person-profile-badge.is-light { color: #edf8f3; background: rgba(255, 255, 255, .13); }
.person-profile-hero .organizational-path { margin-top: .25rem; }
.person-profile-hero .organizational-path-item { border-color: rgba(255, 255, 255, .18); color: #fff; background: rgba(255, 255, 255, .1); }
.person-profile-hero .organizational-path-item small { color: #bfe3d4; }
.person-profile-hero .organizational-path-item strong { color: #fff; }
.person-profile-layout { display: grid; gap: 1rem; }
.person-profile-card { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 8px 24px rgba(20, 61, 46, .05); }
.person-profile-card-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.person-profile-card-heading > div { min-width: 0; }
.person-profile-card-heading h2 { overflow: hidden; margin: .12rem 0 0; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.person-profile-card-icon { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--green-800); background: var(--green-50); }
.person-profile-card-icon svg { width: 20px; height: 20px; }
.person-profile-count { flex: 0 0 auto; padding: .3rem .52rem; border-radius: 999px; color: var(--green-800); background: var(--green-50); font-size: .66rem; font-weight: 850; }
.person-detail-grid { display: grid; gap: .65rem; margin: 0; }
.person-detail-item { display: grid; gap: .18rem; min-width: 0; padding: .75rem; border: 1px solid #e5ece8; border-radius: 13px; background: #f8faf9; }
.person-detail-item dt { color: var(--muted); font-size: .64rem; font-weight: 780; }
.person-detail-item dd { overflow-wrap: anywhere; margin: 0; color: var(--ink); font-size: .81rem; font-weight: 800; line-height: 1.4; }
.person-detail-item dd small { display: block; margin-top: .12rem; color: var(--warning); font-size: .62rem; }
.person-profile-assignments { align-self: start; }
.person-assignment-card { display: flex; align-items: center; gap: .7rem; padding: .72rem; border: 1px solid #e2ebe6; border-radius: 14px; background: #f8faf9; }
.person-assignment-card + .person-assignment-card { margin-top: .55rem; }
.person-assignment-icon { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--green-800); background: var(--green-100); }
.person-assignment-icon svg { width: 20px; height: 20px; }
.person-assignment-card > div { display: grid; min-width: 0; gap: .1rem; }
.person-assignment-card strong, .person-assignment-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-assignment-card strong { font-size: .8rem; }
.person-assignment-card > div > span { color: var(--muted); font-size: .66rem; }
.person-profile-empty { display: grid; gap: .18rem; padding: .9rem; border: 1px dashed #c8d6d0; border-radius: 14px; color: var(--muted); background: #f8faf9; font-size: .7rem; }
.person-profile-empty strong { color: var(--ink); font-size: .8rem; }
.person-family-list { display: grid; gap: .55rem; }
.person-family-card { display: flex; min-width: 0; align-items: center; gap: .65rem; padding: .72rem; border: 1px solid #e1e9e5; border-radius: 14px; background: #fff; transition: border-color .15s ease, background .15s ease; }
.person-family-card.is-current { border-color: #acd2bf; background: var(--green-50); }
.person-family-avatar { display: grid; flex: 0 0 40px; height: 40px; place-items: center; border-radius: 13px; color: #155ca1; background: #e7f2ff; font-size: .85rem; font-weight: 900; }
.person-family-avatar.is-female { color: #9a3d65; background: #fce9f1; }
.person-family-copy { display: grid; flex: 1; min-width: 0; gap: .18rem; }
.person-family-name { display: flex; min-width: 0; align-items: center; gap: .35rem; }
.person-family-name .person-profile-link { overflow: hidden; font-size: .8rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.person-family-copy > span { overflow: hidden; color: var(--muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.person-family-arrow { flex: 0 0 17px; width: 17px; height: 17px; color: #8aa097; }

.officer-heading { align-items: flex-start; }
.officer-heading > div { min-width: 0; }
.officer-heading p:last-child { max-width: 640px; font-size: .74rem; line-height: 1.45; }
.officer-form-card { margin-bottom: 1rem; }
.officer-section-heading { align-items: flex-start; }
.officer-section-heading p { margin: .18rem 0 0; font-size: .78rem; }
.officer-order-button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem; }
.officer-order-button svg { width: 18px; height: 18px; }
.officer-order-modal { width: min(calc(100% - 2rem), 820px); }
.officer-order-list { display: grid; gap: .55rem; }
.officer-order-item { display: grid; grid-template-columns: 32px 30px minmax(0, 1fr) minmax(130px, 180px) auto; align-items: center; gap: .5rem; min-height: 68px; padding: .55rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 4px 13px rgba(20, 61, 46, .04); transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease; }
.officer-order-item:hover { border-color: #b9d8ca; box-shadow: 0 7px 18px rgba(20, 61, 46, .08); }
.officer-order-item.is-dragging { opacity: .55; border-color: var(--green-700); transform: scale(.99); }
.officer-order-item[data-officer-pinned] { border-color: #a9d6c2; background: linear-gradient(145deg, #f0faf5, #fff); }
.officer-order-item[data-officer-pinned] .print-order-drag { cursor: not-allowed; opacity: .45; }
.officer-order-person { min-width: 0; }
.officer-order-person strong, .officer-order-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.officer-order-person strong { font-size: .78rem; }
.officer-order-person small { margin-top: .16rem; color: var(--green-800); font-size: .65rem; font-weight: 800; }
.officer-order-category { min-width: 0; }
.officer-category-input { width: 100%; min-height: 38px; padding: .5rem .58rem; border: 1px solid #cfdad5; border-radius: 10px; color: var(--ink); background: #fff; font-size: .72rem; font-weight: 750; }
.officer-category-input:focus { border-color: var(--green-700); outline: 3px solid rgba(33, 132, 94, .13); }
.officer-category-input.is-locked { display: flex; align-items: center; color: var(--green-900); background: #e6f5ed; }
.officer-order-footer { margin-top: .85rem; }
.officer-structure-list { display: grid; gap: 1rem; }
.officer-unit-structure { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: #f8faf9; }
.officer-unit-heading { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.officer-unit-heading > div { display: grid; min-width: 0; gap: .18rem; }
.officer-unit-heading h3 { overflow: hidden; margin: 0; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.officer-unit-heading .organizational-path { margin-top: .2rem; }
.officer-unit-heading-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: .4rem; }
.officer-unit-access { flex: 0 0 auto; padding: .3rem .5rem; border-radius: 999px; color: var(--green-800); background: var(--green-50); font-size: .62rem; font-weight: 850; }
.officer-unit-access.read-only { color: #596761; background: #e9eeeb; }
.officer-position-count { color: var(--muted); font-size: .66rem; font-weight: 800; white-space: nowrap; }
.officer-unit-structure.is-collapsible { padding: 0; overflow: hidden; }
.officer-unit-structure.is-collapsible > summary { align-items: center; margin: 0; padding: 1rem; cursor: pointer; list-style: none; transition: background .15s ease; }
.officer-unit-structure.is-collapsible > summary::-webkit-details-marker { display: none; }
.officer-unit-structure.is-collapsible > summary:hover { background: var(--green-50); }
.officer-unit-structure.is-collapsible > summary:focus-visible { outline: 3px solid rgba(33, 132, 94, .22); outline-offset: -3px; }
.officer-unit-structure.is-collapsible[open] > summary { border-bottom: 1px solid var(--line); background: #f3f8f5; }
.officer-collapse-icon { display: grid; flex: 0 0 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--green-800); background: #fff; box-shadow: inset 0 0 0 1px #cfe0d8; transition: transform .18s ease; }
.officer-collapse-icon svg { width: 17px; height: 17px; }
.officer-unit-structure.is-collapsible[open] .officer-collapse-icon { transform: rotate(180deg); }
.officer-unit-content { padding: 1rem; }
.officer-unit-empty { display: grid; gap: .2rem; padding: .9rem; border: 1px dashed #c8d6d0; border-radius: 14px; color: var(--muted); background: #fff; font-size: .74rem; }
.officer-unit-empty strong { color: var(--ink); font-size: .82rem; }
.officer-form { display: grid; gap: .8rem; }
.officer-form .button { width: 100%; }
.officer-person-field { min-width: 0; }
.select2-container { width: 100% !important; min-width: 0; }
.select2-container .select2-selection--single { min-height: 48px; border: 1px solid #cfdad5; border-radius: 12px; }
.select2-container .select2-selection--single .select2-selection__rendered { padding: .72rem 2.6rem .72rem .8rem; color: var(--ink); line-height: 22px; }
.select2-container .select2-selection--single .select2-selection__placeholder { color: #7d8984; }
.select2-container .select2-selection--single .select2-selection__arrow { top: 50%; right: .55rem; transform: translateY(-50%); }
.select2-container .select2-selection--single .select2-selection__clear { height: auto; margin-right: .45rem; color: var(--muted); font-size: 1.25rem; }
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(33, 132, 94, .13); }
.select2-container--open .select2-dropdown { overflow: hidden; border: 1px solid #b8c9c1; border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 61, 46, .14); }
.select2-container--open .select2-dropdown--below { margin-top: .3rem; }
.select2-search--dropdown { padding: .55rem; }
.select2-container--default .select2-search--dropdown .select2-search__field { min-height: 42px; padding: .55rem .7rem; border: 1px solid #cfdad5; border-radius: 9px; }
.select2-results__option { padding: .65rem .75rem; font-size: .82rem; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { color: #fff; background: var(--green-800); }
.select2-container--default .select2-results__option--selected { background: var(--green-50); }
.officer-candidate-empty { display: grid; gap: .25rem; padding: 1rem; border-radius: 14px; color: var(--muted); background: var(--green-50); font-size: .8rem; }
.officer-candidate-empty strong { color: var(--ink); font-size: .9rem; }
.officer-card { display: flex; min-width: 0; align-items: center; gap: .75rem; padding: .85rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.officer-avatar { display: grid; flex: 0 0 44px; height: 44px; place-items: center; border-radius: 14px; color: var(--green-800); background: var(--green-50); font-size: 1rem; font-weight: 900; }
.officer-copy { display: grid; flex: 1; gap: .14rem; min-width: 0; }
.officer-copy strong, .officer-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.officer-copy strong { font-size: .88rem; }
.officer-copy span { color: var(--green-800); font-size: .74rem; font-weight: 800; }
.officer-remove { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid #f1d4d4; border-radius: 12px; cursor: pointer; color: var(--danger); background: #fff5f5; }
.officer-remove svg { width: 18px; height: 18px; }
.organization-chart { --chart-line: #b8d7c9; display: grid; justify-items: stretch; padding-top: .25rem; }
.organization-root { position: relative; display: flex; width: min(100%, 330px); min-width: 0; align-items: center; justify-self: center; gap: .8rem; padding: 1rem; border: 1px solid #9fcdb9; border-radius: 17px; color: #fff; background: linear-gradient(135deg, var(--green-800), var(--green-950)); box-shadow: 0 10px 25px rgba(10, 63, 43, .18); }
.organization-root::after { position: absolute; top: 100%; left: 50%; width: 2px; height: 1.25rem; content: ''; background: var(--chart-line); transform: translateX(-50%); }
.organization-root-icon { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, .14); }
.organization-root-icon svg { width: 23px; height: 23px; }
.organization-root > div { display: grid; min-width: 0; gap: .15rem; }
.organization-root small { color: #cde9dc; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.organization-root strong { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.officer-category-list { display: grid; width: 100%; gap: 1rem; margin-top: 1rem; }
.officer-category-section { min-width: 0; padding: .75rem; border: 1px solid #dce7e2; border-radius: 16px; background: rgba(255, 255, 255, .72); }
.officer-category-section.is-core { border-color: #a9d6c2; background: linear-gradient(145deg, #edf9f3, #fff); box-shadow: 0 7px 20px rgba(20, 92, 63, .06); }
.officer-category-heading { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.officer-category-heading > div { display: flex; min-width: 0; align-items: center; gap: .5rem; }
.officer-category-heading h4 { overflow: hidden; margin: 0; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.officer-category-heading small { flex: 0 0 auto; color: var(--muted); font-size: .64rem; font-weight: 750; }
.officer-category-badge { flex: 0 0 auto; padding: .27rem .48rem; border-radius: 999px; color: #53635c; background: #e9eeeb; font-size: .61rem; font-weight: 900; letter-spacing: .035em; }
.officer-category-badge.is-core { color: #fff; background: var(--green-800); }
.organization-branches-scroll { width: 100%; }
.organization-branches { position: relative; display: grid; width: 100%; gap: .7rem; margin-top: 1.25rem; padding: .75rem 0 0 1.25rem; }
.organization-branches::before { position: absolute; top: 0; bottom: 2.5rem; left: 0; width: 2px; content: ''; background: var(--chart-line); }
.organization-person { position: relative; box-shadow: 0 6px 18px rgba(20, 61, 46, .04); }
.organization-person::before { position: absolute; top: 50%; right: 100%; width: 1.25rem; height: 2px; content: ''; background: var(--chart-line); }

.account-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1.2rem; border-radius: 21px; color: #fff; background: linear-gradient(135deg, var(--green-800), var(--green-950)); box-shadow: var(--shadow); }
.account-avatar { display: grid; flex: 0 0 62px; height: 62px; place-items: center; border: 1px solid rgba(255, 255, 255, .22); border-radius: 19px; background: rgba(255, 255, 255, .13); font-size: 1.5rem; font-weight: 900; }
.account-hero > div { min-width: 0; }
.account-hero .eyebrow { margin-bottom: .25rem; color: #bfe3d4; }
.account-hero h1 { overflow: hidden; margin-bottom: .2rem; font-size: 1.35rem; text-overflow: ellipsis; white-space: nowrap; }
.account-hero p:last-child { overflow: hidden; margin: 0; color: #d8eee4; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.account-hero .organizational-path-item, .account-hero .organizational-path-item strong { color: var(--green-950); }
.account-hero .organizational-path-item small { color: var(--green-700); }
.account-menu { display: grid; gap: .65rem; }
.account-menu > form { margin: 0; }
.account-menu-card { display: flex; width: 100%; min-width: 0; min-height: 74px; align-items: center; gap: .8rem; padding: .8rem; border: 1px solid var(--line); border-radius: 17px; color: var(--ink); background: #fff; box-shadow: 0 6px 20px rgba(20, 61, 46, .04); text-align: left; }
a.account-menu-card { transition: border-color .15s ease, transform .15s ease; }
a.account-menu-card:active { transform: scale(.99); }
.account-menu-card > span:nth-child(2) { display: grid; flex: 1; gap: .18rem; min-width: 0; }
.account-menu-card strong, .account-menu-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-card strong { font-size: .88rem; }
.account-menu-card small { color: var(--muted); font-size: .68rem; }
.account-menu-card > b { flex: 0 0 auto; color: #9aa8a2; font-size: 1.4rem; font-weight: 400; }
.account-menu-icon { display: grid; flex: 0 0 44px; height: 44px; place-items: center; border-radius: 14px; }
.account-menu-icon svg { width: 23px; height: 23px; }
.account-menu-icon.icon-blue { color: #236ea9; background: #e7f2ff; }
.account-menu-icon.icon-green { color: var(--green-800); background: var(--green-50); }
.account-menu-icon.icon-purple { color: #7450a3; background: #f1ebf8; }
.account-menu-icon.icon-orange { color: #a56608; background: #fff3dc; }
.account-menu-icon.icon-gray { color: #57655f; background: #eef2f0; }
.account-menu-icon.icon-red { color: var(--danger); background: #fff1f1; }
.account-logout { border-color: #f1d4d4; cursor: pointer; }
.account-logout strong { color: var(--danger); }
.profile-form { display: grid; gap: 1rem; }
.managed-account-page-heading p:last-child { max-width: 650px; font-size: .74rem; line-height: 1.45; }
.managed-account-empty p { max-width: 440px; font-size: .72rem; line-height: 1.45; }
.managed-account-create { margin-bottom: 1rem; }
.managed-account-create > summary { width: 100%; list-style: none; }
.managed-account-create > summary::-webkit-details-marker { display: none; }
.managed-account-create[open] > summary { border-radius: 13px 13px 0 0; }
.managed-account-create > .managed-account-form { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 17px 17px; }
.managed-account-form-heading { display: grid; gap: .15rem; }
.managed-account-form-heading strong { font-size: .9rem; }
.managed-account-form-heading small { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.managed-account-list { display: grid; gap: .75rem; }
.managed-account-card { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 7px 22px rgba(20, 61, 46, .05); }
.managed-account-header { display: flex; min-width: 0; align-items: center; gap: .75rem; padding: 1rem; }
.managed-account-avatar { display: grid; flex: 0 0 44px; height: 44px; place-items: center; border-radius: 14px; color: var(--green-800); background: var(--green-50); font-weight: 900; }
.managed-account-header > div { display: grid; flex: 1; min-width: 0; gap: .1rem; }
.managed-account-header small { color: var(--green-700); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.managed-account-header h2 { overflow: hidden; margin: 0; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.managed-account-header p { overflow: hidden; margin: 0; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.managed-account-header .organizational-path { margin-top: .28rem; }
.managed-account-status { flex: 0 0 auto; padding: .28rem .48rem; border-radius: 999px; color: var(--warning); background: #fff3dc; font-size: .62rem; font-weight: 850; }
.managed-account-status.active { color: var(--green-800); background: var(--green-50); }
.managed-account-details { border-top: 1px solid var(--line); }
.managed-account-details > summary { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: .65rem 1rem; cursor: pointer; color: var(--green-800); font-size: .78rem; font-weight: 800; list-style: none; }
.managed-account-details > summary::-webkit-details-marker { display: none; }
.managed-account-details > summary span { transition: transform .15s ease; }
.managed-account-details[open] > summary span { transform: rotate(180deg); }
.managed-account-form { display: grid; gap: .8rem; padding: 1rem; border-top: 1px solid var(--line); background: #f8faf9; }

.ku-page-heading, .ku-form-heading { align-items: center; }
.ku-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .45rem; }
.ku-pdf-action { min-height: 38px; padding: .62rem .8rem; font-size: .72rem; }
.ku-confirm-modal { width: min(calc(100% - 2rem), 520px); }
.ku-confirm-modal .app-modal-body { text-align: center; }
.ku-confirm-icon { display: grid; width: 58px; height: 58px; margin: 0 auto .85rem; place-items: center; border-radius: 19px; color: #fff; background: linear-gradient(145deg, var(--green-700), var(--green-950)); box-shadow: 0 12px 26px rgba(15, 91, 62, .22); }
.ku-confirm-icon svg { width: 27px; height: 27px; }
.ku-confirm-copy { margin: 0 auto 1rem; max-width: 390px; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.ku-confirm-copy strong { color: var(--ink); }
.ku-confirm-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 0 0 .75rem; text-align: left; }
.ku-confirm-summary div { padding: .75rem; border: 1px solid var(--line); border-radius: 14px; background: #f8fbf9; }
.ku-confirm-summary dt { color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ku-confirm-summary dd { margin: .22rem 0 0; font-size: .78rem; font-weight: 850; }
.ku-confirm-warning { display: grid; gap: .16rem; padding: .75rem; border: 1px solid #edd9a5; border-radius: 14px; color: #725319; background: #fff8e5; text-align: left; }
.ku-confirm-warning strong { font-size: .76rem; }
.ku-confirm-warning span { font-size: .7rem; line-height: 1.45; }
.ku-page-heading p:last-child, .ku-form-heading p:last-child { margin: .15rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.ku-level-badge, .ku-status-pill { flex: 0 0 auto; padding: .36rem .58rem; border-radius: 999px; color: var(--green-800); background: var(--green-50); font-size: .65rem; font-weight: 850; }
.ku-status-pill.submitted { color: #fff; background: var(--green-800); }
.ku-period-filter { display: grid; gap: .65rem; margin-bottom: 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 7px 20px rgba(20, 61, 46, .05); }
.ku-period-filter .button { width: 100%; }
.ku-workflow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .25rem; margin-bottom: 1rem; padding: .65rem; border-radius: 18px; background: #eaf0ed; }
.ku-workflow > div { display: grid; min-width: 0; justify-items: center; gap: .08rem; padding: .55rem .25rem; border-radius: 13px; color: #74817b; text-align: center; }
.ku-workflow > div.active { color: #fff; background: var(--green-800); box-shadow: 0 6px 15px rgba(23, 107, 74, .18); }
.ku-workflow > div.complete { color: var(--green-800); background: #d9eee4; }
.ku-workflow > div > span { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .58rem; font-weight: 900; }
.ku-workflow strong { overflow: hidden; width: 100%; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.ku-workflow small { overflow: hidden; width: 100%; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.ku-workflow > i { color: #8d9a94; font-size: 1.15rem; font-style: normal; }
.ku-status-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid #cae2d6; border-radius: 20px; background: linear-gradient(145deg, #f1faf6, #fff); box-shadow: var(--shadow); }
.ku-status-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: var(--green-800); background: #dff2e9; }
.ku-status-icon svg { width: 23px; height: 23px; }
.ku-status-copy { display: grid; min-width: 0; gap: .12rem; }
.ku-status-copy > span { color: var(--green-700); font-size: .61rem; font-weight: 850; text-transform: uppercase; }
.ku-status-copy h2 { margin: 0; font-size: .94rem; }
.ku-status-copy p { margin: 0; color: var(--muted); font-size: .64rem; line-height: 1.4; }
.ku-primary-actions { display: grid; gap: .55rem; margin: .8rem 0 1rem; }
.ku-primary-actions .button, .ku-primary-actions form, .ku-primary-actions form .button { width: 100%; }
.ku-recap-hero { display: flex; align-items: center; justify-content: space-between; gap: .9rem; margin-bottom: .8rem; padding: 1rem; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #195f44, #0d4d35); box-shadow: var(--shadow); }
.ku-recap-hero h2 { margin: .12rem 0 .25rem; font-size: 1rem; }
.ku-recap-hero p { margin: 0; color: #cde9dc; font-size: .66rem; line-height: 1.4; }
.ku-recap-hero .eyebrow { color: #bde1d2; }
.ku-progress-ring { display: grid; flex: 0 0 68px; width: 68px; height: 68px; place-items: center; padding: 6px; border-radius: 50%; background: conic-gradient(#fff calc(var(--ku-progress) * 1%), rgba(255, 255, 255, .17) 0); }
.ku-progress-ring::before { grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 50%; background: #185b41; content: ''; }
.ku-progress-ring strong { z-index: 1; grid-area: 1 / 1; font-size: .9rem; }
.ku-forward-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.ku-forward-form .button { flex: 1 1 190px; }
.ku-forward-form small { color: var(--muted); font-size: .66rem; }
.ku-forwarded-alert { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: 1rem; }
.ku-forwarded-alert a { color: inherit; font-size: .7rem; font-weight: 850; text-decoration: underline; }
.ku-unit-list { padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.ku-unit-list .section-heading > div { display: grid; gap: .05rem; }
.ku-unit-list .section-heading h2 { margin: 0; font-size: 1rem; }
.ku-unit-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .8rem .15rem; border-top: 1px solid #e8eeeb; }
.ku-unit-avatar { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: var(--green-800); background: var(--green-50); font-weight: 900; }
.ku-unit-card > div { display: grid; min-width: 0; gap: .08rem; }
.ku-unit-card small { color: var(--green-700); font-size: .57rem; font-weight: 850; text-transform: uppercase; }
.ku-unit-card strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.ku-unit-card > div > span { color: var(--muted); font-size: .62rem; }
.ku-unit-card > a { padding: .4rem .55rem; border-radius: 9px; color: var(--green-800); background: var(--green-50); font-size: .66rem; font-weight: 850; }
.ku-waiting-badge { padding: .35rem .45rem; border-radius: 999px; color: #8a661e; background: #fff4d9; font-size: .58rem; font-weight: 850; }
.ku-report-form { display: grid; gap: .8rem; }
.ku-form-section { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 7px 22px rgba(20, 61, 46, .05); }
.ku-form-section > summary { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem; cursor: pointer; list-style: none; }
.ku-form-section > summary::-webkit-details-marker { display: none; }
.ku-form-section > summary > div { display: flex; min-width: 0; align-items: center; gap: .65rem; }
.ku-form-section > summary > div > span { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border-radius: 11px; color: #fff; background: var(--green-800); font-weight: 900; }
.ku-form-section > summary > div > div { display: grid; min-width: 0; gap: .12rem; }
.ku-form-section > summary strong { font-size: .86rem; }
.ku-form-section > summary small { color: var(--muted); font-size: .62rem; line-height: 1.35; }
.ku-form-section > summary > b { color: var(--green-800); transition: transform .18s ease; }
.ku-form-section[open] > summary { border-bottom: 1px solid var(--line); background: #f8fbf9; }
.ku-form-section[open] > summary > b { transform: rotate(180deg); }
.ku-form-section-body { display: grid; gap: .75rem; padding: .75rem; }
.ku-info-note { display: grid; gap: .1rem; padding: .7rem; border-radius: 13px; color: var(--green-900); background: var(--green-50); }
.ku-info-note strong { font-size: .72rem; }
.ku-info-note span { font-size: .62rem; line-height: 1.4; }
.ku-census-list, .ku-activity-list, .ku-special-list, .ku-readonly-list, .ku-activity-readonly { display: grid; gap: .55rem; }
.ku-input-card, .ku-activity-card { display: grid; gap: .7rem; min-width: 0; padding: .75rem; border: 1px solid #dfe8e4; border-radius: 15px; background: #fbfdfc; }
.ku-activity-card.detail { margin-left: 1rem; border-style: dashed; background: #fff; }
.ku-input-card-title { display: flex; min-width: 0; align-items: flex-start; gap: .55rem; }
.ku-input-card-title > span { display: grid; flex: 0 0 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--green-800); background: var(--green-50); font-size: .66rem; font-weight: 900; }
.ku-input-card-title > strong { padding-top: .28rem; font-size: .72rem; line-height: 1.35; }
.ku-gender-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.ku-gender-inputs > label, .ku-gender-inputs > div { display: grid; min-width: 0; gap: .3rem; }
.ku-gender-inputs span { color: var(--muted); font-size: .58rem; font-weight: 750; }
.ku-gender-inputs input { min-height: 42px; padding: .5rem; text-align: center; }
.ku-gender-inputs > div > strong { display: grid; min-height: 42px; place-items: center; border-radius: 11px; color: var(--green-800); background: #e6f5ed; font-size: .95rem; }
.ku-activity-fields, .ku-detail-fields { display: grid; gap: .55rem; }
.ku-percentage-input { position: relative; }
.ku-percentage-input input { padding-right: 2rem; }
.ku-percentage-input span { position: absolute; top: 50%; right: .75rem; color: var(--muted); font-weight: 800; transform: translateY(-50%); }
.ku-section-note { margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.4; }
.ku-special-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; padding: .65rem; border: 1px solid #e1e9e5; border-radius: 14px; }
.ku-special-row > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--green-800); background: var(--green-50); font-size: .65rem; font-weight: 900; }
.ku-special-row .field:last-child { grid-column: 2; }
.ku-save-bar { margin-top: .2rem; }
.ku-source-strip { display: grid; gap: .45rem; margin-bottom: .8rem; padding: .8rem; border-radius: 15px; background: var(--green-50); }
.ku-source-strip > strong { font-size: .7rem; }
.ku-source-strip > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.ku-source-strip a { padding: .3rem .45rem; border-radius: 8px; color: var(--green-800); background: #fff; font-size: .62rem; font-weight: 800; }
.ku-readonly-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .7rem; border: 1px solid #e0e8e4; border-radius: 13px; }
.ku-readonly-list article > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--green-800); background: var(--green-50); font-size: .65rem; font-weight: 900; }
.ku-readonly-list article > div { display: grid; gap: .1rem; }
.ku-readonly-list article > div strong { font-size: .72rem; }
.ku-readonly-list article > div small { color: var(--muted); font-size: .6rem; }
.ku-readonly-list article > b { font-size: .85rem; text-align: right; }
.ku-activity-readonly > article { display: grid; gap: .55rem; padding: .75rem; border: 1px solid #e0e8e4; border-radius: 14px; }
.ku-activity-readonly > article > div:nth-child(2) { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ku-activity-readonly p { margin: 0; color: var(--muted); font-size: .63rem; }
.ku-activity-status { padding: .3rem .45rem; border-radius: 999px; color: #805d17; background: #fff4d9; font-size: .59rem; font-weight: 850; }
.ku-activity-status.done { color: var(--green-800); background: var(--green-50); }
.ku-detail-result { display: grid; gap: .1rem; padding-left: 2.3rem; }
.ku-detail-result strong { font-size: .78rem; }
.ku-detail-result span { color: var(--muted); font-size: .62rem; }
.ku-special-result, .ku-general-notes { padding: .75rem; border: 1px solid #e0e8e4; border-radius: 14px; }
.ku-special-result strong, .ku-general-notes strong { font-size: .75rem; }
.ku-special-result p, .ku-general-notes p { margin: .2rem 0 0; color: var(--muted); font-size: .66rem; line-height: 1.45; }

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 1rem; background: radial-gradient(circle at 50% 0%, #dff4ea 0, #f4f7f5 45%); }
.login-shell { width: min(100%, 430px); }
.login-card { padding: 1.4rem; border: 1px solid var(--line); border-radius: 24px; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow); }
.login-brand { margin-bottom: 1.4rem; text-align: center; }
.login-brand h1 { font-size: 1.8rem; }
.login-brand p:last-child { margin-bottom: 0; }
.captcha-box { display: grid; grid-template-columns: minmax(0, 1fr) 105px; align-items: end; gap: .75rem; padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--green-50); }
.captcha-prompt { display: grid; gap: .18rem; }
.captcha-prompt span { color: var(--green-700); font-size: .7rem; font-weight: 850; letter-spacing: .08em; }
.captcha-prompt strong { font-size: 1.3rem; letter-spacing: .04em; }
.captcha-prompt small { color: var(--muted); font-size: .72rem; }
.captcha-answer input { min-height: 44px; text-align: center; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 3.25rem; }
.password-toggle { position: absolute; top: 50%; right: .42rem; display: grid; width: 40px; height: 40px; padding: 0; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 10px; cursor: pointer; transform: translateY(-50%); }
.password-toggle:hover, .password-toggle:focus-visible { color: var(--green-800); background: var(--green-50); outline: none; }
.password-toggle svg { width: 20px; height: 20px; }
.password-eye-closed { display: none; }
.password-toggle[aria-pressed="true"] .password-eye-open { display: none; }
.password-toggle[aria-pressed="true"] .password-eye-closed { display: block; }

.attendance-order-button svg, .attendance-pdf-button svg { width: 18px; height: 18px; }
.print-order-page-heading p:last-child { font-size: .78rem; }
.print-order-guide { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; padding: .9rem; border: 1px solid #cbe2d6; border-radius: 18px; background: linear-gradient(145deg, var(--green-50), #fff); }
.print-order-guide-icon { display: grid; flex: 0 0 40px; height: 40px; place-items: center; border-radius: 13px; color: var(--green-800); background: #fff; box-shadow: 0 5px 14px rgba(20, 61, 46, .08); }
.print-order-guide-icon svg { width: 21px; height: 21px; }
.print-order-guide strong { display: block; margin: .05rem 0 .2rem; font-size: .88rem; }
.print-order-guide p { margin: 0; font-size: .72rem; line-height: 1.45; }
.print-order-grid { display: grid; gap: 1rem; }
.print-order-card { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: var(--shadow); }
.print-order-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--line); background: linear-gradient(145deg, #fff, #f8fbf9); }
.print-order-card-header h2 { margin: .5rem 0 .1rem; font-size: 1.05rem; }
.print-order-card-header p { margin: 0; font-size: .7rem; }
.print-order-list { display: grid; gap: .5rem; padding: .75rem; }
.print-order-item { display: grid; grid-template-columns: 32px 30px minmax(0, 1fr) auto; align-items: center; gap: .42rem; min-height: 62px; padding: .48rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 4px 13px rgba(20, 61, 46, .04); transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease; }
.print-order-item:hover { border-color: #b9d8ca; box-shadow: 0 7px 18px rgba(20, 61, 46, .08); }
.print-order-item.is-empty { border-style: dashed; background: #f8faf9; }
.print-order-item.is-dragging { opacity: .55; border-color: var(--green-700); box-shadow: 0 10px 24px rgba(20, 61, 46, .16); transform: scale(.99); }
.print-order-drag { display: grid; width: 32px; height: 40px; place-items: center; padding: 0; color: #8b9993; background: transparent; border: 0; cursor: grab; }
.print-order-drag:active { cursor: grabbing; }
.print-order-drag svg { width: 20px; height: 25px; }
.print-order-position { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--green-800); background: var(--green-50); font-size: .76rem; font-weight: 900; }
.print-order-person { min-width: 0; }
.print-order-person strong, .print-order-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.print-order-person strong { font-size: .78rem; }
.print-order-person small { margin-top: .15rem; color: var(--muted); font-size: .63rem; }
.print-order-item.is-empty .print-order-person strong { color: var(--muted); font-style: italic; }
.print-order-actions { display: flex; gap: .2rem; }
.print-order-actions button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; color: var(--green-800); background: var(--green-50); border: 0; border-radius: 9px; cursor: pointer; }
.print-order-actions button:hover { background: var(--green-100); }
.print-order-actions button:disabled { color: #aeb8b3; background: #f1f3f2; cursor: default; }
.print-order-actions button.is-remove { color: var(--danger); background: #fff1f1; }
.print-order-actions svg { width: 17px; height: 17px; }
.print-order-footer { display: grid; grid-template-columns: 1fr; gap: .6rem; padding: .75rem; border-top: 1px solid var(--line); background: #fafcfb; }
.print-order-empty { margin: .75rem; }

@media (max-width: 719px) {
    .app-modal { inset: 0; width: calc(100% - 1rem); max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: auto; border-radius: 22px; }
    .app-modal-panel { max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    .attendance-floating-create { width: 56px; height: 56px; justify-content: center; padding: 0; }
    .attendance-floating-create span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .officer-section-heading { display: grid; }
    .officer-order-button { width: 100%; justify-content: center; }
}

@media (min-width: 720px) {
    .topbar { padding-inline: 2rem; }
    .operator-name { display: inline; }
    .header-account > strong { display: block; }
    .page-shell { padding: 2rem 1.5rem 3rem; }
    .page-shell:has(.floating-add-button) { padding-bottom: 5.5rem; }
    .floating-add-button { right: max(1.5rem, calc((100vw - 1060px) / 2 + 1.5rem)); bottom: 1.5rem; }
    .bottom-nav { position: static; grid-template-columns: repeat(3, max-content); justify-content: center; gap: .5rem; padding: .55rem; border-bottom: 1px solid var(--line); border-top: 0; box-shadow: none; }
    .bottom-nav a { display: flex; min-height: 40px; padding: 0 1rem; font-size: .82rem; }
    .bottom-nav a.nav-primary { min-height: 42px; padding: 0 1.1rem; color: #fff; background: linear-gradient(145deg, var(--green-700), var(--green-950)); box-shadow: 0 6px 16px rgba(10, 63, 43, .2); }
    .bottom-nav a.nav-primary.active { color: #fff; background: linear-gradient(145deg, var(--green-700), var(--green-950)); }
    .nav-icon { font-size: 1.05rem; }
    .nav-primary-icon { position: static; width: auto; height: auto; color: currentColor; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
    .bottom-nav a.nav-primary:active .nav-primary-icon { box-shadow: none; transform: scale(.94); }
    .bottom-nav a.nav-primary.active .nav-primary-icon { box-shadow: none; }
    .nav-primary-icon svg { width: 1.25rem; height: 1.25rem; }
    .hero-panel { grid-template-columns: 1fr auto; align-items: center; padding: 2rem; }
    .dashboard-hero { padding-bottom: 3.4rem; }
    .dashboard-stat-dock { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); width: calc(100% - 4rem); margin-top: -2.55rem; padding: .5rem; }
    .dashboard-metric-total { grid-column: auto; }
    .dashboard-metric-bapak { border-left: 1px solid #e4ebe7; }
    .dashboard-metric-ibu { border-left: 1px solid #e4ebe7; }
    .dashboard-attendance { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); padding: 1.35rem; }
    .dashboard-record-heading { align-items: center; flex-direction: row; }
    .dashboard-record-filters { grid-template-columns: auto auto; width: auto; }
    .compact-field input, .compact-field select { width: auto; }
    .attendance-filter-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 1rem; }
    .attendance-filter-fields { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    .attendance-filter-submit { width: auto; }
    .attendance-document-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: .85rem 1rem; }
    .attendance-tool-actions { display: flex; }
    .attendance-tool-button { width: auto; min-width: 88px; }
    .dashboard-attendance-heading { grid-column: 1 / -1; }
    .dashboard-category-grid { grid-template-columns: 1fr; }
    .ku-period-filter { grid-template-columns: minmax(220px, 1fr) auto; align-items: end; }
    .ku-period-filter .button { width: auto; }
    .ku-primary-actions { grid-template-columns: repeat(2, max-content); }
    .ku-primary-actions .button, .ku-primary-actions form, .ku-primary-actions form .button { width: auto; }
    .ku-census-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ku-activity-fields { grid-template-columns: minmax(150px, .65fr) minmax(130px, .5fr) minmax(220px, 1fr); }
    .ku-detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ku-special-row { grid-template-columns: auto repeat(2, minmax(0, 1fr)); align-items: end; }
    .ku-special-row .field:last-child { grid-column: auto; }
    .ku-form-section-body { padding: 1rem; }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .stat-total { grid-column: auto; }
    .attendance-overview { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); }
    .category-percentage-grid { grid-template-columns: 1fr; }
    .section-block, .form-card { padding: 1.4rem; }
    .filter-bar { display: flex; align-items: flex-end; }
    .filter-bar .field { flex: 1 1 0; }
    .filter-bar .button { width: auto; }
    .print-order-footer { grid-template-columns: auto 1fr; }
    .age-range-row { grid-template-columns: minmax(150px, .8fr) minmax(300px, 1.2fr); align-items: end; padding: 1rem; }
    .age-range-row > .field-error { grid-column: 1 / -1; }
    .record-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-date-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .group-percentage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .number-grid { grid-template-columns: repeat(5, 1fr); }
    .number-field.status-other { grid-column: auto; }
    .live-summary { grid-template-columns: repeat(5, 1fr); }
    .sticky-submit { position: static; margin: 0; padding: 1rem; }
    .sticky-submit > div { display: grid; }
    .sticky-submit small { color: var(--muted); }
    .people-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .person-popover { left: auto; width: 360px; }
    .family-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .family-stat-card-primary { grid-column: auto; }
    .organization-filter-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .organization-filter-form.has-desa-filter { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
    .organization-filter-form.has-daerah-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .organization-filter-form.has-daerah-filter .organization-filter-actions { grid-column: 1 / -1; }
    .organization-filter-actions { flex-wrap: nowrap; }
    .organization-filter-actions .button { flex: 0 0 auto; }
    .organization-breakdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .census-summary { padding: 1.35rem; }
    .age-count-grid, .membership-count-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .marital-count-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .family-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .family-person-popover { right: -.35rem; left: auto; width: 430px; }
    .person-profile-hero { gap: 1.25rem; padding: 1.5rem; }
    .person-profile-avatar { flex-basis: 78px; height: 78px; border-radius: 24px; font-size: 1.8rem; }
    .person-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .person-detail-item.is-wide { grid-column: 1 / -1; }
    .person-family-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .officer-form { grid-template-columns: minmax(0, 1.4fr) minmax(180px, .8fr); align-items: start; }
    .officer-form .button { width: auto; }
    .officer-form .app-modal-actions { grid-column: 1 / -1; }
    .officer-unit-structure { padding: 1.2rem; }
    .officer-unit-structure.is-collapsible > summary, .officer-unit-content { padding: 1.2rem; }
    .organization-branches-scroll { display: flex; justify-content: safe center; overflow-x: auto; padding: 0 .15rem .55rem; scrollbar-color: #b8d7c9 transparent; scrollbar-width: thin; }
    .organization-branches { display: flex; flex: 0 0 auto; width: max-content; gap: .8rem; margin-top: 1.5rem; padding: 1.5rem 0 0; }
    .organization-branches::before { top: 0; right: 130px; bottom: auto; left: 130px; width: auto; height: 2px; }
    .organization-branches.single::before { display: none; }
    .organization-person { flex: 0 0 260px; }
    .organization-person::before { right: auto; bottom: 100%; left: 50%; width: 2px; height: 1.5rem; transform: translateX(-50%); }
    .account-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-menu > form { display: contents; }
    .profile-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-form .sticky-submit { grid-column: 1 / -1; }
    .managed-account-create > summary { width: max-content; }
    .managed-account-create > .managed-account-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .managed-account-create .managed-account-form-heading,
    .managed-account-create .managed-account-form > .button { grid-column: 1 / -1; }
    .managed-account-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .app-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); }
    .desktop-sidebar { position: sticky; top: 0; display: flex; min-width: 0; height: 100vh; overflow: hidden; flex-direction: column; padding: 1.15rem .9rem .9rem; color: #e7f4ee; background: linear-gradient(180deg, #0d4b35 0%, #083824 100%); box-shadow: 12px 0 35px rgba(8, 49, 33, .08); }
    .sidebar-brand { display: flex; align-items: center; gap: .72rem; padding: 0 .45rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .11); }
    .sidebar-brand .brand-mark { flex: 0 0 42px; color: var(--green-950); background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
    .sidebar-brand > span:last-child { display: grid; min-width: 0; gap: .16rem; }
    .sidebar-brand strong { color: #fff; font-size: .98rem; }
    .sidebar-brand small { color: #a9d1bf; font-size: .66rem; }
    .sidebar-unit { display: grid; gap: .17rem; margin: .85rem .25rem .55rem; padding: .72rem .8rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 13px; background: rgba(255, 255, 255, .07); }
    .sidebar-unit span { color: #a9d1bf; font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
    .sidebar-unit strong { overflow: hidden; color: #fff; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
    .sidebar-nav { display: grid; min-height: 0; overflow-y: auto; align-content: start; gap: .25rem; padding: .25rem; scrollbar-color: rgba(255, 255, 255, .18) transparent; scrollbar-width: thin; }
    .sidebar-nav-label { margin: .72rem .65rem .2rem; color: #83b49e; font-size: .58rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
    .sidebar-nav a { display: flex; min-height: 42px; align-items: center; gap: .72rem; padding: .62rem .72rem; border: 1px solid transparent; border-radius: 11px; color: #c9e1d6; font-size: .76rem; font-weight: 720; transition: color .15s ease, background .15s ease, border-color .15s ease; }
    .sidebar-nav a:hover { color: #fff; background: rgba(255, 255, 255, .075); }
    .sidebar-nav a.active { color: #fff; background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .12); box-shadow: inset 3px 0 0 #8ad2ae; }
    .sidebar-nav svg { flex: 0 0 19px; width: 19px; height: 19px; }
    .sidebar-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .35rem; margin-top: auto; padding: .75rem .25rem 0; border-top: 1px solid rgba(255, 255, 255, .11); }
    .sidebar-profile { display: flex; min-width: 0; align-items: center; gap: .55rem; padding: .38rem; border-radius: 11px; }
    .sidebar-profile:hover { background: rgba(255, 255, 255, .07); }
    .sidebar-profile > span:first-child { display: grid; flex: 0 0 35px; height: 35px; place-items: center; border-radius: 11px; color: var(--green-950); background: #dff3e9; font-size: .78rem; font-weight: 900; }
    .sidebar-profile > span:last-child { display: grid; min-width: 0; gap: .08rem; }
    .sidebar-profile strong, .sidebar-profile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sidebar-profile strong { color: #fff; font-size: .7rem; }
    .sidebar-profile small { color: #9fc6b4; font-size: .59rem; }
    .sidebar-footer form { margin: 0; }
    .sidebar-logout { display: grid; width: 37px; height: 37px; padding: 0; place-items: center; color: #f1b7b7; background: rgba(255, 255, 255, .06); border: 0; border-radius: 11px; cursor: pointer; }
    .sidebar-logout:hover { color: #fff; background: rgba(184, 58, 58, .5); }
    .sidebar-logout svg { width: 18px; height: 18px; }
    .app-content { display: flex; flex-direction: column; }
    .topbar { min-height: 66px; padding: .65rem 2rem; }
    .topbar > .brand { display: none; }
    .desktop-page-context { display: grid; gap: .08rem; }
    .desktop-page-context > span { color: var(--ink); font-size: .92rem; font-weight: 850; }
    .desktop-page-context small { color: var(--muted); font-size: .67rem; }
    .header-account { margin-left: auto; padding: .25rem .35rem .25rem .25rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
    .page-shell { width: min(100%, 1280px); padding: 1.6rem 2rem 3rem; }
    .page-shell:has(.dashboard-overview) { width: min(100%, 1280px); }
    .bottom-nav { display: none; }
    .floating-add-button { right: max(2rem, calc((100vw - 264px - 1280px) / 2 + 2rem)); }
    .family-page-heading, .officer-heading, .ku-page-heading { align-items: center; margin: 0 0 1rem; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(20, 61, 46, .05); }
    .family-page-heading > div:first-child, .officer-heading > div:first-child, .ku-page-heading > div:first-child { display: grid; min-width: 0; gap: .1rem; }
    .family-page-heading h1, .officer-heading h1, .ku-page-heading h1 { margin: 0; font-size: 1.55rem; }
    .family-page-heading p:last-child, .officer-heading p:last-child, .ku-page-heading p:last-child { max-width: 700px; margin: .16rem 0 0; font-size: .72rem; }
    .desktop-page-action { display: inline-flex; }
    .desktop-heading-intro { display: block; }
    .family-floating-add, .officer-floating-add { display: none; }
    .family-stats { gap: 1rem; margin-block: 1rem; }
    .family-stat-card { min-height: 150px; align-content: space-between; padding: 1.15rem; }
    .family-stat-value strong { font-size: 2.35rem; }
    .organization-accumulation { padding: 1.2rem; }
    .family-directory-toolbar { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(280px, 1.25fr); align-items: center; gap: .8rem; margin: 1rem 0; padding: .7rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 7px 22px rgba(20, 61, 46, .04); }
    .family-directory-toolbar .family-filter-tabs, .family-directory-toolbar .family-search, .family-directory-toolbar .filter-result { margin: 0; }
    .family-directory-toolbar .family-filter-tabs { border: 0; background: #f1f5f3; }
    .family-directory-toolbar .family-search { padding: 0; border: 0; background: transparent; }
    .family-directory-toolbar .filter-result { grid-column: 1 / -1; justify-content: flex-start; white-space: nowrap; }
    .family-group-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .family-group-section[open] { grid-column: 1 / -1; }
    .family-group-heading { min-height: 94px; padding: 1rem 1.1rem; }
    .family-group-content { padding: 1rem; }
    .officer-list-block { padding: 1.25rem; }
    .officer-structure-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .officer-unit-structure:not(.is-collapsible), .officer-unit-structure.is-collapsible[open] { grid-column: 1 / -1; }
    .officer-unit-structure.is-collapsible > summary { min-height: 92px; }
    .officer-unit-structure:not(.is-collapsible) { padding: 1.25rem; }
    .ku-desktop-toolbar { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 1rem; margin-bottom: 1rem; }
    .ku-desktop-toolbar .ku-period-filter, .ku-desktop-toolbar .ku-workflow { height: 100%; margin: 0; }
    .ku-desktop-toolbar .ku-period-filter { align-items: end; padding: 1rem; }
    .ku-desktop-toolbar .ku-workflow { padding: .72rem; border: 1px solid var(--line); background: #fff; box-shadow: 0 7px 20px rgba(20, 61, 46, .04); }
    .ku-desktop-overview { display: grid; grid-template-columns: 1fr; align-items: start; gap: 1rem; }
    .ku-desktop-overview .ku-status-card, .ku-desktop-overview .ku-recap-hero { min-height: 170px; margin: 0; padding: 1.25rem; }
    .ku-desktop-overview .ku-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: .65rem; min-height: 170px; margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 7px 22px rgba(20, 61, 46, .05); }
    .ku-desktop-overview .ku-primary-actions .button, .ku-desktop-overview .ku-primary-actions form, .ku-desktop-overview .ku-primary-actions form .button { width: 100%; }
    .ku-desktop-overview .ku-unit-list { min-height: 170px; padding: 1.2rem; }
    .ku-desktop-overview .ku-forwarded-alert, .ku-desktop-overview .ku-forward-form { margin: 0; }
    .print-order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (min-width: 1000px) {
    .organization-filter-form.has-daerah-filter { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
    .organization-filter-form.has-daerah-filter .organization-filter-actions { grid-column: auto; }
    .record-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .people-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .family-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .person-profile-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
    .person-profile-family { grid-column: 1 / -1; }
    .person-profile-card { padding: 1.2rem; }
    .organization-breakdown-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .organization-person { flex-basis: 280px; }
    .organization-branches::before { right: 140px; left: 140px; }
}

@media (max-width: 520px) {
    .responsive-form-row { display: grid; grid-template-columns: 1fr; }
    .gender-field { flex-basis: auto; }
    .family-card-header { align-items: flex-start; }
    .family-search { align-items: stretch; }
    .organization-accumulation-heading { display: grid; }
    .organization-accumulation-total { grid-template-columns: auto auto; min-width: 0; align-items: baseline; text-align: left; }
    .organization-accumulation-total span { grid-column: 1 / -1; }
    .officer-unit-structure.is-collapsible .officer-unit-access { display: none; }
    .officer-order-item { grid-template-columns: 30px 28px minmax(0, 1fr) auto; gap: .38rem; }
    .officer-order-category { grid-column: 3 / -1; }
    .officer-order-item .print-order-actions { grid-column: 4; grid-row: 1; }
    .officer-category-section { padding: .65rem; }
}

@media (max-width: 380px) {
    .brand > span:last-child { display: none; }
    .operator-menu { gap: .35rem; }
    .dashboard-stat-dock { gap: .2rem; width: calc(100% - .75rem); padding: .32rem; }
    .dashboard-metric { gap: .45rem; padding: .56rem; }
    .dashboard-metric-icon { flex-basis: 34px; height: 34px; border-radius: 11px; }
    .dashboard-metric-icon svg { width: 19px; height: 19px; }
    .dashboard-metric-copy > span { font-size: .6rem; }
    .dashboard-metric-copy > strong { font-size: 1.25rem; }
    .dashboard-metric-copy > div > strong { font-size: 1.55rem; }
    .dashboard-metric-copy > div > small { font-size: .58rem; }
    .floating-add-button { width: 52px; justify-content: center; padding: 0; }
    .floating-add-button span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

@media (min-width: 720px) {
    .page-shell:has(.dashboard-overview) { width: min(100%, 1280px); padding-inline: 2rem; }
    .dashboard-top-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); align-items: stretch; gap: 1.25rem; }
    .dashboard-overview { display: flex; min-width: 0; flex-direction: column; }
    .dashboard-overview .dashboard-hero { flex: 1 0 auto; min-height: 250px; }
    .dashboard-overview .dashboard-stat-dock { width: calc(100% - 2.5rem); margin-top: -2.15rem; }
    .dashboard-overview + .dashboard-attendance { align-self: stretch; margin-top: 0; }
    .dashboard-attendance { grid-template-columns: minmax(0, 1.25fr) minmax(180px, .75fr); align-content: start; gap: 1rem; }
    .dashboard-attendance-main { min-height: 172px; }
    .dashboard-category-grid { align-content: start; }
    .dashboard-scope-card { display: grid; gap: 1.1rem; margin-top: 1.25rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: 21px; background: linear-gradient(145deg, #fff, #f7fbf9); box-shadow: var(--shadow); }
    .dashboard-scope-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
    .dashboard-scope-heading > div:first-child { display: grid; gap: .12rem; }
    .dashboard-scope-heading h2 { margin: .05rem 0; font-size: 1.12rem; }
    .dashboard-scope-heading p { margin: 0; color: var(--muted); font-size: .76rem; }
    .dashboard-hierarchy { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; padding: .55rem .7rem; border: 1px solid #dbe9e1; border-radius: 12px; color: var(--green-800); background: #fff; font-size: .72rem; font-weight: 800; }
    .dashboard-hierarchy > span[aria-hidden] { color: #9aa9a1; }
    .dashboard-scope-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
    .dashboard-scope-metrics article { display: grid; min-width: 0; align-content: start; gap: .22rem; padding: .95rem 1rem; border: 1px solid #e3ece7; border-radius: 15px; background: #fff; }
    .dashboard-scope-metrics article > span, .dashboard-scope-progress-card > div:first-child > span { color: var(--muted); font-size: .72rem; font-weight: 750; }
    .dashboard-scope-metrics article > strong { color: var(--green-950); font-size: 1.7rem; line-height: 1.1; letter-spacing: -.04em; }
    .dashboard-scope-metrics article > strong small { color: #87968e; font-size: .9rem; font-weight: 700; letter-spacing: 0; }
    .dashboard-scope-metrics article > small, .dashboard-scope-progress-card > small { color: var(--muted); font-size: .68rem; }
    .dashboard-scope-progress-card { gap: .65rem !important; }
    .dashboard-scope-progress-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
    .dashboard-scope-progress-card > div:first-child > strong { color: var(--green-800); font-size: 1.3rem; }
    .dashboard-scope-progress { height: 9px; overflow: hidden; border-radius: 999px; background: #e6efe9; }
    .dashboard-scope-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6eb993, var(--green-800)); }
}

@media (min-width: 1100px) {
    .dashboard-top-grid { grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr); gap: 1.4rem; }
    .dashboard-attendance { padding: 1.45rem; }
    .dashboard-record-section { margin-top: 1.4rem; }
    .ku-desktop-overview { grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr); }
    .ku-desktop-overview .ku-unit-list { grid-column: 2; grid-row: 1 / span 3; }
    .ku-desktop-overview .ku-forwarded-alert, .ku-desktop-overview .ku-forward-form { grid-column: 1; }
}

@media (max-width: 719px) {
    .dashboard-scope-card { display: none; }
}

@media (min-width: 1200px) {
    .family-directory-toolbar { grid-template-columns: 300px minmax(320px, 1fr) auto; }
    .family-directory-toolbar .filter-result { grid-column: auto; }
    .census-summary-content { grid-template-columns: minmax(0, 1.45fr) minmax(210px, .75fr) minmax(220px, .8fr); align-items: start; gap: 0; padding: 1.15rem; }
    .census-summary-group { min-width: 0; padding-inline: 1rem; }
    .census-summary-group:first-child { padding-left: 0; }
    .census-summary-group:last-child { padding-right: 0; }
    .marital-summary-group, .membership-summary-group { padding-top: 0; border-top: 0; border-left: 1px solid var(--line); }
    .officer-category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .ku-desktop-toolbar { grid-template-columns: minmax(310px, .7fr) minmax(400px, 1.3fr); }
}

@media (prefers-reduced-motion: reduce) {
    .app-modal[open] { animation: none; }
}