/* Design System MTs Al Hasyimi — gunakan class ui-* untuk komponen baru. */
:root {
    --ui-primary-50:#edf8f2;--ui-primary-100:#d7efe1;--ui-primary-500:#0a8a50;
    --ui-primary-600:#087f48;--ui-primary-700:#06683b;--ui-primary-800:#04532f;
    --ui-accent-100:#fff4cf;--ui-accent-500:#d9a42c;--ui-danger-50:#fff1f2;
    --ui-danger-600:#dc3545;--ui-warning-50:#fff8e6;--ui-warning-700:#9b6800;
    --ui-info-50:#edf7ff;--ui-info-700:#12669f;--ui-success-50:#edf9f1;
    --ui-white:#fff;--ui-gray-25:#fbfcfb;--ui-gray-50:#f6f8f7;
    --ui-gray-100:#edf1ef;--ui-gray-200:#dfe7e2;--ui-gray-300:#cbd7d0;
    --ui-gray-500:#738078;--ui-gray-600:#59675f;--ui-gray-700:#3c4b43;
    --ui-gray-800:#26372e;--ui-gray-900:#15231b;
    --ui-font-sans:"Poppins","Lato",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --ui-font-display:"Playfair Display",Georgia,serif;
    --ui-text-xs:.75rem;--ui-text-sm:.875rem;--ui-text-md:1rem;
    --ui-text-lg:1.125rem;--ui-text-xl:1.375rem;--ui-text-2xl:clamp(1.5rem,2vw,2rem);
    --ui-space-1:.25rem;--ui-space-2:.5rem;--ui-space-3:.75rem;--ui-space-4:1rem;
    --ui-space-5:1.25rem;--ui-space-6:1.5rem;--ui-space-8:2rem;--ui-space-10:2.5rem;
    --ui-radius-sm:.5rem;--ui-radius-md:.75rem;--ui-radius-lg:1rem;
    --ui-radius-xl:1.25rem;--ui-radius-pill:999px;
    --ui-shadow-sm:0 3px 12px rgba(20,55,35,.06);
    --ui-shadow-md:0 10px 28px rgba(20,55,35,.09);
    --ui-shadow-lg:0 20px 48px rgba(20,55,35,.13);
    --ui-focus-ring:0 0 0 3px rgba(10,138,80,.2);
    --ui-transition:180ms ease;--ui-control-height:42px;--ui-touch-target:44px;
    --ui-content-max:1440px;
}
.ui-scope{color:var(--ui-gray-800);font-family:var(--ui-font-sans);line-height:1.6;text-rendering:optimizeLegibility}
.ui-scope--backend{background:var(--ui-gray-50)}
.ui-page{width:min(100%,var(--ui-content-max));margin-inline:auto}
.ui-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ui-space-5);margin-bottom:var(--ui-space-6)}
.ui-page-header__content{min-width:0}
.ui-page-header__eyebrow{margin-bottom:var(--ui-space-1);color:var(--ui-primary-600);font-size:var(--ui-text-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ui-page-header__title{margin:0;color:var(--ui-gray-900);font-size:var(--ui-text-2xl);font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.ui-page-header__description{max-width:720px;margin:var(--ui-space-2) 0 0;color:var(--ui-gray-600);font-size:var(--ui-text-sm)}
.ui-page-header__actions{display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;gap:var(--ui-space-2)}
.ui-card{border:1px solid var(--ui-gray-200);border-radius:var(--ui-radius-lg);background:var(--ui-white);box-shadow:var(--ui-shadow-sm)}
.ui-card--interactive{transition:border-color var(--ui-transition),box-shadow var(--ui-transition),transform var(--ui-transition)}
.ui-card--interactive:hover{border-color:var(--ui-primary-100);box-shadow:var(--ui-shadow-md);transform:translateY(-2px)}
.ui-card__header,.ui-card__body,.ui-card__footer{padding:var(--ui-space-5) var(--ui-space-6)}
.ui-card__header{border-bottom:1px solid var(--ui-gray-100)}.ui-card__footer{border-top:1px solid var(--ui-gray-100)}
.ui-card__title{margin:0;color:var(--ui-gray-900);font-size:var(--ui-text-lg);font-weight:700}
.ui-btn{display:inline-flex;min-height:var(--ui-control-height);align-items:center;justify-content:center;gap:var(--ui-space-2);padding:.625rem 1rem;border:1px solid transparent;border-radius:var(--ui-radius-md);font:inherit;font-size:var(--ui-text-sm);font-weight:700;line-height:1.2;text-align:center;cursor:pointer;transition:background var(--ui-transition),border-color var(--ui-transition),box-shadow var(--ui-transition),transform var(--ui-transition)}
.ui-btn:hover{text-decoration:none;transform:translateY(-1px)}.ui-btn:disabled,.ui-btn[aria-disabled=true]{cursor:not-allowed;opacity:.58;transform:none}
.ui-btn:focus-visible,.ui-form-control:focus-visible{outline:0;box-shadow:var(--ui-focus-ring)}
.ui-btn--primary{border-color:var(--ui-primary-600);background:var(--ui-primary-600);color:var(--ui-white)}
.ui-btn--primary:hover{border-color:var(--ui-primary-700);background:var(--ui-primary-700);color:var(--ui-white)}
.ui-btn--secondary{border-color:var(--ui-gray-300);background:var(--ui-white);color:var(--ui-gray-700)}
.ui-btn--danger{border-color:var(--ui-danger-600);background:var(--ui-danger-600);color:var(--ui-white)}
.ui-btn--sm{min-height:34px;padding:.4rem .7rem;font-size:var(--ui-text-xs)}.ui-btn--icon{width:var(--ui-control-height);padding-inline:0}
.ui-form-group{margin-bottom:var(--ui-space-5)}.ui-label{display:block;margin-bottom:var(--ui-space-2);color:var(--ui-gray-700);font-size:var(--ui-text-sm);font-weight:700}
.ui-form-control{width:100%;min-height:var(--ui-control-height);padding:.625rem .8rem;border:1px solid var(--ui-gray-300);border-radius:var(--ui-radius-md);background:var(--ui-white);color:var(--ui-gray-900);font:inherit;transition:border-color var(--ui-transition),box-shadow var(--ui-transition)}
.ui-form-control:focus{border-color:var(--ui-primary-500);outline:0;box-shadow:var(--ui-focus-ring)}
.ui-form-help,.ui-form-error{display:block;margin-top:var(--ui-space-2);font-size:var(--ui-text-xs)}.ui-form-help{color:var(--ui-gray-500)}.ui-form-error{color:var(--ui-danger-600)}
.ui-badge{display:inline-flex;align-items:center;gap:var(--ui-space-1);padding:.32rem .62rem;border-radius:var(--ui-radius-pill);background:var(--ui-gray-100);color:var(--ui-gray-700);font-size:var(--ui-text-xs);font-weight:700;line-height:1.2}
.ui-badge--success{background:var(--ui-success-50);color:var(--ui-primary-700)}.ui-badge--warning{background:var(--ui-warning-50);color:var(--ui-warning-700)}
.ui-badge--danger{background:var(--ui-danger-50);color:var(--ui-danger-600)}.ui-badge--info{background:var(--ui-info-50);color:var(--ui-info-700)}
.ui-table-shell{width:100%;overflow-x:auto;border:1px solid var(--ui-gray-200);border-radius:var(--ui-radius-lg);background:var(--ui-white);-webkit-overflow-scrolling:touch}
.ui-table{width:100%;margin:0;border-collapse:collapse;color:var(--ui-gray-700);font-size:var(--ui-text-sm)}
.ui-table th,.ui-table td{padding:.9rem 1rem;border-bottom:1px solid var(--ui-gray-100);vertical-align:middle}
.ui-table th{background:var(--ui-gray-50);color:var(--ui-gray-700);font-size:var(--ui-text-xs);font-weight:800;letter-spacing:.035em;text-transform:uppercase}
.ui-table tbody tr:last-child td{border-bottom:0}
.ui-modal .modal-content{overflow:hidden;border:0;border-radius:var(--ui-radius-xl);box-shadow:var(--ui-shadow-lg)}
.ui-modal .modal-header,.ui-modal .modal-footer{padding:var(--ui-space-4) var(--ui-space-6);border-color:var(--ui-gray-100)}.ui-modal .modal-body{padding:var(--ui-space-6)}
.ui-notice{display:flex;align-items:flex-start;gap:var(--ui-space-3);padding:var(--ui-space-4);border:1px solid var(--ui-gray-200);border-left-width:4px;border-radius:var(--ui-radius-md);background:var(--ui-white);color:var(--ui-gray-700);font-size:var(--ui-text-sm)}
.ui-notice--success{border-left-color:var(--ui-primary-600);background:var(--ui-success-50)}.ui-notice--warning{border-left-color:var(--ui-accent-500);background:var(--ui-warning-50)}
.ui-notice--danger{border-left-color:var(--ui-danger-600);background:var(--ui-danger-50)}.ui-notice--info{border-left-color:var(--ui-info-700);background:var(--ui-info-50)}
.ui-empty-state{display:grid;min-height:180px;place-items:center;padding:var(--ui-space-8);color:var(--ui-gray-500);text-align:center}
/* Normalisasi aman komponen Atlantis/Bootstrap lama. */
.ui-scope--backend .card{border-color:var(--ui-gray-200);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-sm)}
.ui-scope--backend .form-control,.ui-scope--backend .custom-select{min-height:var(--ui-control-height);border-color:var(--ui-gray-300);border-radius:var(--ui-radius-md)}
.ui-scope--backend .form-control:focus,.ui-scope--backend .custom-select:focus{border-color:var(--ui-primary-500);box-shadow:var(--ui-focus-ring)}
.ui-scope--backend .btn:not(.btn-link){min-height:38px;border-radius:var(--ui-radius-md);font-weight:700}
.ui-scope--backend .badge{border-radius:var(--ui-radius-pill)}.ui-scope--backend .alert{border-radius:var(--ui-radius-md)}
@media(max-width:991.98px){.ui-page-header{align-items:stretch;flex-direction:column}.ui-page-header__actions{justify-content:flex-start}}
@media(max-width:767.98px){:root{--ui-control-height:44px}.ui-page-header{gap:var(--ui-space-4);margin-bottom:var(--ui-space-5)}.ui-page-header__actions,.ui-page-header__actions>.ui-btn{width:100%}.ui-card__header,.ui-card__body,.ui-card__footer,.ui-modal .modal-header,.ui-modal .modal-body,.ui-modal .modal-footer{padding:var(--ui-space-4)}.ui-btn:not(.ui-btn--sm),.ui-scope--backend .btn:not(.btn-sm,.btn-link){min-height:var(--ui-touch-target)}.ui-modal .modal-dialog{margin:var(--ui-space-3)}}
@media(max-width:575.98px){.ui-table{min-width:680px}.ui-modal .modal-dialog{max-width:none}}
@media(prefers-reduced-motion:reduce){.ui-card--interactive,.ui-btn{scroll-behavior:auto;transition:none}.ui-card--interactive:hover,.ui-btn:hover{transform:none}}