:root {
  --pnx-green: #0aa83f;
  --pnx-green-600: #0a8e37;
  --pnx-green-50: #e8f7ee;
  --pnx-white: #ffffff;
  --pnx-text: #0f172a;
}

html, body {
  height: 100%;
}

body {
  background: #f6f8fb;
  color: var(--pnx-text);
}

.brand-gradient {
  background: linear-gradient(135deg, var(--pnx-green) 0%, #46d87b 100%);
}

.pnx-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(16,24,40,0.06);
}

/* Bills: brand tabs */
.pnx-tabs.nav-tabs {
  border-bottom: 2px solid var(--pnx-green-50);
}
.pnx-tabs .nav-link {
  border: none;
  color: #fff;
  background: var(--pnx-green);
  margin-right: 6px;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 8px rgba(16,24,40,0.06);
  padding: 10px 14px;
  font-weight: 600;
}
.pnx-tabs .nav-link.active {
  background: #fff;
  color: var(--pnx-green);
  box-shadow: inset 0 -3px 0 var(--pnx-green), 0 4px 12px rgba(16,24,40,0.12);
}
.pnx-tabs .nav-link:hover { filter: brightness(1.1); }

/* Larger icons in tabs */
.pnx-tabs .nav-link i {
  font-size: 1.1rem;
  vertical-align: -1px;
}

/* Bills: section accents */
.bill-section {
  border: 1px solid var(--pnx-green-50);
  border-radius: 14px;
  padding: 12px;
  background: var(--pnx-white);
  box-shadow: 0 4px 14px rgba(16,24,40,0.06);
}
.bill-section .form-label { color: var(--pnx-text); }
.bill-section .form-text { color: var(--pnx-green-600); }

/* Bills: inputs focus */
.bill-section .form-control:focus,
.bill-section .form-select:focus {
  border-color: var(--pnx-green);
  box-shadow: 0 0 0 0.2rem rgba(10,168,63,0.15);
}

/* Bills: title accent */
.bill-title {
  color: var(--pnx-green);
}

/* Green buttons refinement */
.btn-success {
  background-color: var(--pnx-green);
  border-color: var(--pnx-green);
}
.btn-success:hover { background-color: var(--pnx-green-600); border-color: var(--pnx-green-600); }

.footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--pnx-white);
  border-top: 1px solid var(--pnx-green-50);
  z-index: 1030;
}
.footer-nav a {
  color: var(--pnx-green);
  text-decoration: none;
  padding: 10px 0;
}
.footer-nav a.active {
  color: var(--pnx-green);
}

.balance-badge {
  background: var(--pnx-green);
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
}

.popup-ad img {
  max-width: 100%;
  border-radius: 12px;
}

.qr-box {
  height: 180px;
  background: var(--pnx-green-50);
  border: 1px dashed var(--pnx-green);
  border-radius: 12px;
}

/* Dashboard enhancements */
.pill-tabs { display: flex; gap: 8px; }
.pill-tabs button {
  border: none; background: #fff; color: var(--pnx-text);
  padding: 8px 14px; border-radius: 20px; box-shadow: 0 2px 8px rgba(16,24,40,0.06);
}
.pill-tabs button.active { background: var(--pnx-green); color: #fff; }

.ad-slider { display: flex; width: 100%; transition: transform 0.5s ease; }
.ad-slide { min-width: 100%; }
.ad-slide img { width: 100%; height: 140px; object-fit: cover; display: block; }
.ad-dots { display: flex; justify-content: center; gap: 6px; }
.ad-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; }
.ad-dots .dot.active { background: var(--pnx-green); }

.quick-actions .qa-item {
  background: #fff; border-radius: 16px; padding: 12px;
  box-shadow: 0 4px 14px rgba(16,24,40,0.06);
  color: var(--pnx-green);
}

/* Quick Access labels in brand green */
.quick-actions .small { color: var(--pnx-green); }
/* Ensure link color doesn’t override labels inside quick actions */
.quick-actions a { color: var(--pnx-green); }
.quick-actions a:hover { color: var(--pnx-green); }
.quick-actions a .small { color: var(--pnx-green); }

.txn-item { padding: 12px 0; }
.txn-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.tiny { font-size: 11px; }

/* Auth mobile & lock screen */
.auth-mobile { max-width: 520px; margin: 0 auto; }
.lock-screen .passcode-dots .dot {
  width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; display:inline-block;
}
.lock-screen .passcode-dots .dot.filled { background: var(--pnx-green); }
.keypad-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.key-btn {
  border: none; background: #fff; border-radius: 14px; padding: 16px; font-size: 1.25rem;
  box-shadow: 0 4px 14px rgba(16,24,40,0.06); color: var(--pnx-text);
}
.key-btn:active { transform: scale(0.98); }

/* Profile icon link in dashboard header */
.profile-link {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pnx-green);
  color: var(--pnx-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(16,24,40,0.06);
}
.profile-link:hover { color: var(--pnx-white); filter: brightness(1.05); }