@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
:root{--p-dark:#103c2d;--p-green:#205c40;--p-green2:#276f4d;--p-accent:#cce8a7;--p-surface:#f5f8f4;--p-line:#e2eae2;--p-text:#1a3428;--p-muted:#64796e}
body.serappadi-standalone{background:#f3f7f2!important;margin:0}
.sp-control,.sp-auth-shell{font-family:'DM Sans',Arial,sans-serif;color:var(--p-text);font-size:16px;line-height:1.55;box-sizing:border-box}
.sp-control *,.sp-auth-shell *{box-sizing:border-box}
.sp-control button,.sp-control input,.sp-control select,.sp-control textarea,.sp-auth-shell input,.sp-auth-shell button{font:inherit}
.sp-control button,.sp-auth-shell button{cursor:pointer}
.sp-control button:focus-visible,.sp-control a:focus-visible,.sp-control select:focus-visible,.sp-control input:focus-visible,.sp-auth-shell input:focus-visible,.sp-auth-shell button:focus-visible{outline:3px solid #93c47f;outline-offset:2px}
.sp-control{width:min(1700px,calc(100% - 24px));min-height:calc(100vh - 24px);display:grid;grid-template-columns:272px minmax(0,1fr);margin:12px auto;background:#f8faf7;border:1px solid #e0e9df;border-radius:20px;overflow:clip;box-shadow:0 14px 45px #183e2812}
.sp-control-side{padding:26px 18px;background:#123e2f;color:white;display:flex;flex-direction:column;min-width:0}
.sp-control-brand{display:flex;align-items:center;gap:10px;margin:0 5px 26px;min-width:0}
.sp-control-symbol{width:46px;height:46px;border-radius:13px;background:#dceecb;display:grid;place-items:center;font-size:24px;flex:none}
.sp-control-brand span:last-child{min-width:0}
.sp-control-brand b{display:block;color:#fff;font-size:23px;letter-spacing:-.8px;white-space:nowrap;line-height:1.2;font-family:'Plus Jakarta Sans',sans-serif}
.sp-control-brand small{display:block;font-size:10px;font-weight:800;letter-spacing:2px;color:#9ec8a7;margin-top:5px}
.sp-control-workspace{background:#23553e;border:1px solid #396e51;border-radius:12px;padding:13px;font-size:12px;font-weight:800;color:#ebf6e6;margin-bottom:26px}
.sp-work-dot{display:inline-block;width:9px;height:9px;background:#b1df82;box-shadow:0 0 0 4px #94c07340;border-radius:50%;margin-right:6px}
.sp-control-workspace small{display:block;color:#aacdb2;font-weight:500;font-size:12px;margin:4px 0 0 17px}
.sp-side-caption{display:block;font-size:11px;color:#9abcaa;letter-spacing:1.3px;margin:0 8px 12px;font-weight:800}
.sp-control-nav{display:grid;gap:5px}
.sp-control-nav button{display:flex;gap:12px;align-items:center;width:100%;border:0;border-radius:10px;background:none;color:#c6d8ce;font-weight:700;text-align:left;padding:12px 11px;font-size:14px}
.sp-control-nav button span{display:inline-grid;place-items:center;width:24px;font-size:20px}
.sp-control-nav button:hover,.sp-control-nav button.is-current{background:#2b6548;color:white}
.sp-control-side-bottom{margin-top:auto;padding:35px 9px 12px;color:#b1cdb9;font-size:12px}
.sp-control-side-bottom a{display:inline-block;text-decoration:none;background:#dceeb9;color:#234731;border-radius:8px;padding:10px 12px;font-weight:800;font-size:12px}
.sp-control-side-bottom p{font-size:12px;color:#a3c2ad;margin:13px 0 0}
.sp-control-main{min-width:0;padding:26px 30px 12px}
.sp-control-header{min-height:106px;padding-bottom:20px;border-bottom:1px solid var(--p-line);display:flex;justify-content:space-between;align-items:center;gap:15px}
.sp-control-crumb{font-size:11px;letter-spacing:.8px;color:#779284;font-weight:800}
.sp-control-header h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(23px,2.4vw,32px);letter-spacing:-.9px;margin:6px 0 3px;font-weight:800;color:#203e2e;line-height:1.2}
.sp-control-header p{margin:0;font-size:13px;color:var(--p-muted)}
.sp-control-user{display:flex;align-items:center;gap:9px;min-width:0}
.sp-control-avatar{display:grid;place-items:center;background:#d6eacb;border-radius:11px;width:42px;height:42px;font-weight:900;color:#28603d;flex:none}
.sp-control-user strong{display:block;max-width:175px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.sp-control-user small{display:block;color:#7a9080;font-size:11px}
.sp-control-logout{border:1px solid #d7e4d7;background:white;border-radius:8px;padding:9px 12px;color:#3b694d;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}
.sp-control-page{display:none;min-width:0;padding-top:25px;min-height:65vh}
.sp-control-page.is-visible{display:block}
.sp-control-intro{background:linear-gradient(120deg,#164b34,#2d7445);border-radius:17px;color:white;padding:28px 30px;margin-bottom:21px}
.sp-control-intro>span,.sp-control-page .sp-control-intro>span{font-size:10px;letter-spacing:1.5px;font-weight:800;color:#b2dba9}
.sp-control-intro h2{margin:7px 0 9px;color:white;font:800 clamp(22px,2.3vw,30px)/1.2 'Plus Jakarta Sans',sans-serif}
.sp-control-intro p{color:#d5e7d7;margin:0;font-size:14px}
.sp-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:20px}
.sp-stat-card{border:1px solid #e1eae0;border-radius:14px;padding:20px 15px;background:white;min-height:119px;min-width:0}
.sp-stat-card span{font-size:11px;font-weight:800;color:#728e77;text-transform:uppercase;letter-spacing:.5px;display:block}
.sp-stat-card strong{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(22px,2.3vw,32px);color:#1b573b;margin:9px 0 4px;line-height:1.15}
.sp-stat-card small{color:#899e90;font-size:11px}
.sp-help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.sp-help-card,.sp-settings-card{min-width:0;background:white;border:1px solid var(--p-line);border-radius:15px;padding:22px}
.sp-help-card>span{font-size:25px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:#a9ce9a}
.sp-help-card h3,.sp-settings-card h3{font-size:18px;color:#244530;margin:8px 0}
.sp-help-card p,.sp-settings-card>p{font-size:13px;line-height:1.65;color:#73877b;margin:0 0 20px}
.sp-help-card button{border:0;background:none;color:#2b7044;font-weight:800;font-size:13px;padding:8px 0}
.sp-control-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.sp-control-toolbar h2{font:800 23px/1.25 'Plus Jakarta Sans',sans-serif;margin:0 0 5px;color:#24442f}
.sp-control-toolbar p{color:#738a78;font-size:13px;margin:0}
.sp-control-primary{background:#216a42;color:white;border:1px solid #216a42;border-radius:9px;padding:11px 18px;font-size:14px;font-weight:800;white-space:nowrap}
.sp-control-primary:hover{background:#155133}
.sp-control-primary:disabled{opacity:.55;cursor:wait}
.sp-control-secondary{background:white;color:#35654a;border:1px solid #d2e1d4;border-radius:9px;padding:11px 15px;font-size:13px;font-weight:800}
.sp-control-filter{display:flex;align-items:end;flex-wrap:wrap;gap:12px;padding:14px;background:#eff5ed;border-radius:12px;margin-bottom:14px}
.sp-control-filter label{min-width:175px;display:grid;gap:5px;font-size:12px;color:#5a7660;font-weight:800}
.sp-control-filter select,.sp-settings-card input,.sp-settings-card select,.sp-entry-fields input,.sp-entry-fields select,.sp-entry-fields textarea{width:100%;background:#fff;border:1px solid #d6e4d6;border-radius:8px;padding:11px 12px;min-height:45px;color:#284632;font-size:14px}
.sp-control-table-scroll{width:100%;overflow:auto;border:1px solid #dfe9df;background:white;border-radius:12px}
.sp-control-table{width:100%;border-collapse:collapse;min-width:690px;text-align:left;font-size:13px}
.sp-control-table th{background:#f1f6f0;color:#5e7b65;font-weight:800;padding:15px 13px;white-space:nowrap;font-size:12px}
.sp-control-table td{padding:13px;border-top:1px solid #edf1ec;color:#385440;vertical-align:top}
.sp-control-table td strong{color:#244e30}
.sp-control-table button{background:#eaf4e7;border:0;border-radius:7px;color:#28663e;font-size:12px;font-weight:800;padding:8px 10px;margin-right:5px}
.sp-control-table button.sp-danger{background:#fff0eb;color:#b04138}
.sp-empty-table{text-align:center;padding:35px 10px!important;color:#829485!important}
.sp-control-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#78917e;font-size:12px;padding:18px 0}
.sp-control-pagination>div{display:flex;gap:10px;align-items:center}
.sp-control-pagination button{border:1px solid #d4e3d5;background:white;padding:8px 12px;border-radius:7px;color:#2b5c40;font-size:12px}
.sp-control-pagination button:disabled{opacity:.4;cursor:not-allowed}
.sp-control-alert{padding:13px 16px;border:1px solid #c1dfb5;background:#e8f5e4;color:#28633e;border-radius:10px;margin-top:15px;font-size:14px;overflow-wrap:anywhere}
.sp-control-alert.is-error{background:#fff0ec;border-color:#f3cdc4;color:#a03e32}
.sp-settings-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.sp-settings-card form{display:grid;gap:13px}
.sp-settings-card form label{display:grid;gap:6px;font-size:13px;font-weight:800;color:#4e6d59}
.sp-settings-card .sp-control-primary{justify-self:start}
.sp-export-buttons{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
.sp-export-buttons button{padding:11px 12px;border:1px solid #d7e4d4;border-radius:8px;background:#f8fbf6;color:#28613e;font-weight:800;font-size:13px}
.sp-control-hint,.sp-settings-card .sp-control-hint{font-size:12px;color:#829184;line-height:1.65;margin:14px 0}
.sp-control-result{padding:13px 0;font-size:13px;color:#5f7c66;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.sp-info-line{display:flex;justify-content:space-between;border-bottom:1px solid #e9f0e9;padding:14px 0;font-size:13px;gap:10px}
.sp-info-line span{color:#829184}
.sp-control-footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #e4ece3;margin-top:25px;padding:19px 0;color:#7e9482;font-size:11px}
.sp-account-row{border-bottom:1px solid #e4ece3;padding:13px 0}
.sp-account-row strong,.sp-account-row small{display:block}
.sp-account-row small{font-size:12px;color:#819487}
.sp-account-row .sp-account-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.sp-account-actions button{border:1px solid #d6e5d6;border-radius:7px;background:#f7fbf5;padding:6px 10px;color:#2c6640;font-weight:800;font-size:12px}
.sp-account-actions button.is-disabled{color:#9b483c;background:#fff1ec;border-color:#f5dbd4}
.sp-edit-dialog{border:0;max-width:min(790px,calc(100vw - 30px));width:100%;padding:0;border-radius:17px;box-shadow:0 25px 80px #0c271c50;color:#244331;font-family:'DM Sans',Arial,sans-serif}
.sp-edit-dialog::backdrop{background:#0a281dc4;backdrop-filter:blur(2px)}
.sp-dialog-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e4ece2;padding:21px 26px}
.sp-dialog-head span{font-size:10px;font-weight:800;color:#6aa26e;letter-spacing:1px}
.sp-dialog-head h2{font-size:24px;font-weight:800;margin:3px 0 0}
.sp-dialog-head button{border:0;background:#f2f6ee;border-radius:8px;padding:10px 13px}
.sp-entry-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:24px 26px;max-height:60vh;overflow:auto}
.sp-entry-fields label{display:grid;gap:5px;font-weight:800;color:#56735e;font-size:12px;min-width:0}
.sp-entry-fields label.sp-wide{grid-column:1/-1}
.sp-entry-fields label span{font-size:11px;font-weight:500;color:#849987}
.sp-entry-fields input,.sp-entry-fields select,.sp-entry-fields textarea{font-weight:500;font-size:14px}
.sp-entry-fields input:disabled,.sp-entry-fields select:disabled{background:#ecf1eb;color:#768a79}
.sp-dialog-actions{display:flex;justify-content:end;gap:10px;border-top:1px solid #e2ece2;padding:16px 25px}
.sp-auth-shell{width:min(1240px,calc(100% - 24px));margin:clamp(12px,4vh,50px) auto;min-height:680px;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 24px 65px #21483220;border-radius:22px;overflow:hidden;background:white}
.sp-auth-story{background:radial-gradient(circle at 85% 75%,#31714d 0,#1c5b3e 38%,#0f3b2c 90%);color:white;padding:46px;display:flex;flex-direction:column;min-width:0;position:relative}
.sp-auth-logo{display:flex;gap:12px;align-items:center;color:white;text-decoration:none;font:800 25px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.6px;white-space:nowrap}
.sp-symbol{background:#d9edc6;padding:8px;border-radius:12px;font-size:26px}
.sp-auth-story-body{margin:auto 0}
.sp-auth-tag{display:inline-block;font-size:11px;letter-spacing:1.1px;font-weight:800;color:#b1daa1}
.sp-auth-story h1{font:800 clamp(32px,4vw,49px)/1.19 'Plus Jakarta Sans',sans-serif;color:white;letter-spacing:-1.5px;margin:18px 0}
.sp-auth-story h1 em{color:#d2eaa9;font-style:normal}
.sp-auth-story-body>p{font-size:15px;color:#d5e7d9;line-height:1.8;margin-bottom:28px;max-width:470px}
.sp-auth-feature{font-size:14px;color:#ecf5e9;margin-bottom:14px}
.sp-auth-caption{font-size:12px;color:#b4d7bb}
.sp-auth-form-wrap{display:grid;place-items:center;padding:45px}
.sp-auth-form-box{width:min(420px,100%)}
.sp-auth-mobile-brand{display:none}
.sp-light-tag{color:#3c945b}
.sp-auth-form-box h2{font:800 clamp(27px,3vw,36px)/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:-1px;margin:12px 0;color:#1c4731}
.sp-auth-form-box>p{color:#758779;font-size:14px;margin:0 0 29px;line-height:1.7}
.sp-auth-form{display:grid;gap:9px}
.sp-auth-form>label:not(.sp-auth-remember){font-size:13px;color:#3f624c;font-weight:800;margin:6px 0 0}
.sp-auth-form input:not([type=checkbox]){width:100%;height:50px;border:1px solid #dce7db;border-radius:9px;padding:11px 13px;color:#153c27;background:#f9fcf8;font-size:15px}
.sp-auth-remember{display:flex;align-items:center;gap:9px;color:#617b66;font-size:13px;margin:6px 0 10px}
.sp-auth-remember input{accent-color:#2f7248;width:17px;height:17px}
.sp-auth-submit{width:100%;display:flex;align-items:center;justify-content:space-between;background:#1f663f;color:white;padding:15px 18px;border:0;border-radius:9px;font-weight:800;font-size:15px}
.sp-auth-submit span{font-size:22px}
.sp-auth-help{color:#7a8d7d;font-size:12px;margin:20px 0;line-height:1.6}
.sp-auth-back{color:#276a43;text-decoration:none;font-size:13px;font-weight:800}
.sp-auth-secure{font-size:11px;line-height:1.65;color:#93a196;border-top:1px solid #e4ece5;margin-top:29px;padding-top:19px}
.sp-auth-error{background:#fff0eb;color:#a83c2d;border:1px solid #f5d0c6;border-radius:8px;padding:13px;margin:15px 0;font-size:13px}
@media(max-width:1250px){.sp-control{grid-template-columns:235px minmax(0,1fr)}.sp-control-main{padding:22px 21px}.sp-control-brand b{font-size:20px}.sp-stat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:990px){.sp-control{display:block}.sp-control-side{gap:11px;padding:15px;border-radius:0}.sp-control-brand{margin:0}.sp-control-workspace,.sp-control-side-bottom,.sp-side-caption{display:none}.sp-control-nav{display:flex;overflow:auto;scrollbar-width:thin;gap:6px}.sp-control-nav button{flex:none;width:auto;padding:9px 11px;white-space:nowrap}.sp-control-nav button span{font-size:16px;width:17px}.sp-control-header{align-items:flex-start}.sp-auth-shell{grid-template-columns:1fr 1.1fr}.sp-auth-story{padding:30px}}
@media(max-width:720px){.sp-control{width:100%;border:0;border-radius:0;margin:0;min-height:100vh}.sp-control-main{padding:18px 14px}.sp-control-header{flex-direction:column;align-items:flex-start}.sp-control-user{width:100%;justify-content:flex-end}.sp-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-help-grid,.sp-settings-grid{grid-template-columns:1fr}.sp-control-toolbar h2{font-size:21px}.sp-entry-fields{grid-template-columns:1fr;padding:19px 16px}.sp-dialog-head,.sp-dialog-actions{padding:15px 16px}.sp-control-footer{display:block}.sp-auth-shell{grid-template-columns:1fr;width:min(520px,calc(100% - 20px));min-height:0}.sp-auth-story{padding:20px 25px}.sp-auth-story-body,.sp-auth-caption{display:none}.sp-auth-form-wrap{padding:34px 25px}.sp-control-pagination{align-items:flex-start}.sp-control-pagination>div{gap:5px}.sp-control-pagination button{padding:7px 9px}}
@media(max-width:400px){.sp-stat-grid{grid-template-columns:1fr 1fr;gap:8px}.sp-stat-card{padding:14px 10px}.sp-control-side{padding:10px}.sp-control-nav button{font-size:12px}.sp-control-brand b{font-size:19px}.sp-control-user strong{max-width:140px}}

/* v1.3.1: logo C-Panel dan login tetap satu baris di setiap ukuran layar. */
.sp-control-brand .sp-control-brand-copy{min-width:0;flex:1 1 0;display:flex;flex-direction:column;align-items:flex-start}
.sp-control-brand .sp-wordmark-image,.sp-auth-logo .sp-wordmark-image{display:block!important;max-width:170px!important;width:100%!important;height:auto!important;min-width:0;object-fit:contain;object-position:left center;border:0!important;margin:0!important;padding:0!important}
.sp-control-brand .sp-wordmark-image{max-width:157px!important}
.sp-auth-logo .sp-wordmark-image{max-width:190px!important}

/* SERAPPADI 1.3.2: kredit inovator dan akses buku panduan. */
#serappadi-panel .sp-guide-link { display:inline-block; color:#dff3d6; text-decoration:none; font-size:12px; font-weight:750; padding:9px 0; }
#serappadi-panel .sp-guide-link:hover { text-decoration:underline; }
.sp-auth-shell .sp-auth-guide { color:#256848; font-weight:750; text-decoration:underline; text-underline-offset:3px; }

.sp-auth-shell .sp-auth-innovator { display:block; font-size:12px; font-weight:650; color:#27724a; margin:5px 0 10px; line-height:1.5; }
.sp-auth-shell .sp-auth-innovator strong { font-weight:800; }