:root {
  --kw-dark: #073b3d;
  --kw-deep: #062f31;
  --kw-mist: #e4ede8;
  --kw-border: #d7d9d2;
  --kw-soft-text: #b8d3cf;
  --forest-dark: #073b3d;
  --muted: #697776;
  --line: #d7d9d2;
  --shadow: 0 24px 64px rgba(3, 31, 32, 0.2);
  --shadow-soft: 0 9px 24px rgba(3, 31, 32, 0.08);
}

body { background: var(--kw-mist); }

/* Login — Kartu Warga */
.login-view {
  display: block;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  color: #fff;
  background: var(--kw-dark);
}

.login-art {
  position: fixed;
  inset: 0;
  display: block;
  background:
    radial-gradient(circle at 90% 8%, rgba(71, 184, 221, 0.2), transparent 28%),
    radial-gradient(circle at 3% 86%, rgba(241, 199, 109, 0.16), transparent 30%),
    var(--kw-dark);
}
.login-art span { display: none; }

.login-shell {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 430px);
  min-height: min(790px, calc(100dvh - 48px));
  margin: 0 auto;
  flex-direction: column;
}

.login-installed {
  display: none;
  margin: 0 0 8px;
  color: #c8e4cf;
  font-size: 11px;
  font-weight: 800;
}

.login-brand-row {
  min-height: 72px;
  margin-top: 5px;
}
.login-logo,
.login-logo img {
  width: 118px;
  height: 72px;
}
.login-logo img {
  max-height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}
.login-security {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #d9e8e5;
  background: rgba(255, 255, 255, 0.04);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.login-copy { margin: 26px 4px 18px; }
.login-kicker {
  margin-bottom: 7px;
  color: var(--kw-soft-text);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.login-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 8vw, 38px);
  font-weight: 850;
  letter-spacing: -0.05em;
  line-height: 1.02;
}
.login-copy h1 em {
  color: #fff;
  font-family: inherit;
  font-style: normal;
  font-weight: 850;
}
.login-intro {
  max-width: 370px;
  margin-top: 10px;
  color: #b8d3cf;
  font-size: 12px;
  line-height: 1.5;
}

.login-view .login-card {
  position: relative;
  width: 100%;
  min-height: 0;
  padding: 21px 18px 17px;
  overflow: hidden;
  border: 0;
  border-radius: 27px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 18px 45px rgba(1, 27, 28, 0.24);
  backdrop-filter: none;
}
.login-view .login-card::before {
  position: absolute;
  top: 0;
  left: 21px;
  width: 72px;
  height: 5px;
  border-radius: 0 0 6px 6px;
  background: var(--sun);
  content: "";
}
.login-card-head,
.login-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.login-card-head { margin-bottom: 16px; }
.login-card-head > span:first-child {
  color: var(--forest);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.login-card-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #426048;
  font-size: 9px;
  font-weight: 850;
}
.login-live-dot {
  width: 7px;
  height: 7px;
  box-shadow: none;
}
.login-form { gap: 11px; }
.login-field {
  padding: 8px 12px 6px;
  border-radius: 16px;
  border-color: var(--kw-border);
}
.login-field-label { font-size: 10px; }
.login-field input { height: 38px; color: var(--kw-dark); font-weight: 780; }
.login-password-toggle { min-width: 46px; min-height: 44px; font-size: 10px; }
.login-submit {
  min-height: 50px;
  margin-top: 0;
  border-radius: 15px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 900;
}
.login-submit:active { box-shadow: none; transform: scale(0.985); }
.form-error { border-radius: 12px; font-size: 11px; }
.login-card-meta {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}
.login-card-meta strong { color: var(--forest); font-size: 10px; }
.login-actions { margin-top: 12px; }
.login-secondary {
  min-height: 48px;
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px;
}
.privacy-strip {
  margin-top: auto;
  padding: 18px 4px 0;
  color: #c0d5d2;
  font-size: 10px;
}
.privacy-strip svg { color: var(--sun); }

html.is-standalone .login-installed { display: block; }
@media (display-mode: standalone) {
  .login-installed { display: block; }
}

/* Dashboard — portal administrasi Kartu Warga */
.app-shell,
.main { background: var(--kw-mist); }

.topbar {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.09);
  background: var(--kw-dark);
  box-shadow: 0 8px 24px rgba(3, 31, 32, 0.16);
}
.menu-button {
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.menu-button span { background: #fff; }
.mobile-brand {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  background: var(--paper);
}
.topbar-context span { color: #a9c6c2; }
.topbar-context strong { color: #fff; }
.account-chip {
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.account-copy small,
.account-chip > svg { color: #b8d3cf; }
.avatar { border-radius: 11px; color: var(--kw-dark); background: var(--sun); }

.drawer-backdrop { background: rgba(3, 24, 25, 0.56); }
.sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 24px 24px 0;
  color: #fff;
  background: var(--kw-deep);
}
.brand { color: #fff; }
.brand-mark { border-radius: 12px; background: var(--paper); }
.brand strong { color: #fff; }
.brand small { color: #a9c6c2; }
.sidebar .icon-button {
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
.nav-item { border-radius: 13px; color: #b8d3cf; }
.nav-item:hover,
.nav-item.active { color: #fff; background: rgba(128, 180, 136, 0.18); }
.sidebar-note,
body.demo-mode .sidebar-note {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
}
.sidebar-note strong { color: #fff; }
.sidebar-note p { color: #a9c6c2; }

.hero {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 12%, rgba(71, 184, 221, 0.18), transparent 30%),
    radial-gradient(circle at 5% 95%, rgba(241, 199, 109, 0.13), transparent 28%),
    var(--kw-dark);
  box-shadow: 0 18px 42px rgba(3, 31, 32, 0.18);
}
.hero::before {
  width: 78px;
  height: 5px;
  top: 0;
  right: auto;
  bottom: auto;
  left: 30px;
  border-radius: 0 0 6px 6px;
  background: var(--sun);
}
.hero::after { display: none; }
.hero {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.hero-copy { max-width: 780px; }
.hero h1 { font-weight: 850; }
.hero h1 > span { color: #fff; }
.hero h1 em { color: #c8e4cf; font-family: inherit; font-style: normal; font-weight: 850; }
.hero-copy > p { color: #b8d3cf; }
.hero-role-chip {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--kw-dark);
  background: var(--sun);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.hero .eyebrow { padding-right: 76px; }

.section-kicker { color: var(--forest); font-size: 9px; }
.section-heading h2 { font-size: 20px; letter-spacing: -0.025em; }
.quiet-pill { border: 1px solid var(--line); background: rgba(255, 253, 248, 0.72); }

.ipl-hero-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 19px;
  box-shadow: inset 0 5px 0 var(--sun);
}
.ipl-hero-card[data-status="LUNAS"] { border-color: rgba(128, 180, 136, 0.62); }
.ipl-hero-card[data-status="BELUM_BAYAR"] { border-color: rgba(223, 137, 117, 0.66); }
.ipl-hero-card[data-status="MENUNGGU_VERIFIKASI"] { border-color: rgba(241, 199, 109, 0.8); }
.ipl-hero-action,
.primary-button {
  border-radius: 13px;
  box-shadow: none;
}
.primary-button:active { box-shadow: none; transform: scale(0.985); }

.kas-stat,
.kas-chart-wrap,
.status-card,
.service-card,
.roadmap {
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: none;
}
.kas-stat { border-radius: 15px; }
.kas-stat span { font-size: 10px; }
.kas-chart-wrap { border-radius: 18px; }
.status-card { border-radius: 17px; }
.status-card:nth-child(1),
.status-card:nth-child(2),
.status-card:nth-child(3),
.status-card:nth-child(4),
.service-card:nth-child(1),
.service-card:nth-child(2),
.service-card:nth-child(3),
.service-card:nth-child(4),
.service-card:nth-child(5),
.service-card:nth-child(6) { background: var(--paper); }
.card-icon,
.service-icon { border-radius: 11px; background: var(--leaf-soft); }
.status-card:nth-child(2) .card-icon { background: var(--sky-soft); }
.status-card:nth-child(3) .card-icon { background: var(--sun-soft); }
.status-card:nth-child(4) .card-icon { background: var(--coral-soft); }
.card-meta span { font-size: 9px; letter-spacing: 0.06em; }
.card-meta strong { color: var(--kw-dark); font-size: 12px; }
.empty-state { font-size: 9px; }
.service-card { border-radius: 17px; }
.service-copy strong { color: var(--kw-dark); font-size: 12px; }
.service-copy small { font-size: 10px; }
.stage-pill { color: var(--kw-dark); background: var(--leaf-soft); }
.status-card:hover,
.service-card:hover,
.service-card:hover .arrow { transform: none; }
.roadmap { border-radius: 19px; }
.roadmap-number { border-radius: 11px; background: var(--kw-dark); }
.roadmap-head h2 { font-size: 15px; }
.roadmap-intro,
.community-list strong { font-size: 10px; }
.community-list small { font-size: 9px; }
.privacy-note { border-radius: 13px; }

.feature-dialog { border-radius: 22px; background: var(--cream); }
.feature-dialog::backdrop { background: rgba(3, 24, 25, 0.58); }
.dialog-header { background: var(--kw-dark); }
.dialog-header h2 { font-size: 21px; }
.feature-panel,
.data-card,
.empty-panel,
.coordinator-panel,
.payment-card,
.qr-card { border-radius: 16px; }
.feature-panel.tint-leaf,
.feature-panel.tint-sky,
.feature-panel.tint-sun,
.feature-panel.tint-coral { border: 1px solid var(--line); }
.field { font-size: 11px; }
.field input,
.field select,
.field textarea {
  min-height: 44px;
  border-radius: 11px;
  font-size: 14px;
}
.inline-control select { min-height: 44px; font-size: 14px; }
.check-field { font-size: 11px; }
.check-field input { width: 20px; height: 20px; }
.secondary-button,
.danger-button,
.mini-button,
.text-button { min-height: 44px; }
.payment-card { background: var(--kw-dark); }
.loading-layer { background: rgba(228, 237, 232, 0.84); }
.toast { border-radius: 14px; background: var(--kw-deep); }

@media (hover: hover) and (pointer: fine) {
  .login-secondary:hover { background: rgba(255, 255, 255, 0.13); }
  .status-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
  .service-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
  .service-card:hover .arrow { transform: translateX(3px); }
}

@media (max-width: 700px) {
  .hero { border-radius: 20px; }
  .role-card { border-radius: 16px; }
  .status-card,
  .service-card { border-radius: 15px; }
  .feature-dialog { border-radius: 22px 22px 0 0; }
  .field input,
  .field select,
  .field textarea { font-size: 16px; }
}

@media (max-width: 560px) {
  .login-view {
    padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    background: var(--kw-dark);
  }
  .login-shell {
    width: 100%;
    min-height: calc(100dvh - 40px);
  }
  .login-brand-row { min-height: 64px; margin-top: 0; }
  .login-logo,
  .login-logo img { width: 108px; height: 64px; }
  .login-copy { margin: 20px 4px 14px; }
  .login-copy h1 { font-size: clamp(30px, 9vw, 35px); }
  .login-intro { font-size: 11px; }
  .login-view .login-card {
    min-height: 0;
    padding: 20px 16px 16px;
    border: 0;
    border-radius: 24px;
    background: var(--paper);
    box-shadow: 0 16px 38px rgba(1, 27, 28, 0.22);
  }
}

@media (max-height: 720px) {
  .login-shell { min-height: auto; }
  .login-brand-row { min-height: 56px; }
  .login-logo,
  .login-logo img { height: 56px; }
  .login-copy { margin: 12px 4px 10px; }
  .login-copy h1 { font-size: 29px; }
  .login-intro { margin-top: 6px; }
  .login-view .login-card { padding-top: 18px; }
  .privacy-strip { margin-top: 12px; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .status-card,
  .service-card { transform: none !important; }
}

/* Legibility and touch-target pass */
.icon-button { width: 44px; height: 44px; }
.topbar-context span { font-size: 10px; }
.topbar-context strong { font-size: 14px; }
.account-copy strong { font-size: 11px; }
.account-copy small { font-size: 10px; }
.panel-kicker { font-size: 10px; }
.panel-copy { font-size: 12px; }
.data-card p { font-size: 11px; }
.data-meta { font-size: 10px; }
.status-badge { font-size: 10px; }
.empty-panel span { font-size: 11px; }
.coordinator-panel > p { font-size: 11px; }
.warning-note,
.privacy-callout { font-size: 11px; }
.payment-card > span,
.payment-card small { font-size: 10px; }

/* Unified Kas & Keuangan summary card */
.kas-summary {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 8%, rgba(71, 184, 221, 0.18), transparent 32%),
    linear-gradient(145deg, var(--kw-dark), #0b5354);
  box-shadow: 0 18px 38px rgba(3, 31, 32, 0.16);
}
.kas-summary::before {
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 2;
  width: 72px;
  height: 5px;
  border-radius: 0 0 6px 6px;
  background: var(--sun);
  content: "";
}
.kas-stat {
  position: relative;
  z-index: 1;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
}
.kas-balance {
  min-height: 128px;
  grid-column: 1 / -1;
  padding-top: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.kas-balance::after {
  position: absolute;
  top: 22px;
  right: 20px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  content: "D8";
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.kas-in { border-right: 1px solid rgba(255, 255, 255, 0.12); }
.kas-stat span {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #b8d3cf;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kas-in span::before,
.kas-out span::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  content: "";
}
.kas-in span::before { background: var(--leaf); }
.kas-out span::before { background: var(--coral); }
.kas-stat strong {
  display: block;
  margin-top: 9px;
  color: #fff;
  font-size: clamp(18px, 4.5vw, 22px);
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.kas-balance strong {
  max-width: calc(100% - 58px);
  color: #fff;
  font-size: clamp(30px, 7vw, 40px);
  letter-spacing: -0.045em;
}
.kas-in strong { color: #b8dcbc; }
.kas-out strong { color: #f3a390; }

@media (max-width: 360px) {
  .kas-summary { grid-template-columns: 1fr; }
  .kas-balance { grid-column: 1; }
  .kas-in {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* IPL payment state and arrears summary */
.ipl-hero-card[data-status="LUNAS"] {
  border-color: rgba(92, 151, 92, 0.48);
  background: linear-gradient(145deg, #fffdf8 0%, #eef7ed 100%);
  box-shadow: inset 0 6px 0 var(--leaf), 0 12px 28px rgba(67, 111, 67, 0.09);
}
.ipl-hero-card[data-status="LUNAS"] .ipl-hero-pill {
  color: #315f30;
  background: #dcebdc;
}
.ipl-hero-card[data-status="LUNAS"] .ipl-hero-status { color: #174f45; }

.ipl-hero-card[data-status="BELUM_DIBAYAR"],
.ipl-hero-card[data-status="TERLAMBAT"] {
  border-color: rgba(184, 78, 67, 0.5);
  background: linear-gradient(145deg, #fffdf8 0%, #fcedea 100%);
  box-shadow: inset 0 6px 0 var(--coral), 0 12px 28px rgba(142, 55, 46, 0.1);
}
.ipl-hero-card[data-status="BELUM_DIBAYAR"] .ipl-hero-pill,
.ipl-hero-card[data-status="TERLAMBAT"] .ipl-hero-pill {
  color: #843b34;
  background: #f8ddd7;
}
.ipl-hero-card[data-status="BELUM_DIBAYAR"] .ipl-hero-status,
.ipl-hero-card[data-status="TERLAMBAT"] .ipl-hero-status { color: #9a3a2c; }

.ipl-hero-card[data-status="MENUNGGU_VERIFIKASI"] {
  border-color: rgba(202, 155, 54, 0.55);
  background: linear-gradient(145deg, #fffdf8 0%, #fff5d9 100%);
  box-shadow: inset 0 6px 0 var(--sun), 0 12px 28px rgba(128, 91, 20, 0.09);
}
.ipl-hero-card[data-status="MENUNGGU_VERIFIKASI"] .ipl-hero-pill {
  color: #6e5017;
  background: #fff0bd;
}
.ipl-hero-card[data-status="MENUNGGU_VERIFIKASI"] .ipl-hero-status { color: #79591d; }

.ipl-hero-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(105, 119, 118, 0.18);
}
.ipl-arrears {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.25;
}
.ipl-arrears::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  content: "";
}
.ipl-arrears[data-state="clear"] { color: #315f30; background: #dcebdc; }
.ipl-arrears[data-state="clear"]::before { background: #5c975c; }
.ipl-arrears[data-state="overdue"] { color: #843b34; background: #f8ddd7; }
.ipl-arrears[data-state="overdue"]::before { background: var(--danger); }
.ipl-arrears[data-state="unknown"] { color: var(--muted); background: #ecece7; }
.ipl-arrears[data-state="unknown"]::before { background: #9aa5a3; }
.ipl-hero-footer .ipl-hero-action {
  min-height: 36px;
  margin-top: 0;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .ipl-hero-footer { align-items: stretch; flex-direction: column; }
  .ipl-arrears { width: fit-content; }
  .ipl-hero-footer .ipl-hero-action { width: 100%; }
}

/* Family profile and private digital KK */
.family-profile-section,
.kk-document-section {
  border-color: rgba(21, 91, 93, 0.14);
  background: linear-gradient(145deg, #f6fbf6, #eef7f2);
}
.family-profile-section > h3,
.kk-document-section > h3 { color: var(--kw-dark); }
.family-member-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.family-member-editor {
  overflow: hidden;
  border: 1px solid rgba(21, 91, 93, 0.14);
  border-radius: 16px;
  background: var(--paper);
}
.family-member-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(128, 180, 136, 0.12);
}
.family-member-header > div { display: grid; gap: 3px; }
.family-member-header strong { color: var(--kw-dark); font-size: 13px; }
.member-relation {
  color: var(--forest);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.family-member-fields { padding: 15px; }
.family-remove {
  min-height: 36px;
  padding: 7px 11px;
  color: #a13f34;
}
.family-remove:disabled { opacity: 0.42; cursor: not-allowed; }
.family-actions {
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.kk-document-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 12px;
  padding: 15px;
  border: 1px dashed rgba(21, 91, 93, 0.26);
  border-radius: 15px;
  background: rgba(255, 253, 248, 0.8);
}
.kk-document-card.has-document {
  border-style: solid;
  border-color: rgba(128, 180, 136, 0.55);
  background: #f7fbf4;
}
.kk-document-copy { display: grid; min-width: 0; gap: 4px; }
.kk-document-copy span {
  color: var(--forest);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.kk-document-copy strong {
  overflow: hidden;
  color: var(--kw-dark);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kk-document-copy small { color: var(--muted); font-size: 10px; }
.kk-document-card .secondary-button {
  display: inline-flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.kk-upload-form { margin-top: 0; }
.kk-upload-form input[type="file"] {
  padding: 8px;
  background: var(--paper);
}
.family-summary-list .data-card { border-left: 4px solid var(--leaf); }

@media (max-width: 560px) {
  .family-actions,
  .kk-document-card { align-items: stretch; flex-direction: column; }
  .family-actions > *,
  .kk-document-card .secondary-button { width: 100%; }
  .kk-document-copy strong { white-space: normal; }
}

/* Finance content lives in its own drawer menu, not on the dashboard. */
.finance-menu-section { margin-top: 0; }
.finance-menu-section .section-heading { margin-bottom: 14px; }
.kas-transparency { margin-top: 18px; }
.kas-transparency-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.kas-transparency-head > div { display: grid; gap: 4px; }
.kas-transparency-head span {
  color: var(--forest);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.kas-transparency-head h3 {
  margin: 0;
  color: var(--kw-dark);
  font-size: 18px;
  letter-spacing: -0.025em;
}
.kas-transparency-head p {
  max-width: 210px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  text-align: right;
}
.kas-transaction-list {
  overflow: hidden;
  border: 1px solid rgba(21, 91, 93, 0.14);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.kas-transaction {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.kas-transaction:last-child { border-bottom: 0; }
.kas-transaction-copy { display: grid; min-width: 0; gap: 3px; }
.kas-transaction-category {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  color: #315f30;
  background: #dcebdc;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.kas-transaction.pengeluaran .kas-transaction-category { color: #843b34; background: #f8ddd7; }
.kas-transaction-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kas-transaction-copy small { color: var(--muted); font-size: 10px; }
.kas-transaction-amount {
  flex: 0 0 auto;
  color: #3f6b1f;
  font-size: 13px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.kas-transaction.pengeluaran .kas-transaction-amount { color: #b6493d; }
@media (max-width: 520px) {
  .kas-transparency-head { align-items: start; flex-direction: column; gap: 5px; }
  .kas-transparency-head p { max-width: none; text-align: left; }
  .kas-transaction { align-items: flex-start; flex-direction: column; gap: 9px; }
  .kas-transaction-copy strong { white-space: normal; }
  .kas-transaction-amount { align-self: flex-end; }
}

/* Account identity lives at the lower-left of the drawer; it is not a submenu trigger. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.drawer-footer {
  display: grid;
  gap: 12px;
  margin-top: auto;
}
.drawer-footer .sidebar-note { margin-top: 0; }
.drawer-account {
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.drawer-account:active { background: rgba(255, 255, 255, 0.14); }
.drawer-account .avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.drawer-account .drawer-account-copy strong { color: #fff; }
.drawer-account .drawer-account-copy small { color: rgba(255, 255, 255, 0.66); }
.drawer-account .drawer-account-chevron { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.6); }

/* Full-screen submenu pages on mobile and tablet */
@keyframes submenu-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .feature-dialog {
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .feature-dialog[open] {
    animation: submenu-page-in 180ms var(--ease-out);
  }

  .feature-dialog::backdrop {
    background: var(--cream);
    backdrop-filter: none;
  }

  .dialog-shell {
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .dialog-header {
    min-height: calc(76px + env(safe-area-inset-top));
    flex: 0 0 auto;
    padding: calc(16px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 16px max(18px, env(safe-area-inset-left));
    border-radius: 0;
  }

  .dialog-body {
    min-height: 0;
    flex: 1 1 auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
}