/* ================================================================
   SEATAP APPS v2 — Seruma-Inspired Design System
   Warm palette · Mobile-first · 480px max
   ================================================================ */

/* ── DESIGN TOKENS ── */
:root {
  --bg:          #F5F0E8;
  --bg-alt:      #EDE8DE;
  --bg-card:     #E8E2D5;
  --surface:     #FFFFFF;
  --border:      #E2D9CE;
  --border-hair: #EDE8E2;

  /* Primary: Dark Forest Green */
  --primary:       #243D16;
  --primary-mid:   #3A5C28;
  --primary-light: #EBF0E6;
  --primary-hero:  linear-gradient(145deg, #2A3F1E 0%, #1A2912 100%);

  /* Gold */
  --gold:        #C9A24B;
  --gold-soft:   #F5EDD6;
  --gold-border: #E3CD97;
  --gold-dark:   #9A7535;
  --gold-shadow: rgba(201,162,75,0.40);

  /* Semantic */
  --green:      #43A047;
  --green-soft: #EBF5EA;
  --green-text: #2E7D32;
  --red:        #E53935;
  --red-soft:   #FEECEB;
  --red-text:   #B71C1C;
  --blue:       #1565C0;
  --blue-soft:  #E3F2FD;

  /* Text */
  --text:        #1A1A1A;
  --text-muted:  #6B5E4E;
  --text-faint:  #9E8E7E;
  --text-faint2: #B5A898;

  /* Shortcuts palette */
  --sc-keuangan:   #C9A24B;
  --sc-kalender:   #2E7D8C;
  --sc-maintenance:#7D5A1E;
  --sc-berdua:     #AD1457;
  --sc-jurnal:     #C2547A;
  --sc-link:       #1A6B6B;
  --sc-laporan:    #1A3A7A;
  --sc-lainnya:    #2A5C3A;

  /* Shadow */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  /* Radius */
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-pill: 100px;

  /* Layout */
  --nav-h:    68px;
  --header-h: 60px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button  { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
a       { color: inherit; text-decoration: none; }
img     { display: block; max-width: 100%; }
ul, ol  { list-style: none; }

/* ── APP SHELL ── */
#app {
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
}

/* ── PAGE CONTENT ── */
#page-content {
  min-height: calc(100vh - var(--header-h) - var(--nav-h));
  padding-bottom: calc(var(--nav-h) + 24px);
  overflow-x: hidden;
}

/* ── TOP HEADER ── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  background: rgba(245,240,232,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-hair);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.brand-logo-box {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.brand-logo-box svg { width: 20px; height: 20px; }

.header-names {
  flex: 1;
  min-width: 0;
}

.header-app-name {
  font: 700 15px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  line-height: 1.2;
}

.header-family-name {
  font: 500 11.5px 'Inter', sans-serif;
  color: var(--text-faint);
  line-height: 1.2;
}

.header-title-single {
  flex: 1;
  font: 700 17px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.header-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 18px;
  transition: background 0.15s;
  position: relative;
}
.header-icon-btn:active { background: var(--bg-alt); }

.notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--bg);
}

.header-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 20px;
}

/* ── BOTTOM NAVIGATION ── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: var(--nav-h);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 30;
  padding: 0 4px;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 6px 2px 4px;
  color: var(--text-faint);
  font: 600 10px 'Inter', sans-serif;
  letter-spacing: 0.2px;
  transition: color 0.15s;
  position: relative;
}

.nav-item__icon {
  font-size: 22px;
  line-height: 1;
  position: relative;
}

.nav-item__icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item.active { color: var(--gold); }

.nav-item.active .nav-logo-icon rect { fill: var(--gold); }

/* Active indicator line */
.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--gold);
}

/* ── FLOATING ACTION BUTTON & SPEED DIAL ── */
.fab-container {
  position: fixed;
  bottom: calc(var(--nav-h) + 12px);
  right: 18px;
  z-index: 40;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
}

.fab-main {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--gold);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 400;
  color: white;
  box-shadow: 0 6px 20px var(--gold-shadow);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
  line-height: 1;
}

.fab-main.open {
  transform: rotate(45deg);
  background: #A07828;
}

.fab-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  opacity: 0;
  transform: translateY(15px) scale(0.9);
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.fab-menu.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.fab-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.fab-menu-label {
  background: #201E1B;
  color: #FFFFFF;
  padding: 8px 14px;
  border-radius: 100px;
  font: 700 13px 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.fab-menu-btn {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--gold-dark);
  transition: transform 0.12s;
}

.fab-menu-item:active .fab-menu-btn {
  transform: scale(0.92);
}

/* Backdrop untuk Speed Dial */
.fab-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 35;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.fab-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* ── MODAL INPUT MODES (Scan, Chat AI, Manual, Rutin) ── */
.input-mode-tabs {
  display: flex;
  background: var(--bg-alt);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
  margin-bottom: 14px;
}

.input-mode-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 600 12px 'Plus Jakarta Sans', sans-serif;
  padding: 9px 6px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.input-mode-tab.active {
  background: #FFFFFF;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Groceries announcement callout */
.scan-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FAF0DC;
  border-radius: 12px;
  padding: 10px 12px;
  font: 500 12px/1.4 'Inter', sans-serif;
  color: #614A1F;
  margin-bottom: 14px;
}

.scan-callout-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-mid);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: none;
}

/* Scan Receipt Dropzone */
.scan-dropzone {
  border: 2px dashed #D6CBB8;
  border-radius: var(--r-lg);
  background: rgba(237, 232, 222, 0.4);
  padding: 44px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.scan-dropzone:hover, .scan-dropzone:active {
  background: rgba(237, 232, 222, 0.8);
  border-color: var(--gold);
}

.scan-dropzone-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: var(--shadow-xs);
  color: var(--text-muted);
}

.scan-dropzone-text {
  font: 600 14px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
}

/* Chat AI Box */
.ai-chat-box {
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-chat-messages {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-msg {
  padding: 10px 14px;
  border-radius: 14px;
  font: 500 13px/1.5 'Inter', sans-serif;
  max-width: 85%;
}

.ai-msg--bot {
  background: var(--bg-alt);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.ai-msg--user {
  background: var(--text);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.ai-input-row {
  display: flex;
  gap: 8px;
}

/* ── HERO CARD ── */
.hero-card {
  background: var(--primary-hero);
  border-radius: var(--r-xl);
  padding: 18px 20px 16px;
  color: white;
  position: relative;
  overflow: hidden;
  margin: 0 16px;
}

.hero-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}

.hero-card::after {
  content: '';
  position: absolute;
  bottom: -50px; left: -20px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
}

.hero-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}

.hero-card__brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-brand-name {
  font: 700 16px 'Plus Jakarta Sans', sans-serif;
  color: rgba(255,255,255,0.95);
}

.hero-card__time {
  text-align: right;
}

.hero-time-text {
  font: 700 22px 'Plus Jakarta Sans', sans-serif;
  color: white;
  line-height: 1;
}

.hero-date-text {
  font: 500 11px 'Inter', sans-serif;
  color: rgba(255,255,255,0.65);
  margin-top: 2px;
}

.hero-greeting {
  font: 500 13px 'Inter', sans-serif;
  color: rgba(255,255,255,0.80);
  margin-bottom: 14px;
}

/* Weather row */
.hero-weather {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.hero-weather__slot {
  flex: 1;
  text-align: center;
}

.hero-weather__label {
  font: 600 10px 'Inter', sans-serif;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}

.hero-weather__icon {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 3px;
}

.hero-weather__temp {
  font: 600 12px 'Plus Jakarta Sans', sans-serif;
  color: rgba(255,255,255,0.90);
}

.hero-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 500 11px 'Inter', sans-serif;
  color: rgba(255,255,255,0.50);
}

/* ── SHORTCUT GRID ── */
.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 8px;
  padding: 0 16px;
}

.shortcut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.shortcut-item:active .shortcut-icon { transform: scale(0.92); }

.shortcut-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  transition: transform 0.15s;
  box-shadow: var(--shadow-xs);
}

.shortcut-label {
  font: 600 11px 'Inter', sans-serif;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
  max-width: 64px;
}

/* Shortcut colors */
.sc-keuangan   { background: #F5EDD6; }
.sc-kalender   { background: #E0F2F1; }
.sc-maintenance{ background: #FFF3E0; }
.sc-berdua     { background: #FCE4EC; }
.sc-jurnal     { background: #FCE4EC; }
.sc-link       { background: #E0F2F1; }
.sc-laporan    { background: #E3F2FD; }
.sc-lainnya    { background: #EBF5EA; }

/* ── SECTION HEADER ── */
.section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin-bottom: 10px;
}

.section-hdr__title {
  font: 700 16px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
}

.section-hdr__action {
  background: none;
  border: none;
  font: 600 12.5px 'Inter', sans-serif;
  color: var(--gold-dark);
  padding: 4px;
  cursor: pointer;
}

/* ── AGENDA HARI INI ── */
.agenda-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  margin: 0 16px;
}

.agenda-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.agenda-card__title {
  font: 700 16px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
}

.agenda-card__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agenda-counter-badge {
  font: 600 12px 'Inter', sans-serif;
  color: var(--text-muted);
  background: var(--bg-alt);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

.agenda-add-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--gold-soft);
  border: none;
  color: var(--gold-dark);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.agenda-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border-hair);
  cursor: pointer;
}

.agenda-item:first-of-type { border-top: none; }

.agenda-checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 7px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  background: white;
}

.agenda-checkbox.checked {
  background: var(--green);
  border-color: var(--green);
  color: white;
  font-size: 12px;
}

.agenda-item__body { flex: 1; min-width: 0; }

.agenda-item__name {
  font: 600 14px 'Inter', sans-serif;
  color: var(--text);
}

.agenda-item__name.done {
  text-decoration: line-through;
  color: var(--text-faint);
}

.agenda-item__cat {
  font: 500 11.5px 'Inter', sans-serif;
  color: var(--text-faint);
  margin-top: 2px;
}

.agenda-empty {
  text-align: center;
  padding: 16px 0;
  font: 500 13.5px 'Inter', sans-serif;
  color: var(--text-faint);
}

/* ── SWITCH TAB (Pill) ── */
.switch-tab-wrap {
  display: flex;
  background: var(--bg-alt);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 0;
}

.switch-tab-btn {
  flex: 1;
  font: 700 13px 'Plus Jakarta Sans', sans-serif;
  padding: 10px 12px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  white-space: nowrap;
}

.switch-tab-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

/* ── WALLET TABS ── */
.wallet-tabs-wrap {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 16px 2px;
}

.wallet-tabs-wrap::-webkit-scrollbar { display: none; }

.wallet-tab-btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 12.5px 'Inter', sans-serif;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.wallet-tab-btn.active {
  background: var(--text);
  border-color: var(--text);
  color: white;
}

.wallet-tab-icon { font-size: 14px; }

/* ── KEKAYAAN BERSIH CARD (Dark Green) ── */
.kekayaan-card {
  background: var(--primary-hero);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  color: white;
  position: relative;
  overflow: hidden;
}

.kekayaan-card::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}

.kekayaan-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.kekayaan-card__label {
  font: 500 11.5px 'Inter', sans-serif;
  opacity: 0.75;
}

.kekayaan-card__eye {
  background: rgba(255,255,255,0.15);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  font-size: 14px;
}

.kekayaan-card__amount {
  font: 800 30px 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.kekayaan-card__sub {
  font: 500 11.5px 'Inter', sans-serif;
  opacity: 0.60;
  margin-bottom: 16px;
}

.kekayaan-card__btn {
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 10px;
  padding: 11px;
  text-align: center;
  font: 600 13px 'Inter', sans-serif;
  color: white;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}

.kekayaan-card__btn:active { background: rgba(255,255,255,0.20); }

/* ── SHORTCUT ROW (in Keuangan) ── */
.shortcut-row {
  display: flex;
  gap: 10px;
  padding: 0 16px;
}

.shortcut-row-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 8px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.15s;
}

.shortcut-row-item:active { box-shadow: none; }

.shortcut-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.shortcut-row-label {
  font: 600 11px 'Inter', sans-serif;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}

/* ── SALDO AKTIF CARD ── */
.saldo-card {
  background: var(--primary-light);
  border: 1px solid #C8D8C0;
  border-radius: var(--r-lg);
  padding: 16px 18px;
}

.saldo-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.saldo-card__label {
  font: 600 12.5px 'Inter', sans-serif;
  color: var(--primary-mid);
}

.saldo-card__eye {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--primary-mid);
}

.saldo-card__amount {
  font: 800 28px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.saldo-card__note {
  font: 500 11.5px 'Inter', sans-serif;
  color: var(--text-faint);
  line-height: 1.4;
}

/* ── INCOME / EXPENSE CHIPS ── */
.income-expense-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ie-chip {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
}

.ie-chip__label {
  font: 500 11.5px 'Inter', sans-serif;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.ie-chip__amount {
  font: 700 16px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
}

.ie-chip__amount--green { color: var(--green); }
.ie-chip__amount--red   { color: var(--red); }

/* ── TRANSACTION TIMELINE ── */
.tx-timeline { position: relative; }

.tx-group { margin-bottom: 12px; }

.tx-group__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
}

.tx-group__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.tx-group__dot--red   { background: var(--red); }
.tx-group__dot--green { background: var(--green); }
.tx-group__dot--neutral { background: var(--text-faint); }

.tx-group__date {
  flex: 1;
  font: 600 13px 'Inter', sans-serif;
  color: var(--text-muted);
}

.tx-group__total {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 600 12.5px 'Inter', sans-serif;
}

.tx-group__total--red   { color: var(--red-text); }
.tx-group__total--green { color: var(--green-text); }

.tx-item {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 8px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.tx-item:active { box-shadow: none; background: var(--bg-alt); }

.tx-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px 'Plus Jakarta Sans', sans-serif;
  color: white;
  flex: none;
}

.tx-body { flex: 1; min-width: 0; }

.tx-name {
  font: 600 13.5px 'Inter', sans-serif;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-cat {
  font: 500 11.5px 'Inter', sans-serif;
  color: var(--text-faint);
  margin-top: 2px;
}

.tx-amount {
  font: 700 14px 'Plus Jakarta Sans', sans-serif;
  flex: none;
  text-align: right;
}

.tx-amount--red   { color: var(--red); }
.tx-amount--green { color: var(--green); }

/* ── BUDGET CATEGORY GRID ── */
.budget-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin-bottom: 12px;
}

.budget-cat-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 13px 'Inter', sans-serif;
  color: var(--gold-dark);
  background: none;
  border: none;
  cursor: pointer;
}

.budget-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px;
}

.budget-cat-card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 14px;
  position: relative;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.budget-cat-card:active { box-shadow: none; }

.budget-cat-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 10px;
}

.budget-cat-card__name {
  font: 600 13px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  margin-bottom: 3px;
}

.budget-cat-card__amount {
  font: 600 12px 'Inter', sans-serif;
  color: var(--text-muted);
}

.budget-cat-card__x {
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: none;
  font-size: 11px;
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.budget-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  font: 600 13px 'Inter', sans-serif;
  color: var(--gold-dark);
  cursor: pointer;
  width: 100%;
}

/* ── AGENDA WEEK VIEW ── */
.agenda-week {
  padding: 0 16px;
}

.agenda-week__day {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-hair);
}

.agenda-week__day:last-child { border-bottom: none; }

.agenda-week__badge {
  width: 46px;
  height: 54px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: var(--shadow-xs);
}

.agenda-week__badge.today {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.agenda-week__day-abbr {
  font: 600 10px 'Inter', sans-serif;
  text-transform: uppercase;
  color: var(--text-faint);
  letter-spacing: 0.3px;
}

.agenda-week__badge.today .agenda-week__day-abbr { color: rgba(255,255,255,0.7); }

.agenda-week__day-num {
  font: 800 20px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  line-height: 1;
}

.agenda-week__badge.today .agenda-week__day-num { color: white; }

.agenda-week__events {
  flex: 1;
}

.agenda-week__event {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.agenda-week__event:last-child { margin-bottom: 0; }

.agenda-week__event-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.agenda-week__event-dot--gold   { background: var(--gold); }
.agenda-week__event-dot--red    { background: var(--red); }
.agenda-week__event-dot--green  { background: var(--green); }
.agenda-week__event-dot--blue   { background: var(--blue); }

.agenda-week__event-name {
  font: 500 13.5px 'Inter', sans-serif;
  color: var(--text);
}

.agenda-week__empty {
  font: 500 13px 'Inter', sans-serif;
  color: var(--text-faint2);
}

/* ── BERDUA MODULE ── */
.berdua-hero {
  background: linear-gradient(135deg, #8B1A4A 0%, #5C0F2E 100%);
  border-radius: var(--r-xl);
  padding: 20px;
  color: white;
  margin: 0 16px;
  position: relative;
  overflow: hidden;
}

.berdua-hero::before {
  content: '❤️';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 60px;
  opacity: 0.15;
}

.berdua-hero__label {
  font: 500 12px 'Inter', sans-serif;
  opacity: 0.75;
  margin-bottom: 6px;
}

.berdua-hero__days {
  font: 800 32px 'Plus Jakarta Sans', sans-serif;
  margin-bottom: 4px;
}

.berdua-hero__sub {
  font: 500 12px 'Inter', sans-serif;
  opacity: 0.65;
}

.convo-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin: 0 16px;
  box-shadow: var(--shadow-sm);
}

.convo-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 10.5px 'Inter', sans-serif;
  color: #8B1A4A;
  background: #FCE4EC;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  margin-bottom: 12px;
}

.convo-card__question {
  font: 600 16px/1.5 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  margin-bottom: 16px;
}

.convo-card__actions {
  display: flex;
  gap: 10px;
}

.convo-btn-skip {
  flex: 1;
  background: var(--bg-alt);
  border: none;
  border-radius: var(--r-md);
  padding: 12px;
  font: 600 13px 'Inter', sans-serif;
  color: var(--text-muted);
  cursor: pointer;
}

.convo-btn-jawab {
  flex: 2;
  background: #8B1A4A;
  border: none;
  border-radius: var(--r-md);
  padding: 12px;
  font: 700 13px 'Plus Jakarta Sans', sans-serif;
  color: white;
  cursor: pointer;
}

.memory-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-hair);
}

.memory-item:last-child { border-bottom: none; }

.memory-item__date {
  font: 600 11px 'Inter', sans-serif;
  color: var(--text-faint);
  width: 48px;
  text-align: right;
  flex: none;
  margin-top: 2px;
}

.memory-item__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8B1A4A;
  border: 2px solid #FCE4EC;
  flex: none;
  margin-top: 4px;
}

.memory-item__content { flex: 1; }

.memory-item__emoji { font-size: 18px; margin-bottom: 4px; }

.memory-item__title {
  font: 600 14px 'Inter', sans-serif;
  color: var(--text);
}

.memory-item__sub {
  font: 500 12px 'Inter', sans-serif;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ── MODAL / BOTTOM SHEET ── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.50);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}

.overlay.visible { opacity: 1; }
.overlay.hidden  { display: none; }

.sheet {
  width: 100%;
  max-width: 480px;
  background: var(--bg);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32,0,0.2,1);
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
}

.sheet::-webkit-scrollbar { display: none; }
.overlay.visible .sheet   { transform: translateY(0); }

.sheet__handle {
  width: 40px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 12px auto 0;
}

.sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.sheet__title {
  font: 700 17px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
}

.sheet__close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-muted);
  cursor: pointer;
}

.sheet__body {
  padding: 4px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── FORMS ── */
.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-label {
  font: 600 12.5px 'Inter', sans-serif;
  color: var(--text-muted);
}

.form-input {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 13px 14px;
  font: 500 14.5px 'Inter', sans-serif;
  color: var(--text);
  width: 100%;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}

.form-input:focus { outline: none; border-color: var(--gold); }
.form-input::placeholder { color: var(--text-faint2); }
.form-input--amount { font: 700 22px 'Plus Jakarta Sans', sans-serif; text-align: right; }

.seg-control {
  display: flex;
  background: var(--bg-alt);
  border-radius: var(--r-md);
  padding: 4px;
  gap: 4px;
}

.seg-btn {
  flex: 1;
  font: 700 13px 'Plus Jakarta Sans', sans-serif;
  padding: 10px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.seg-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  font: 500 10.5px 'Inter', sans-serif;
  color: var(--text-muted);
  transition: all 0.15s;
}

.cat-btn.active {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold-dark);
}

.cat-btn__emoji { font-size: 20px; line-height: 1; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 14px 'Plus Jakarta Sans', sans-serif;
  padding: 14px 20px;
  border-radius: var(--r-lg);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}

.btn:active { opacity: 0.85; transform: scale(0.98); }
.btn--block  { display: flex; width: 100%; }
.btn--primary { background: var(--text); color: white; }
.btn--gold    { background: var(--gold); color: white; }
.btn--outline { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
.btn--ghost   { background: var(--bg-alt); color: var(--text); }
.btn--danger  { background: var(--red); color: white; }
.btn--sm      { font-size: 12.5px; padding: 9px 14px; border-radius: var(--r-sm); }
.btn--pill    { border-radius: var(--r-pill); }

/* ── TOAST ── */
.toast-container {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100% - 32px);
  max-width: 440px;
  pointer-events: none;
}

.toast {
  background: var(--text);
  color: white;
  padding: 13px 18px;
  border-radius: var(--r-md);
  font: 600 13.5px 'Inter', sans-serif;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.28s ease, toast-out 0.28s ease 2.72s forwards;
  pointer-events: auto;
}

.toast--success { background: var(--green); }
.toast--error   { background: var(--red); }
.toast--info    { background: var(--blue); }

@keyframes toast-in  { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
@keyframes toast-out { from { opacity:1; } to { opacity:0; transform:translateY(-10px); } }

/* ── EMPTY STATE ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
}

.empty-state__emoji { font-size: 40px; }
.empty-state__title { font: 700 16px 'Plus Jakarta Sans', sans-serif; color: var(--text); }
.empty-state__body  { font: 500 13.5px/1.6 'Inter', sans-serif; color: var(--text-muted); }

/* ── CARDS ── */
.card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.card-list {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-hair);
  cursor: pointer;
}

.list-item:last-child { border-bottom: none; }
.list-item:active { background: var(--bg-alt); }

.list-item__icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: none;
}

.list-item__body { flex: 1; min-width: 0; }

.list-item__title {
  font: 600 14px 'Inter', sans-serif;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item__sub {
  font: 500 12px 'Inter', sans-serif;
  color: var(--text-faint);
  margin-top: 2px;
}

.list-item__right { text-align: right; flex: none; }

.list-item__amount {
  font: 700 14px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
}

.list-item__amount--green { color: var(--green); }
.list-item__amount--red   { color: var(--red); }

/* ── PROGRESS BAR ── */
.progress-bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--bg-alt);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--gold);
  transition: width 0.5s ease;
}

.progress-bar__fill--green { background: var(--green); }
.progress-bar__fill--red   { background: var(--red); }

/* ── BADGES ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 700 11px 'Inter', sans-serif;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

.badge--green  { background: var(--green-soft); color: var(--green-text); }
.badge--red    { background: var(--red-soft);   color: var(--red-text); }
.badge--gold   { background: var(--gold-soft);  color: var(--gold-dark); }
.badge--muted  { background: var(--bg-alt);     color: var(--text-faint); }

/* ── DIVIDERS ── */
.divider { height: 1px; background: var(--border-hair); }
.divider--section { height: 8px; background: var(--bg-alt); }

/* ── UTILITIES ── */
.page-pad    { padding: 0 16px; }
.page-pad--x { padding-left: 16px; padding-right: 16px; }
.page-enter  { animation: page-in 0.2s ease; }
@keyframes page-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.stack    { display: flex; flex-direction: column; }
.stack--8 { gap: 8px; }
.stack--12 { gap: 12px; }
.stack--16 { gap: 16px; }

.row          { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.row--center  { justify-content: center; }
.row--8  { gap: 8px; }
.row--12 { gap: 12px; }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mx-16 { margin-left: 16px; margin-right: 16px; }

.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-faint  { color: var(--text-faint); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-gold   { color: var(--gold-dark); }
.w-full      { width: 100%; }

/* ── LOGIN ── */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  max-width: 480px;
  margin: 0 auto;
}

.login-logo {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px var(--gold-shadow);
}

.login-title {
  font: 800 28px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  margin-bottom: 8px;
  text-align: center;
}

.login-subtitle {
  font: 500 14px/1.6 'Inter', sans-serif;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 32px;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── CALENDAR ── */
.cal-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-hair);
}

.cal-month-nav__btn {
  background: var(--bg-alt);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
}

.cal-month-nav__btn:disabled { opacity: 0.3; }

.cal-month-nav__label {
  font: 700 16px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 8px;
}

.cal-day-name {
  text-align: center;
  font: 700 10.5px 'Inter', sans-serif;
  color: var(--text-faint);
  padding: 8px 0;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  font: 500 13px 'Inter', sans-serif;
  color: var(--text);
  transition: background 0.12s;
}

.cal-day:empty { pointer-events: none; }
.cal-day:active:not(.today) { background: var(--bg-alt); }

.cal-day.today {
  background: var(--primary);
  color: white;
  font-weight: 700;
}

.cal-day.has-event::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.cal-day.today.has-event::after { background: rgba(255,255,255,0.8); }
.cal-day.other-month { color: var(--text-faint2); }

/* ── GOAL CARD ── */
.goal-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}

.goal-card__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.goal-card__icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex: none;
}

.goal-card__name  { font: 700 15px 'Plus Jakarta Sans', sans-serif; color: var(--text); }
.goal-card__date  { font: 500 12px 'Inter', sans-serif; color: var(--text-faint); margin-top: 3px; }
.goal-card__pct   { font: 700 13px 'Plus Jakarta Sans', sans-serif; color: var(--gold-dark); }

/* Responsiveness on large screens */
@media (min-width: 480px) {
  .bottom-nav {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
  }
}

/* Scrollbar hide utility */
.no-scroll::-webkit-scrollbar { display: none; }
.no-scroll { scrollbar-width: none; }

/* ── PROFILE CARD & MENU GRID (MENU LAINNYA) ── */
.profile-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-xs);
}

.profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex: none;
}

.profile-name {
  font: 700 16px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  line-height: 1.2;
}

.profile-family {
  font: 500 12px 'Inter', sans-serif;
  color: var(--text-faint);
  margin-top: 4px;
  line-height: 1.3;
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px;
}

.menu-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: left;
  width: 100%;
}

.menu-card:active {
  transform: scale(0.97);
  box-shadow: none;
}

.menu-card__emoji {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
}

.menu-card__title {
  font: 700 13.5px 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
}

.menu-card__desc {
  font: 500 11px 'Inter', sans-serif;
  color: var(--text-faint);
}

/* ── MAINTENANCE STYLES (Sesuai Foto 2) ── */
.maint-tabs {
  display: flex;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 4px;
  margin: 0 16px 14px;
}

.maint-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 700 12.5px 'Plus Jakarta Sans', sans-serif;
  padding: 10px 8px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.maint-tab-btn.active {
  background: #201E1B;
  color: white;
}

.maint-item-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-xs);
  margin: 0 16px 10px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.maint-item-card:active {
  background: var(--bg-alt);
}

.maint-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex: none;
}