:root {
    --ink: #10233f;
    --muted: #6b7b91;
    --line: #dfe7f1;
    --paper: #ffffff;
    --canvas: #f3f6fa;
    --navy: #071b33;
    --indigo: #145da0;
    --indigo-dark: #0b2f55;
    --indigo-soft: #eaf3fb;
    --amber-soft: #fffbeb;
    --amber: #92400e;
    --green: #047857;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--canvas);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--canvas); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

.skip-link { position: fixed; left: -9999px; top: 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; padding: .7rem 1rem; border-radius: .6rem; background: white; }
.logo { display: flex; align-items: center; gap: .75rem; font-weight: 700; }
.brand-panel { display: inline-flex; width: fit-content; padding: .7rem .9rem; border-radius: .75rem; align-items: center; background: white; box-shadow: 0 .6rem 1.5rem rgba(7,27,51,.12); }
.brand-logo { display: block; width: 12.5rem; height: auto; }
.brand-logo-wide { width: 15.5rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .7rem 1.1rem; border: 0; border-radius: .65rem; background: var(--navy); color: white; font-size: .875rem; font-weight: 700; box-shadow: 0 .25rem .7rem rgba(7,27,51,.12); transition: .2s ease; }
.button:hover { background: #123f6c; transform: translateY(-1px); }
.button-dark { background: var(--navy); }
.button-dark:hover { background: #1e293b; }
.button-secondary { border: 1px solid #cbd5e1; color: #334155; background: white; }
.button-secondary:hover { border-color: #9db7d3; color: var(--navy); background: #f7faff; }
.button-danger { color: #b42318; border: 1px solid #fecaca; background: #fff1f2; box-shadow: none; }
.button-danger:hover { color: white; background: #b42318; }
.button-small { min-height: 2.2rem; padding: .45rem .7rem; font-size: .75rem; }

/* Public landing */
.landing { min-height: 100vh; overflow: hidden; color: white; background: radial-gradient(circle at 75% 15%, rgba(20,93,160,.4), transparent 30%), radial-gradient(circle at 20% 85%, rgba(125,188,233,.16), transparent 28%), var(--navy); }
.public-nav { display: flex; max-width: 78rem; margin: auto; padding: 1.5rem 2rem; align-items: center; justify-content: space-between; }
.public-nav .button { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.09); }
.hero { display: grid; max-width: 78rem; margin: auto; padding: 5rem 2rem; align-items: center; gap: 4rem; grid-template-columns: 1.05fr .95fr; }
.eyebrow { margin: 0; color: var(--indigo); font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.landing .eyebrow { display: inline-flex; padding: .35rem .7rem; border: 1px solid rgba(191,219,239,.2); border-radius: 999px; color: #d4e9f8; background: rgba(191,219,239,.08); }
.hero h1 { max-width: 46rem; margin: 1.5rem 0 0; font-size: clamp(3rem, 6vw, 4.2rem); line-height: 1.04; letter-spacing: -.045em; }
.hero-copy { max-width: 42rem; margin: 1.5rem 0 0; color: #cbd5e1; font-size: 1.1rem; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; align-items: center; }
.version { padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; color: #cbd5e1; font-size: .875rem; }
.module-map { padding: 1.5rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1.5rem; background: rgba(255,255,255,.055); box-shadow: 0 2rem 5rem rgba(0,0,0,.25); backdrop-filter: blur(16px); }
.module-map-head { display: flex; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.1); align-items: center; justify-content: space-between; gap: 1rem; }
.module-map-head small { color: #94a3b8; text-transform: uppercase; letter-spacing: .15em; }
.module-map-head p { margin: .3rem 0 0; font-weight: 700; }
.badge { padding: .35rem .65rem; border-radius: 999px; color: #fde68a; background: rgba(251,191,36,.1); font-size: .72rem; white-space: nowrap; }
.module-map-grid { display: grid; margin-top: 1rem; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
.module-tile { padding: 1rem; border: 1px solid rgba(255,255,255,.09); border-radius: 1rem; background: rgba(2,6,23,.3); }
.module-tile small { color: #a5b4fc; font-weight: 700; }
.module-tile strong { display: block; margin-top: .5rem; font-size: .875rem; }
.module-tile p { margin: .35rem 0 0; color: #94a3b8; font-size: .75rem; line-height: 1.55; }

/* Authentication */
.auth-page { display: grid; min-height: 100vh; grid-template-columns: 1.15fr .85fr; }
.auth-intro { position: relative; display: flex; overflow: hidden; padding: 3rem; flex-direction: column; justify-content: space-between; color: white; background: linear-gradient(145deg, #145da0, #071b33); }
.auth-intro::after { position: absolute; width: 25rem; height: 25rem; border-radius: 50%; background: rgba(103,232,249,.17); filter: blur(50px); content: ""; right: -8rem; top: -8rem; }
.auth-intro > * { position: relative; z-index: 1; }
.auth-message { max-width: 38rem; }
.auth-message p { color: #d4e9f8; line-height: 1.7; }
.auth-message .eyebrow { color: #d4e9f8; }
.auth-message h1 { margin: 1rem 0; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.12; letter-spacing: -.04em; }
.auth-form-wrap { display: grid; padding: 2rem; place-items: center; background: var(--canvas); }
.auth-card { width: min(100%, 27rem); }
.auth-card h2 { margin: .5rem 0; font-size: 2rem; letter-spacing: -.035em; }
.auth-card > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.auth-card form { margin-top: 2rem; }
.field { margin-bottom: 1.25rem; }
.field label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 650; }
.field input:not([type="checkbox"]) { width: 100%; padding: .8rem 1rem; border: 1px solid #cbd5e1; border-radius: .75rem; background: white; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.field input:focus { border-color: var(--indigo); box-shadow: 0 0 0 4px #dcecf9; outline: 0; }
.field-error { margin: .4rem 0 0; color: #dc2626; font-size: .8rem; }
.remember { display: flex; margin: .25rem 0 1.25rem; gap: .6rem; align-items: center; color: #475569; font-size: .875rem; }
.auth-card .button { width: 100%; }
.mobile-logo { display: none; margin-bottom: 3rem; }

/* Internal shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); }
.sidebar { display: flex; position: sticky; top: 0; height: 100vh; flex-direction: column; color: var(--ink); background: white; border-right: 1px solid var(--line); box-shadow: .35rem 0 1.5rem rgba(15,42,72,.035); }
.sidebar-head { display: flex; height: 6rem; padding: 0 1.5rem; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf2f7; }
.side-nav { display: grid; padding: 1.25rem 1rem 1.5rem; gap: .3rem; overflow-y: auto; }
.side-nav::before { margin: 0 .75rem .45rem; color: #95a2b3; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; content: "Menu utama"; }
.side-nav a { display: flex; min-height: 2.75rem; padding: .72rem .85rem; border-radius: .65rem; align-items: center; gap: .75rem; color: #53657a; font-size: .855rem; font-weight: 650; transition: .15s ease; }
.side-nav a > i { width: 1.2rem; color: #8297ab; text-align: center; transition: .15s ease; }
.side-nav a:hover { color: var(--navy); background: #f4f8fc; }
.side-nav a.active { color: var(--navy); background: #eaf3fb; box-shadow: inset .2rem 0 #145da0; }
.side-nav a:hover > i, .side-nav a.active > i { color: #145da0; }
.user-panel { margin-top: auto; padding: 1rem; border-top: 1px solid var(--line); }
.user-box { display: flex; padding: .8rem; border: 1px solid #e3ebf4; border-radius: .8rem; align-items: center; gap: .65rem; background: #f7faff; }
.avatar { display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: white; background: linear-gradient(145deg, #1769aa, var(--navy)); font-size: .8rem; font-weight: 800; }
.user-copy { min-width: 0; flex: 1; }
.user-copy strong, .user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-copy strong { font-size: .8rem; }
.user-copy small { margin-top: .15rem; color: var(--muted); font-size: .68rem; }
.logout-icon { border: 0; color: var(--indigo-dark); background: transparent; }
.main { min-width: 0; }
.top-header { position: sticky; z-index: 10; top: 0; padding: 1.15rem 2.25rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); box-shadow: 0 .25rem 1rem rgba(15,42,72,.035); backdrop-filter: blur(12px); }
.top-header-inner { display: flex; max-width: 90rem; margin: auto; align-items: center; justify-content: space-between; gap: 1rem; }
.top-header h1 { margin: .3rem 0 0; font-size: 1.35rem; letter-spacing: -.025em; }
.period { min-width: 11rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: .65rem; text-align: right; background: #f8fafc; }
.period span, .period strong { display: block; }
.period span { color: var(--muted); font-size: .7rem; }
.period strong { margin-top: .2rem; font-size: .8rem; }
.mobile-logout { display: none; }
.content { max-width: 90rem; margin: auto; padding: 2.25rem; }
.banner { position: relative; overflow: hidden; padding: 2.25rem; border-radius: 1.15rem; color: white; background: linear-gradient(135deg, #071b33, #0d3c68 68%, #1769aa); box-shadow: 0 1rem 2.5rem rgba(18,63,108,.16); }
.banner::before, .banner::after { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.045); content: ""; }
.banner::before { width: 14rem; height: 14rem; top: -7rem; right: 5rem; }
.banner::after { width: 10rem; height: 10rem; right: -3rem; bottom: -5rem; }
.banner > * { position: relative; z-index: 1; }
.banner .badge { display: inline-flex; color: #e2f1fb; background: rgba(255,255,255,.1); text-transform: uppercase; letter-spacing: .08em; }
.banner h2 { margin: 1.25rem 0 .6rem; font-size: 2rem; letter-spacing: -.035em; }
.banner p { max-width: 48rem; margin: 0; color: #d9e8f5; line-height: 1.75; }
.dashboard-banner { display: flex; min-height: 13.5rem; align-items: center; justify-content: space-between; gap: 2rem; }
.dashboard-banner > div { max-width: 50rem; }
.dashboard-banner .button-light, .dashboard-panel-primary .button-light { flex: 0 0 auto; color: var(--navy); background: white; box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.13); }
.dashboard-banner .button-light:hover, .dashboard-panel-primary .button-light:hover { background: #edf6fc; }
.button span { margin-left: .55rem; font-size: 1rem; }
.section { margin-top: 2rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.section-heading h2 { margin: .3rem 0 0; font-size: 1.5rem; letter-spacing: -.025em; }
.section-heading > span { color: var(--muted); font-size: .8rem; }
.stat-grid { display: grid; margin-top: 1.2rem; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.stat-card, .module-card { position: relative; overflow: hidden; padding: 1.3rem; border: 1px solid var(--line); border-radius: .9rem; background: white; box-shadow: 0 .45rem 1.4rem rgba(15,42,72,.055); }
.stat-card::before { position: absolute; height: .22rem; top: 0; right: 0; left: 0; background: linear-gradient(90deg, var(--navy), #2784c7); content: ""; }
.stat-card > span { color: var(--muted); font-size: .85rem; }
.stat-card strong { display: block; margin-top: .8rem; font-size: 2rem; letter-spacing: -.035em; }
.stat-card small { display: block; margin-top: .4rem; color: var(--green); font-weight: 650; }
.dashboard-section { margin-top: 2.25rem; }
.dashboard-stat-grid { display: grid; margin-top: 1.2rem; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-stat-card { display: flex; min-height: 9.2rem; padding: 1.35rem; align-items: center; gap: 1.15rem; border: 1px solid var(--line); border-radius: .9rem; background: white; box-shadow: 0 .5rem 1.5rem rgba(15,42,72,.055); }
.dashboard-stat-card:nth-child(2) { background: linear-gradient(145deg, #f8fbfe, #eef6fc); }
.dashboard-stat-card:nth-child(3) { color: white; border-color: transparent; background: linear-gradient(145deg, #0b2f55, #1769aa); }
.dashboard-stat-card:nth-child(3) > div > span, .dashboard-stat-card:nth-child(3) small { color: #d6e8f5; }
.stat-icon { display: grid; width: 3rem; height: 3rem; flex: 0 0 auto; place-items: center; border-radius: .75rem; color: #145da0; background: #eaf3fb; font-size: .72rem; font-weight: 800; }
.dashboard-stat-card:nth-child(3) .stat-icon { color: white; background: rgba(255,255,255,.14); }
.dashboard-stat-card > div > span, .dashboard-stat-card strong, .dashboard-stat-card small { display: block; }
.dashboard-stat-card > div > span { color: var(--muted); font-size: .8rem; font-weight: 650; }
.dashboard-stat-card strong { margin-top: .25rem; font-size: 2rem; letter-spacing: -.04em; }
.dashboard-stat-card small { margin-top: .15rem; color: #8595a7; font-size: .7rem; }
.dashboard-panels { display: grid; margin-top: 1.2rem; gap: 1rem; grid-template-columns: 1.15fr .85fr; }
.dashboard-panel { display: flex; min-height: 18rem; padding: 1.6rem; flex-direction: column; justify-content: space-between; gap: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: white; box-shadow: 0 .5rem 1.5rem rgba(15,42,72,.055); }
.dashboard-panel-primary { position: relative; overflow: hidden; align-items: flex-start; color: white; border: 0; background: linear-gradient(145deg, #071b33, #0d477b); }
.dashboard-panel-primary::after { position: absolute; width: 14rem; height: 14rem; right: -5rem; bottom: -7rem; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.04); content: ""; }
.dashboard-panel-primary > * { position: relative; z-index: 1; }
.dashboard-panel-icon { display: grid; width: 3.3rem; height: 3.3rem; place-items: center; border-radius: .8rem; color: white; background: rgba(255,255,255,.12); font-size: .72rem; font-weight: 850; letter-spacing: .06em; }
.dashboard-panel h3 { margin: .4rem 0 .5rem; font-size: 1.35rem; letter-spacing: -.025em; }
.dashboard-panel p:not(.eyebrow) { max-width: 36rem; margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.65; }
.dashboard-panel-primary .eyebrow, .dashboard-panel-primary p:not(.eyebrow) { color: #cfe3f2; }
.quick-links { display: grid; gap: .65rem; }
.quick-links a { display: grid; position: relative; padding: .85rem 2.4rem .85rem .95rem; border: 1px solid var(--line); border-radius: .7rem; background: #f8fafc; transition: .15s ease; }
.quick-links a:hover { border-color: #abc6dd; background: #f1f7fc; transform: translateX(2px); }
.quick-links span { font-size: .82rem; font-weight: 750; }
.quick-links small { margin-top: .2rem; color: var(--muted); font-size: .68rem; }
.quick-links b { position: absolute; top: 50%; right: 1rem; color: #145da0; transform: translateY(-50%); }
.user-dashboard-banner { display: flex; min-height: 12rem; align-items: center; justify-content: space-between; gap: 2rem; }
.user-dashboard-banner > div { max-width: 50rem; }
.user-dashboard-banner > i { position: relative; z-index: 1; padding-right: 2rem; color: rgba(255,255,255,.22); font-size: 6rem; }
.user-result-summary { display: grid; margin-top: 1.25rem; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.user-result-summary div { padding: 1.25rem; border: 1px solid var(--line); border-radius: .9rem; background: white; box-shadow: 0 .45rem 1.4rem rgba(15,42,72,.05); }
.user-result-summary span, .user-result-summary strong, .user-result-summary small { display: block; }
.user-result-summary span { color: var(--muted); font-size: .75rem; font-weight: 700; }
.user-result-summary strong { margin-top: .45rem; color: var(--navy); font-size: 1.45rem; }
.user-result-summary small { margin-top: .3rem; color: #8391a3; }
.result-card-grid { display: grid; margin-top: 1rem; gap: .75rem; }
.result-card { display: grid; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: .85rem; align-items: center; gap: 1rem; background: white; box-shadow: 0 .35rem 1rem rgba(15,42,72,.04); grid-template-columns: auto 1fr auto; transition: .15s ease; }
.result-card:hover { border-color: #aac5dd; box-shadow: 0 .6rem 1.4rem rgba(15,42,72,.08); transform: translateY(-1px); }
.result-card-icon { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border-radius: .7rem; color: #147044; background: #dcf5e7; }
.result-card div small, .result-card div strong, .result-card div span { display: block; }
.result-card div small { color: var(--muted); font-size: .7rem; }
.result-card div strong { margin: .2rem 0; }
.result-card div span { color: #145da0; font-size: .78rem; font-weight: 700; }
.result-card > i { color: #8da0b3; }
.empty-result { padding: 3rem; border: 1px dashed #bdcad7; border-radius: 1rem; color: var(--muted); text-align: center; background: white; }
.empty-result > i { color: #9eb3c7; font-size: 2.5rem; }
.empty-result h3 { margin: .8rem 0 .3rem; color: var(--ink); }
.empty-result p { margin: 0; }
.card-grid { display: grid; margin-top: 1rem; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.module-card { transition: .2s ease; }
.module-card:hover { border-color: #aac5dd; box-shadow: 0 .75rem 2rem rgba(15,42,72,.1); transform: translateY(-2px); }
.module-number { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .65rem; color: var(--indigo-dark); background: var(--indigo-soft); font-size: .75rem; font-weight: 800; }
.module-card strong { display: block; margin-top: 1rem; }
.module-card p { margin: .55rem 0 0; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.upload-rule-section { padding: 1.35rem; border: 1px solid #d7e4f0; border-radius: 1rem; background: #f8fbfe; }
.upload-rule-section .section-heading { align-items: center; }
.upload-rule-section .section-heading h3 { margin: .3rem 0 0; font-size: 1.4rem; letter-spacing: -.025em; }
.upload-rule-section .notice { margin: 1rem 0; }
.upload-rule-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.upload-rule-card { overflow: hidden; border: 1px solid var(--line); border-radius: .9rem; background: white; box-shadow: 0 .35rem 1rem rgba(15,42,72,.045); }
.upload-rule-card > header { display: flex; min-height: 4.3rem; padding: 1rem; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--line); background: #f5f9fd; }
.upload-rule-card > header > div { display: flex; align-items: center; gap: .65rem; }
.upload-rule-card > header strong { font-size: 1rem; }
.upload-rule-number { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border-radius: .55rem; color: white; background: var(--indigo); font-size: .72rem; font-weight: 800; }
.upload-requirement-list { margin: 0; padding: 0 1rem; list-style: none; counter-reset: upload-requirement; }
.upload-requirement-list li { position: relative; padding: 1rem 0 1rem 1.75rem; counter-increment: upload-requirement; }
.upload-requirement-list li + li { border-top: 1px solid #edf2f7; }
.upload-requirement-list li::before { position: absolute; display: grid; width: 1.25rem; height: 1.25rem; left: 0; top: 1.05rem; place-items: center; border-radius: 50%; color: var(--indigo-dark); background: var(--indigo-soft); font-size: .65rem; font-weight: 800; content: counter(upload-requirement); }
.upload-requirement-list strong { display: block; font-size: .82rem; line-height: 1.5; }
.upload-requirement-list p { margin: .35rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.upload-requirement-list a { display: inline-flex; margin-top: .55rem; align-items: center; gap: .35rem; color: var(--indigo); font-size: .72rem; font-weight: 750; }
.question-indicator-table { margin-top: 1.5rem; }
.question-indicator-table td { vertical-align: top; }
.indicator-summary { display: grid; max-width: 44rem; gap: .35rem; line-height: 1.45; }
.indicator-summary > span { white-space: normal; }
.indicator-summary .status { display: inline-flex; font-style: normal; }
.row-actions[id] { scroll-margin-top: 7rem; }
.placeholder { display: grid; min-height: 32rem; padding: 2rem; place-items: center; border: 1px dashed #cbd5e1; border-radius: 1.5rem; text-align: center; background: white; }
.placeholder-inner { max-width: 37rem; }
.check { display: grid; width: 4rem; height: 4rem; margin: auto; place-items: center; border-radius: 1rem; color: var(--indigo-dark); background: var(--indigo-soft); font-size: 1.4rem; font-weight: 800; }
.placeholder h2 { margin: .7rem 0; font-size: 2rem; letter-spacing: -.035em; }
.placeholder-copy { color: var(--muted); line-height: 1.7; }
.notice { margin: 1.5rem 0; padding: .8rem 1rem; border-radius: .7rem; color: var(--amber); background: var(--amber-soft); font-size: .875rem; line-height: 1.6; }
.data-header { display: flex; margin-bottom: 1.25rem; align-items: end; justify-content: space-between; gap: 1rem; }
.data-header h2 { margin: .35rem 0; font-size: 1.7rem; letter-spacing: -.03em; }
.data-header > div > p:last-child { margin: 0; color: var(--muted); font-size: .875rem; }
.count-badge { padding: .45rem .75rem; border-radius: 999px; color: var(--indigo-dark); background: var(--indigo-soft); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: .85rem; background: white; box-shadow: 0 .45rem 1.4rem rgba(15,42,72,.045); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: #304a67; background: #f4f8fc; font-size: .72rem; letter-spacing: .055em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f7faff; }
.status { display: inline-flex; padding: .3rem .55rem; border-radius: 999px; color: #475569; background: #f1f5f9; font-size: .72rem; font-weight: 700; }
.status-active { color: var(--green); background: #ecfdf5; }
.empty-state { padding: 3rem; color: var(--muted); text-align: center; }
.muted { color: var(--muted); font-size: .75rem; }
.flash-success, .flash-error { margin-bottom: 1rem; padding: .9rem 1rem; border-radius: .75rem; font-size: .875rem; }
.flash-success { color: #166534; background: #dcfce7; }
.flash-error { color: #991b1b; background: #fee2e2; }
.flash-error ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.section-tabs { display: flex; position: sticky; z-index: 5; top: 0; margin: 1rem 0 2rem; padding: .5rem; gap: .35rem; overflow-x: auto; border: 1px solid var(--line); border-radius: .8rem; background: rgba(255,255,255,.95); }
.section-tabs a { padding: .55rem .8rem; border-radius: .55rem; color: #475569; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.section-tabs a:hover { color: var(--indigo-dark); background: var(--indigo-soft); }
.master-section { margin-top: 3rem; scroll-margin-top: 1rem; }
.form-card { margin: 1rem 0; border: 1px solid var(--line); border-radius: .85rem; background: white; }
.form-card > summary, .row-actions > summary { cursor: pointer; color: var(--indigo-dark); font-size: .82rem; font-weight: 750; }
.form-card > summary { padding: 1rem; }
.employee-search { display: grid; margin: 1rem 0; padding: .65rem .75rem; border: 1px solid #cbd5e1; border-radius: .8rem; align-items: center; gap: .65rem; background: white; box-shadow: 0 .25rem .8rem rgba(15,42,72,.04); grid-template-columns: auto auto minmax(12rem, 1fr) auto; transition: border-color .18s ease, box-shadow .18s ease; }
.employee-search:focus-within { border-color: #6ea5d2; box-shadow: 0 0 0 3px rgba(20,93,160,.12); }
.employee-search > i { color: var(--indigo); }
.employee-search label { color: #475569; font-size: .78rem; font-weight: 750; white-space: nowrap; }
.employee-search input { width: 100%; min-height: 2.5rem; padding: .5rem .7rem; border: 0; outline: 0; background: transparent; }
.employee-search input::placeholder { color: #94a3b8; }
.form-grid { display: grid; padding: 0 1rem 1rem; gap: .8rem; grid-template-columns: repeat(4, 1fr); }
.form-grid label, .compact-form label { display: grid; gap: .35rem; color: #475569; font-size: .75rem; font-weight: 650; }
.form-grid input, .form-grid select, .compact-form input, .compact-form select { width: 100%; min-height: 2.55rem; padding: .55rem .65rem; border: 1px solid #cbd5e1; border-radius: .55rem; background: white; }
.input-suffix { display: flex; position: relative; align-items: center; }
.input-suffix input { padding-right: 2.25rem; }
.input-suffix > span { position: absolute; right: .75rem; color: #64748b; font-weight: 800; pointer-events: none; }
.form-actions { display: flex; align-items: end; }
.row-actions { position: relative; }
.row-actions[open] { min-width: 18rem; }
.compact-form { display: grid; margin-top: .65rem; padding: .8rem; gap: .6rem; border: 1px solid var(--line); border-radius: .65rem; background: #f8fafc; }
.compact-form .button { min-height: 2.35rem; }
.account-form { margin-top: .8rem; border-color: #b9d0e4; }
.offcanvas { width: min(30rem, 100%); height: 100dvh; max-width: none; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--line); color: var(--navy); background: white; box-shadow: -1.5rem 0 4rem rgba(15,23,42,.18); }
.offcanvas::backdrop { background: rgba(15,23,42,.48); }
.offcanvas-head { display: flex; min-height: 5.5rem; padding: 1.2rem 1.4rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.offcanvas-head h2 { margin: .3rem 0 0; font-size: 1.1rem; }
.offcanvas-close { display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #475569; background: white; font-size: 1.3rem; }
.offcanvas-body { height: calc(100dvh - 5.5rem); padding: 1.25rem 1.4rem 6rem; overflow-y: auto; }
.offcanvas-section { display: grid; gap: .85rem; }
.offcanvas-section + .offcanvas-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.offcanvas-section h3 { margin: 0; font-size: .9rem; }
.offcanvas-section label { display: grid; gap: .35rem; color: #475569; font-size: .78rem; font-weight: 650; }
.offcanvas-section input, .offcanvas-section select { width: 100%; min-height: 2.65rem; padding: .6rem .7rem; border: 1px solid #cbd5e1; border-radius: .6rem; background: white; }
.account-section { padding: 1rem; border: 1px solid #b9d0e4 !important; border-radius: .75rem; background: var(--indigo-soft); }
.offcanvas-footer { display: flex; position: sticky; bottom: -6rem; margin: 1.5rem -1.4rem -6rem; padding: 1rem 1.4rem; justify-content: flex-end; gap: .6rem; border-top: 1px solid var(--line); background: white; }
.inline-form { display: inline-flex; margin: .2rem; align-items: center; gap: .4rem; }
.short-input { width: 8rem; min-height: 2.2rem; padding: .4rem .55rem; border: 1px solid #cbd5e1; border-radius: .5rem; }
.short-input[readonly] { color: #64748b; background: #f1f5f9; }
.kpi-legend { display: flex; margin: 1.1rem 0 .75rem; flex-wrap: wrap; gap: .55rem; }
.kpi-legend span { display: inline-flex; padding: .4rem .65rem; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 999px; color: #53657a; background: white; font-size: .7rem; font-weight: 700; }
.kpi-legend i { width: .65rem; height: .65rem; border-radius: .18rem; }
.legend-target { background: #dcefd4; }
.legend-current { background: #ffd8cc; }
.legend-input { background: #fff0b5; }
.legend-calculated { background: #e8f3fc; }
.kpi-entry-table thead th { color: white; border-color: #41617f; background: #244c73; }
.kpi-entry-table th.kpi-column-target { background: #477f35; }
.kpi-entry-table th.kpi-column-current { background: #bb2d3b; }
.kpi-entry-table th.kpi-column-input { background: #9a6900; }
.kpi-entry-table th.kpi-column-calculated, .kpi-entry-table th.kpi-column-month { background: #1769aa; }
.kpi-entry-table td.kpi-column-target { color: #24512b; background: #edf7e9; font-weight: 700; }
.kpi-entry-table td.kpi-column-current { color: #8d2a20; background: #fff0ea; font-weight: 800; }
.kpi-entry-table td.kpi-column-month { color: #124e7d; background: #eaf4fb; font-weight: 800; }
.kpi-entry-table td.kpi-column-input { background: #fff8d9; }
.kpi-entry-table td.kpi-column-calculated { color: #173f63; background: #f3f9fd; font-weight: 750; }
.kpi-entry-table .kpi-column-input .short-input { border-color: #d6aa32; background: #fff3bd; box-shadow: inset 0 0 0 1px rgba(214,170,50,.08); }
.kpi-entry-table .kpi-column-input .short-input:focus { border-color: #a87500; box-shadow: 0 0 0 3px rgba(214,170,50,.2); outline: 0; }
.kpi-entry-table .kpi-column-input .short-input[readonly] { color: #746637; background: #f7edc8; }
.kpi-badge { display: inline-flex; padding: .28rem .5rem; border-radius: 999px; font-size: .67rem; font-weight: 800; }
.kpi-perspective-hasil { color: #155494; background: #e3f0fb; }
.kpi-perspective-insiden { color: #a13b2b; background: #fde8e4; }
.kpi-perspective-proses { color: #08766d; background: #dff7f2; }
.kpi-perspective-kualitas { color: #6941a5; background: #f0e8fb; }
.kpi-perspective-perilaku { color: #9a5d00; background: #fff0cc; }
.kpi-direction-up, .kpi-status-yes { color: #147044; background: #dcf5e7; }
.kpi-direction-down { color: #a33b31; background: #fde7e4; }
.kpi-status-no { color: #667085; background: #edf1f5; }
.kpi-summary-table th { width: 32rem; color: #244c73; background: #edf5fb; }
.kpi-summary-table td { background: white; }
.kpi-summary-table strong { color: #0b2f55; }
.kpi-summary-table input[data-kpi-full-incentive] { border-color: #d6aa32; background: #fff3bd; }
.filter-bar { display: flex; margin: 1rem 0; padding: .8rem; gap: .8rem; border: 1px solid var(--line); border-radius: .8rem; background: white; }
.filter-bar label { display: flex; align-items: center; gap: .6rem; color: #475569; font-size: .8rem; font-weight: 700; }
.filter-bar select, .filter-bar input { min-height: 2.4rem; padding: .45rem .65rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: white; }
.template-list { display: grid; margin-top: 1rem; gap: .75rem; }
.template-card { border: 1px solid var(--line); border-radius: .9rem; background: white; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.template-card > summary { display: flex; padding: 1rem; cursor: pointer; align-items: center; justify-content: space-between; gap: 1rem; }
.template-card > summary span:first-child { min-width: 0; }
.template-card > summary strong, .template-card > summary small { display: block; }
.template-card > summary small { margin-top: .3rem; color: var(--muted); }
.template-body { padding: 0 1rem 1rem; }
.wrap-cell { min-width: 22rem; white-space: normal; line-height: 1.5; }
.field-wide { grid-column: span 2; }
.indicator-form { padding-top: 1rem; }
.question-editor-page { width: min(100%, 72rem); margin: 0 auto; }
.question-editor { padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: white; box-shadow: 0 .7rem 2rem rgba(15,42,72,.07); }
.lock-action { display: flex; margin-top: 1rem; justify-content: flex-end; }
.compact-placeholder { min-height: 14rem; margin-top: 1rem; }
.offcanvas-section small { color: var(--muted); font-weight: 500; }
.back-link { display: inline-flex; margin-bottom: 1rem; color: var(--indigo); font-size: .85rem; font-weight: 700; }
.assessment-header { padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: white; }
.score-summary { display: grid; margin: 1rem 0; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.score-summary div { padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: white; }
.score-summary span, .score-summary strong { display: block; }
.score-summary span { color: var(--muted); font-size: .75rem; }
.score-summary strong { margin-top: .35rem; }
.assessment-items { display: grid; gap: 1rem; }
.assessment-item { padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: white; }
.assessment-item-inactive { opacity: .65; background: #f8fafc; }
.assessment-item > header { display: flex; align-items: flex-start; gap: .8rem; }
.assessment-item > header > div { min-width: 0; flex: 1; }
.assessment-item h3 { margin: .25rem 0 0; font-size: 1rem; line-height: 1.45; }
.assessment-item header small { color: var(--muted); }
.indicator-meta { display: flex; margin: 1rem 0; flex-wrap: wrap; gap: .6rem; }
.indicator-meta span { padding: .45rem .65rem; border-radius: .55rem; color: #475569; background: #f1f5f9; font-size: .75rem; }
.evidence-rule { color: #475569; font-size: .82rem; line-height: 1.6; }
.item-form, .evidence-form, .review-fields, .return-form { display: grid; margin-top: .8rem; padding: .8rem; gap: .7rem; border: 1px solid var(--line); border-radius: .7rem; background: #f8fafc; grid-template-columns: repeat(2, 1fr); }
.item-form label, .evidence-form label, .review-fields label, .return-form label { display: grid; gap: .35rem; color: #475569; font-size: .75rem; font-weight: 700; }
.item-form input, .item-form textarea, .evidence-form input, .review-fields input, .review-fields textarea, .return-form textarea { width: 100%; padding: .55rem .65rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: white; }
.evidence-list { display: flex; margin-top: .8rem; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .78rem; }
.evidence-list a { padding: .4rem .55rem; border-radius: .5rem; color: var(--indigo-dark); background: var(--indigo-soft); }
.position-evidence-panel { margin-top: 1.25rem; }
.position-evidence-panel > summary { cursor: pointer; color: var(--navy); font-weight: 800; }
.position-evidence-form { display: grid; margin-top: .8rem; max-width: 42rem; padding: .8rem; gap: .7rem; border: 1px solid var(--line); border-radius: .7rem; background: #f8fafc; grid-template-columns: 1fr 1fr auto; align-items: end; }
.position-evidence-form label { display: grid; gap: .35rem; color: #475569; font-size: .75rem; font-weight: 700; }
.position-evidence-form input { width: 100%; padding: .45rem .55rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: white; }
.position-upload-table { table-layout: fixed; min-width: 54rem; }
.position-upload-table th, .position-upload-table td { min-width: 0; white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.position-upload-table ol, .position-upload-table ul { margin: 0; padding-left: 1.2rem; }
.position-upload-table li + li { margin-top: .6rem; }
.position-upload-panel .position-evidence-form { grid-template-columns: minmax(0, 1fr); }
.position-upload-panel .evidence-link { margin: .6rem 0; }
.kpi-entry-table .kpi-realization-cell > small { display: block; max-width: 8rem; margin-bottom: .4rem; white-space: normal; line-height: 1.4; }
.kpi-entry-table .kpi-realization-cell > input { display: block; text-align: right; }
.position-evidence-current { display: flex; margin-top: .7rem; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.evidence-link { display: block; }
.evidence-link { color: var(--indigo-dark); font-weight: 700; }
.workflow-actions { display: flex; margin: 1rem 0; justify-content: flex-end; gap: .75rem; }
.workflow-actions .kpi-lock-action { margin-right: auto; }
.signature-grid { display: grid; margin: 1rem 0; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.signature-box { display: flex; min-height: 11rem; padding: 1rem; align-items: center; flex-direction: column; border: 1px solid var(--line); border-radius: .8rem; background: white; text-align: center; }
.signature-space { flex: 1; }
.signature-name { width: 100%; padding-top: .55rem; border-top: 1px solid #64748b; font-weight: 700; }
.signature-box small { margin-top: .25rem; color: var(--muted); }
.return-form { grid-template-columns: 1fr auto; align-items: end; }
.event-log { margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: white; }
.event-log summary { cursor: pointer; font-weight: 700; }
.event-log li { margin: .5rem 0; color: #475569; font-size: .8rem; }
.password-card { width: min(100%, 34rem); margin: 2rem auto; padding: 2rem; border: 1px solid var(--line); border-radius: 1rem; background: white; box-shadow: 0 .8rem 2rem rgba(15,42,72,.08); }
.password-card h2 { margin: .4rem 0; font-size: 1.7rem; }
.password-card > div:first-child > p:last-child { margin: 0 0 1.5rem; color: var(--muted); line-height: 1.6; }
.password-card .button i { margin-right: .45rem; }
.objection-card, .objection-review { margin-top: 1.25rem; padding: 1.35rem; border: 1px solid #f0d58a; border-radius: .9rem; background: #fffaf0; }
.objection-card h2 { margin: .35rem 0; }
.objection-card > div > p:last-child, .objection-review p { color: #59677a; line-height: 1.6; }
.objection-card form { display: grid; margin-top: 1rem; gap: .5rem; }
.objection-card label { font-size: .8rem; font-weight: 750; }
.objection-card textarea { width: 100%; padding: .8rem; border: 1px solid #d8bd72; border-radius: .65rem; resize: vertical; background: white; }
.objection-card .workflow-actions { align-items: center; justify-content: space-between; }
.objection-card small, .objection-review small { color: var(--muted); }
.recap-filter { margin: 0; }
.excel-recap { border: 1px solid #8ca2b8; background: white; box-shadow: 0 .65rem 2rem rgba(15,42,72,.08); }
.excel-recap > h2 { margin: 0; padding: .65rem 1rem; color: white; background: #203f6d; font-size: 1rem; text-align: center; }
.excel-recap > p:first-of-type { margin: 0; padding: .55rem 1rem; color: #24420d; background: #e3efd9; font-size: .78rem; font-weight: 750; text-align: center; }
.recap-edit-hint { padding: .55rem 1rem; color: #6c4d00; background: #fff4c2; font-size: .78rem; }
.excel-recap .table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.excel-recap table { min-width: 70rem; }
.excel-recap th, .excel-recap td { padding: .55rem .65rem; border-right: 1px solid #9bacbd; border-bottom-color: #9bacbd; }
.excel-recap thead th { color: white; background: #326394; text-align: center; }
.excel-recap td:nth-child(1), .excel-recap td:nth-child(5), .excel-recap td:nth-child(6), .excel-recap td:nth-child(8) { text-align: center; }
.excel-recap tbody tr[data-recap-row] { cursor: pointer; }
.excel-recap tbody tr[data-recap-row]:hover, .excel-recap tbody tr[data-recap-row]:focus { background: #fff8d9; outline: 2px solid #d6aa32; outline-offset: -2px; }
.excel-recap tbody tr[data-recap-row] td:last-child { color: #7b5a00; background: #fff8d9; }
.excel-recap tfoot th { color: white; background: #203f6d; }
.excel-recap .recap-note { margin: 0; padding: .75rem 1rem; color: #8f3d10; background: #fce5d6; font-size: .75rem; font-style: italic; line-height: 1.55; }
.recap-dialog { width: min(36rem, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 1rem; color: var(--ink); background: white; box-shadow: 0 1.5rem 5rem rgba(7,27,51,.28); }
.recap-dialog::backdrop { background: rgba(7,27,51,.55); }
.recap-dialog-body { display: grid; padding: 1.25rem 1.4rem; gap: .5rem; }
.recap-dialog-body label, .follow-up-field label { color: #304a67; font-size: .8rem; font-weight: 750; }
.recap-dialog-body textarea, .follow-up-field textarea { width: 100%; padding: .75rem; border: 1px solid #cbd5e1; border-radius: .65rem; resize: vertical; background: white; }
.recap-dialog-body small, .follow-up-field small { color: var(--muted); }
.recap-dialog-footer { display: flex; padding: 1rem 1.4rem; justify-content: flex-end; gap: .6rem; border-top: 1px solid var(--line); }
.kpi-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; }
.kpi-guide-dialog { width: min(52rem, calc(100% - 2rem)); }
.kpi-guide-dialog .recap-dialog-body { max-height: 70vh; overflow-y: auto; gap: 1.1rem; }
.kpi-guide-dialog section { display: grid; gap: .55rem; }
.kpi-guide-dialog h3, .kpi-guide-dialog p, .kpi-guide-dialog ol, .kpi-guide-dialog ul { margin: 0; }
.kpi-guide-dialog ol, .kpi-guide-dialog ul { padding-left: 1.25rem; color: #475569; line-height: 1.65; }
.kpi-guide-context, .kpi-milestone-map { display: grid; gap: .55rem; grid-template-columns: repeat(3, 1fr); }
.kpi-guide-context span, .kpi-milestone-map span { display: grid; padding: .7rem; border: 1px solid var(--line); border-radius: .65rem; color: var(--muted); background: #f8fafc; font-size: .75rem; }
.kpi-guide-context strong, .kpi-milestone-map strong { color: var(--navy); font-size: .9rem; }
.kpi-milestone-map { grid-template-columns: repeat(6, 1fr); }
.kpi-milestone-map span.active { color: #8f3d10; border-color: #e7bd69; background: #fff4c2; }
.kpi-guide-dialog .notice { margin: 0; }
.follow-up-field { display: grid; margin-top: 1rem; padding: 1rem; gap: .5rem; border: 1px solid #d6aa32; border-radius: .8rem; background: #fff8d9; }
.report-grid { display: grid; margin-top: 1.25rem; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-card { display: flex; min-width: 0; min-height: 23rem; padding: 1.75rem; flex-direction: column; justify-content: space-between; gap: 2rem; border: 1px solid var(--line); border-radius: 1rem; background: white; box-shadow: 0 .6rem 1.6rem rgba(15,42,72,.06); }
.report-card-featured { color: white; border: 0; background: linear-gradient(145deg, #071b33, #0d477b); }
.report-card-copy { max-width: 34rem; }
.report-card-icon { display: grid; width: 3.25rem; height: 3.25rem; margin-bottom: 1.25rem; place-items: center; border-radius: .8rem; color: #145da0; background: #eaf3fb; }
.report-card-featured .report-card-icon { color: white; background: rgba(255,255,255,.13); }
.report-card h3 { margin: .4rem 0 .55rem; font-size: 1.35rem; letter-spacing: -.025em; }
.report-card-copy > p:last-child { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.7; }
.report-card-featured .eyebrow, .report-card-featured .report-card-copy > p:last-child { color: #cfe3f2; }
.report-form { display: grid; padding: 1rem; gap: .85rem; border: 1px solid var(--line); border-radius: .85rem; background: #f8fafc; }
.report-card-featured .report-form { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); }
.report-card-featured .button-light { color: var(--navy); background: white; }
.report-card-featured .button-light:hover { background: #edf6fc; }
.report-fields { display: grid; gap: .8rem; grid-template-columns: minmax(9rem, .7fr) minmax(0, 1.3fr); }
.report-field { display: grid; min-width: 0; gap: .4rem; }
.report-field span { color: #475569; font-size: .75rem; font-weight: 750; }
.report-card-featured .report-field span { color: #d5e6f3; }
.report-field select { width: 100%; min-width: 0; min-height: 2.75rem; padding: .55rem .7rem; border: 1px solid #cbd5e1; border-radius: .6rem; color: var(--ink); background: white; }
.report-form .button { width: 100%; }

@media (max-width: 1000px) {
    .hero { grid-template-columns: 1fr; padding-top: 3.5rem; }
    .auth-page { grid-template-columns: 1fr; }
    .auth-intro { display: none; }
    .mobile-logo { display: flex; }
    .app-shell { display: block; }
    .sidebar { position: static; height: auto; min-height: auto; }
    .sidebar-head { height: 4.6rem; }
    .side-nav { display: flex; padding: 0 .75rem 1rem; overflow-x: auto; }
    .side-nav::before { display: none; }
    .side-nav a { flex: 0 0 auto; }
    .user-panel { display: none; }
    .mobile-logout { display: inline-flex; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: .55rem; background: white; }
    .dashboard-panels { grid-template-columns: 1fr; }
    .report-grid { grid-template-columns: 1fr; }
    .upload-rule-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .public-nav, .hero, .content, .top-header { padding-left: 1.25rem; padding-right: 1.25rem; }
    .hero { padding-top: 2.5rem; padding-bottom: 3rem; }
    .hero h1 { font-size: 2.8rem; }
    .module-map-grid, .card-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .period { display: none; }
    .score-summary, .signature-grid { grid-template-columns: 1fr; }
    .dashboard-banner { align-items: flex-start; flex-direction: column; }
    .dashboard-stat-grid, .user-result-summary { grid-template-columns: 1fr; }
    .user-dashboard-banner > i { display: none; }
    .item-form, .evidence-form, .position-evidence-form, .review-fields, .return-form { grid-template-columns: 1fr; }
    .employee-search { grid-template-columns: auto 1fr auto; }
    .employee-search label { display: none; }
    .kpi-milestone-map { grid-template-columns: repeat(3, 1fr); }
    .banner { padding: 1.5rem; }
    .banner h2 { font-size: 1.6rem; }
    .report-fields { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
    .module-map-head { align-items: flex-start; flex-direction: column; }
    .stat-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .offcanvas { width: 100%; }
    .kpi-guide-context { grid-template-columns: 1fr; }
}

/* Status KPI tables keep the source columns and room for evidence forms. */
.status-kpi-table { min-width: 1300px; }
.kpi-review-complete { border-left: 4px solid var(--green); background: #ecfdf5; }
.kpi-review-complete h2 { margin-top: 0; }
.kpi-review-complete .button { margin-top: .5rem; }
.status-kpi-table td { vertical-align: top; white-space: normal; }
.status-kpi-table tr[data-cycle="Bulanan"] { --cycle-background: #eff6ff; --cycle-hover: #dbeafe; }
.status-kpi-table tr[data-cycle="Triwulan"] { --cycle-background: #f5f3ff; --cycle-hover: #ede9fe; }
.status-kpi-table tr[data-cycle="Semester"] { --cycle-background: #fffbeb; --cycle-hover: #fef3c7; }
.status-kpi-table tr[data-cycle="Tahunan"] { --cycle-background: #ecfdf5; --cycle-hover: #d1fae5; }
.status-kpi-table tr[data-cycle] { background: var(--cycle-background, white); }
.status-kpi-table tr[data-cycle]:hover { background: var(--cycle-hover, #f7faff); }
.status-kpi-table td:nth-child(5), .status-kpi-table td:nth-child(6) { min-width: 290px; }
.status-kpi-table label { display: block; margin: 8px 0; }
.status-kpi-table textarea, .status-kpi-table input:not([type=checkbox]), .status-kpi-table select { width: 100%; max-width: 100%; box-sizing: border-box; }
.status-kpi-table form { margin: 10px 0; }
.side-nav details summary { cursor: pointer; padding: 12px; }

.kpi-evidence-upload { border: 1px solid #b9cee2; border-radius: 8px; padding: 12px; margin-bottom: 14px; background: #f7fbff; }

/* Formulir KPI: compact context, fixed-size controls, and balanced source columns. */
.kpi-workspace { display: grid; gap: 18px; min-width: 0; }
.kpi-workspace .section-tabs { position: static; margin: 0; }
.kpi-context { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.kpi-context > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.kpi-context h2, .kpi-table-heading h2 { margin: 0; font-size: 1.1rem; line-height: 1.4; }
.kpi-year { padding: 5px 10px; border-radius: 6px; background: #edf4fb; color: #285783; font-size: .8rem; font-weight: 700; }
.kpi-context .table-wrap { box-shadow: none; border-radius: 8px; }
.kpi-context-table { min-width: 0; table-layout: fixed; width: 100%; }
.kpi-context-table th { width: 15%; }
.kpi-context-table td { width: 35%; }
.kpi-context-table th, .kpi-context-table td { padding: 9px 12px; font-size: .8rem; line-height: 1.5; vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.kpi-context-table small { display: block; color: var(--muted); font-size: .75rem; }
.kpi-purpose { margin-top: 12px; font-size: .8rem; line-height: 1.65; }
.kpi-purpose strong { color: #304a67; }
.kpi-purpose p { margin: 4px 0 0; color: #526176; }
.kpi-period-toolbar { padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.kpi-period-toolbar form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.kpi-period-toolbar label { margin-right: 4px; font-size: .8rem; font-weight: 700; }
.kpi-period-toolbar input { width: 175px; height: 40px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 7px; background: white; }
.kpi-period-toolbar .button { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; font-size: .8rem; box-shadow: none; }
.kpi-period-toolbar p, .kpi-table-heading p { margin: 8px 0 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.kpi-workspace .status-kpi-table { width: 100%; min-width: 1100px; table-layout: fixed; }
.kpi-workspace .status-kpi-table th:nth-child(1) { width: 4%; }
.kpi-workspace .status-kpi-table th:nth-child(2) { width: 23%; }
.kpi-workspace .status-kpi-table th:nth-child(3) { width: 9%; }
.kpi-workspace .status-kpi-table th:nth-child(4) { width: 17%; }
.kpi-workspace .status-kpi-table th:nth-child(5) { width: 24%; }
.kpi-workspace .status-kpi-table th:nth-child(6) { width: 23%; }
.kpi-workspace .status-kpi-table th, .kpi-workspace .status-kpi-table td { padding: 14px 12px; font-size: .8rem; line-height: 1.55; min-width: 0; overflow-wrap: anywhere; }
.kpi-workspace .status-kpi-table th { font-size: .7rem; }
.kpi-workspace .status-kpi-table p { margin: 0 0 10px; }
.kpi-workspace .status-kpi-table ul { padding-left: 18px; margin: 0 0 10px; }
.kpi-workspace .status-kpi-table ul:empty { display: none; }
.kpi-workspace .status-kpi-table input:not([type=checkbox]), .kpi-workspace .status-kpi-table textarea, .kpi-workspace .status-kpi-table select { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: white; font-size: .8rem; }
.kpi-workspace .status-kpi-table input[type=file] { padding: 7px; }
.kpi-workspace .status-kpi-table textarea { resize: vertical; min-height: 70px; }
.kpi-workspace .status-kpi-table label { font-size: .75rem; color: #475569; }
.kpi-workspace .status-kpi-table .button { box-shadow: none; }
.kpi-workspace .kpi-evidence-upload { padding: 0; margin-bottom: 14px; border: 0; background: transparent; }
.kpi-workspace .kpi-evidence-upload strong { font-size: .8rem; }
.kpi-workspace .kpi-evidence-upload small { font-size: .72rem; color: #64748b; }
.kpi-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
 .kpi-context { padding: 14px; }
 .kpi-context-table th, .kpi-context-table td { padding: 8px; font-size: .72rem; }
 .kpi-period-toolbar form { align-items: flex-end; }
 .kpi-period-toolbar label { width: 100%; }
}

/* Monitoring shares the compact KPI workspace and never stretches filter buttons. */
.kpi-monitoring .kpi-export { margin-left: auto; }
.kpi-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kpi-stat { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.kpi-stat span { color: #526176; font-size: .78rem; line-height: 1.4; }
.kpi-stat strong { font-size: 1.65rem; line-height: 1; color: #163a60; }
.kpi-stat-tercapai { border-top: 3px solid #278267; }
.kpi-stat-belum_tercapai { border-top: 3px solid #d29a2d; }
.kpi-stat-perlu_revisi { border-top: 3px solid #c66a5b; }
.kpi-summary-note { margin: -6px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.kpi-monitor-table { width: 100%; min-width: 850px; table-layout: fixed; }
.kpi-monitor-table th:nth-child(1) { width: 17%; }
.kpi-monitor-table th:nth-child(2) { width: 20%; }
.kpi-monitor-table th:nth-child(3) { width: 19%; }
.kpi-monitor-table th:nth-child(4) { width: 15%; }
.kpi-monitor-table th:nth-child(5) { width: 8%; }
.kpi-monitor-table th:nth-child(6) { width: 11%; }
.kpi-monitor-table th:nth-child(7) { width: 10%; }
.kpi-monitor-table th, .kpi-monitor-table td { padding: 15px 12px; white-space: normal; overflow-wrap: anywhere; vertical-align: middle; font-size: .8rem; line-height: 1.5; }
.kpi-monitor-table th { font-size: .68rem; }
.kpi-monitor-table td:first-child { font-weight: 650; }
.kpi-monitor-table td:last-child { text-align: center; }
.kpi-monitor-table .button { white-space: nowrap; min-height: 36px; padding: 7px 10px; box-shadow: none; font-size: .72rem; }
.kpi-result-line { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; }
.kpi-result-line + .kpi-result-line { margin-top: 4px; }
@media (max-width: 1100px) { .kpi-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
 .kpi-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .kpi-monitoring .kpi-export { margin-left: 0; }
}

/* Jabatan uses the same compact context and spacing as the employee form. */
.kpi-profile-page .form-card { margin: 0; }
.kpi-profile-page .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.kpi-profile-page { gap: 14px; }
.kpi-profile-summary { border: 1px solid var(--line); border-radius: 12px; background: white; overflow: hidden; }
.kpi-profile-summary .kpi-context { border: 0; border-radius: 0; padding: 16px 20px; }
.kpi-profile-summary .kpi-context + .kpi-context { border-top: 1px solid var(--line); }
.kpi-profile-summary .kpi-context > header { margin-bottom: 10px; }
.kpi-profile-summary .kpi-context h2 { font-size: .95rem; }
.kpi-profile-summary .kpi-purpose { margin-top: 0; }
.kpi-profile-summary .kpi-purpose p { margin: 0; }
.kpi-profile-page .kpi-staff-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
.kpi-profile-page .kpi-staff-toolbar .button { min-height: 34px; padding: 7px 12px; font-size: .75rem; }
.kpi-profile-page .section-tabs { padding-top: 10px; padding-bottom: 10px; }
.kpi-profile-page .kpi-evidence-owner { margin: 0; color: var(--muted); font-size: .78rem; }
.kpi-profile-page .form-grid .button { justify-self: start; align-self: end; }
.kpi-profile-page .form-grid textarea { width: 100%; padding: 9px 10px; border: 1px solid #cbd5e1; border-radius: 7px; resize: vertical; }
.kpi-profile-targets { display: grid; gap: 12px; min-width: 0; padding: 16px 20px 20px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.kpi-profile-targets .kpi-table-heading h2 { font-size: .95rem; }
.kpi-profile-targets .table-wrap { box-shadow: none; border-radius: 8px; }
.kpi-profile-table { table-layout: fixed; min-width: 960px; }
.kpi-profile-table th:first-child { width: 6%; }
.kpi-profile-table th:nth-child(2) { width: 28%; }
.kpi-profile-table th:nth-child(3) { width: 16%; }
.kpi-profile-table th:nth-child(4) { width: 10%; }
.kpi-profile-table th:nth-child(5) { width: 40%; }
.kpi-profile-table-managed { min-width: 1200px; }
.kpi-profile-table-managed th:nth-child(2) { width: 22%; }
.kpi-profile-table-managed th:nth-child(3) { width: 14%; }
.kpi-profile-table-managed th:nth-child(4) { width: 8%; }
.kpi-profile-table-managed th:nth-child(5) { width: 30%; }
.kpi-profile-table-managed th:nth-child(6) { width: 20%; }
.kpi-person-evidence { margin: 0; }
.kpi-evidence-inline { margin: 0; }
.kpi-evidence-inline + .kpi-evidence-inline { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.kpi-evidence-inline .kpi-row-actions { margin-top: 12px; }
.kpi-person-evidence label, .kpi-person-evidence small { display: block; margin: 6px 0; }
.kpi-person-evidence label { color: #64748b; font-size: .7rem; font-weight: 600; }
.kpi-person-evidence textarea { display: block; width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid #e1e8ef; border-radius: 6px; background: #fafcfe; color: var(--ink); font: inherit; line-height: 1.5; resize: vertical; }
.kpi-person-evidence textarea:focus { outline: 2px solid #2563a6; outline-offset: 1px; background: white; }
.kpi-person-evidence .button { min-height: 30px; padding: 6px 12px; font-size: .72rem; }
.kpi-profile-table th, .kpi-profile-table td, .kpi-profile-list th, .kpi-profile-list td { white-space: normal; overflow-wrap: anywhere; padding: 12px 14px; line-height: 1.55; vertical-align: top; font-size: .8rem; }
.kpi-profile-table th, .kpi-profile-list th { font-size: .7rem; }
.kpi-profile-table td:first-child { color: var(--muted); }
.kpi-profile-table .form-grid { grid-template-columns: 1fr; padding: 12px 0; }
.kpi-profile-table .button, .kpi-profile-list .button { box-shadow: none; }
.kpi-profile-list { table-layout: fixed; min-width: 850px; }
.kpi-profile-list th:nth-child(1) { width: 26%; }
.kpi-profile-list th:nth-child(2) { width: 25%; }
.kpi-profile-list th:nth-child(3) { width: 23%; }
.kpi-profile-list th:nth-child(4) { width: 8%; }
.kpi-profile-list th:nth-child(5) { width: 8%; }
.kpi-profile-list th:nth-child(6) { width: 10%; }
@media(max-width: 760px) { .kpi-profile-page .form-grid { grid-template-columns: 1fr; } }

.kpi-review-link { display: flex; margin-top: 8px; }
.kpi-profile-list td:last-child small { display: block; margin-top: 5px; color: var(--muted); }
.kpi-review-hint { padding: 10px; border-radius: 6px; color: #526176; background: #f1f5f9; font-size: .75rem; }

.kpi-recap-table th, .kpi-recap-table td { white-space: normal; min-width: 130px; padding: 12px; vertical-align: top; font-size: .78rem; }
.kpi-recap-table td:first-child { min-width: 250px; }
.kpi-recap-table td strong, .kpi-recap-table td small, .kpi-recap-table td a { display: block; margin-top: 6px; }
.kpi-recap-table td small { color: var(--muted); }

.kpi-score-field { display: grid; gap: 6px; margin: 12px 0; }
.kpi-score-field label { margin: 0 !important; }
.kpi-score-field small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.5; }

.kpi-stat-melebihi_target { border-top: 3px solid #2563eb; }

/* Evidence guidance stays inside the modal to keep indicator rows compact. */
.kpi-evidence-dialog { width: min(48rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.kpi-evidence-dialog .offcanvas-head { position: sticky; top: 0; background: white; z-index: 1; }
.kpi-evidence-dialog .recap-dialog-body { gap: 1.1rem; font-size: .9rem; line-height: 1.6; }
.kpi-evidence-dialog h3 { margin: 0 0 .5rem; font-size: 1rem; }
.kpi-evidence-dialog h4 { margin: 1rem 0 .4rem; font-size: .9rem; }
.kpi-evidence-context { padding: 1rem; background: #f1f6fc; border-radius: .7rem; }
.kpi-evidence-guide { padding-left: 1rem; border-left: 3px solid #1b65a4; }
.kpi-evidence-dialog small { display: block; color: #52657c; }
.kpi-evidence-dialog fieldset { border: 0; padding: 0; margin: 1rem 0; min-width: 0; }
.kpi-evidence-dialog [hidden] { display: none; }
.kpi-evidence-dialog .kpi-row-actions { justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.kpi-evidence-dialog .kpi-evidence-policy { color: #52657c; font-size: .8rem; }
body:has(.kpi-evidence-dialog[open]) { overflow: hidden; }

/* Guide tables have different columns from the editable indicator table. */
.work-guide-table { table-layout: fixed; min-width: 600px; }
.work-guide-table th, .work-guide-table td { white-space: normal; overflow-wrap: break-word; vertical-align: top; padding: 12px 14px; line-height: 1.6; }
.work-guide-table td { font-size: .85rem; }
.work-guide-table td div + div { margin-top: 6px; }
.work-guide-table small { display: block; margin-top: 4px; color: var(--muted); }
.work-guide-table .button { white-space: nowrap; box-shadow: none; }
.work-guide-catalog th:first-child { width: 65%; }
.work-guide-catalog th:nth-child(2) { width: 15%; }
.work-guide-catalog th:nth-child(3) { width: 20%; }
.work-guide-assignments { min-width: 850px; }
.work-guide-assignments th:nth-child(1) { width: 25%; }
.work-guide-assignments th:nth-child(2) { width: 31%; }
.work-guide-assignments th:nth-child(3) { width: 14%; }
.work-guide-assignments th:nth-child(4) { width: 14%; }
.work-guide-assignments th:nth-child(5) { width: 16%; }
.work-guide-tasks th:nth-child(1) { width: 7%; }
.work-guide-tasks { min-width: 1000px; }
.work-guide-tasks th:nth-child(2) { width: 30%; }
.work-guide-tasks th:nth-child(3) { width: 23%; }
.work-guide-tasks th:nth-child(4) { width: 40%; }
.work-guide-timeline th:first-child { width: 18%; }
.work-guide-timeline th:nth-child(2) { width: 82%; }

.kpi-workspace .status-kpi-table .kpi-period-cell > strong,
.kpi-workspace .status-kpi-table .kpi-period-cell > span { display: block; }
.kpi-period-cell > strong { margin-bottom: 6px; }
.kpi-deadline-detail { margin-top: 8px; font-size: .75rem; }
.kpi-deadline-detail summary { cursor: pointer; color: #415a77; }
.kpi-deadline-detail small { display: block; margin-top: 6px; }
.kpi-workspace .status-kpi-table .kpi-evidence-files { list-style: none; padding: 0; margin: 0 0 10px; }
.kpi-evidence-files > li { display: grid; justify-items: start; gap: 5px; margin-bottom: 10px; }
.kpi-evidence-files > li > a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.kpi-workspace .status-kpi-table .kpi-evidence-files form { margin: 0; }
.kpi-evidence-remove { padding: 3px 0; border: 0; background: transparent; color: #9f281b; font-size: .75rem; text-decoration: underline; text-underline-offset: 3px; }
.kpi-evidence-remove:hover { color: #701c13; }
.kpi-workspace .status-kpi-table .kpi-evidence-upload { margin-bottom: 0; }
.kpi-workspace .status-kpi-table .kpi-assessment-cell > p { margin-bottom: 6px; }
.kpi-assessment-cell > details { margin-top: 10px; font-size: .75rem; }
.kpi-assessment-cell > details > summary { cursor: pointer; color: #415a77; }

.kpi-review-dialog { width: min(72rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.kpi-review-dialog .offcanvas-head { position: sticky; top: 0; z-index: 1; background: white; }
.kpi-review-dialog .offcanvas-head h2 { margin: 0; font-size: 1.15rem; }
.kpi-review-dialog .recap-dialog-body { gap: 18px; font-size: .9rem; line-height: 1.6; }
.kpi-review-dialog h3, .kpi-review-dialog p { margin: 0 0 8px; }
.kpi-review-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
.kpi-review-overview > * { min-width: 0; overflow-wrap: anywhere; }
.kpi-review-overview h4 { margin: 16px 0 8px; font-size: .9rem; }
.kpi-review-overview ul { margin: 0 0 12px; padding-left: 20px; }
.kpi-review-dialog form { display: grid; gap: 12px; }
.kpi-review-dialog label { display: grid; gap: 6px; }
.kpi-review-dialog label:has(input[type=checkbox]) { display: flex; align-items: flex-start; gap: 8px; }
.kpi-review-dialog input:not([type=checkbox]), .kpi-review-dialog select { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 6px; background: white; }
.kpi-review-dialog form .button { justify-self: start; }
.kpi-review-evidence > p > a:not(.button) { text-decoration: underline; text-underline-offset: 3px; }
.kpi-review-pdf { display: block; width: 100%; height: min(55dvh, 600px); border: 1px solid var(--line); border-radius: 8px; background: #f3f6fa; margin: 12px 0; }
.kpi-review-dialog details { margin-top: 12px; }
.kpi-review-dialog summary { cursor: pointer; }
body:has(.kpi-review-dialog[open]) { overflow: hidden; }
@media (max-width: 760px) {
    .kpi-review-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
    .kpi-review-dialog .recap-dialog-body { padding: 16px; }
    .kpi-review-overview { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .kpi-review-pdf { height: 45dvh; }
}