:root {
  --simpel-ink: #172033;
  --simpel-muted: #647084;
  --simpel-line: #d9e1ea;
  --simpel-surface: #ffffff;
  --simpel-page: #f3f6f8;
  --simpel-blue: #174ea6;
  --simpel-green: #13795b;
  --simpel-gold: #c5811f;
  --simpel-red: #b42318;
}

body.simpel-app {
  color: var(--simpel-ink);
  background:
    linear-gradient(180deg, rgba(23, 78, 166, .06), transparent 260px),
    var(--simpel-page);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

.simpel-app .sidebar {
  background: #172033;
  border-right: 0 !important;
  box-shadow: 14px 0 35px rgba(23, 32, 51, .16);
}

.simpel-app .sidebar-header {
  min-height: 86px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.simpel-app .sidebar-nav .nav-title {
  color: rgba(255, 255, 255, .48);
  font-size: .72rem;
  letter-spacing: 0;
  margin-top: 12px;
}

.simpel-app .sidebar-nav .nav-link {
  min-height: 42px;
  color: rgba(255, 255, 255, .78);
  border-radius: 8px;
  margin: 4px 10px;
  font-weight: 600;
}

.simpel-app .sidebar-nav .nav-link:hover,
.simpel-app .sidebar-nav .nav-link.active {
  color: #fff;
  background: rgba(19, 121, 91, .26);
}

.simpel-app .nav-group.show > .nav-link {
  color: #fff;
  background: rgba(197, 129, 31, .18);
}

.simpel-topbar {
  min-height: 68px;
  background: rgba(255, 255, 255, .88);
  border: 0;
  border-bottom: 1px solid var(--simpel-line);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(23, 32, 51, .06);
}

.simpel-icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--simpel-line);
  border-radius: 8px;
  background: #fff;
  color: var(--simpel-ink);
}

.simpel-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--simpel-line);
  border-radius: 8px;
  background: #fff;
}

.simpel-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #e8f1ff;
  color: var(--simpel-blue);
  font-weight: 800;
}

.simpel-user-name {
  display: block;
  font-weight: 700;
  line-height: 1.05;
}

.simpel-user-chip small {
  display: block;
  color: var(--simpel-muted);
  font-size: .72rem;
  line-height: 1.1;
}

.simpel-logout {
  border-radius: 8px;
  font-weight: 700;
}

.simpel-page {
  padding-bottom: 36px;
}

.simpel-page .card,
.simpel-page .modal-content,
.simpel-page .toast {
  border: 1px solid var(--simpel-line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(23, 32, 51, .08);
}

.simpel-page .card-header {
  background: #fff;
  border-bottom: 1px solid var(--simpel-line);
  font-weight: 800;
}

.simpel-page .table {
  --cui-table-bg: transparent;
  margin-bottom: 0;
}

.simpel-page .table thead th {
  color: var(--simpel-muted);
  background: #f7f9fb;
  border-bottom: 1px solid var(--simpel-line);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.simpel-page .table tbody td {
  border-color: #edf1f5;
  vertical-align: middle;
}

.simpel-page .form-control,
.simpel-page .form-select {
  border-radius: 8px;
  border-color: #cfd8e3;
}

.simpel-page .form-control:focus,
.simpel-page .form-select:focus {
  border-color: var(--simpel-blue);
  box-shadow: 0 0 0 .2rem rgba(23, 78, 166, .12);
}

.simpel-page .btn {
  border-radius: 8px;
  font-weight: 700;
}

.simpel-page .btn-primary,
.simpel-page .btn-info {
  background: var(--simpel-blue);
  border-color: var(--simpel-blue);
}

.simpel-page .btn-success {
  background: var(--simpel-green);
  border-color: var(--simpel-green);
}

.simpel-page .btn-warning {
  background: var(--simpel-gold);
  border-color: var(--simpel-gold);
  color: #fff;
}

.simpel-page .badge {
  border-radius: 6px;
  font-weight: 800;
}

.footer {
  color: var(--simpel-muted);
  background: transparent;
  border-top: 1px solid var(--simpel-line);
}

body.index-page {
  color: var(--simpel-ink);
}

body.simpel-auth {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .78)),
    url("/images/background.png") center/cover no-repeat fixed;
  color: var(--simpel-ink);
}

.simpel-auth .card,
.simpel-auth .login-card,
.simpel-auth .register-card,
.simpel-auth .modal-content {
  border: 1px solid var(--simpel-line);
  border-radius: 8px;
  box-shadow: 0 22px 48px rgba(23, 32, 51, .12);
}

.simpel-auth .form-control,
.simpel-auth .form-select {
  border-radius: 8px;
  border-color: #cfd8e3;
}

.simpel-auth .btn {
  border-radius: 8px;
  font-weight: 800;
}

.simpel-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 32px 16px;
}

.simpel-auth-wrap {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.simpel-auth-card {
  overflow: hidden;
  border: 1px solid var(--simpel-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(23, 32, 51, .14);
}

.simpel-auth-form {
  padding: clamp(26px, 4vw, 44px);
}

.simpel-auth-aside {
  min-height: 100%;
  padding: clamp(26px, 4vw, 44px);
  color: #fff;
  background:
    linear-gradient(145deg, rgba(23, 78, 166, .96), rgba(19, 121, 91, .92)),
    url("/images/papua.jpeg") center/cover no-repeat;
}

.simpel-auth-logo {
  max-width: 230px;
  height: auto;
}

.simpel-auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe7f6;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--simpel-blue);
  padding: 7px 12px;
  font-size: .8rem;
  font-weight: 800;
  margin-bottom: 14px;
}

.simpel-auth-title {
  color: var(--simpel-ink);
  font-weight: 850;
  letter-spacing: 0;
}

.simpel-auth-copy {
  color: var(--simpel-muted);
  line-height: 1.7;
}

.simpel-auth-field .input-group-text {
  border-color: #cfd8e3;
  background: #f8fbff;
  color: var(--simpel-blue);
}

.simpel-auth-field .form-control {
  min-height: 46px;
}

.simpel-auth-aside h2 {
  color: #fff;
  font-weight: 850;
}

.simpel-auth-aside p,
.simpel-auth-aside li {
  color: rgba(255, 255, 255, .86);
}

.simpel-auth-aside ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}

.simpel-auth-aside li {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.simpel-auth-aside li i {
  color: #bfdbfe;
  margin-top: 2px;
}

.simpel-auth-help {
  border: 1px solid #dbe7f6;
  border-radius: 12px;
  background: #f8fbff;
  padding: 14px;
  color: var(--simpel-muted);
}

.simpel-icon-orb {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #eef4ff;
  color: var(--simpel-blue);
  font-size: 2rem;
}

.simpel-service-shell {
  padding: 28px;
}

.simpel-service-hero {
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 60%, #eef5ff 100%);
  padding: 24px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
}

.simpel-service-card {
  border: 1px solid #e4ebf5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .05);
}

.simpel-service-card .card-header {
  border-bottom: 1px solid #edf2f7;
  background: #fff;
}

.simpel-upload-card {
  border: 1px solid #e5edf7;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
}

.simpel-upload-card .doc-code {
  display: inline-flex;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--simpel-blue);
  padding: 5px 10px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.simpel-verify-result {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 32px 16px;
}

.simpel-verify-panel {
  width: min(880px, 100%);
  margin: 0 auto;
  border: 1px solid var(--simpel-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(23, 32, 51, .14);
  overflow: hidden;
}

.simpel-verify-banner {
  padding: 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--simpel-green), var(--simpel-blue));
}

.simpel-verify-banner.invalid {
  background: linear-gradient(135deg, var(--simpel-red), #7f1d1d);
}

.simpel-verify-body {
  padding: 28px;
}

@media (max-width: 768px) {
  .simpel-auth-shell {
    padding: 18px 12px;
  }

  .simpel-auth-form,
  .simpel-auth-aside,
  .simpel-verify-body,
  .simpel-verify-banner {
    padding: 22px;
  }

  .simpel-service-shell {
    padding: 18px 12px;
  }
}

.index-page #header.header {
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(217, 225, 234, .9);
  backdrop-filter: blur(10px);
}

.index-page .sitename {
  color: var(--simpel-ink) !important;
}

.index-page .navmenu a,
.index-page .navmenu a:focus {
  color: var(--simpel-ink);
  font-weight: 700;
}

.index-page .navmenu .active,
.index-page .navmenu a:hover {
  color: var(--simpel-green);
}

.index-page .btn-getstarted,
.index-page .btn-get-started {
  border-radius: 8px !important;
  background: var(--simpel-green) !important;
  box-shadow: 0 12px 24px rgba(19, 121, 91, .22);
  font-weight: 800;
}

.index-page .hero {
  min-height: 88vh;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .78) 52%, rgba(255, 255, 255, .36) 100%),
    url("/images/papua.jpeg") center/cover no-repeat;
}

.index-page .hero h1 {
  color: var(--simpel-ink);
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  letter-spacing: 0;
}

.index-page .hero p {
  max-width: 680px;
  color: #334155;
  font-size: 1.05rem;
  line-height: 1.75;
}

.index-page .hero-img img {
  max-width: min(460px, 90vw);
  filter: drop-shadow(0 24px 34px rgba(23, 32, 51, .18));
}

.index-page .about .content,
.index-page .values .card,
.index-page .stats .stats-item,
.index-page .contact .info-item,
.index-page .chat-box {
  border: 1px solid var(--simpel-line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(23, 32, 51, .08);
}

.index-page .section-title h2 {
  color: var(--simpel-green);
  letter-spacing: 0;
}

.index-page .section-title p,
.index-page .about .content h2 {
  color: var(--simpel-ink);
}

.index-page #liveChatBtn,
.index-page .chat-header {
  background: var(--simpel-blue) !important;
  box-shadow: 0 12px 26px rgba(23, 78, 166, .26);
}

.index-page #liveChatBtn {
  border-radius: 8px;
}

@media (max-width: 768px) {
  .simpel-topbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .simpel-user-chip small {
    display: none;
  }

  .simpel-page {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .index-page .hero {
    min-height: 92vh;
    padding-top: 112px;
  }
}