
:root{--kp-deep:#123f45;--kp-green:#16745f;--kp-green2:#20866f;--kp-gold:#c99b2e;--kp-ink:#173033;--kp-bg:#f4f8f6;--kp-line:#dce7e2;--kp-white:#fff}
body{background:linear-gradient(180deg,#eef6f2 0,#f8faf9 240px)!important;color:var(--kp-ink)}
.topbar,.app-header{background:linear-gradient(105deg,var(--kp-deep),#286d6b)!important;box-shadow:0 4px 18px rgba(15,61,63,.12)}
.card,.panel,.box{border:1px solid var(--kp-line)!important;border-radius:12px!important;box-shadow:0 5px 18px rgba(20,70,60,.055)}
.btn,button,.button{border-radius:7px!important}
.btn:not(.danger),button:not(.danger){background:var(--kp-green)!important}
.btn:not(.danger):hover,button:not(.danger):hover{background:var(--kp-green2)!important}
h1,h2,h3{letter-spacing:-.015em}
.kp-accent{border-top:4px solid var(--kp-gold)!important}
.kp-import-drop{border:2px dashed #9abdb1;background:#f7fbf9;border-radius:12px;padding:22px;text-align:center}
.kp-step{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:50%;background:var(--kp-green);color:#fff;font-weight:700;margin-right:7px}


/* v3.73 · 1920 Clean UI refresh: compact, light, calm, data-first */
:root{
 --kp-navy:#17364e;--kp-green:#176e62;--kp-green2:#258779;--kp-gold:#c79b2a;
 --kp-blue:#2677a8;--dark:#243746;--bg:#f5f7f9;--muted:#6b7b87;
 --water:#1b7a68;--shops:#276fa1;--sign:#ad7d1f;--danger:#b34a3c
}
html{background:#f5f7f9}
body{font-family:Inter,"Segoe UI",Arial,sans-serif!important;background:#f5f7f9!important;color:#243746!important;font-size:13px!important}
.topbar{height:64px!important;background:#fff!important;color:#17364e!important;border-bottom:1px solid #dce5ea!important;box-shadow:none!important;padding:6px 14px!important}
.topbar .logo{width:50px!important;height:50px!important}
.brand h1{font-size:16px!important;font-weight:600!important;color:#17364e!important}
.brand small{color:#647784!important;opacity:1!important;font-weight:400!important}
.chip{background:#f1f5f7!important;color:#294a5f!important;border:1px solid #dde6eb!important;padding:6px 9px!important;border-radius:7px!important}
.layout{grid-template-columns:225px 1fr!important;min-height:calc(100vh - 64px)!important}
.sidebar{top:64px!important;height:calc(100vh - 64px)!important;background:#fbfcfd!important;border-right:1px solid #dfe7eb!important;padding:7px!important}
.nav-title{color:#82919b!important;letter-spacing:.06em!important;font-size:9px!important}
.nav a,.nav-group>summary{font-weight:500!important;color:#3c5361!important;border-radius:6px!important}
.nav a:hover,.nav-group>summary:hover{background:#eef3f5!important;color:#17364e!important}
.nav a.active{background:#e9f1f4!important;color:#174f70!important;box-shadow:inset 3px 0 #2677a8!important}
.nav a.water.active{background:#eaf4f0!important;color:#176e62!important;box-shadow:inset 3px 0 #176e62!important}
.nav a.shops.active{background:#edf3f8!important;color:#276fa1!important;box-shadow:inset 3px 0 #276fa1!important}
.nav a.signboards.active{background:#f8f3e7!important;color:#8c651c!important;box-shadow:inset 3px 0 #ad7d1f!important}
.main{padding:15px 18px!important}.main:before{opacity:.018!important}
.page-head{margin-bottom:11px!important}.page-head h2{font-size:19px!important;font-weight:600!important;color:#17364e!important}
.card,.panel,.portal-card,.dashboard-period-card,.recipient-card,.reply-box,.profile-grid>div{
 border:1px solid #dfe7eb!important;border-radius:9px!important;box-shadow:none!important;background:#fff!important
}
.card{padding:12px!important}.card .k{color:#71818c!important;font-weight:500!important}.card .v{font-size:21px!important;font-weight:650!important;color:#17364e!important}
.panel{padding:13px!important;margin-bottom:12px!important}
.btn{border-radius:6px!important;padding:7px 10px!important;font-weight:600!important;background:#176e62!important;box-shadow:none!important}
.btn.secondary{background:#36566b!important}.btn.blue{background:#2677a8!important}.btn.amber{background:#ad7d1f!important;color:#fff!important}.btn.danger{background:#b34a3c!important}
.btn.light{background:#fff!important;color:#36566b!important;border:1px solid #cfdce3!important}
.table-wrap{border:1px solid #dfe7eb!important;border-radius:7px!important;box-shadow:none!important}
th{background:#f3f6f8!important;color:#536875!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important}
th,td{padding:7px 8px!important;border-bottom:1px solid #e7edef!important}
tr:hover td{background:#f8fafb!important}
.field label{font-weight:600!important;color:#536875!important}
.field input,.field select,.field textarea,.login-form input{
 border:1px solid #cfdce3!important;border-radius:6px!important;background:#fff!important;box-shadow:none!important
}
.module-pill{border-radius:6px!important;font-weight:600!important}
.footer{background:#17364e!important;margin-left:225px!important}
.login-body,.splash-body{background:#f1f5f7!important}
.login-card,.splash-card{background:#fff!important;border:1px solid #dfe7eb!important;border-radius:14px!important;box-shadow:0 12px 36px #17364e17!important}
.access-shell{max-width:1180px!important}.access-card{border-radius:10px!important;box-shadow:none!important;border:1px solid #dfe7eb!important;background:#fff!important}
.access-card:hover{box-shadow:0 6px 16px #17364e12!important;transform:translateY(-1px)!important}
.access-card.echallan{border-top:3px solid #ad7d1f!important}.access-card.combine{border-top:3px solid #2677a8!important}
.status,.feature-status{border-radius:6px!important}
@media(max-width:900px){.layout{grid-template-columns:1fr!important}.footer{margin-left:0!important}.sidebar{top:0!important;height:auto!important}}
