/* v2.0.0a1 — Global Family Superapp home container + spacing/overflow hotfix. */
.superapp-home {
  position: relative;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: max(22px, env(safe-area-inset-top)) clamp(18px, 4vw, 28px) calc(96px + env(safe-area-inset-bottom));
}

.superapp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  padding-bottom: var(--space-4, 16px);
}

.superapp-greeting { min-width: 0; }
.superapp-greeting h1 { margin: 0; max-width: 100%; font-size: clamp(28px, 5.2vw, 36px); line-height: 1.12; overflow-wrap: anywhere; }
.superapp-greeting p { margin: 7px 0 0; color: var(--color-text-secondary, #777d79); font-size: var(--font-size-sm, 14px); }

.superapp-avatar-link { flex: 0 0 auto; padding: 0; border: 0; background: transparent; text-decoration: none; cursor: pointer; }
.superapp-avatar {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 3px solid var(--color-surface, #fff);
  border-radius: 50%;
  background: var(--color-surface-soft, #eef1ef);
  color: var(--color-primary, #159447);
  box-shadow: var(--shadow-sm, 0 8px 24px rgba(20,40,28,.07));
}
.superapp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.superapp-avatar ion-icon { font-size: 30px; }
.superapp-avatar.is-loading { opacity: .55; }

.superapp-main { display: flex; flex-direction: column; gap: 24px; }
.today-card,
.family-module-card {
  border: 1px solid var(--color-border, #e0e4e1);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-sm, 0 8px 26px rgba(30,60,42,.06));
}

.today-card {
  overflow: hidden;
  padding: 20px;
  border-radius: var(--radius-xl, 24px);
  background: linear-gradient(135deg, rgba(232,250,241,.72), rgba(255,255,255,.96) 65%);
}
.today-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.today-card-head h2 { margin: 0 0 3px; font-size: clamp(22px, 5vw, 28px); }
.today-card-head small { color: var(--color-text-secondary, #7b817d); }
.today-see-all {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: var(--color-primary, #159447);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.today-see-all ion-icon { font-size: 18px; }
.today-card-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(150px, .65fr); align-items: end; gap: 12px; margin-top: 14px; }
.today-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.today-item { display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 10px; min-height: 38px; }
.today-item-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(48,168,118,.12); color: var(--color-primary,#159447); }
.today-item-icon.is-warning { background: rgba(242,171,57,.16); color: #d98b13; }
.today-item-icon.is-danger { background: rgba(233,82,82,.12); color: #df4f4f; }
.today-item strong { display: block; font-size: 13px; line-height: 1.35; }
.today-item small { display: block; margin-top: 2px; color: var(--color-text-secondary,#7b817d); font-size: 11px; }
.today-empty { padding: 13px 0; color: var(--color-text-secondary,#7b817d); font-size: 13px; line-height: 1.5; }
.today-loading { display: grid; gap: 9px; }
.today-loading span { display: block; height: 38px; border-radius: 12px; background: var(--color-surface-soft,#eef1ef); animation: superapp-pulse 1.2s ease-in-out infinite alternate; }

.today-art { position: relative; min-height: 150px; overflow: hidden; }
.today-art small { position: absolute; z-index: 4; top: 2px; right: 4px; width: 128px; color: rgba(27,128,74,.65); font-size: 11px; line-height: 1.45; font-style: italic; text-align: right; transform: rotate(-2deg); }
.today-art-leaf { position: absolute; z-index: 2; bottom: 8px; width: 34px; height: 76px; border-radius: 85% 15% 80% 20%; background: rgba(55,155,98,.34); transform-origin: bottom center; }
.today-art .leaf-a { left: 23%; transform: rotate(-28deg); }
.today-art .leaf-b { left: 38%; height: 92px; transform: rotate(5deg); }
.today-art .leaf-c { left: 52%; height: 65px; transform: rotate(34deg); }
.today-art-house { position: absolute; right: 8px; bottom: 0; width: 72px; height: 55px; border-radius: 4px 4px 12px 12px; background: rgba(91,173,124,.2); }
.today-art-house::before { content:""; position:absolute; left:-6px; top:-27px; width:60px; height:60px; border-left:8px solid rgba(55,155,98,.36); border-top:8px solid rgba(55,155,98,.36); transform:rotate(45deg); border-radius:4px; }
.today-art-house i { position:absolute; left:27px; bottom:0; width:17px; height:29px; border-radius:5px 5px 0 0; background:rgba(55,155,98,.34); }

.module-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.module-section-head h2 { margin: 0; font-size: clamp(21px, 4.8vw, 27px); }
.module-section-head p { margin: 0; max-width: 50%; color: var(--color-text-secondary,#7b817d); font-size: 11px; text-align: right; }
.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.family-module-card {
  appearance: none;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 14px;
  border-radius: 22px;
  color: var(--color-text,#171a18);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.family-module-card:active { transform: scale(.992); }
.module-heading { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.module-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; }
.module-icon ion-icon { font-size: 22px; }
.module-icon.is-green,.module-icon.is-mint { background:rgba(48,168,118,.13); color:#159447; }
.module-icon.is-amber { background:rgba(241,179,62,.16); color:#d88a12; }
.module-icon.is-purple { background:rgba(116,100,230,.13); color:#7564dd; }
.module-icon.is-pink { background:rgba(232,91,112,.13); color:#dc5570; }
.module-title { display:flex; min-width:0; flex-direction:column; gap:2px; }
.module-title strong { overflow:hidden; font-size:14px; line-height:1.25; text-overflow:ellipsis; }
.module-title small { color:var(--color-text-secondary,#7b817d); font-size:10px; line-height:1.35; }
.module-chevron { color:var(--color-text-secondary,#7b817d); font-size:18px; }
.module-preview { min-height:110px; margin-top:12px; border-radius:16px; }
.finance-preview { display:flex; min-width:0; flex-direction:column; justify-content:center; padding:13px; background:rgba(48,168,118,.075); }
.finance-preview-top { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.finance-preview-label { display:inline-flex; align-items:center; gap:5px; color:var(--color-text-secondary,#7b817d); font-size:10px; }
.finance-preview-label ion-icon { font-size:15px; color:#159447; }
.finance-status { padding:4px 8px; border-radius:999px; font-size:9px; font-weight:700; white-space:nowrap; }
.finance-status.is-surplus { background:rgba(48,168,118,.13); color:#128840; }
.finance-status.is-deficit { background:rgba(233,82,82,.12); color:#df4f4f; }
.finance-status.is-neutral { background:rgba(128,136,131,.12); color:#707773; }
.finance-preview > strong { display:block; width:100%; max-width:100%; margin-top:12px; overflow:hidden; font-size:clamp(17px,3.2vw,24px); line-height:1.1; letter-spacing:-.035em; white-space:nowrap; }
.finance-preview > small { margin-top:7px; color:var(--color-text-secondary,#7b817d); font-size:9px; line-height:1.4; }
.notes-preview { display:grid; grid-template-columns:74px minmax(0,1fr); align-items:center; gap:10px; padding:12px; background:rgba(241,179,62,.08); }
.notes-paper { position:relative; width:58px; height:72px; border-radius:10px; background:#fff7d9; box-shadow:8px -7px 0 rgba(114,177,126,.20); transform:rotate(3deg); }
.notes-paper span { display:block; width:65%; height:4px; margin:11px auto -3px; border-radius:999px; background:rgba(214,154,44,.28); }
.notes-preview strong,.document-preview strong,.maintenance-preview strong { display:block; font-size:12px; }
.notes-preview small,.document-preview small,.maintenance-preview small { display:block; margin-top:4px; color:var(--color-text-secondary,#7b817d); font-size:9px; line-height:1.35; }
.document-preview,.maintenance-preview { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:9px; padding:12px; }
.document-preview { background:rgba(232,91,112,.07); }
.maintenance-preview { background:rgba(48,168,118,.075); }
.document-preview > span,.maintenance-preview > span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; }
.document-preview > span { background:rgba(232,91,112,.12); color:#dc5570; }
.maintenance-preview > span { background:rgba(48,168,118,.12); color:#159447; }
.document-preview ion-icon,.maintenance-preview ion-icon { font-size:22px; }
.fun-module { grid-column:1 / -1; }
.fun-module .module-title strong { font-size:16px; }
.fun-preview { display:grid; grid-template-columns:minmax(0,1fr) 112px; align-items:center; gap:12px; padding:15px; background:linear-gradient(135deg,rgba(232,91,112,.08),rgba(255,255,255,.9)); }
.fun-chips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.fun-chips span { padding:4px 8px; border-radius:999px; background:rgba(232,91,112,.10); color:#c74e66; font-size:9px; font-weight:700; }
.fun-chips span:nth-child(2){background:rgba(116,100,230,.10);color:#685bc7}.fun-chips span:nth-child(3){background:rgba(48,168,118,.10);color:#168747}
.fun-copy strong { display:block; max-width:280px; font-size:13px; line-height:1.45; font-weight:600; }
.fun-deck { position:relative; height:88px; }
.fun-deck i,.fun-deck b { position:absolute; width:68px; height:86px; border-radius:12px; background:#fff; box-shadow:0 8px 18px rgba(130,64,80,.09); }
.fun-deck i { right:22px; top:-3px; transform:rotate(-9deg); background:#fbe9ed; }
.fun-deck b { display:grid; place-items:center; right:8px; top:3px; transform:rotate(4deg); color:#dc5570; }
.fun-deck b ion-icon { font-size:28px; }

.global-quick-nav {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  box-sizing: border-box;
  width: min(100vw, 640px);
  min-height: 76px;
  padding: 9px clamp(28px, 8vw, 54px) max(9px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border,#e0e4e1);
  background: rgba(255,255,255,.96);
  box-shadow: 0 -10px 30px rgba(20,40,28,.05);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}
.global-quick-nav a { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; color:var(--color-text-secondary,#737a76); text-decoration:none; font-size:11px; font-weight:600; }
.global-quick-nav ion-icon { font-size:25px; }
.global-quick-nav a:active { color:var(--color-primary,#159447); }

.superapp-toast { position:fixed; z-index:100; left:50%; bottom:calc(92px + env(safe-area-inset-bottom)); max-width:calc(100% - 40px); padding:10px 14px; border-radius:999px; background:#1f2421; color:#fff; font-size:12px; box-shadow:0 8px 24px rgba(0,0,0,.2); transform:translateX(-50%); }

@keyframes superapp-pulse { from { opacity:.55; } to { opacity:1; } }

@media (max-width: 430px) {
  .today-card { padding:16px; }
  .today-card-body { grid-template-columns:1fr; }
  .today-art { display:none; }
  .module-grid { gap:9px; }
  .family-module-card { padding:11px; border-radius:18px; }
  .module-heading { grid-template-columns:36px minmax(0,1fr) auto; gap:7px; }
  .module-icon { width:36px; height:36px; }
  .module-icon ion-icon { font-size:19px; }
  .module-title strong { font-size:12px; }
  .module-title small { font-size:8.5px; }
  .module-preview { min-height:96px; margin-top:9px; }
  .finance-preview { padding:10px; }
  .finance-preview > strong { font-size:clamp(15px,4.9vw,21px); }
  .notes-preview { grid-template-columns:48px minmax(0,1fr); padding:9px; }
  .notes-paper { width:40px; height:54px; }
  .fun-preview { grid-template-columns:minmax(0,1fr) 80px; padding:12px; }
  .fun-deck { transform:scale(.78); transform-origin:center; }
  .global-quick-nav { padding-left:28px; padding-right:28px; }
}


/* v2.0.0a1 guards: keep empty reminder/art and module content inside their cards. */
.today-card.is-empty .today-card-body { min-height: 158px; align-items: center; }
.today-card.is-empty .today-empty { max-width: 250px; margin: 0; }
.module-heading, .finance-preview-top, .finance-preview-label { min-width: 0; }
.finance-preview-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.finance-preview > small { overflow-wrap: anywhere; }

@media (max-width: 430px) {
  .superapp-home { padding-left: 16px; padding-right: 16px; }
  .global-quick-nav { width: 100vw; }
}

/* ================================================================
   v2.0.0a2 — Global Home containment + calm section hierarchy
   ================================================================ */

/* The global app itself is the 430px container. Fixed navigation must
   follow that width rather than the desktop viewport. */
.global-quick-nav {
  width: min(100vw, 430px);
  max-width: 430px;
  padding-left: 34px;
  padding-right: 34px;
}

/* A section name, not an implementation term such as “Modul”. */
.module-section-head {
  display: block;
  margin: 0 2px 12px;
}
.module-section-head h2 {
  margin: 0;
  font-size: clamp(21px, 4.8vw, 27px);
}
.module-section-head p {
  margin: 4px 0 0;
  max-width: none;
  color: var(--color-text-secondary,#7b817d);
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
}

/* Keep the decorative “Hari Ini” art fully inside the card even when the
   browser viewport is wide but the app container itself remains narrow. */
.today-card-body {
  grid-template-columns: minmax(0,1fr) 126px;
  align-items: center;
  gap: 10px;
}
.today-card.is-empty .today-card-body {
  min-height: 132px;
  align-items: center;
}
.today-card.is-empty .today-empty {
  max-width: 220px;
  padding: 0;
}
.today-art {
  position: relative;
  display: block;
  width: 126px;
  min-width: 0;
  min-height: 122px;
  justify-self: end;
  overflow: hidden;
}
.today-art small {
  top: 2px;
  right: 2px;
  width: 110px;
  font-size: 9px;
  line-height: 1.35;
  transform: none;
}
.today-art-leaf {
  bottom: 5px;
  width: 24px;
  height: 58px;
  border-radius: 85% 15% 80% 20%;
}
.today-art .leaf-a { left: 7px; transform: rotate(-24deg); }
.today-art .leaf-b { left: 34px; height: 70px; transform: rotate(6deg); }
.today-art .leaf-c { left: 57px; height: 50px; transform: rotate(31deg); }
.today-art-house {
  right: 4px;
  bottom: 3px;
  width: 54px;
  height: 39px;
  border-radius: 3px 3px 9px 9px;
}
.today-art-house::before {
  content: "";
  position: absolute;
  left: -7px;
  top: -27px;
  width: 68px;
  height: 34px;
  border: 0;
  border-radius: 4px;
  background: rgba(55,155,98,.34);
  clip-path: polygon(50% 0,100% 82%,88% 100%,50% 37%,12% 100%,0 82%);
  transform: none;
}
.today-art-house i {
  left: 21px;
  width: 13px;
  height: 22px;
  border-radius: 4px 4px 0 0;
}

/* Cards are intentionally narrow in the two-column Home layout. Never let
   titles or the Finance insight consume space outside their own card. */
.module-title strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: normal;
}
.finance-preview-top {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 4px;
}
.finance-preview-label {
  min-width: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  font-size: 9px;
  line-height: 1.2;
}
.finance-preview-label ion-icon { flex: 0 0 auto; font-size: 13px; }
.finance-status { padding: 3px 6px; font-size: 8px; }
.finance-preview > strong {
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.finance-preview > small {
  font-size: 8.5px;
  line-height: 1.35;
}

@media (max-width: 430px) {
  .superapp-home { padding-left: 16px; padding-right: 16px; }
  .global-quick-nav {
    width: min(100vw, 430px);
    max-width: 430px;
    padding-left: 28px;
    padding-right: 28px;
  }
  .today-card-body {
    grid-template-columns: minmax(0,1fr) 104px;
    gap: 6px;
  }
  .today-art {
    display: block;
    width: 104px;
    min-height: 112px;
  }
  .today-art small { width: 92px; font-size: 8px; }
  .today-art .leaf-a { left: 4px; }
  .today-art .leaf-b { left: 27px; }
  .today-art .leaf-c { left: 47px; }
  .today-art-house { right: 2px; }
  .finance-preview > strong { font-size: 18px; }
}

@media (max-width: 350px) {
  .today-card-body { grid-template-columns: minmax(0,1fr) 82px; }
  .today-art { width: 82px; min-height: 104px; }
  .today-art small { display: none; }
  .today-art .leaf-a { left: 1px; }
  .today-art .leaf-b { left: 19px; }
  .today-art .leaf-c { left: 36px; }
  .today-art-house { right: -3px; transform: scale(.88); transform-origin: bottom right; }
}

/* v2.0.0a3 — Lottie replaces the fragile hand-built Home illustration. */
.today-lottie-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 142px;
  overflow: hidden;
  border-radius: 18px;
}
.today-lottie {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.today-lottie svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 190px;
  max-height: 142px;
  margin-left: auto;
}
.today-lottie-fallback {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 26px;
  background: rgba(48,168,118,.10);
  color: rgba(21,148,71,.42);
  transition: opacity .18s ease;
}
.today-lottie-fallback ion-icon { font-size: 42px; }
.today-lottie-wrap.is-lottie-ready .today-lottie-fallback { opacity: 0; }

@media (max-width: 360px) {
  .today-card-body { grid-template-columns: minmax(0,1fr) 104px; gap: 6px; }
  .today-lottie-wrap { min-height: 120px; }
  .today-lottie svg { max-width: 132px; max-height: 120px; }
}

/* v2.0.0a4 — Global quick nav: Kalender | Keluarga | Profil must stay on one row. */
.global-quick-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr;
  grid-auto-flow: column;
  align-items: stretch;
}
.global-quick-nav > a {
  grid-row: 1;
  min-width: 0;
  white-space: nowrap;
}

/* ================================================================
   v2.0.0a8 — QA Home: full-width modules, personal order, dark-mode contrast
   ================================================================ */
.module-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.module-section-copy { min-width: 0; }
.module-section-head .module-section-copy p {
  margin-top: 4px;
  max-width: none;
  text-align: left;
}
.module-order-trigger {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--color-border, #e0e4e1);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: var(--color-primary, #159447);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 5px 16px rgba(20,40,28,.05));
}
.module-order-trigger ion-icon { font-size: 16px; }

/* One calm vertical lane. Every module gets the same calm full-width lane, including Ruang Cerita. */
.module-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.fun-module { grid-column: auto; }
.family-module-card { padding: 16px; }
.module-heading { grid-template-columns: 46px minmax(0,1fr) auto; gap: 11px; }
.module-icon { width: 46px; height: 46px; }
.module-title strong { font-size: 15px; }
.module-title small { font-size: 10.5px; }
.module-preview { min-height: 96px; margin-top: 13px; }
.finance-preview { padding: 15px 16px; }
.finance-preview-label { font-size: 10.5px; }
.finance-status { padding: 4px 9px; font-size: 9px; }
.finance-preview > strong { font-size: clamp(24px, 7vw, 32px); }
.finance-preview > small { font-size: 10px; }
.notes-preview { grid-template-columns: 86px minmax(0,1fr); }
.notes-paper { width: 66px; height: 76px; }
.notes-preview strong,.document-preview strong,.maintenance-preview strong { font-size: 13px; }
.notes-preview small,.document-preview small,.maintenance-preview small { font-size: 10px; }

/* Dark mode must preserve the hierarchy of Hari Ini and global quick access. */
html[data-theme="dark"] .today-card {
  border-color: var(--color-border);
  background: linear-gradient(135deg, rgba(25,74,50,.42), var(--color-surface) 68%);
  box-shadow: 0 9px 30px rgba(0,0,0,.2);
}
/* v2.0.0a9 — Lottie canvas must remain truly transparent in every theme. */
.today-lottie-wrap,
.today-lottie,
.today-lottie svg {
  background: transparent !important;
}
html[data-theme="dark"] .today-lottie-fallback {
  background: rgba(63,190,123,.14);
  color: rgba(104,218,151,.72);
}
html[data-theme="dark"] .family-module-card,
html[data-theme="dark"] .module-order-trigger {
  background: var(--color-surface);
  border-color: var(--color-border);
}
html[data-theme="dark"] .finance-preview,
html[data-theme="dark"] .maintenance-preview { background: rgba(48,168,118,.10); }
html[data-theme="dark"] .notes-preview { background: rgba(241,179,62,.09); }
html[data-theme="dark"] .document-preview { background: rgba(232,91,112,.09); }
html[data-theme="dark"] .fun-preview {
  background: linear-gradient(135deg, rgba(232,91,112,.10), rgba(255,255,255,.025));
}
html[data-theme="dark"] .notes-paper { background: color-mix(in srgb, var(--rk-beige, #D5C6B3) 15%, var(--rk-surface, var(--color-surface))); }
html[data-theme="dark"] .global-quick-nav {
  border-top-color: var(--rk-border-strong, var(--color-border));
  background: color-mix(in srgb, var(--rk-surface-raised, var(--color-surface)) 96%, transparent);
  box-shadow: var(--rk-shadow-float, 0 -12px 34px rgba(0,0,0,.36));
}
html[data-theme="dark"] .global-quick-nav a { color: var(--rk-text-secondary, var(--color-text-secondary)); }
html[data-theme="dark"] .global-quick-nav a.is-active { color: var(--rk-primary, var(--color-primary)); }

/* Module order editor */
.module-order-open { overflow: hidden; }
.module-order-layer[hidden] { display: none !important; }
.module-order-layer {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(10,14,12,.46);
  backdrop-filter: blur(8px);
}
.module-order-sheet {
  width: min(100%, 430px);
  max-height: min(78dvh, 620px);
  overflow: auto;
  padding: 10px 16px 16px;
  border: 1px solid var(--color-border, #e0e4e1);
  border-radius: 26px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #171a18);
  box-shadow: 0 22px 70px rgba(0,0,0,.24);
}
.module-order-handle { width: 42px; height: 4px; margin: 2px auto 14px; border-radius: 99px; background: var(--color-border, #d8ddda); }
.module-order-head { display: grid; grid-template-columns: minmax(0,1fr) 40px; align-items: start; gap: 10px; }
.module-order-head h2 { margin: 0; font-size: 20px; }
.module-order-head p { margin: 4px 0 0; color: var(--color-text-secondary,#777d79); font-size: 11px; line-height: 1.45; }
.module-order-close { display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:var(--color-surface-soft,#eef1ef); color:var(--color-text,#171a18); font-size:20px; }
.module-order-list { display: grid; gap: 8px; margin-top: 15px; }
.module-order-row {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 9px;
  border: 1px solid var(--color-border,#e0e4e1);
  border-radius: 16px;
  background: var(--color-surface,#fff);
  transition: opacity .15s ease, transform .15s ease;
}
.module-order-row.is-dragging { opacity: .45; transform: scale(.985); }
.module-order-drag { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--color-surface-soft,#eef1ef); color:var(--color-text-secondary,#777d79); cursor:grab; }
.module-order-drag ion-icon { font-size:24px; }
.module-order-row strong { font-size: 13px; }
.module-order-row-actions { display:flex; gap:4px; }
.module-order-row-actions button { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--color-border,#e0e4e1); border-radius:10px; background:var(--color-surface,#fff); color:var(--color-primary,#159447); }
.module-order-row-actions button:disabled { opacity:.28; }
.module-order-actions { display:grid; grid-template-columns:1fr 1.35fr; gap:9px; margin-top:14px; }
.module-order-cancel,.module-order-save { min-height:45px; border-radius:14px; font:inherit; font-size:12px; font-weight:700; }
.module-order-cancel { border:1px solid var(--color-border,#e0e4e1); background:var(--color-surface,#fff); color:var(--color-text,#171a18); }
.module-order-save { border:1px solid var(--color-primary,#159447); background:var(--color-primary,#159447); color:#fff; }

@media (max-width: 360px) {
  .module-section-head { align-items: flex-start; }
  .module-order-trigger span { display: none; }
  .module-order-trigger { width: 36px; padding: 0; justify-content: center; }
  .family-module-card { padding: 14px; }
  .finance-preview > strong { font-size: 24px; }
}

/* v2.0.0a44 — Hari Ini uses the same actionable agenda model as Kalender. */
.today-card:not(.is-empty) .today-card-body { grid-template-columns:1fr; }
.today-card:not(.is-empty) .today-lottie-wrap { display:none; }
.today-card:not(.is-empty) .today-list { gap:8px; }
.today-agenda-card {
  appearance:none; width:100%; display:grid; grid-template-columns:36px minmax(0,1fr) 18px; align-items:center; gap:9px;
  padding:8px 9px; border:1px solid color-mix(in srgb,var(--color-border,#e0e4e1) 82%,transparent); border-radius:14px;
  background:color-mix(in srgb,var(--color-surface,#fff) 88%,transparent); color:var(--color-text,#171a18); text-align:left; font:inherit; cursor:pointer;
}
.today-agenda-card:active { transform:scale(.994); }
.today-agenda-card .today-item-icon { width:36px; height:36px; border-radius:12px; }
.today-agenda-card.is-notes .today-item-icon { background:rgba(216,138,18,.13); color:#d88a12; }
.today-agenda-card.is-holiday .today-item-icon, .today-agenda-card.is-calendar .today-item-icon { background:rgba(220,85,112,.11); color:#d84d69; }
.today-agenda-copy { min-width:0; }
.today-agenda-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.today-agenda-copy small { display:block; overflow:hidden; margin-top:2px; color:var(--color-text-secondary,#7b817d); font-size:9.5px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.today-agenda-chevron { color:var(--color-text-secondary,#7b817d); font-size:16px; }
html[data-theme="dark"] .today-agenda-card { background:rgba(32,36,33,.80); }

/* v2.0.0a46 — contextual Notification Health + compact Hari Ini overflow. */
.notification-health-banner { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; margin:-4px 0 18px; padding:11px 12px; border:1px solid color-mix(in srgb,#d88a12 26%,var(--color-border,#e0e4e1)); border-radius:16px; background:color-mix(in srgb,#d88a12 6%,var(--color-surface,#fff)); }
.notification-health-banner[hidden] { display:none!important; }
.notification-health-banner-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:rgba(216,138,18,.12); color:#c47d11; }
.notification-health-banner-copy { min-width:0; }
.notification-health-banner-copy strong { display:block; font-size:10.5px; line-height:1.3; }
.notification-health-banner-copy p { margin:3px 0 0; color:var(--color-text-secondary,#737a76); font-size:8.8px; line-height:1.4; }
.notification-health-banner button { appearance:none; flex:0 0 auto; padding:7px 9px; border:0; border-radius:999px; background:var(--color-primary,#159447); color:#fff; font:700 8.5px/1 Manrope,system-ui,sans-serif; cursor:pointer; }
.today-more-agenda { appearance:none; display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px; padding:8px 3px 2px; border:0; background:transparent; color:var(--color-primary,#159447); font:700 9.5px/1.3 Manrope,system-ui,sans-serif; cursor:pointer; }
.today-more-agenda ion-icon { font-size:15px; }
@media (max-width:360px){ .notification-health-banner{grid-template-columns:36px minmax(0,1fr)} .notification-health-banner-icon{width:36px;height:36px}.notification-health-banner button{grid-column:2;justify-self:start} }

/* ==================================================================
   v2.0.0a48a — RuangKitha Home + Global Shell visual migration
   Functional behavior stays identical to a47/a48.
   ================================================================== */

.superapp-home {
  isolation: isolate;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
  background: var(--rk-background, #FBF7EE);
}

.superapp-home::before,
.superapp-home::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(.2px);
}

.superapp-home::before {
  top: -72px;
  right: -72px;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, color-mix(in srgb, var(--rk-primary) 12%, transparent), transparent 69%);
}

.superapp-home::after {
  top: 320px;
  left: -95px;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, color-mix(in srgb, var(--rk-accent) 7%, transparent), transparent 70%);
}

.superapp-header {
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 20px;
}

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

.superapp-brand-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.superapp-wordmark {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.045em;
}
.superapp-wordmark > span { color: var(--rk-primary); }
.superapp-wordmark > strong { color: var(--rk-accent); font-weight: 800; }
.superapp-brand-separator {
  flex: 0 0 18px;
  width: 18px;
  height: 1px;
  background: var(--rk-border-strong);
}
.superapp-brand-tagline {
  min-width: 0;
  overflow: hidden;
  color: var(--rk-text-soft);
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.superapp-greeting h1 {
  max-width: 100%;
  color: var(--rk-text);
  font-size: clamp(27px, 7.2vw, 34px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.04em;
}
.superapp-greeting p {
  max-width: 290px;
  margin-top: 7px;
  color: var(--rk-text-secondary);
  font-size: 11.5px;
  line-height: 1.5;
}

.superapp-avatar-link {
  margin-top: 2px;
  border-radius: 50%;
}
.superapp-avatar {
  width: 58px;
  height: 58px;
  border: 2px solid var(--rk-surface);
  background: var(--rk-primary-soft);
  color: var(--rk-primary);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rk-primary) 16%, transparent),
    var(--rk-shadow-sm);
}

.superapp-main { gap: 26px; }

.today-card,
.family-module-card {
  border-color: var(--rk-border);
  background: var(--rk-surface);
  box-shadow: var(--rk-shadow-sm);
}

.today-card {
  position: relative;
  padding: 18px;
  border-radius: var(--rk-radius-xl);
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--rk-primary-soft) 66%, var(--rk-surface)) 0%,
      var(--rk-surface) 58%,
      color-mix(in srgb, var(--rk-beige) 18%, var(--rk-surface)) 100%);
}
.today-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--rk-primary), var(--rk-secondary), var(--rk-accent));
  opacity: .68;
}
.today-card-head h2 {
  margin-bottom: 4px;
  color: var(--rk-text);
  font-size: 22px;
  letter-spacing: -.025em;
}
.today-card-head small { color: var(--rk-text-secondary); font-size: 10.5px; }
.today-see-all {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--rk-primary) 17%, var(--rk-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--rk-surface) 76%, transparent);
  color: var(--rk-primary);
  font-size: 10px;
}

.today-agenda-card {
  border-color: var(--rk-border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--rk-surface) 83%, transparent);
  color: var(--rk-text);
}
.today-agenda-card .today-item-icon {
  border-radius: 12px;
  background: var(--rk-primary-soft);
  color: var(--rk-primary);
}
.today-agenda-card.is-notes .today-item-icon {
  background: var(--rk-secondary-soft);
  color: var(--rk-secondary);
}
.today-agenda-card.is-holiday .today-item-icon,
.today-agenda-card.is-calendar .today-item-icon {
  background: var(--rk-accent-soft);
  color: var(--rk-accent);
}
.today-agenda-copy strong { color: var(--rk-text); }
.today-agenda-copy small,
.today-agenda-chevron { color: var(--rk-text-secondary); }
.today-more-agenda,
.today-see-all { color: var(--rk-primary); }
.today-loading span { background: var(--rk-surface-soft); }
.today-empty { color: var(--rk-text-secondary); }
.today-lottie-fallback {
  background: var(--rk-primary-soft);
  color: color-mix(in srgb, var(--rk-primary) 55%, transparent);
}

.notification-health-banner {
  margin: -3px 0 19px;
  border-color: color-mix(in srgb, var(--rk-warning) 22%, var(--rk-border));
  border-radius: var(--rk-radius-lg);
  background: color-mix(in srgb, var(--rk-warning-soft) 62%, var(--rk-surface));
  box-shadow: none;
}
.notification-health-banner-icon {
  border-radius: 12px;
  background: var(--rk-warning-soft);
  color: var(--rk-warning);
}
.notification-health-banner-copy strong { color: var(--rk-text); }
.notification-health-banner-copy p { color: var(--rk-text-secondary); }
.notification-health-banner button {
  background: var(--rk-primary);
  color: var(--rk-on-primary);
}

.module-section-head {
  align-items: center;
  margin: 0 2px 12px;
}
.module-section-head h2 {
  color: var(--rk-text);
  font-size: 21px;
  letter-spacing: -.025em;
}
.module-section-head .module-section-copy p {
  color: var(--rk-text-secondary);
  font-size: 10.5px;
}
.module-order-trigger {
  min-height: 34px;
  padding: 6px 10px;
  border-color: var(--rk-border);
  background: var(--rk-surface);
  color: var(--rk-primary);
  box-shadow: none;
}

.module-grid { gap: 12px; }
.family-module-card {
  position: relative;
  overflow: hidden;
  padding: 15px;
  border-radius: var(--rk-radius-lg);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.family-module-card::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--module-accent, var(--rk-primary));
  opacity: .62;
}
.family-module-card[data-module-id="finance"] {
  --module-accent: var(--rk-primary);
  --module-soft: var(--rk-primary-soft);
}
.family-module-card[data-module-id="notes"] {
  --module-accent: var(--rk-secondary);
  --module-soft: var(--rk-secondary-soft);
}
.family-module-card[data-module-id="documents"] {
  --module-accent: color-mix(in srgb, var(--rk-beige) 78%, var(--rk-primary));
  --module-soft: color-mix(in srgb, var(--rk-beige) 36%, var(--rk-surface));
}
.family-module-card[data-module-id="maintenance"] {
  --module-accent: var(--rk-secondary);
  --module-soft: var(--rk-secondary-soft);
}
.family-module-card[data-module-id="fun"] {
  --module-accent: var(--rk-accent);
  --module-soft: var(--rk-accent-soft);
}
.family-module-card:active { transform: scale(.994); }

.module-heading { grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; }
.module-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--module-soft, var(--rk-primary-soft)) !important;
  color: var(--module-accent, var(--rk-primary)) !important;
}
.module-icon ion-icon { font-size: 21px; }
.module-title strong {
  color: var(--rk-text);
  font-size: 14px;
  letter-spacing: -.012em;
}
.module-title small { color: var(--rk-text-secondary); font-size: 10px; }
.module-chevron { color: var(--rk-text-soft); }
.module-preview {
  min-height: 92px;
  border: 1px solid color-mix(in srgb, var(--module-accent, var(--rk-primary)) 8%, var(--rk-border));
  border-radius: 15px;
  background: var(--module-soft, var(--rk-surface-soft));
}

.finance-preview,
.maintenance-preview,
.notes-preview,
.document-preview,
.fun-preview {
  background: var(--module-soft, var(--rk-surface-soft)) !important;
}
.finance-preview-label,
.finance-preview > small,
.notes-preview small,
.document-preview small,
.maintenance-preview small { color: var(--rk-text-secondary); }
.finance-preview-label ion-icon { color: var(--rk-primary); }
.finance-preview > strong { color: var(--rk-text); letter-spacing: -.045em; }
.finance-status.is-surplus { background: var(--rk-success-soft); color: var(--rk-success); }
.finance-status.is-deficit { background: var(--rk-danger-soft); color: var(--rk-danger); }
.finance-status.is-neutral { background: var(--rk-surface-strong); color: var(--rk-text-secondary); }

.notes-paper {
  background: color-mix(in srgb, var(--rk-beige) 50%, var(--rk-surface));
  box-shadow: 8px -7px 0 color-mix(in srgb, var(--rk-secondary) 18%, transparent);
}
.notes-paper span { background: color-mix(in srgb, var(--rk-secondary) 32%, transparent); }

.document-preview > span,
.maintenance-preview > span {
  border-radius: 13px;
  background: color-mix(in srgb, var(--module-accent) 12%, var(--rk-surface));
  color: var(--module-accent);
}

/* a52 · Maintenance state tone follows real schedule state without turning the
   whole Home card into an alarm surface. */
.maintenance-preview.is-safe > span {
  background: color-mix(in srgb, var(--rk-success) 12%, var(--rk-surface));
  color: var(--rk-success);
}
.maintenance-preview.is-upcoming > span {
  background: color-mix(in srgb, var(--rk-secondary) 14%, var(--rk-surface));
  color: var(--rk-secondary);
}
.maintenance-preview.is-today > span {
  background: color-mix(in srgb, var(--rk-accent) 14%, var(--rk-surface));
  color: var(--rk-accent);
}
.maintenance-preview.is-overdue > span {
  background: var(--rk-danger-soft);
  color: var(--rk-danger);
}

.fun-preview {
  grid-template-columns: minmax(0,1fr) 104px;
  background: linear-gradient(135deg, var(--rk-accent-soft), color-mix(in srgb, var(--rk-surface) 88%, transparent)) !important;
}
.fun-chips span {
  background: color-mix(in srgb, var(--rk-accent) 12%, var(--rk-surface));
  color: color-mix(in srgb, var(--rk-accent) 72%, var(--rk-text));
}
.fun-chips span:nth-child(2) {
  background: var(--rk-secondary-soft);
  color: var(--rk-secondary);
}
.fun-chips span:nth-child(3) {
  background: var(--rk-primary-soft);
  color: var(--rk-primary);
}
.fun-copy strong { color: var(--rk-text); }
.fun-deck i,
.fun-deck b {
  background: var(--rk-surface);
  box-shadow: var(--rk-shadow-sm);
}
.fun-deck i { background: var(--rk-accent-soft); }
.fun-deck b { color: var(--rk-accent); }

.module-order-sheet {
  border-color: var(--rk-border);
  background: var(--rk-surface);
  color: var(--rk-text);
  box-shadow: var(--rk-shadow-float);
}
.module-order-handle { background: var(--rk-border-strong); }
.module-order-head p { color: var(--rk-text-secondary); }
.module-order-row {
  border-color: var(--rk-border);
  background: var(--rk-surface);
}
.module-order-drag {
  background: var(--rk-surface-soft);
  color: var(--rk-text-secondary);
}
.module-order-row-actions button,
.module-order-cancel {
  border-color: var(--rk-border);
  background: var(--rk-surface);
  color: var(--rk-primary);
}
.module-order-save {
  border-color: var(--rk-primary);
  background: var(--rk-primary);
  color: var(--rk-on-primary);
}

.superapp-toast {
  bottom: calc(98px + env(safe-area-inset-bottom));
  background: var(--rk-surface-raised);
  color: var(--rk-text);
  border: 1px solid var(--rk-border);
  box-shadow: var(--rk-shadow-md);
}

html[data-theme="dark"] .today-card {
  border-color: var(--rk-border);
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--rk-primary-soft) 72%, var(--rk-surface)) 0%,
      var(--rk-surface) 60%,
      color-mix(in srgb, var(--rk-accent-soft) 24%, var(--rk-surface)) 100%);
  box-shadow: var(--rk-shadow-sm);
}
html[data-theme="dark"] .family-module-card,
html[data-theme="dark"] .module-order-trigger,
html[data-theme="dark"] .today-agenda-card {
  border-color: var(--rk-border);
  background-color: var(--rk-surface);
}
html[data-theme="dark"] .notes-paper {
  background: color-mix(in srgb, var(--rk-beige) 15%, var(--rk-surface));
}

@media (hover: hover) and (pointer: fine) {
  .family-module-card:hover {
    border-color: color-mix(in srgb, var(--module-accent, var(--rk-primary)) 26%, var(--rk-border));
    box-shadow: var(--rk-shadow-md);
    transform: translateY(-1px);
  }
}

@media (max-width: 430px) {
  .superapp-home { padding-left: 16px; padding-right: 16px; }
  .superapp-brand-tagline { max-width: 150px; }
  .family-module-card { padding: 14px; }
}

@media (max-width: 360px) {
  .superapp-brand-tagline,
  .superapp-brand-separator { display: none; }
  .superapp-brand-row { margin-bottom: 12px; }
  .superapp-avatar { width: 54px; height: 54px; }
  .superapp-greeting h1 { font-size: 26px; }
  .module-order-trigger span { display: none; }
}


/* v2.0.0a50f — Documents Home Insight + Summary Polish V1 */
.family-module-card[data-module-id="documents"][data-documents-state="safe"] {
  --module-accent: var(--rk-success);
  --module-soft: var(--rk-success-soft);
}
.family-module-card[data-module-id="documents"][data-documents-state="attention"],
.family-module-card[data-module-id="documents"][data-documents-state="today"] {
  --module-accent: var(--rk-warning);
  --module-soft: var(--rk-warning-soft);
}
.family-module-card[data-module-id="documents"][data-documents-state="expired"] {
  --module-accent: var(--rk-danger);
  --module-soft: var(--rk-danger-soft);
}
.document-preview.is-safe > span { background: var(--rk-success-soft); color: var(--rk-success); }
.document-preview.is-attention > span,
.document-preview.is-today > span { background: var(--rk-warning-soft); color: var(--rk-warning); }
.document-preview.is-expired > span { background: var(--rk-danger-soft); color: var(--rk-danger); }
.document-preview strong,
.document-preview small {
  overflow: hidden;
  text-overflow: ellipsis;
}
.document-preview strong { white-space: nowrap; }
.document-preview small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ==================================================================
   v2.0.0a51a — Agenda Dekat V1
   H-3..H+3 with source-owned resolution state. Archive is not done.
   ================================================================== */
.near-agenda-past,
.near-agenda-day {
  min-width: 0;
}

.near-agenda-past {
  margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--rk-warning) 24%, var(--rk-border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--rk-warning-soft) 56%, var(--rk-surface));
  overflow: hidden;
}
.near-agenda-past-trigger {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--rk-text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.near-agenda-past-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--rk-warning-soft);
  color: var(--rk-warning);
  font-size: 18px;
}
.near-agenda-past-copy { min-width: 0; }
.near-agenda-past-copy strong,
.near-agenda-past-copy small { display: block; }
.near-agenda-past-copy strong { font-size: 11.5px; line-height: 1.35; }
.near-agenda-past-copy small { margin-top: 2px; color: var(--rk-text-secondary); font-size: 9px; line-height: 1.4; }
.near-agenda-past-chevron { color: var(--rk-text-secondary); font-size: 16px; }
.near-agenda-past-panel {
  display: grid;
  gap: 7px;
  padding: 0 9px 9px;
}
.near-agenda-past-panel[hidden] { display: none; }
.near-agenda-past-date {
  padding: 3px 2px 0;
  color: var(--rk-text-secondary);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.today-agenda-card.is-past-due {
  border-color: color-mix(in srgb, var(--rk-warning) 22%, var(--rk-border));
  background: color-mix(in srgb, var(--rk-surface) 88%, var(--rk-warning-soft));
}
.today-agenda-card.is-past-due .today-agenda-copy strong { color: var(--rk-text); }

.near-agenda-day + .near-agenda-day { margin-top: 14px; }
.near-agenda-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 7px;
}
.near-agenda-day-head strong {
  color: var(--rk-text-secondary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.near-agenda-day-head span {
  color: var(--rk-text-secondary);
  font-size: 8.5px;
  font-weight: 700;
}
.near-agenda-day.is-today .near-agenda-day-head strong {
  color: var(--rk-primary);
  font-size: 10px;
}
.near-agenda-day-list { display: grid; gap: 7px; }
.near-agenda-day-empty,
.near-agenda-future-calm {
  margin: 0;
  padding: 8px 4px;
  color: var(--rk-text-secondary);
  font-size: 9.5px;
  line-height: 1.45;
}
.near-agenda-future-calm {
  margin-top: 8px;
  border-top: 1px solid var(--rk-border);
}
.near-agenda-all-clear {
  display: grid;
  gap: 3px;
  max-width: 260px;
}
.near-agenda-all-clear strong {
  color: var(--rk-text);
  font-size: 12px;
}
.near-agenda-all-clear small {
  color: var(--rk-text-secondary);
  font-size: 9.5px;
  line-height: 1.5;
}

html[data-theme="dark"] .near-agenda-past {
  background: color-mix(in srgb, var(--rk-warning-soft) 34%, var(--rk-surface));
}
html[data-theme="dark"] .today-agenda-card.is-past-due {
  background: color-mix(in srgb, var(--rk-warning-soft) 18%, var(--rk-surface));
}

/* v2.0.0a54 — Tanggal Penting V1 Home card */
.important-module{grid-column:1 / -1}
.important-preview{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:11px;min-height:76px;padding:13px;background:linear-gradient(135deg,rgba(212,154,106,.10),rgba(232,91,112,.055))}
.important-preview>span{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:rgba(212,154,106,.15);color:#b87443}
.important-preview>span ion-icon{font-size:24px}
.important-preview strong{display:block;font-size:12px;line-height:1.35}
.important-preview small{display:block;margin-top:4px;color:var(--color-text-secondary,#7b817d);font-size:9px;line-height:1.4}
html[data-theme="dark"] .important-preview{background:linear-gradient(135deg,rgba(212,154,106,.10),rgba(232,91,112,.06))}