:root {
    --color-primary: #FE5000;
    --color-primary-hover: #E04700;
    --color-primary-bright: #FF661A;
    --color-primary-soft: #FFEDE3;
    --color-primary-border: #FFC2A3;
    --color-wash: #FFF3EB;

    --color-background: #FFF7F2;
    --color-surface: #FFFFFF;
    --color-surface-muted: #FFF1E8;
    --color-border: #F5D0BE;

    --color-text: #1C120C;
    --color-text-muted: #6B4E40;
    --color-text-on-primary: #FFFFFF;

    --color-success: #1F9A62;
    --color-success-soft: #E6F8EF;
    --color-warning: #D48912;
    --color-warning-soft: #FFF6E4;
    --color-danger: #D64545;
    --color-danger-soft: #FDECEC;
    --color-info: #2F7EB5;
    --color-info-soft: #E7F4FC;

    --font-sans: "Source Sans 3", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --shadow-sm: 0 8px 24px rgba(254, 80, 0, 0.08);
    --shadow-md: 0 14px 32px rgba(254, 80, 0, 0.14);

    --mobile-bottom-nav-height: 56px;
    --mobile-touch-min: 44px;
}

* {
    box-sizing: border-box;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    background:
        radial-gradient(1200px 420px at 0% -10%, rgba(254, 80, 0, 0.14), transparent 55%),
        radial-gradient(900px 380px at 100% 0%, rgba(255, 140, 64, 0.22), transparent 50%),
        var(--color-background);
    border-top: 4px solid var(--color-primary);
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    padding: 20px 16px;
    overflow-y: auto;
    box-shadow: 8px 0 24px rgba(254, 80, 0, 0.04);
}

.app-sidebar__brand {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.25;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--color-primary);
    color: var(--color-text);
}

.app-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-sidebar__link {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}

.app-sidebar__link:hover {
    background: var(--color-surface-muted);
}

.app-sidebar__link--active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 800;
    box-shadow: inset 4px 0 0 var(--color-primary);
}

.app-sidebar__group {
    border-radius: var(--radius-sm);
}

.app-sidebar__summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-sidebar__summary::-webkit-details-marker {
    display: none;
}

.app-sidebar__summary::after {
    content: "▾";
    float: right;
    font-size: 11px;
    color: var(--color-text-muted);
}

.app-sidebar__group:not([open]) .app-sidebar__summary::after {
    content: "▸";
}

.app-sidebar__summary--active {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.app-sidebar__subnav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 8px 8px;
}

.app-sidebar__link--sub {
    padding-left: 16px;
    font-size: 14px;
}

.app-sidebar__group--nested {
    margin-left: 8px;
}

.app-sidebar__summary--sub {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--color-text);
}

.app-sidebar__link--nested {
    padding-left: 24px;
    font-size: 13px;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 1px 0 rgba(240, 210, 194, 0.6);
}

.app-topbar__title {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.app-topbar__leading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.app-topbar__menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--mobile-touch-min);
    height: var(--mobile-touch-min);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
}

.app-topbar__menu:hover {
    background: var(--color-surface-muted);
}

.app-sidebar-backdrop {
    display: none;
}

.app-bottom-nav {
    display: none;
}

.app-topbar__account {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-topbar__user {
    color: var(--color-text-muted);
    font-size: 14px;
}

.app-content {
    flex: 1;
    max-width: 1440px;
    width: 100%;
    padding: 24px;
}

.panel {
    background: linear-gradient(180deg, #FFFCF9 0%, #FFFFFF 36%);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 24px;
}

.page-title {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 0 0 18px;
    color: var(--color-text);
}

.status-line {
    font-size: 14px;
    margin: 0 0 8px;
}

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.badge--success {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.badge--danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.badge--warning {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.badge--info {
    background: var(--color-info-soft);
    color: var(--color-info);
}

.badge--muted {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.flash {
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    border-left: 4px solid transparent;
}

.flash--success {
    background: var(--color-success-soft);
    border-left-color: var(--color-success);
    color: var(--color-text);
}

.flash--danger {
    background: var(--color-danger-soft);
    border-left-color: var(--color-danger);
    color: var(--color-text);
}

.flash--warning {
    background: var(--color-warning-soft);
    border-left-color: var(--color-warning);
    color: var(--color-text);
    margin-bottom: 16px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.panel-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.import-hint {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.import-hint__sample {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.import-textarea {
    width: 100%;
    min-height: 220px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

.import-result {
    margin-top: 24px;
}

.import-preview-table__row--invalid {
    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
}

.import-preview-table__row--matched {
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
}

.import-preview-table__notes {
    min-width: 220px;
    font-size: 13px;
}

.import-suggestion {
    color: var(--color-text-muted);
}

.import-error-summary {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-danger) 6%, transparent);
}

.import-error-summary__list {
    margin: 8px 0 0;
    padding-left: 1.25rem;
}

.import-error-summary__list li {
    margin-bottom: 6px;
    line-height: 1.4;
}

.import-progress {
    margin-top: 24px;
}

.import-progress__track {
    height: 10px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--color-surface-muted);
    overflow: hidden;
}

.import-progress__bar {
    height: 100%;
    border-radius: 999px;
    background: var(--color-success);
    transition: width 0.2s ease;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.button--primary {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    box-shadow: 0 8px 18px rgba(254, 80, 0, 0.28);
}

.button--primary:hover {
    background: var(--color-primary-bright);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(254, 80, 0, 0.34);
}

.button--secondary {
    background: var(--color-surface);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
}

.button--secondary:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

.button--tertiary {
    background: transparent;
    color: var(--color-primary);
    border: none;
    min-height: auto;
    padding: 4px 8px;
}

.inline-form {
    display: inline;
}

.form-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

fieldset.form-section,
.form-section {
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, var(--color-wash) 0%, #FFFFFF 42%);
    padding: 20px 20px 18px 26px;
    margin: 0;
    box-shadow: var(--shadow-sm);
    position: relative;
}

fieldset.form-section::before,
.form-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--color-primary-bright), var(--color-primary));
}

.form-section > legend {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    padding: 0 4px;
    margin-bottom: 14px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.form-field {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: none;
}

.form-field[hidden] {
    display: none;
}

.form-grid .form-field {
    margin-bottom: 0;
}

.form-field--wide {
    grid-column: 1 / -1;
}

.form-field label,
.form-field legend {
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text);
}

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    background: #FFFCFA;
    color: var(--color-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select {
    height: 42px;
}

.form-field input[type="checkbox"],
.form-field input[type="radio"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-field textarea {
    min-height: 88px;
    padding: 10px 12px;
    resize: vertical;
}

.form-field input:not([type="checkbox"]):not([type="radio"]):focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--color-primary);
    background: #FFFFFF;
    outline: 2px solid var(--color-primary-border);
    box-shadow: 0 0 0 4px rgba(254, 80, 0, 0.14);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.form-section .form-actions {
    margin-top: 12px;
}

.form-section .checkbox-grid {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}

.data-table th {
    color: var(--color-primary);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.data-table__num {
    width: 3rem;
    text-align: center;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.table-actions .inline-form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0;
}

.table-actions a,
.table-actions button,
.table-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-primary-border);
    background: #FFFFFF;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
}

.table-actions a:hover,
.table-actions button:hover,
.table-actions .button:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: none;
    box-shadow: none;
}

.table-actions .button--tertiary {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--color-primary-border);
    background: #FFFFFF;
    color: var(--color-primary);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
    max-width: none;
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.checkbox-grid input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.permission-blocks {
    display: grid;
    gap: 16px;
    margin-top: 12px;
}

.permission-block {
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.permission-block__title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.02em;
}

.checkbox-grid .permission-block__item {
    align-items: flex-start;
    font-weight: 400;
}

.checkbox-grid .permission-block__item input[type="checkbox"] {
    margin-top: 3px;
}

.checkbox-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px 12px;
    margin-bottom: 0;
}

.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.form-footer .button--primary {
    margin-left: auto;
}

.auth-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    gap: 16px;
}

.auth-panel,
.auth-flash {
    max-width: 420px;
    width: 100%;
}

.auth-panel {
    border-top: 4px solid var(--color-primary);
    background: linear-gradient(180deg, var(--color-wash) 0%, #FFFFFF 38%);
    box-shadow: var(--shadow-md);
}

.workspace-switcher-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workspace-switcher-wrap__label {
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.workspace-switcher {
    position: relative;
}

.workspace-switcher__toggle {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
}

.workspace-switcher__toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.workspace-switcher__toggle-icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.workspace-switcher__toggle-icon--static {
    margin-right: 4px;
    vertical-align: -2px;
}

.workspace-switcher__toggle-text {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-switcher__chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}

.workspace-switcher[open] .workspace-switcher__chevron {
    transform: rotate(180deg);
}

.workspace-switcher__toggle:hover .workspace-switcher__toggle-icon,
.workspace-switcher__toggle:hover .workspace-switcher__chevron,
.workspace-switcher[open] .workspace-switcher__toggle-icon,
.workspace-switcher[open] .workspace-switcher__chevron {
    color: var(--color-primary);
}

.workspace-switcher__toggle::-webkit-details-marker {
    display: none;
}

.workspace-switcher__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 240px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 16px 40px rgba(28, 18, 12, 0.16);
    z-index: 210;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    isolation: isolate;
}

.workspace-switcher__menu-title {
    margin: 0;
    padding: 6px 10px 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.workspace-switcher__menu-hint {
    margin: 0 0 4px;
    padding: 0 10px 8px;
    font-size: 12px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.workspace-switcher__option {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    display: block;
}

.workspace-switcher__option:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.workspace-switcher__option--active {
    padding: 8px 10px;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: var(--radius-sm);
}

.workspace-switcher__meta {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.app-topbar__workspace {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
}

.user-menu {
    position: relative;
}

.user-menu__toggle {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
}

.user-menu__toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.user-menu__toggle-icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.user-menu__toggle-text {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu__chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}

.user-menu[open] .user-menu__chevron {
    transform: rotate(180deg);
}

.user-menu__toggle:hover .user-menu__toggle-icon,
.user-menu__toggle:hover .user-menu__chevron,
.user-menu[open] .user-menu__toggle-icon,
.user-menu[open] .user-menu__chevron {
    color: var(--color-primary);
}

.user-menu__toggle::-webkit-details-marker {
    display: none;
}

.user-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 260px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 16px 40px rgba(28, 18, 12, 0.16);
    z-index: 210;
    overflow: hidden;
    isolation: isolate;
}

.user-menu__profile {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-wash);
}

.user-menu__label {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.user-menu__username {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
}

.user-menu__details {
    margin: 0;
    display: grid;
    gap: 8px;
}

.user-menu__details div {
    display: grid;
    gap: 2px;
}

.user-menu__details dt {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.user-menu__details dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

.user-menu__actions {
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 2px;
    background: #FFFFFF;
}

.user-menu__link {
    display: block;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

.user-menu__link:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.user-menu__logout-form {
    margin: 0;
}

.user-menu__logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #B42318;
    cursor: pointer;
}

.user-menu__logout-icon {
    flex-shrink: 0;
    color: #B42318;
}

.user-menu__logout:hover {
    background: #FEF3F2;
}

fieldset:not(.form-section) {
    border: none;
    padding: 0;
    margin: 0;
}

fieldset:not(.form-section) legend {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 12px;
    padding: 0;
}

.section-subtitle {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    max-width: none;
}

.filter-bar input,
.filter-bar select {
    flex: 0 0 auto;
    width: auto;
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: #FFFCFA;
    color: var(--color-text);
    box-sizing: border-box;
}

.filter-bar input[type="text"],
.filter-bar input[type="search"] {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
}

.filter-bar select {
    min-width: 0;
}

.filter-bar input[type="number"] {
    width: 88px;
    min-width: 88px;
}

.filter-bar input[type="file"] {
    width: auto;
    min-width: 220px;
    max-width: 360px;
    padding: 4px 8px;
    height: auto;
    min-height: 32px;
}

.filter-bar .button {
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 16px;
}

.pagination__meta {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.pagination__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
}

.pagination__link,
.pagination__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    color: var(--color-text-muted);
}

.pagination__link:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.pagination__current {
    font-weight: 800;
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.pagination__arrow {
    min-width: 28px;
    font-size: 16px;
    font-weight: 400;
}

.muted-text {
    color: var(--color-text-muted);
    margin: 0 0 16px;
}

.term-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.term-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px 24px;
    align-items: start;
}

.term-row__meta .muted-text {
    margin: 4px 0 0;
    font-size: 13px;
}

.term-row__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.term-row__field input {
    width: 100%;
}

.term-row__field .status-line {
    margin: 0;
}

@media (max-width: 720px) {
    .term-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.summary-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(180deg, var(--color-wash) 0%, #FFFFFF 48%);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.summary-card:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.summary-card__label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.summary-card__value {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.summary-grid--priority {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.dash-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}

.dash-chart {
    background: linear-gradient(180deg, var(--color-wash) 0%, #FFFFFF 48%);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    min-width: 0;
}

.dash-chart__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.dash-chart__title a {
    color: inherit;
    text-decoration: none;
}

.dash-chart__title a:hover {
    color: var(--color-primary);
}

.dash-chart__hint {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.dash-donut {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.dash-donut__ring {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.dash-donut__hole {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.dash-donut__hole strong {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.dash-donut__hole span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.dash-donut__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.dash-donut__legend strong {
    font-weight: 800;
}

.dash-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
}

.dash-swatch--sudah {
    background: var(--color-success);
}

.dash-swatch--belum {
    background: var(--color-danger-soft);
    box-shadow: inset 0 0 0 1px var(--color-danger);
}

.dash-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(72px, 2fr) 44px;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.dash-bar:hover .dash-bar__label {
    color: var(--color-primary);
}

.dash-bar__label {
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-bar__track {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: var(--color-surface-muted);
    overflow: hidden;
}

.dash-bar__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-success);
}

.dash-bar__fill--low {
    background: var(--color-warning);
}

.dash-bar__value {
    font-size: 13px;
    font-weight: 800;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dash-stack {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-height: 168px;
    padding-bottom: 4px;
}

.dash-stack__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.dash-stack__bars {
    width: 100%;
    max-width: 36px;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    background: var(--color-surface-muted);
}

.dash-stack__bars--empty {
    opacity: 0.45;
}

.dash-stack__hadir {
    background: var(--color-success);
    min-height: 0;
}

.dash-stack__tidak {
    background: var(--color-danger);
    min-height: 0;
}

.dash-stack__label {
    font-size: 11px;
    line-height: 1.2;
    color: var(--color-text-muted);
    text-align: center;
    font-weight: 700;
}

@media (max-width: 768px) {
    .dash-charts {
        grid-template-columns: 1fr;
    }

    .dash-bar {
        grid-template-columns: minmax(0, 1fr) 40px;
        grid-template-areas:
            "label value"
            "track track";
        gap: 4px 10px;
    }

    .dash-bar__label { grid-area: label; }
    .dash-bar__track { grid-area: track; }
    .dash-bar__value { grid-area: value; }
}

.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.quick-action {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: var(--mobile-touch-min, 44px);
    padding: 14px 16px;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--color-wash) 0%, #FFFFFF 48%);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.quick-action:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.quick-action__label {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.quick-action__hint {
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-text-muted);
}

@media (min-width: 900px) {
    .quick-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.process-tabs {
    position: relative;
}

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

.process-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-primary-border);
}

.process-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
}

.process-tabs__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 12px;
}

.process-tabs__panel {
    display: none;
}

.process-tabs__panel .section-subtitle {
    font-size: 18px;
    margin-top: 8px;
}

#proses-unit:checked ~ .process-tabs__nav label[for="proses-unit"],
#proses-kenaikan:checked ~ .process-tabs__nav label[for="proses-kenaikan"],
#proses-mutasi:checked ~ .process-tabs__nav label[for="proses-mutasi"],
#proses-demosi:checked ~ .process-tabs__nav label[for="proses-demosi"],
#proses-keluar:checked ~ .process-tabs__nav label[for="proses-keluar"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

#proses-unit:checked ~ .process-tabs__nav label[for="proses-unit"] .process-tabs__index,
#proses-kenaikan:checked ~ .process-tabs__nav label[for="proses-kenaikan"] .process-tabs__index,
#proses-mutasi:checked ~ .process-tabs__nav label[for="proses-mutasi"] .process-tabs__index,
#proses-demosi:checked ~ .process-tabs__nav label[for="proses-demosi"] .process-tabs__index,
#proses-keluar:checked ~ .process-tabs__nav label[for="proses-keluar"] .process-tabs__index {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-on-primary);
}

#proses-unit:checked ~ #panel-unit,
#proses-kenaikan:checked ~ #panel-kenaikan,
#proses-mutasi:checked ~ #panel-mutasi,
#proses-demosi:checked ~ #panel-demosi,
#proses-keluar:checked ~ #panel-keluar {
    display: block;
}

.sub-tabs {
    position: relative;
    margin-top: 20px;
}

.sub-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.sub-tabs__tab {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.sub-tabs__panel {
    display: none;
}

#unit-aksi-tempatkan:checked ~ .sub-tabs__nav label[for="unit-aksi-tempatkan"],
#unit-aksi-keluarkan:checked ~ .sub-tabs__nav label[for="unit-aksi-keluarkan"],
#pembina-aksi-vacate:checked ~ .sub-tabs__nav label[for="pembina-aksi-vacate"],
#pembina-aksi-assign:checked ~ .sub-tabs__nav label[for="pembina-aksi-assign"],
#anggota-aksi-tempatkan:checked ~ .sub-tabs__nav label[for="anggota-aksi-tempatkan"],
#anggota-aksi-keluarkan:checked ~ .sub-tabs__nav label[for="anggota-aksi-keluarkan"] {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

#unit-aksi-tempatkan:checked ~ #panel-unit-tempatkan,
#unit-aksi-keluarkan:checked ~ #panel-unit-keluarkan,
#pembina-aksi-vacate:checked ~ #panel-pembina-vacate,
#pembina-aksi-assign:checked ~ #panel-pembina-assign,
#anggota-aksi-tempatkan:checked ~ #panel-anggota-tempatkan,
#anggota-aksi-keluarkan:checked ~ #panel-anggota-keluarkan {
    display: block;
}

#unit-tab-data:checked ~ .process-tabs__nav label[for="unit-tab-data"],
#unit-tab-anggota:checked ~ .process-tabs__nav label[for="unit-tab-anggota"],
#unit-tab-pembina:checked ~ .process-tabs__nav label[for="unit-tab-pembina"],
#unit-tab-peran:checked ~ .process-tabs__nav label[for="unit-tab-peran"],
#anggota-tab-identitas:checked ~ .process-tabs__nav label[for="anggota-tab-identitas"],
#anggota-tab-kontak:checked ~ .process-tabs__nav label[for="anggota-tab-kontak"],
#anggota-tab-pendidikan:checked ~ .process-tabs__nav label[for="anggota-tab-pendidikan"],
#anggota-tab-pekerjaan:checked ~ .process-tabs__nav label[for="anggota-tab-pekerjaan"],
#anggota-tab-keluarga:checked ~ .process-tabs__nav label[for="anggota-tab-keluarga"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

#unit-tab-data:checked ~ .process-tabs__nav label[for="unit-tab-data"] .process-tabs__index,
#unit-tab-anggota:checked ~ .process-tabs__nav label[for="unit-tab-anggota"] .process-tabs__index,
#unit-tab-pembina:checked ~ .process-tabs__nav label[for="unit-tab-pembina"] .process-tabs__index,
#unit-tab-peran:checked ~ .process-tabs__nav label[for="unit-tab-peran"] .process-tabs__index,
#anggota-tab-identitas:checked ~ .process-tabs__nav label[for="anggota-tab-identitas"] .process-tabs__index,
#anggota-tab-kontak:checked ~ .process-tabs__nav label[for="anggota-tab-kontak"] .process-tabs__index,
#anggota-tab-pendidikan:checked ~ .process-tabs__nav label[for="anggota-tab-pendidikan"] .process-tabs__index,
#anggota-tab-pekerjaan:checked ~ .process-tabs__nav label[for="anggota-tab-pekerjaan"] .process-tabs__index,
#anggota-tab-keluarga:checked ~ .process-tabs__nav label[for="anggota-tab-keluarga"] .process-tabs__index {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-on-primary);
}

#unit-tab-data:checked ~ #panel-unit-data,
#unit-tab-anggota:checked ~ #panel-unit-anggota,
#unit-tab-pembina:checked ~ #panel-unit-pembina,
#unit-tab-peran:checked ~ #panel-unit-peran,
#anggota-tab-identitas:checked ~ #panel-anggota-identitas,
#anggota-tab-kontak:checked ~ #panel-anggota-kontak,
#anggota-tab-pendidikan:checked ~ #panel-anggota-pendidikan,
#anggota-tab-pekerjaan:checked ~ #panel-anggota-pekerjaan,
#anggota-tab-keluarga:checked ~ #panel-anggota-keluarga {
    display: block;
}

.peran-status-grid,
.peran-form-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .peran-status-grid,
    .peran-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.peran-status-card {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.readonly-value {
    display: flex;
    align-items: center;
    min-height: 32px;
    font-weight: 600;
}

.input-readonly {
    background: var(--color-surface-muted, #f4f4f5);
    color: var(--color-text-muted, #6b7280);
    cursor: not-allowed;
}

.search-select {
    position: relative;
}

.search-select > select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.search-select__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow: auto;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 20px rgba(28, 25, 23, 0.12);
}

.search-select__option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.search-select__option:hover,
.search-select__option:focus {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.search-select__empty {
    padding: 10px 12px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.week-cal {
    margin-bottom: 8px;
    overflow: visible;
}

.week-cal__focus-banner {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
}

.week-cal--focused .week-cal__cell--selected {
    border-width: 2px;
}

.presensi-week-body {
    max-width: 440px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

.presensi-week-body--manage {
    max-width: min(100%, 960px);
    padding: 0;
}

.presensi-week-body--manage .seat-cabin {
    max-width: none;
}

.presensi-week-body .week-form-bridge {
    align-items: center;
    max-width: none;
    margin: 4px auto 12px;
}

.presensi-week-body .week-form-bridge__shaft {
    margin-left: 0;
}

.presensi-week-body .week-form-bridge__caption {
    text-align: center;
}

.presensi-week-body .presensi-self-block,
.presensi-week-body .seat-cabin {
    max-width: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.presensi-week-body .presensi-shell {
    width: 100%;
}

.week-cal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.week-cal__nav .button {
    min-height: 32px;
    height: 32px;
    width: 32px;
    padding: 0;
}

.week-cal__month {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.week-cal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
    padding-bottom: 14px;
    overflow: visible;
}

.week-cal__grid--focus {
    display: none;
}

.week-cal__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 92px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
}

a.week-cal__cell:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.week-cal__cell--current {
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.week-cal__cell--selected {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    z-index: 1;
}

.week-cal__cell--selected::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 16px;
    height: 16px;
    background: var(--color-primary-soft);
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: translateX(-50%) rotate(45deg);
    z-index: 2;
}

.week-cal__cell--disabled {
    opacity: 0.55;
    background: var(--color-surface-muted);
}

.week-cal__range {
    font-weight: 800;
    font-size: 13px;
}

.week-cal__now {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.week-cal__cell--disabled .week-cal__now {
    color: var(--color-text-muted);
}

.week-form-bridge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 4px 0 12px;
    max-width: 720px;
}

.week-form-bridge__shaft {
    width: 2px;
    height: 18px;
    margin-left: 24px;
    background: var(--color-primary);
    border-radius: 2px;
}

.week-form-bridge__caption {
    margin: 0;
    padding: 8px 12px;
    border-left: 3px solid var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 13px;
    color: var(--color-text);
}

.week-status {
    margin: 0 0 20px;
    max-width: 1200px;
    padding: 16px 16px 18px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: #FFFFFF;
}

.presensi-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "status status"
        "presensi materi"
        "actions actions";
    gap: 16px;
    align-items: start;
}

.presensi-shell__form {
    display: contents;
}

.presensi-shell__status {
    grid-area: status;
}

.presensi-shell__presensi {
    grid-area: presensi;
    max-width: none;
    margin: 0;
}

.presensi-shell__materi {
    grid-area: materi;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--color-wash) 0%, #FFFFFF 42%);
}

.presensi-shell__actions {
    grid-area: actions;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--color-primary-border);
}

.presensi-shell--stacked {
    grid-template-columns: 1fr;
    grid-template-areas:
        "status"
        "presensi"
        "actions";
}

.presensi-materi-below {
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--color-wash) 0%, #FFFFFF 42%);
}

@media (max-width: 900px) {
    .presensi-shell {
        grid-template-areas:
            "status"
            "presensi"
            "materi"
            "actions";
        grid-template-columns: 1fr;
    }
}

.week-status .form-grid {
    margin-bottom: 28px;
}

.seat-cabin {
    max-width: 720px;
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--color-wash) 0%, #FFFFFF 42%);
}

.seat-cabin[hidden] {
    display: none;
}

.seat-cabin__hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.seat-cabin__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 16px minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.seat-cabin__aisle {
    min-height: 1px;
}

.seat {
    position: relative;
    display: block;
    cursor: pointer;
}

.seat--pembina {
    max-width: 320px;
    margin-bottom: 16px;
}

.seat__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.seat__body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    min-height: 72px;
    padding: 14px 22px 10px 8px;
    border: 2px solid var(--color-danger);
    border-radius: 10px;
    background: var(--color-danger-soft);
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.seat__mark {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 18px;
    height: 18px;
    font-size: 14px;
    font-weight: 800;
    line-height: 18px;
    color: var(--color-danger);
}

.seat__mark::before {
    content: "✕";
}

.seat__input:focus-visible + .seat__body {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.seat__input:checked + .seat__body {
    border-color: var(--color-success);
    background: var(--color-success-soft);
}

.seat__input:checked + .seat__body .seat__mark {
    color: var(--color-success);
}

.seat__input:checked + .seat__body .seat__mark::before {
    content: "✓";
}

.seat__name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.seat__meta {
    font-size: 11px;
    color: var(--color-text-muted);
}

@media (min-width: 769px) {
    .presensi-week-body--manage .seat-cabin--tap-list .seat-cabin__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
        gap: 10px;
    }

    .presensi-week-body--manage .seat-cabin--tap-list .seat-cabin__aisle {
        display: none;
    }

    .presensi-week-body--manage .seat-cabin--tap-list .seat__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 72px;
        padding: 14px 22px 10px 8px;
        text-align: center;
    }

    .presensi-week-body--manage .seat-cabin--tap-list .seat__mark {
        position: absolute;
        top: 6px;
        right: 8px;
        width: 18px;
        height: 18px;
        font-size: 12px;
        line-height: 18px;
    }

    .presensi-week-body--manage .seat-cabin--tap-list .seat__name {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
    }

    .presensi-week-body--manage .seat-cabin--tap-list .seat__meta {
        font-size: 11px;
    }
}

@media (max-width: 640px) {
    .seat-cabin:not(.seat-cabin--tap-list) .seat-cabin__grid {
        grid-template-columns: 1fr 1fr;
    }

    .seat-cabin:not(.seat-cabin--tap-list) .seat-cabin__aisle {
        display: none;
    }
}

.month-cal {
    margin-bottom: 20px;
}

.month-cal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.month-cal__nav .button {
    min-height: 32px;
    height: 32px;
    width: 32px;
    padding: 0;
}

.month-cal__year {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary);
}

.month-cal__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.month-cal__grid--focus {
    display: none;
}

@media (min-width: 768px) {
    .month-cal__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

.month-cal__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 72px;
    padding: 8px 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.month-cal__cell:hover {
    border-color: var(--color-primary-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.month-cal__cell--current {
    border-color: var(--color-primary-border);
}

.month-cal__cell--selected {
    border-color: var(--color-primary);
    background: linear-gradient(180deg, var(--color-wash) 0%, #FFFFFF 70%);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.month-cal__cell--tunggakan:not(.month-cal__cell--selected) {
    border-color: #f0b4b4;
}

.month-cal__label {
    font-size: 13px;
    font-weight: 700;
}

.month-cal__now {
    font-size: 10px;
    color: var(--color-primary);
    font-weight: 600;
}

.year-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 920px;
    margin: 0 auto;
}

.year-stack__nav {
    display: flex;
    justify-content: center;
}

.year-stack__nav-btn {
    min-width: 44px;
    font-size: 18px;
    line-height: 1;
}

.year-stack__block {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    background: #FFFFFF;
}

.year-stack__block--dim {
    opacity: 0.82;
    transform: scale(0.98);
}

.year-stack__block--center {
    border: 2px solid var(--color-primary);
    background: linear-gradient(180deg, var(--color-wash) 0%, #FFFFFF 100%);
    box-shadow: var(--shadow-md);
    transform: scale(1);
    opacity: 1;
    padding: 18px 20px;
}

.year-stack__title {
    margin: 0 0 8px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text);
}

.year-stack__block--center .year-stack__title {
    font-size: 26px;
    color: var(--color-primary);
}

.year-stack__now {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.year-stack__meta {
    margin: 0 0 10px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
}

.month-cal__grid--compact {
    margin-bottom: 0;
}

.month-cal__cell--static {
    cursor: default;
    text-decoration: none;
    color: inherit;
}

.kehadiran-year-months {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kehadiran-year-view {
    max-width: 1280px;
    margin: 0 auto;
}

.kehadiran-year-view__nav {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.kehadiran-year-view__head {
    text-align: center;
    margin-bottom: 16px;
}

.kehadiran-year-view__title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: var(--color-primary);
}

.kehadiran-year-view__now {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.kehadiran-year-months--horizontal {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.kehadiran-year-months--second {
    margin-top: 10px;
}

.kehadiran-year-view__nav--bottom {
    margin-top: 12px;
    margin-bottom: 0;
}

@media (max-width: 1100px) {
    .kehadiran-year-months--horizontal {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
    }

    .kehadiran-year-months--horizontal .kehadiran-month-card {
        flex: 0 0 min(220px, 78vw);
        scroll-snap-align: center;
    }

    .kehadiran-year-months--horizontal .kehadiran-month-card--focus {
        flex-basis: min(240px, 82vw);
    }
}

.kehadiran-month-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    background: #FFFFFF;
}

.kehadiran-month-card--current {
    border-color: var(--color-primary-border);
}

.kehadiran-month-card--focus {
    border: 2px solid var(--color-primary);
    background: linear-gradient(180deg, var(--color-wash) 0%, #FFFFFF 100%);
    box-shadow: var(--shadow-sm);
}

.kehadiran-month-card__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 8px;
}

.kehadiran-month-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--color-text);
}

.kehadiran-month-card--focus .kehadiran-month-card__title {
    color: var(--color-primary);
    font-size: 15px;
}

.kehadiran-month-card__now {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.kehadiran-month-card__summary {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.kehadiran-month-card__empty {
    margin: 0;
    font-size: 13px;
}

.kehadiran-month-card__weeks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kehadiran-month-card__week {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
}

.kehadiran-month-card__week:first-child {
    border-top: none;
    padding-top: 0;
}

.kehadiran-month-card__week-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.iuran-block {
    max-width: 420px;
    padding: 16px;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--color-wash) 0%, #FFFFFF 42%);
}

.iuran-month-body {
    max-width: 440px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

.iuran-month-body .iuran-block {
    max-width: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.iuran-block__hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.member-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-card-form {
    margin: 0;
}

.member-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-align: left;
    font: inherit;
    color: inherit;
}

button.member-card {
    cursor: pointer;
}

.member-card--self {
    border-color: var(--color-primary-border);
    background: #fff;
}

.member-card--self:not(.member-card--paid):not(:disabled) {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

button.member-card--self:hover {
    border-color: var(--color-primary);
    background: var(--color-wash);
}

.member-card--readonly {
    opacity: 0.72;
}

.member-card--paid {
    border-color: #b8dfc4;
    background: #f4fbf6;
}

.member-card--tunggakan:not(.member-card--paid) {
    border-color: #f0b4b4;
    background: #fff8f8;
}

.member-card--future {
    opacity: 0.55;
}

.member-card__name {
    font-weight: 700;
    font-size: 14px;
}

.member-card__status {
    font-size: 12px;
    color: var(--color-text-muted);
}

.iuran-block--wide {
    max-width: 480px;
}

.presensi-self-block {
    margin-left: auto;
    margin-right: auto;
}

.kurikulum-attach {
    margin: 0 0 20px;
}

.kurikulum-attach select {
    min-width: 280px;
}

.kurikulum-doc {
    margin: 0;
}

.kurikulum-doc__head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 8px;
}

.kurikulum-doc__head h2 {
    margin: 0;
    font-size: 16px;
    color: var(--color-primary);
}

.kurikulum-doc__add,
.link-action {
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
}

.kurikulum-doc__no {
    width: 48px;
}

.kurikulum-doc__aksi {
    width: 72px;
}

.kurikulum-doc__table td {
    vertical-align: top;
}

.kurikulum-doc__table th,
.kurikulum-doc__table td {
    padding: 8px 10px;
}

.kurikulum-doc__table tr.is-muted td {
    opacity: 0.65;
}

.kurikulum-materi {
    margin: 0;
    padding-left: 18px;
}

.kurikulum-materi li + li {
    margin-top: 8px;
}

.kurikulum-materi__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.kurikulum-materi__judul {
    font-weight: 700;
}

.kurikulum-materi__links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
}

.kurikulum-materi__links a,
.kurikulum-materi__links .link-action {
    font-size: 12px;
}

.kurikulum-materi__uraian {
    white-space: pre-line;
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 4px 0 0;
}

.action-menu {
    position: relative;
    display: inline-block;
}

.action-menu > summary {
    list-style: none;
    cursor: pointer;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 800;
    line-height: 28px;
}

.action-menu > summary::-webkit-details-marker {
    display: none;
}

.action-menu[open] > summary {
    background: var(--color-primary-soft);
}

.action-menu__list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 8;
    min-width: 168px;
    padding: 6px 0;
    background: #FFFFFF;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.action-menu__list a,
.action-menu__list button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: none;
}

.action-menu__list a:hover,
.action-menu__list button:hover {
    background: var(--color-primary-soft);
}

.action-menu__list .is-danger {
    color: #9B1C1C;
}

.kurikulum-tabs .process-tabs__panel {
    display: none;
}

.kurikulum-tabs .process-tabs__panel.is-active {
    display: block;
}

.kurikulum-tabs .process-tabs__tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.kurikulum-tabs .process-tabs__tab.is-active .process-tabs__index,
.kurikulum-tabs .process-tabs__tab.is-active .kurikulum-tabs__count {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-on-primary);
}

.kurikulum-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 12px;
}

.kurikulum-tabs .process-tabs__tab {
    max-width: 100%;
}

.kode-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 1px 6px;
    border-radius: 999px;
}

.materi-picker {
    margin: 24px 0 0;
}

.materi-picker .section-subtitle {
    font-size: 18px;
    margin-bottom: 8px;
}

.materi-picker__attached,
.materi-picker__results {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
}

.materi-picker__attached li,
.materi-picker__results li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
}

.materi-picker__attached li + li,
.materi-picker__results li + li {
    border-top: 1px solid var(--color-primary-border);
}

.materi-picker__attached .status-line,
.materi-picker__results .status-line {
    margin: 4px 0 0;
}

.materi-picker__results .button {
    flex-shrink: 0;
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
}



body.modal-open {
    overflow: hidden;
}

.modal[hidden] {
    display: none !important;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 18, 12, 0.45);
}

.modal__dialog {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
}

.modal__title {
    margin: 0;
    font-size: 1.1rem;
}

.modal__close {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
}

.modal__body {
    padding: 16px;
    overflow: auto;
}

.kandidat-picker .filter-bar {
    margin-bottom: 12px;
}

.kenaikan-tabs {
    display: flex;
    flex-direction: column;
}

.kenaikan-tabs__advance {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.kenaikan-advance-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.data-table__check {
    text-align: center;
    width: 3rem;
}

.kenaikan-checklist-toolbar {
    justify-content: flex-end;
}

.paste-drilldown {
    margin: 0 0 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.paste-drilldown__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.paste-drilldown__summary::-webkit-details-marker {
    display: none;
}

.paste-drilldown__summary::before {
    content: "▸";
    margin-right: 8px;
    color: var(--color-primary);
}

.paste-drilldown[open] > .paste-drilldown__summary::before {
    content: "▾";
}

.paste-drilldown__hint {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.paste-drilldown__body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--color-border);
}

.paket-transfer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.paket-transfer__pane {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
    background: var(--color-surface);
}

.paket-transfer__pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.paket-transfer__pane-header .section-subtitle {
    margin: 0;
    font-size: 16px;
}

.paket-transfer__list {
    max-height: min(62vh, 640px);
    overflow: auto;
}

.paket-transfer__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding-top: 48px;
}

.paket-transfer__btn {
    min-width: 52px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.paket-transfer__in-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-success) 18%, transparent);
    color: var(--color-success);
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
}

.paket-transfer__row--in-paket {
    background: color-mix(in srgb, var(--color-success) 7%, transparent);
}

.paket-transfer__row--in-paket td {
    color: var(--color-text-muted);
}

.data-table--compact td,
.data-table--compact th {
    padding: 8px 10px;
    vertical-align: top;
}

@media (max-width: 960px) {
    .paket-transfer {
        grid-template-columns: 1fr;
    }

    .paket-transfer__actions {
        flex-direction: row;
        padding-top: 0;
        justify-content: center;
    }
}

.persiapan-scroll-list {
    max-height: 240px;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 8px;
}

.persiapan-scroll-list--tall {
    max-height: 360px;
}

.persiapan-scroll-list .data-table {
    margin: 0;
}

.persiapan-scroll-list .data-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-surface, #fff);
    z-index: 1;
}

.modal__dialog--confirm {
    width: min(440px, 100%);
    max-height: none;
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

[data-confirm-message],
[data-notice-message] {
    white-space: pre-line;
}

.evaluasi-checklist__summary {
    margin-bottom: 8px;
}

.evaluasi-checklist__progress {
    height: 8px;
    margin: 0 0 16px;
    border-radius: 999px;
    background: var(--color-surface-muted);
    overflow: hidden;
}

.evaluasi-checklist__progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--color-success);
    transition: width 0.2s ease;
}

.evaluasi-checklist__check-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.evaluasi-checklist__kode-col {
    width: 6rem;
    white-space: nowrap;
}

.evaluasi-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.evaluasi-accordion__global-toolbar {
    margin-bottom: 4px;
}

.evaluasi-accordion__section {
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    overflow: hidden;
}

.evaluasi-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    font-weight: 800;
    background: var(--color-primary-soft);
    color: var(--color-text);
}

.evaluasi-accordion__summary::-webkit-details-marker {
    display: none;
}

.evaluasi-accordion__summary::before {
    content: '▸';
    flex-shrink: 0;
    width: 1rem;
    color: var(--color-primary);
    transition: transform 0.15s ease;
}

.evaluasi-accordion__section[open] > .evaluasi-accordion__summary::before {
    transform: rotate(90deg);
}

.evaluasi-accordion__title {
    flex: 1;
    min-width: 0;
}

.evaluasi-accordion__meta {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    background: #FFFFFF;
    padding: 2px 8px;
    border-radius: 999px;
}

.evaluasi-accordion__body {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--color-primary-border);
}

.evaluasi-accordion__section-toolbar {
    margin-bottom: 8px;
}

.evaluasi-accordion__body .data-table {
    margin: 0;
}

.panel-footer {
    margin-top: 32px;
    padding-top: 16px;
}

.panel-footer--split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--color-border);
}

.panel-footer--split .button--primary {
    margin-left: auto;
}

.evaluasi-show__indikator-title {
    margin-top: 32px;
}

.evaluasi-show__indikator-list {
    margin: 0;
    padding: 12px 16px;
    list-style: none;
}

.evaluasi-show__indikator-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.45;
}

.evaluasi-show__indikator-list li:last-child {
    border-bottom: 0;
}

.evaluasi-show__indikator-list .kode-pill {
    margin-right: 6px;
    vertical-align: middle;
}

.pelatihan-unit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .pelatihan-unit-grid {
        grid-template-columns: 1fr;
    }
}

.pelatihan-unit-card {
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    overflow: hidden;
}

.pelatihan-unit-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--color-primary-soft);
    border-bottom: 1px solid var(--color-primary-border);
}

.pelatihan-unit-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}

.pelatihan-unit-card__subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

.pelatihan-unit-card__empty {
    margin: 0;
    padding: 12px;
}

.pelatihan-unit-card__jenjang {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.pelatihan-unit-card__meta {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
}

.pelatihan-unit-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow: auto;
}

.pelatihan-unit-card__row {
    border-bottom: 1px solid var(--color-border);
}

.pelatihan-unit-card__row:last-child {
    border-bottom: 0;
}

.pelatihan-unit-card__row.is-hadir {
    background: rgba(34, 139, 34, 0.08);
}

.pelatihan-unit-card__check,
.pelatihan-unit-card__name {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
}

.pelatihan-unit-card__name {
    cursor: default;
}

.pelatihan-sasaran__modes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.pelatihan-sasaran__mode {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    cursor: pointer;
}

.pelatihan-sasaran__panel {
    display: none;
    margin-bottom: 8px;
    padding: 12px 0 0;
    border-top: 1px solid var(--color-border);
}

.pelatihan-sasaran__panel.is-active {
    display: block;
}

.pelatihan-sasaran__checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
}

@media (max-width: 640px) {
    .pelatihan-sasaran__checks {
        grid-template-columns: 1fr;
    }
}

.pelatihan-sasaran__check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.pelatihan-sasaran__quick {
    margin-bottom: 12px;
}

.pelatihan-sasaran__matrix {
    margin-top: 0;
}

.pelatihan-sasaran__col-check {
    width: 4.5rem;
    text-align: center;
}

.pelatihan-sasaran__row.is-target {
    background: rgba(34, 139, 34, 0.08);
}

.pelatihan-sasaran__row.is-target td:first-child {
    font-weight: 700;
}

.pelatihan-steps .process-tabs__tab.is-done:not(.is-active) {
    border-color: var(--color-success, #2e7d32);
    color: var(--color-success, #2e7d32);
}

.pelatihan-steps .process-tabs__tab.is-done:not(.is-active) .process-tabs__index {
    background: rgba(46, 125, 50, 0.12);
    color: var(--color-success, #2e7d32);
}

.pelatihan-steps .process-tabs__tab.is-locked:not(.is-active) {
    opacity: 0.72;
}

.pelatihan-summary {
    display: grid;
    gap: 10px 16px;
    margin: 0;
}

.pelatihan-summary__row {
    display: grid;
    grid-template-columns: minmax(120px, 160px) 1fr;
    gap: 8px 16px;
}

.pelatihan-summary__row dt {
    margin: 0;
    font-weight: 700;
    color: var(--color-text-muted, #666);
}

.pelatihan-summary__row dd {
    margin: 0;
}

.pelatihan-summary__list {
    margin: 0;
    padding-left: 1.1rem;
}

.pelatihan-step-card {
    margin: 16px 0 0;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface-muted, #fafafa);
}

.pelatihan-step-card__title {
    margin: 0 0 12px;
    font-size: 15px;
}

.pelatihan-step-card__check {
    display: block;
    margin: 12px 0;
}

.pelatihan-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.pelatihan-step-actions .button--secondary:first-child:last-child,
.pelatihan-step-actions .button--secondary:first-child:not(:last-child) {
    margin-right: auto;
}

.pelatihan-step-locked {
    padding: 20px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md, 8px);
    text-align: center;
}

.iuran-admin-units {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.iuran-unit-ribbon {
    margin: 0;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: #FFFFFF;
    overflow: hidden;
}

.iuran-unit-ribbon__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    list-style: none;
    cursor: pointer;
    background: var(--color-primary-soft);
    color: var(--color-text);
    font-weight: 800;
}

.iuran-unit-ribbon__bar::-webkit-details-marker {
    display: none;
}

.iuran-unit-ribbon__bar::after {
    content: '';
    width: 0.55em;
    height: 0.55em;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
}

.iuran-unit-ribbon:not([open]) .iuran-unit-ribbon__bar::after {
    transform: rotate(-45deg);
}

.iuran-unit-ribbon__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.iuran-unit-ribbon__jenjang {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.iuran-unit-ribbon__meta {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.iuran-unit-ribbon__body {
    padding: 12px 16px 16px;
}

.iuran-unit-seat-block {
    margin: 0;
}

.iuran-seat-cabin {
    max-width: none;
    width: 100%;
    margin-top: 0;
}

.iuran-seat-cabin .seat-cabin__grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.iuran-seat-cabin .seat-cabin__aisle {
    display: none;
}

.seat-form {
    margin: 0;
    padding: 0;
    display: contents;
}

button.seat--tap {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    width: 100%;
}

.seat--lapor .seat__body {
    border-color: var(--color-success, #2e7d32);
    background: rgba(46, 125, 50, 0.08);
}

.seat--lapor .seat__mark::before {
    content: '✓';
    color: var(--color-success, #2e7d32);
    font-weight: 700;
}

.seat--tunggakan:not(.seat--lapor) .seat__body {
    border-color: var(--color-danger, #c62828);
    background: rgba(198, 40, 40, 0.06);
}

.seat--future .seat__body {
    opacity: 0.55;
}

@media (max-width: 640px) {
    .pelatihan-summary__row {
        grid-template-columns: 1fr;
    }
}

/* ——— Setup / install ——— */

.setup-status {
    display: grid;
    grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
    gap: 8px 12px;
    margin: 16px 0 20px;
    font-size: 14px;
}

.setup-status dt {
    margin: 0;
    font-weight: 700;
    color: var(--color-text-muted);
}

.setup-status dd {
    margin: 0;
}

.setup-cli {
    margin: 8px 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    font-size: 13px;
    line-height: 1.5;
    overflow-x: auto;
}

.setup-cli code {
    font-family: ui-monospace, Consolas, monospace;
}

@media (max-width: 768px) {
    body.app-body--nav-open {
        overflow: hidden;
    }

    .app-topbar__menu {
        display: inline-flex;
    }

    .app-topbar {
        padding: 10px 12px;
        gap: 8px;
    }

    .app-topbar__title {
        font-size: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-topbar__account {
        gap: 6px;
        flex-shrink: 0;
    }

    .workspace-switcher-wrap__label {
        display: none;
    }

    .workspace-switcher__toggle-text,
    .user-menu__toggle-text {
        display: none;
    }

    .workspace-switcher__toggle,
    .user-menu__toggle {
        min-width: var(--mobile-touch-min);
        min-height: var(--mobile-touch-min);
        justify-content: center;
        padding: 0 10px;
    }

    .app-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 240;
        border: 0;
        padding: 0;
        background: rgba(28, 18, 12, 0.45);
        cursor: pointer;
    }

    .app-sidebar-backdrop[hidden] {
        display: none;
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 250;
        width: min(280px, 86vw);
        max-width: 280px;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: var(--shadow-md);
    }

    .app-shell--nav-open .app-sidebar {
        transform: translateX(0);
    }

    .app-content {
        padding: 16px 16px 20px;
    }

    .app-shell--bottom-nav .app-content {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 20px + env(safe-area-inset-bottom, 0px));
    }

    .page-title {
        font-size: 24px;
    }

    .panel {
        padding: 16px;
    }

    .button {
        min-height: var(--mobile-touch-min);
    }

    button.member-card,
    .member-card {
        min-height: var(--mobile-touch-min);
        padding: 14px 16px;
    }

    .seat__body {
        min-height: var(--mobile-touch-min);
    }

    .process-tabs__tab {
        min-height: var(--mobile-touch-min);
    }

    .process-tabs__nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 10px;
    }

    .process-tabs__tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .week-cal__grid--full {
        display: none;
    }

    .week-cal__grid--focus {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding-bottom: 8px;
    }

    .week-cal__grid--focus .week-cal__cell {
        min-height: 84px;
        padding: 10px 8px;
    }

    .week-cal__grid--focus .week-cal__range {
        font-size: 12px;
        line-height: 1.35;
    }

    .week-cal__grid--focus .week-cal__now {
        font-size: 10px;
    }

    .week-cal__grid--focus .week-cal__cell--selected::after {
        display: none;
    }

    .app-bottom-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 300;
        min-height: var(--mobile-bottom-nav-height);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-top: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    .app-bottom-nav__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: var(--mobile-bottom-nav-height);
        padding: 6px 4px;
        text-decoration: none;
        color: var(--color-text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .app-bottom-nav__link--active {
        color: var(--color-primary);
        background: var(--color-primary-soft);
    }

    .app-bottom-nav__icon {
        width: 22px;
        height: 22px;
        background: currentColor;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .app-bottom-nav__icon--home {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .app-bottom-nav__icon--upa {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .app-bottom-nav__icon--iuran {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='6' width='18' height='12' rx='2' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 10h18' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='6' width='18' height='12' rx='2' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 10h18' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    }

    .app-bottom-nav__icon--profil {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 21a8 8 0 1 0-16 0' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7' r='4' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 21a8 8 0 1 0-16 0' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7' r='4' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    }

    .app-bottom-nav__icon--evaluasi {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 11l2 2 4-4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='4' y='4' width='16' height='16' rx='2' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 11l2 2 4-4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='4' y='4' width='16' height='16' rx='2' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    }

    .panel-footer--split,
    .presensi-shell__actions,
    .form-layout > .form-actions {
        position: sticky;
        bottom: calc(env(safe-area-inset-bottom, 0px));
        z-index: 20;
        margin-top: 20px;
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: -16px;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid var(--color-border);
        backdrop-filter: blur(6px);
    }

    .app-shell--bottom-nav .panel-footer--split,
    .app-shell--bottom-nav .presensi-shell__actions,
    .app-shell--bottom-nav .form-layout > .form-actions {
        bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    .panel-footer--split {
        flex-wrap: wrap;
        gap: 8px;
    }

    .panel-footer--split .button {
        flex: 1 1 auto;
        min-width: 120px;
    }

    .panel-footer--split .button--primary {
        margin-left: 0;
    }

    .seat-cabin--tap-list .seat-cabin__grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .seat-cabin--tap-list .seat-cabin__aisle {
        display: none;
    }

    .seat-cabin--tap-list .seat--pembina {
        max-width: none;
        margin-bottom: 0;
    }

    .seat-cabin--tap-list .seat__body {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 2px 12px;
        min-height: var(--mobile-touch-min);
        padding: 14px 16px;
        text-align: left;
    }

    .seat-cabin--tap-list .seat__mark {
        grid-column: 2;
        grid-row: 1 / span 2;
        position: static;
        width: 24px;
        height: 24px;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }

    .seat-cabin--tap-list .seat__name {
        grid-column: 1;
        grid-row: 1;
        font-size: 14px;
        line-height: 1.35;
    }

    .seat-cabin--tap-list .seat__meta {
        grid-column: 1;
        grid-row: 2;
        font-size: 12px;
    }

    .seat-cabin--tap-list .seat--pembina .seat__meta {
        grid-row: 1;
    }

    .seat-cabin--tap-list .seat--pembina .seat__name {
        grid-row: 2;
    }

    .month-cal__grid--full {
        display: none;
    }

    .month-cal__grid--focus {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding-bottom: 8px;
    }

    .month-cal__grid--focus .month-cal__cell {
        min-height: 76px;
        padding: 8px 6px;
    }

    .month-cal__grid--focus .month-cal__label {
        font-size: 12px;
    }

    .month-cal__grid--focus .month-cal__now {
        font-size: 10px;
    }

    .evaluasi-checklist-table thead {
        display: none;
    }

    .evaluasi-checklist-table tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .evaluasi-checklist-table tr {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 4px 12px;
        padding: 12px 14px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface);
    }

    .evaluasi-checklist-table tr.evaluasi-checklist-table__row--checked {
        border-color: #b8dfc4;
        background: #f4fbf6;
    }

    .evaluasi-checklist-table tr.evaluasi-checklist-table__row--disabled {
        opacity: 0.85;
    }

    .evaluasi-checklist-table td {
        display: block;
        padding: 0;
        border: 0;
    }

    .evaluasi-checklist-table__check {
        grid-row: 1 / span 2;
        grid-column: 1;
        align-self: start;
        padding-top: 2px;
    }

    .evaluasi-checklist-table__check .evaluasi-checklist__item {
        width: 22px;
        height: 22px;
        margin: 0;
        cursor: pointer;
    }

    .evaluasi-checklist-table__kode {
        grid-column: 2;
        grid-row: 1;
    }

    .evaluasi-checklist-table__text {
        grid-column: 2;
        grid-row: 2;
        font-size: 14px;
        line-height: 1.4;
    }

    .evaluasi-accordion__body .evaluasi-checklist-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .materi-picker__results li {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .materi-picker__results .button {
        width: 100%;
    }
}

.laporan-jenis {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.laporan-jenis__item {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    background: #FFFCFA;
}

.laporan-jenis__item.is-active {
    background: var(--color-text);
    color: #fff;
    border-color: var(--color-text);
}

.laporan-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    margin: 0 0 16px;
}

.laporan-stats__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.laporan-stats__item strong {
    font-size: 22px;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.laporan-stats__item span {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.laporan-title {
    margin: 0 0 4px;
    font-size: 16px;
}

.table-scroll {
    overflow: auto;
    max-width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.table-scroll .data-table {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.laporan-table__group th {
    background: var(--color-surface-muted);
    font-weight: 700;
    text-align: left;
}

.laporan-table__rowspan {
    vertical-align: top;
    font-weight: 700;
    background: var(--color-surface-muted);
    white-space: pre-line;
}

.laporan-mark {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    vertical-align: middle;
    text-indent: -999px;
    overflow: hidden;
}

.laporan-mark--ya {
    background: var(--color-text);
    border-color: var(--color-text);
    position: relative;
    text-indent: 0;
    color: transparent;
    font-size: 0;
}

.laporan-mark--ya::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.laporan-table__notes th {
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
}

.laporan-mark--minus {
    position: relative;
    text-indent: 0;
    color: transparent;
    font-size: 0;
}

.laporan-mark--minus::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 7px;
    width: 10px;
    height: 2px;
    background: var(--color-text);
}

.access-map-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px;
}

.access-map {
    max-height: min(70vh, 720px);
}

.access-map .data-table {
    border-collapse: separate;
    border-spacing: 0;
}

.access-map .data-table th,
.access-map .data-table td {
    background: var(--color-surface);
    white-space: nowrap;
    vertical-align: top;
}

.access-map .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface-muted);
    box-shadow: 0 1px 0 var(--color-border);
}

.access-map .data-table th:first-child,
.access-map .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 280px;
    white-space: normal;
    background: var(--color-surface);
    box-shadow: 1px 0 0 var(--color-border);
}

.access-map .data-table thead th:first-child {
    z-index: 3;
    background: var(--color-surface-muted);
}

.access-map__menu {
    display: block;
    font-weight: 700;
}

.access-map__meta {
    display: block;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.access-map__cell {
    text-align: center;
    min-width: 96px;
    padding: 8px 10px;
}

.access-map__scope {
    margin-top: 6px;
}

.access-map__scope-label {
    display: block;
    margin: 0;
}

.access-map__scope select {
    max-width: 12rem;
    font: inherit;
    font-size: 0.75rem;
}

.access-map__scope-static {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-muted, #64748b);
}

.access-map__cell .inline-form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.access-map .button.access-map__toggle {
    min-width: 72px;
    width: 72px;
    min-height: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1;
    box-shadow: none;
    transform: none;
    border-width: 1px;
    border-style: solid;
}

.access-map .button.access-map__toggle:hover {
    transform: none;
    box-shadow: none;
}

.access-map .button.access-map__toggle--on {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.access-map .button.access-map__toggle--on:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.access-map .button.access-map__toggle--off {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.access-map .button.access-map__toggle--off:hover {
    background: var(--color-surface-muted);
    border-color: var(--color-primary-border);
    color: var(--color-text);
}

.access-map__empty,
.access-map .access-map__toggle--static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    width: 72px;
    min-height: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 800;
    box-sizing: border-box;
}

.access-map .access-map__toggle--static.access-map__toggle--on {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.access-map .access-map__toggle--static.access-map__toggle--off {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.access-map__empty {
    color: var(--color-text-muted);
    background: transparent;
    border-color: transparent;
}

.permission-block__menus {
    display: block;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.35;
}