/* P4D.1 Exact Native UI Mirror
   Only demo-runtime surfaces live here. Production RuangKitha UI keeps using
   the exact CSS linked by each source page. */
html[data-rk-demo-mirror="true"] body { min-height: 100dvh; }

.rk-demo-mirror-toast {
  position: fixed;
  z-index: 10000;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  width: min(calc(100% - 32px), 390px);
  transform: translate(-50%, 12px);
  padding: 12px 15px;
  border: 1px solid var(--rk-border, rgba(80,96,88,.18));
  border-radius: 16px;
  background: color-mix(in srgb, var(--rk-surface, #fff) 94%, transparent);
  color: var(--rk-text, #25312c);
  box-shadow: 0 16px 40px rgba(24,35,30,.18);
  font: 600 12px/1.45 var(--rk-font-family, Manrope, sans-serif);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.rk-demo-mirror-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.rk-demo-os-layer {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  align-items: end;
  background: rgba(15, 23, 19, .38);
  padding: 14px;
}
.rk-demo-os-layer[hidden] { display: none !important; }
.rk-demo-os-sheet {
  width: min(100%, 430px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 28px;
  background: var(--rk-surface, #fff);
  color: var(--rk-text, #25312c);
  box-shadow: 0 26px 70px rgba(12, 20, 16, .28);
}
.rk-demo-os-head { padding: 22px 20px 12px; text-align: center; }
.rk-demo-os-head span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 13px;
  border-radius: 20px;
  background: var(--rk-primary-soft, #e6f0ea);
  color: var(--rk-primary, #6B8F7A);
  font-size: 28px;
}
.rk-demo-os-head strong { display: block; font-size: 17px; }
.rk-demo-os-head p { margin: 8px 0 0; color: var(--rk-text-secondary, #6e7772); font-size: 12px; line-height: 1.55; }
.rk-demo-os-actions { display: grid; gap: 8px; padding: 10px 16px 18px; }
.rk-demo-os-actions button {
  min-height: 50px;
  border: 1px solid var(--rk-border, rgba(80,96,88,.18));
  border-radius: 16px;
  background: var(--rk-surface-raised, #fff);
  color: var(--rk-text, #25312c);
  font: 700 13px var(--rk-font-family, Manrope, sans-serif);
}
.rk-demo-os-actions button.is-primary {
  border-color: transparent;
  background: var(--rk-primary, #6B8F7A);
  color: var(--rk-on-primary, #fff);
}

/* Prevent source loading skeletons from remaining active after the backend JS
   is intentionally removed in the public sandbox. */
html[data-rk-demo-mirror="true"] .home-hydrating,
html[data-rk-demo-mirror="true"] [aria-busy="true"] { opacity: 1; }

/* P4D.1a: cover cross-document navigation with the exact active app background. */
html[data-rk-demo-mirror="true"].rk-demo-leaving::after {
  content: "";
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  background: var(--color-background, #F4F6F4);
  pointer-events: none;
}
html[data-rk-demo-mirror="true"][data-theme="dark"].rk-demo-leaving::after { background: #0E1210; }

/* P4D.1b — demo safety / sanitization polish. */
html[data-rk-demo-mirror="true"] .avatar-profil-besar {
  display: grid !important;
  place-items: center !important;
  overflow: hidden;
}
html[data-rk-demo-mirror="true"] .rk-demo-profile-initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--color-primary, #6B8F7A);
}
html[data-rk-demo-mirror="true"] input[type="file"][data-rk-demo-file-disabled="true"] {
  display: none !important;
}
html[data-rk-demo-mirror="true"] [data-doc-form-pick-file] {
  cursor: pointer;
}