@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--ink:#172b26;--muted:#71817b;--green:#176b52;--green2:#e8f3ee;--line:#e7ece9;--bg:#f5f8f6;--white:#fff;--gold:#d4a64a}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}a{color:inherit;text-decoration:none}
.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:258px;background:#123f34;color:#eaf4ef;padding:22px 16px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 28px}.brand b{display:block;font:800 15px Manrope}.brand small{display:block;color:#b6d1c5;font-size:11px;margin-top:3px}.brand-mark{width:54px;height:54px;border-radius:17px;background:var(--gold);display:grid;place-items:center;color:#183d32;font:800 17px Manrope;letter-spacing:-1px;box-shadow:0 8px 22px #0002}.brand-mark.small{width:39px;height:39px;border-radius:12px;font-size:13px}.nav-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;color:#d3e5dd;margin:3px 0;font-weight:500}.nav-link>span{width:19px;text-align:center;font-size:17px}.nav-link.active{background:#ffffff1c;color:white}.nav-link.disabled{opacity:.65;cursor:default}.nav-link small{margin-left:auto;font-size:9px;color:#b6d1c5}.nav-label{font-size:9px;letter-spacing:1.5px;color:#92b6a7;font-weight:700;margin:21px 12px 8px}.sidebar-bottom{margin-top:auto;border-top:1px solid #ffffff24;padding:16px 4px 0}.user-mini{display:flex;gap:9px;align-items:center}.avatar{width:33px;height:33px;background:#d5e8de;color:#174b3c;border-radius:50%;display:grid;place-items:center;font-weight:700}.user-mini b,.user-mini small{display:block}.user-mini b{font-size:11px}.user-mini small{font-size:10px;color:#b6d1c5;margin-top:3px}.logout-link{display:block;color:#f0c5b9;font-size:11px;margin:15px 8px 0}.main-area{margin-left:258px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:64px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 32px;gap:14px;font-weight:700;font-family:Manrope}.topbar-user{margin-left:auto;color:var(--muted);font:500 12px 'DM Sans'}.menu-toggle{display:none;border:0;background:none;font-size:21px}.page-container{padding:30px 34px;flex:1;max-width:1600px;width:100%;margin:0 auto}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.eyebrow{font-size:9px;letter-spacing:1.8px;color:var(--green);font-weight:700;margin:0 0 8px}.page-heading h1{font:800 27px Manrope;margin:0 0 6px}.muted{color:var(--muted)}.date-pill{background:white;border:1px solid var(--line);padding:9px 13px;border-radius:9px;color:var(--muted);font-size:11px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}.stat-card,.panel{background:white;border:1px solid var(--line);border-radius:13px;box-shadow:0 3px 12px #193e2e06}.stat-card{padding:19px}.stat-card span,.stat-card small{display:block;color:var(--muted);font-size:11px}.stat-card strong{display:block;font:800 29px Manrope;margin:9px 0 5px}.stat-card small{font-size:10px}.content-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}.panel{padding:20px;margin-bottom:17px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.panel h2{font:700 14px Manrope;margin:0}.panel-head .muted{font-size:10px}.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.module-item{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;align-items:center;gap:10px;min-width:0}.module-icon{width:31px;height:31px;flex:none;border-radius:9px;background:var(--green2);color:var(--green);display:grid;place-items:center;font-weight:700;font-size:10px}.module-item b,.module-item small{display:block}.module-item b{font-size:11px}.module-item small{font-size:9px;color:var(--muted);margin-top:4px}.module-item>div{min-width:0}.status{font-style:normal;font-size:8px;margin-left:auto;white-space:nowrap}.status.ready{color:var(--green)}.status.planned{color:#a17a2c}.info-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #f0f2f1;font-size:11px}.info-row:last-child{border:0}.info-row span{color:var(--muted)}.info-row b{text-align:right}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:11px}th{text-align:left;color:var(--muted);font-weight:600;background:#f8faf9}th,td{padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}.footer{text-align:center;padding:18px;color:#99a59f;font-size:10px}.alert{padding:11px 13px;border-radius:8px;margin-bottom:16px;font-size:12px}.alert.danger{background:#fff0ed;color:#a53b2c}.alert.success{background:#e8f5ee;color:#176b52}
.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 10%,#dcefe5,transparent 35%),#f3f7f4}.login-card{background:white;border:1px solid var(--line);border-radius:18px;padding:35px;width:min(100%,420px);box-shadow:0 20px 60px #153c2b12}.login-card .brand-mark{margin:0 auto 20px}.login-card .eyebrow,.login-card h1,.login-card>.muted{text-align:center}.login-card h1{font:800 22px Manrope;margin:0 0 8px}.login-card>.muted{font-size:12px;margin-bottom:25px}.login-card label{display:block;font-size:11px;font-weight:700;margin:14px 0 7px}.login-card input{width:100%;padding:12px;border:1px solid #dfe7e2;border-radius:8px;font:13px 'DM Sans';outline:none}.login-card input:focus{border-color:var(--green);box-shadow:0 0 0 3px #176b5214}.btn{border:0;border-radius:8px;padding:12px;font-weight:700;cursor:pointer}.btn.primary{background:var(--green);color:white}.btn.full{width:100%;margin-top:21px}.tiny{font-size:10px;text-align:center;margin-top:20px}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}}
@media(max-width:700px){.sidebar{transform:translateX(-100%);transition:transform .2s}.sidebar.open{transform:translateX(0)}.main-area{margin-left:0}.topbar{padding:0 17px}.menu-toggle{display:block}.page-container{padding:22px 15px}.page-heading h1{font-size:23px}.stats-grid{gap:9px}.stat-card{padding:14px}.stat-card strong{font-size:24px}.module-grid{grid-template-columns:1fr}.panel{padding:15px}.date-pill{font-size:9px}}
/* Tahap 2 - Keanggotaan */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;font:600 12px 'DM Sans',sans-serif}.btn.secondary{background:#f1f5f2;color:#315247;border:1px solid #e0e8e3}.btn.danger-btn{background:#fff0ed;color:#a53b2c;border:1px solid #f5d5cf}.member-stats .stat-card strong{font-size:25px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid label,.approval-form label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:700;color:#3a5148}.form-grid input,.form-grid select,.form-grid textarea,.approval-form textarea,.filter-bar input,.filter-bar select,.inline-action input,.input-wide{width:100%;border:1px solid #dfe7e2;border-radius:8px;padding:11px 12px;font:12px 'DM Sans',sans-serif;color:var(--ink);background:white;outline:none}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.filter-bar input:focus{border-color:var(--green);box-shadow:0 0 0 3px #176b5214}.span-2{grid-column:span 2}.form-actions,.heading-actions,.detail-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.filter-bar{display:flex;gap:8px;margin-bottom:16px}.filter-bar input{flex:1;min-width:160px}.filter-bar select{width:155px}.pill-status{display:inline-block;padding:5px 9px;border-radius:30px;background:#edf1ef;color:#52645c;font-size:10px;font-weight:700}.pill-status.aktif{background:#e4f4eb;color:#176b52}.pill-status.calon{background:#fff5df;color:#956b16}.pill-status.nonaktif{background:#f0f0f0;color:#69736e}.pill-status.keluar{background:#fff0ed;color:#a53b2c}.text-link{color:var(--green);font-weight:700;font-size:11px}.empty{text-align:center;color:var(--muted);padding:28px}.detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}.profile-top{display:flex;align-items:center;gap:15px;padding-bottom:18px;border-bottom:1px solid var(--line)}.profile-top h2{font:700 18px Manrope;margin:0 0 8px}.member-photo{width:82px;height:92px;object-fit:cover;border-radius:10px}.placeholder-photo{display:grid;place-items:center;background:#e8f3ee;color:var(--green);font:800 30px Manrope}.small{font-size:10px}.detail-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.detail-fields>div{padding:10px 0;border-bottom:1px solid #f0f2f1;min-width:0}.detail-fields span,.detail-fields b{display:block}.detail-fields span{color:var(--muted);font-size:10px;margin-bottom:5px}.detail-fields b{font-size:11px;white-space:normal;overflow-wrap:anywhere}.detail-actions{margin-top:17px}.approval-form{margin-top:14px}.approval-form textarea{margin:8px 0 12px}.inline-action{display:grid;gap:9px;margin-top:12px}.document-list{list-style:none;margin:0;padding:0}.document-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.document-list b,.document-list small{display:block}.document-list b{font-size:11px}.document-list small{font-size:9px;color:var(--muted);margin-top:3px}.info-row{gap:12px}.alert ul{margin:0;padding-left:18px}
@media(max-width:850px){.detail-grid{grid-template-columns:1fr}}
@media(max-width:600px){.form-grid,.detail-fields{grid-template-columns:1fr}.span-2{grid-column:span 1}.filter-bar{flex-wrap:wrap}.filter-bar input{flex-basis:100%}.filter-bar select{flex:1}.page-heading{gap:12px;align-items:flex-start}.heading-actions{justify-content:flex-end}.member-stats .stat-card strong{font-size:21px}}

/* Modal Penyertaan */
.modal-total{background:#edf6f1;border:1px solid #d8e9df;border-radius:10px;padding:15px;display:flex;flex-direction:column;gap:5px}
.modal-total span,.modal-total small{color:#557267;font-size:10px}.modal-total strong{font:800 24px Manrope;color:#176b52}
.table-sub{display:block;color:#87958e;font-size:9px;margin-top:3px}.paid-inline{margin:0}.notice-box{background:#fffaf0;border:1px solid #f1e4c7;border-radius:10px;padding:14px 16px;color:#705a2b;font-size:11px;line-height:1.6;margin-bottom:18px}