@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap');
:root{--green:#175c45;--green-2:#277b59;--mint:#e9f3ed;--cream:#f7f5ef;--ink:#183129;--muted:#718078;--line:#dbe4df;--white:#fff;--red:#c84747;--gold:#c59232;--shadow:0 16px 42px rgba(24,49,41,.08)}*{box-sizing:border-box}body{margin:0;font:15px/1.5 'DM Sans',sans-serif;color:var(--ink);background:#f6f8f6}button,input,select,textarea{font:inherit}button,a{transition:.2s}a{color:var(--green);text-decoration:none}.app-shell{min-height:100vh;display:grid;grid-template-columns:258px 1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:258px;padding:28px 18px 20px;background:var(--green);color:white;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:0 9px}.brand-icon{width:47px;height:47px;border-radius:15px;background:#fff;color:var(--green);display:grid;place-items:center;font-size:25px}.brand b,.brand span{display:block}.brand b{font-family:'Playfair Display';font-size:18px}.brand span{color:#cfe2d7;font-size:12px;letter-spacing:2px;text-transform:uppercase}.brand-note{margin:24px 10px 28px;padding-bottom:20px;border-bottom:1px solid #ffffff2b;color:#cfe2d7;font-size:12px}.sidebar nav{display:grid;gap:5px}.sidebar a{display:flex;align-items:center;gap:13px;color:#dceae2;padding:11px 14px;border-radius:10px}.sidebar a i{width:25px;text-align:center;font-style:normal;font-size:19px}.sidebar a:hover,.sidebar a.active{background:#fff;color:var(--green);box-shadow:0 7px 18px #0b3b2938}.sidebar-foot{margin-top:auto;border-top:1px solid #ffffff2b;padding-top:14px}.workspace{grid-column:2;min-width:0}.topbar{height:92px;padding:0 36px;display:flex;align-items:center;gap:22px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.topbar h1{font-size:24px;margin:1px 0 0}.eyebrow{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:#bcd3c5;margin:0}.eyebrow.green{color:var(--green-2)}.profile{display:flex;align-items:center;gap:10px;margin-left:auto}.profile b,.profile span{display:block}.profile span{font-size:12px;color:var(--muted)}.avatar{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green);font-weight:700}.menu-btn{display:none;border:0;background:none;font-size:24px}.content{padding:28px 34px 50px;max-width:1600px;margin:auto}.alert{padding:13px 16px;border-radius:9px;margin-bottom:18px}.alert.success{background:#e5f5eb;color:#12643b}.alert.error{background:#fee9e7;color:#a32929}.welcome{padding:28px 32px;border-radius:16px;background:linear-gradient(120deg,#164f3d,#267356);color:#fff;display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative}.welcome:after{content:'☾';font-size:160px;opacity:.07;position:absolute;right:180px;top:-55px}.welcome p{margin:0;color:#cbe1d4}.welcome h2{font:700 28px 'Playfair Display';margin:4px 0}.welcome span{color:#dcebe2}.date-card{padding:12px 18px;border:1px solid #ffffff38;border-radius:10px;background:#ffffff15}.date-card small,.date-card b{display:block}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;gap:15px;align-items:center;box-shadow:var(--shadow)}.stat-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--mint);color:var(--green);font-size:23px}.stat span,.stat strong{display:block}.stat span{font-size:13px;color:var(--muted)}.stat strong{font-size:25px}.grid.two{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);min-width:0}.card-head,.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.card-head h3,.page-head h2{margin:2px 0;font-size:21px}.page-head{margin:3px 0 24px}.page-head h2{font:700 28px 'Playfair Display'}.muted{color:var(--muted)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}table{border-collapse:collapse;width:100%;min-width:700px}th{text-align:left;background:#f0f5f2;color:#4f665c;font-size:12px;text-transform:uppercase;letter-spacing:.5px}th,td{padding:12px 14px;border-bottom:1px solid #edf1ef;white-space:nowrap}tbody tr:hover{background:#fafcfb}tbody tr:last-child td{border-bottom:0}.actions{display:flex;gap:5px;align-items:center}.actions form{display:inline}.icon-btn{border:0;background:#eef5f1;color:var(--green);border-radius:7px;width:31px;height:31px;cursor:pointer}.icon-btn.danger{background:#fff0ef;color:var(--red)}.empty{text-align:center;padding:30px;color:var(--muted)}.badge{padding:5px 9px;border-radius:20px;background:#e6f5ec;color:#147144;font-size:12px}.badge.kurang-lancar{background:#fff4d9;color:#8b6100}.badge.ulangi{background:#ffebea;color:#af2d2d}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.toolbar form{max-width:380px;flex:1}.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:0 13px;border-radius:10px}.search input{border:0;outline:0;padding:11px 2px;width:100%}.btn{border:0;border-radius:9px;padding:11px 17px;font-weight:700;cursor:pointer}.btn.primary{background:var(--green);color:#fff}.btn.primary:hover{background:#0d4935;transform:translateY(-1px)}.btn.secondary{background:#e7f1eb;color:var(--green)}.btn.ghost{background:#f1f3f2;color:#54635d}.chart{padding:9px 0}.bar-row{display:grid;grid-template-columns:75px 1fr 30px;gap:8px;align-items:center;margin:14px 0;font-size:12px}.bar-row>div{height:9px;background:#edf2ef;border-radius:9px;overflow:hidden}.bar-row i{display:block;height:100%;background:linear-gradient(90deg,#3a966d,#175c45);border-radius:9px}.quote-card{margin-top:20px;padding:19px;background:var(--cream);border-left:3px solid var(--gold);font-family:'Playfair Display';color:#4f5d57}.modal{display:none;position:fixed;inset:0;background:#11271fa8;z-index:100;align-items:center;justify-content:center;padding:20px}.modal.show{display:flex}.modal-box{width:min(580px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 30px 80px #0004;padding:24px}.form-modal{width:min(740px,100%)}.modal-head{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:18px}.modal-head h3{margin:2px 0;font-size:21px}.modal-head button{font-size:25px;background:none;border:0;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid label,.form-stack label{font-size:13px;font-weight:600;display:grid;gap:6px}.form-grid input,.form-grid select,.form-grid textarea,.form-stack input,.form-stack select{border:1px solid #cfdad4;border-radius:9px;padding:11px 12px;outline:0;background:#fff}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.form-stack input:focus,.form-stack select:focus{border-color:var(--green);box-shadow:0 0 0 3px #1a654a18}.full{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:7px}dl{margin:0}dl>div{display:grid;grid-template-columns:160px 1fr;padding:10px 0;border-bottom:1px solid var(--line)}dt{text-transform:capitalize;color:var(--muted)}dd{margin:0;font-weight:600}.login-page{min-height:100vh;background:#f2f5f1}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}.login-brand{padding:70px max(8vw,60px);background:linear-gradient(145deg,#103c2e,#1c694c);color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.login-brand:after{content:'☾';position:absolute;font-size:520px;color:#ffffff08;right:-90px;bottom:-210px}.logo-mark{font-size:55px}.login-brand h1{font:700 clamp(42px,5vw,72px)/1.05 'Playfair Display';margin:22px 0}.login-brand h1 span{color:#b8d6c4}.login-brand>p:not(.eyebrow){max-width:570px;color:#c8ddd1;font-size:18px}.verse{margin-top:70px;border-left:3px solid #d4af65;padding:15px 20px;max-width:500px;color:#e8f0eb;font-family:'Playfair Display';font-size:17px}.login-panel{padding:60px clamp(30px,7vw,100px);background:#fff;display:flex;flex-direction:column;justify-content:center}.login-panel h2{font:700 35px 'Playfair Display';margin:6px 0}.form-stack{display:grid;gap:17px;margin:30px 0 20px}.password{position:relative}.password input{width:100%;padding-right:45px}.password button{position:absolute;right:9px;top:8px;border:0;background:none;color:var(--muted)}.wide{width:100%;display:flex;justify-content:space-between}.demo{background:var(--cream);padding:15px;border-radius:10px;display:grid;grid-template-columns:1fr 1fr;gap:5px;font-size:12px}.demo>b,.demo small{grid-column:1/-1}.mobile-logo{display:none}
@media(max-width:1050px){.grid.two{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.app-shell{grid-template-columns:84px 1fr}.sidebar{width:84px;padding-inline:12px}.brand div:last-child,.brand-note,.sidebar a span{display:none}.brand{padding:0}.brand-icon{margin:auto}.workspace{grid-column:2}.sidebar a{justify-content:center}.sidebar a i{font-size:22px}.login-brand{padding:50px}.login-brand h1{font-size:48px}}
@media(max-width:720px){.app-shell{display:block}.sidebar{transform:translateX(-100%);width:260px;transition:.25s}.menu-open .sidebar{transform:translateX(0)}.sidebar .brand div:last-child,.sidebar .brand-note,.sidebar a span{display:block}.sidebar a{justify-content:flex-start}.workspace{width:100%}.topbar{height:78px;padding:0 18px}.menu-btn{display:block}.topbar .eyebrow{display:none}.topbar h1{font-size:19px}.profile div:last-child{display:none}.content{padding:20px 15px}.welcome{padding:22px}.welcome h2{font-size:22px}.date-card{display:none}.stats{grid-template-columns:1fr 1fr}.stat{padding:14px}.stat strong{font-size:20px}.page-head{align-items:flex-end}.toolbar>.muted{display:none}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.login-shell{display:block}.login-brand{display:none}.login-panel{min-height:100vh;padding:35px 24px}.mobile-logo{display:block;margin-bottom:55px;color:var(--green);font-size:20px}.demo{grid-template-columns:1fr}}
@media print{.sidebar,.topbar,.toolbar,.page-head .btn,.actions{display:none!important}.app-shell{display:block}.workspace{width:100%}.content{padding:0}.table-wrap{border:0}body{background:#fff}}