/* P103 CSS-R2 — standalone foundation preserving P85→P92 legacy order. */

/* === SOURCE: app-color-system-p85.css === */
/* P85 UXC1/UXC2 — Global Navy UI Color System
   Scope: application pages only. The desktop shell (index.php) and invitation-theme
   canvases are intentionally excluded. This file is also the token foundation for
   a later light/dark mode switch; P85 activates only the dark navy palette. */
:root{
  --sh-ui-bg:#101729;
  --sh-ui-bg-deep:#0d1425;
  --sh-ui-panel:#151d31;
  --sh-ui-panel-2:#1b2438;
  --sh-ui-raised:#292f40;
  --sh-ui-line:#2d3548;
  --sh-ui-line-soft:rgba(255,255,255,.10);
  --sh-ui-text:#f8fbff;
  --sh-ui-muted:#9aa2b2;
  --sh-ui-dim:#747d8d;
  --sh-ui-accent:#be185d;
  --sh-ui-accent-hover:#d11f69;
  --sh-ui-accent-soft:rgba(190,24,93,.16);
  --sh-ui-good:#86efac;
  --sh-ui-warn:#fde68a;
  --sh-ui-danger:#fca5a5;
  --sh-ui-input:#111a2d;
  --sh-ui-shadow:0 18px 48px rgba(0,0,0,.22);
  color-scheme:dark;
}

body.sh-app-page{
  background:var(--sh-ui-bg)!important;
  background-image:none!important;
  color:var(--sh-ui-text)!important;
}
body.sh-app-page .brand,
body.sh-app-page .brand strong,
body.sh-app-page h1,
body.sh-app-page h2,
body.sh-app-page h3,
body.sh-app-page h4{color:var(--sh-ui-text)!important;font-weight:500}
body.sh-app-page p,
body.sh-app-page .small{color:var(--sh-ui-muted)}
body.sh-app-page .hero,
body.sh-app-page .card{
  background:var(--sh-ui-panel)!important;
  border-color:var(--sh-ui-line)!important;
  color:var(--sh-ui-text)!important;
  box-shadow:none!important;
}
body.sh-app-page .eyebrow{color:#d65b91!important}
body.sh-app-page .nav a,
body.sh-app-page .btn,
body.sh-app-page button.btn{
  background:var(--sh-ui-raised)!important;
  border-color:#454d60!important;
  color:var(--sh-ui-text)!important;
  box-shadow:none!important;
}
body.sh-app-page .nav a:hover,
body.sh-app-page .btn:hover,
body.sh-app-page button.btn:hover{background:#333a4c!important;border-color:#596174!important}
body.sh-app-page .btn.primary,
body.sh-app-page button.btn.primary,
body.sh-app-page .btn.pink{
  background:var(--sh-ui-accent)!important;
  border-color:#d23a78!important;
  color:#fff!important;
}
body.sh-app-page .btn.primary:hover,
body.sh-app-page button.btn.primary:hover,
body.sh-app-page .btn.pink:hover{background:var(--sh-ui-accent-hover)!important}
body.sh-app-page .btn.green{background:#176b4f!important;border-color:#258161!important;color:#ecfdf5!important}
body.sh-app-page .btn.danger{background:rgba(185,28,28,.18)!important;border-color:rgba(252,165,165,.30)!important;color:#fecaca!important}
body.sh-app-page input,
body.sh-app-page textarea,
body.sh-app-page select{
  background:var(--sh-ui-input)!important;
  border-color:#3b4559!important;
  color:var(--sh-ui-text)!important;
}
body.sh-app-page input::placeholder,
body.sh-app-page textarea::placeholder{color:#7f899a!important;opacity:1}
body.sh-app-page input:focus-visible,
body.sh-app-page textarea:focus-visible,
body.sh-app-page select:focus-visible,
body.sh-app-page button:focus-visible,
body.sh-app-page a:focus-visible{outline-color:#e36b9f!important}
body.sh-app-page .notice{background:rgba(22,101,52,.20)!important;border-color:rgba(134,239,172,.28)!important;color:#bbf7d0!important}
body.sh-app-page .notice.error{background:rgba(153,27,27,.20)!important;border-color:rgba(252,165,165,.28)!important;color:#fecaca!important}
body.sh-app-page .table-wrap,
body.sh-app-page .data-table-wrap,
body.sh-app-page table{background:var(--sh-ui-panel)!important;border-color:var(--sh-ui-line)!important;color:var(--sh-ui-text)!important}
body.sh-app-page th{background:var(--sh-ui-panel-2)!important;color:#cbd5e1!important}
body.sh-app-page th,
body.sh-app-page td{border-color:var(--sh-ui-line)!important}
body.sh-app-page code{background:rgba(255,255,255,.07);color:#e2e8f0}
body.sh-app-page .auth-side,
body.sh-app-page .google-note,
body.sh-app-page .auth-points span{background:var(--sh-ui-panel-2)!important;border-color:var(--sh-ui-line)!important;color:var(--sh-ui-text)!important}
body.sh-app-page .footer-note{border-top-color:#3a4357;color:#aab2c0;text-shadow:none}
body.sh-app-page .footer-note::before{color:#d65b91;text-shadow:none}
body.sh-app-page .nav .small{background:var(--sh-ui-panel-2)!important;border-color:var(--sh-ui-line)!important;color:var(--sh-ui-muted)!important}

/* Standalone application surfaces that opt into sh-app-page. */
body.sh-app-page .auth-window,
body.sh-app-page .privacy-shell .hero,
body.sh-app-page .doc-sidebar,
body.sh-app-page .doc-article,
body.sh-app-page .doc-index,
body.sh-app-page .rsvp-card,
body.sh-app-page .security-card,
body.sh-app-page main.card{
  background:var(--sh-ui-panel)!important;
  border-color:var(--sh-ui-line)!important;
  color:var(--sh-ui-text)!important;
  box-shadow:var(--sh-ui-shadow)!important;
}
body.sh-app-page .window-bar,
body.sh-app-page .hero-head,
body.sh-app-page .doc-topbar{background:var(--sh-ui-panel-2)!important;border-color:var(--sh-ui-line)!important}
body.sh-app-page .intro,
body.sh-app-page .help,
body.sh-app-page .fine,
body.sh-app-page .rsvp-lead,
body.sh-app-page .rsvp-private,
body.sh-app-page .rsvp-count,
body.sh-app-page .rsvp-foot,
body.sh-app-page .doc-lead,
body.sh-app-page .content p,
body.sh-app-page .content ul{color:var(--sh-ui-muted)!important}
body.sh-app-page .field,
body.sh-app-page .rsvp-input,
body.sh-app-page .rsvp-textarea{background:var(--sh-ui-input)!important;border-color:#3b4559!important;color:var(--sh-ui-text)!important}
body.sh-app-page .btn.alt,
body.sh-app-page .back.alt{background:var(--sh-ui-raised)!important;color:var(--sh-ui-text)!important;border-color:#454d60!important}
body.sh-app-page .back,
body.sh-app-page .rsvp-submit{background:var(--sh-ui-accent)!important;color:#fff!important}
body.sh-app-page .rsvp-form,
body.sh-app-page .rsvp-list,
body.sh-app-page .rsvp-table-wrap,
body.sh-app-page .rsvp-table th,
body.sh-app-page .rsvp-table td{border-color:var(--sh-ui-line)!important}
body.sh-app-page .rsvp-option{background:var(--sh-ui-input)!important;border-color:#3b4559!important;color:var(--sh-ui-text)!important}
body.sh-app-page .rsvp-option:has(input:checked){background:var(--sh-ui-accent-soft)!important;border-color:#d23a78!important}
body.sh-app-page .rsvp-table th{background:var(--sh-ui-panel-2)!important;color:#cbd5e1!important}
body.sh-app-page .rsvp-pages a,
body.sh-app-page .rsvp-pages span{border-color:var(--sh-ui-line)!important;color:#dbe3ef!important}
body.sh-app-page .rsvp-pages .active{background:var(--sh-ui-accent)!important;border-color:var(--sh-ui-accent)!important;color:#fff!important}

/* Preserve semantic colors; only remove purple/light-page treatment. */
body.sh-app-page .status,
body.sh-app-page .good,
body.sh-app-page .bad,
body.sh-app-page .gate,
body.sh-app-page .msg,
body.sh-app-page .rsvp-alert{box-shadow:none!important}

@media(max-width:640px){
  body.sh-app-page .table-wrap tr,
  body.sh-app-page .data-table-wrap tr{background:var(--sh-ui-panel-2)!important;box-shadow:none!important}
}

/* Custom standalone application pages */
body.sh-app-page .brand,
body.sh-app-page .rsvp-brand,
body.sh-app-page .doc-brand,
body.sh-app-page .doc-toplinks a,
body.sh-app-page .back-link{color:var(--sh-ui-text)!important}
body.sh-app-page .mark,
body.sh-app-page .brand-mark,
body.sh-app-page .rsvp-brand-dot{background:var(--sh-ui-accent)!important;border-color:#d23a78!important;color:#fff!important}
body.sh-app-page .meta{border-color:var(--sh-ui-line)!important}
body.sh-app-page .meta div{border-color:var(--sh-ui-line)!important}
body.sh-app-page .meta dt,
body.sh-app-page .creator-email,
body.sh-app-page .fine,
body.sh-app-page .mini{color:var(--sh-ui-muted)!important}
body.sh-app-page .meta dd,
body.sh-app-page .field-label,
body.sh-app-page .notice strong,
body.sh-app-page .fine b{color:var(--sh-ui-text)!important}
body.sh-app-page .domain,
body.sh-app-page .step,
body.sh-app-page .doc-search,
body.sh-app-page .doc-markdown code,
body.sh-app-page .doc-markdown blockquote{
  background:var(--sh-ui-panel-2)!important;
  border-color:var(--sh-ui-line)!important;
  color:var(--sh-ui-text)!important;
}
body.sh-app-page .step b{background:var(--sh-ui-accent-soft)!important;color:#f3a6c8!important}
body.sh-app-page .content h2,
body.sh-app-page .content h3,
body.sh-app-page .doc-markdown h2,
body.sh-app-page .doc-markdown h3,
body.sh-app-page .doc-markdown h4{color:var(--sh-ui-text)!important}
body.sh-app-page .rsvp-kicker,
body.sh-app-page .rsvp-label,
body.sh-app-page .doc-eyebrow,
body.sh-app-page .doc-sidebar-all,
body.sh-app-page .doc-breadcrumb a,
body.sh-app-page .doc-markdown a,
body.sh-app-page .doc-article-footer a{color:#d65b91!important}
body.sh-app-page .rsvp-title,
body.sh-app-page .rsvp-list-head h2{color:var(--sh-ui-text)!important}
body.sh-app-page .rsvp-note{background:var(--sh-ui-panel-2)!important;color:#cbd5e1!important;border-left-color:var(--sh-ui-accent)!important}
body.sh-app-page .rsvp-table{color:var(--sh-ui-text)!important}
body.sh-app-page .rsvp-time{color:var(--sh-ui-muted)!important}
body.sh-app-page .rsvp-empty{border-color:var(--sh-ui-line)!important;color:var(--sh-ui-muted)!important}
body.sh-app-page .window-title{color:#cbd5e1!important}
body.sh-app-page .taskbar-hint{background:rgba(16,23,41,.92)!important;border-color:var(--sh-ui-line)!important;color:#cbd5e1!important}

/* === SOURCE: app-dual-mode-p87.css === */
/* P87 UXC3 — Global Terang | Gelap foundation.
   Scope: application UI only. Desktop (index.php) and invitation-theme canvases are excluded.
   P85/P86 remain the dark visual baseline; this file adds a persistent light palette and
   closes legacy hard-coded surfaces so both modes use one semantic token system. */

:root,
html[data-sh-theme="dark"]{
  --sh-ui-bg:#101729;
  --sh-ui-bg-deep:#0d1425;
  --sh-ui-panel:#151d31;
  --sh-ui-panel-2:#1b2438;
  --sh-ui-raised:#292f40;
  --sh-ui-line:#2d3548;
  --sh-ui-line-soft:rgba(255,255,255,.10);
  --sh-ui-text:#f8fbff;
  --sh-ui-muted:#9aa2b2;
  --sh-ui-dim:#747d8d;
  --sh-ui-accent:#be185d;
  --sh-ui-accent-hover:#d11f69;
  --sh-ui-accent-soft:rgba(190,24,93,.16);
  --sh-ui-good:#86efac;
  --sh-ui-warn:#fde68a;
  --sh-ui-danger:#fca5a5;
  --sh-ui-input:#111a2d;
  --sh-ui-shadow:0 18px 48px rgba(0,0,0,.22);
  --sh-ui-button-border:#454d60;
  --sh-ui-button-hover:#333a4c;
  --sh-ui-link:#e36b9f;
  --sh-ui-link-hover:#f3a6c8;
  --sh-ui-code:rgba(255,255,255,.07);
  --sh-ui-good-bg:rgba(22,101,52,.20);
  --sh-ui-good-line:rgba(134,239,172,.28);
  --sh-ui-warn-bg:rgba(120,53,15,.18);
  --sh-ui-warn-line:rgba(253,230,138,.24);
  --sh-ui-danger-bg:rgba(153,27,27,.20);
  --sh-ui-danger-line:rgba(252,165,165,.28);
  color-scheme:dark;
}

html[data-sh-theme="light"]{
  --sh-ui-bg:#f3f6fb;
  --sh-ui-bg-deep:#e9eef6;
  --sh-ui-panel:#ffffff;
  --sh-ui-panel-2:#eef2f7;
  --sh-ui-raised:#e4e9f1;
  --sh-ui-line:#d3dae6;
  --sh-ui-line-soft:rgba(15,23,42,.10);
  --sh-ui-text:#172033;
  --sh-ui-muted:#526075;
  --sh-ui-dim:#627086;
  --sh-ui-accent:#be185d;
  --sh-ui-accent-hover:#a91451;
  --sh-ui-accent-soft:rgba(190,24,93,.10);
  --sh-ui-good:#166534;
  --sh-ui-warn:#92400e;
  --sh-ui-danger:#b42318;
  --sh-ui-input:#ffffff;
  --sh-ui-shadow:0 14px 38px rgba(15,23,42,.08);
  --sh-ui-button-border:#c9d1df;
  --sh-ui-button-hover:#d9e0ea;
  --sh-ui-link:#a91451;
  --sh-ui-link-hover:#831843;
  --sh-ui-code:#eef2f7;
  --sh-ui-good-bg:#ecfdf3;
  --sh-ui-good-line:#bbf7d0;
  --sh-ui-warn-bg:#fffbeb;
  --sh-ui-warn-line:#fde68a;
  --sh-ui-danger-bg:#fff4f2;
  --sh-ui-danger-line:#fecaca;
  color-scheme:light;
}

/* One compact control. JS mounts it inside the shared nav, or floats it on standalone pages. */
.sh-theme-toggle{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:34px;
  padding:7px 10px!important;
  border:1px solid var(--sh-ui-button-border)!important;
  background:var(--sh-ui-raised)!important;
  color:var(--sh-ui-muted)!important;
  font:500 11px/1.1 Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
  letter-spacing:.015em;
  cursor:pointer;
  box-shadow:none!important;
  white-space:nowrap!important;
  z-index:2147482000;
}
.sh-theme-toggle:hover{background:var(--sh-ui-button-hover)!important;color:var(--sh-ui-text)!important}
.sh-theme-toggle .sh-theme-choice{color:var(--sh-ui-muted)!important}
.sh-theme-toggle .sh-theme-choice.is-active{color:var(--sh-ui-accent)!important}
.sh-theme-toggle .sh-theme-divider{color:var(--sh-ui-dim)!important;font-weight:500}
.sh-theme-toggle.is-floating{position:fixed;right:14px;top:14px}
@media(max-width:640px){
  .sh-theme-toggle{min-height:40px;padding:8px 10px!important}
  .topbar .nav .sh-theme-toggle{width:auto!important;min-width:116px!important}
  .sh-theme-toggle.is-floating{right:10px;top:10px}
}

/* Application-shell primitives. These selectors deliberately sit above legacy local CSS. */
html[data-sh-theme] body.sh-app-page{
  background:var(--sh-ui-bg)!important;
  background-image:none!important;
  color:var(--sh-ui-text)!important;
}
html[data-sh-theme] body.sh-app-page .hero,
html[data-sh-theme] body.sh-app-page .card,
html[data-sh-theme] body.sh-app-page .auth-window,
html[data-sh-theme] body.sh-app-page .privacy-shell .hero,
html[data-sh-theme] body.sh-app-page .doc-sidebar,
html[data-sh-theme] body.sh-app-page .doc-article,
html[data-sh-theme] body.sh-app-page .doc-index,
html[data-sh-theme] body.sh-app-page .rsvp-card,
html[data-sh-theme] body.sh-app-page .security-card,
html[data-sh-theme] body.sh-app-page main.card,
html[data-sh-theme] body.sh-app-page .vip-hero,
html[data-sh-theme] body.sh-app-page .vip-card,
html[data-sh-theme] body.sh-app-page .media-hero,
html[data-sh-theme] body.sh-app-page .media-card{
  background:var(--sh-ui-panel)!important;
  border-color:var(--sh-ui-line)!important;
  color:var(--sh-ui-text)!important;
  box-shadow:var(--sh-ui-shadow)!important;
}
html[data-sh-theme] body.sh-app-page h1,
html[data-sh-theme] body.sh-app-page h2,
html[data-sh-theme] body.sh-app-page h3,
html[data-sh-theme] body.sh-app-page h4,
html[data-sh-theme] body.sh-app-page .brand,
html[data-sh-theme] body.sh-app-page .brand strong,
html[data-sh-theme] body.sh-app-page .rsvp-title,
html[data-sh-theme] body.sh-app-page .rsvp-list-head h2,
html[data-sh-theme] body.sh-app-page .media-title,
html[data-sh-theme] body.sh-app-page .vip-card h2,
html[data-sh-theme] body.sh-app-page .vip-card h3{color:var(--sh-ui-text)!important}
html[data-sh-theme] body.sh-app-page p,
html[data-sh-theme] body.sh-app-page .small,
html[data-sh-theme] body.sh-app-page .intro,
html[data-sh-theme] body.sh-app-page .help,
html[data-sh-theme] body.sh-app-page .fine,
html[data-sh-theme] body.sh-app-page .mini,
html[data-sh-theme] body.sh-app-page .creator-email,
html[data-sh-theme] body.sh-app-page .rsvp-lead,
html[data-sh-theme] body.sh-app-page .rsvp-private,
html[data-sh-theme] body.sh-app-page .rsvp-count,
html[data-sh-theme] body.sh-app-page .rsvp-foot,
html[data-sh-theme] body.sh-app-page .rsvp-time,
html[data-sh-theme] body.sh-app-page .doc-lead,
html[data-sh-theme] body.sh-app-page .content p,
html[data-sh-theme] body.sh-app-page .content ul,
html[data-sh-theme] body.sh-app-page .vip-desc,
html[data-sh-theme] body.sh-app-page .vip-meta,
html[data-sh-theme] body.sh-app-page .vip-field label,
html[data-sh-theme] body.sh-app-page .vip-note,
html[data-sh-theme] body.sh-app-page .media-info,
html[data-sh-theme] body.sh-app-page .media-small-note{color:var(--sh-ui-muted)!important}
html[data-sh-theme] body.sh-app-page .eyebrow,
html[data-sh-theme] body.sh-app-page .vip-kicker,
html[data-sh-theme] body.sh-app-page .rsvp-kicker,
html[data-sh-theme] body.sh-app-page .rsvp-label,
html[data-sh-theme] body.sh-app-page .doc-eyebrow,
html[data-sh-theme] body.sh-app-page .doc-sidebar-all,
html[data-sh-theme] body.sh-app-page .doc-breadcrumb a,
html[data-sh-theme] body.sh-app-page .doc-markdown a,
html[data-sh-theme] body.sh-app-page .doc-article-footer a{color:var(--sh-ui-accent)!important}

html[data-sh-theme] body.sh-app-page .nav a,
html[data-sh-theme] body.sh-app-page .btn,
html[data-sh-theme] body.sh-app-page button.btn,
html[data-sh-theme] body.sh-app-page .back.alt,
html[data-sh-theme] body.sh-app-page .vip-mini-actions a,
html[data-sh-theme] body.sh-app-page .vip-mini-actions button,
html[data-sh-theme] body.sh-app-page .media-filterbar a,
html[data-sh-theme] body.sh-app-page .rsvp-pager a{
  background:var(--sh-ui-raised)!important;
  border-color:var(--sh-ui-button-border)!important;
  color:var(--sh-ui-text)!important;
  box-shadow:none!important;
}
html[data-sh-theme] body.sh-app-page .nav a:hover,
html[data-sh-theme] body.sh-app-page .btn:hover,
html[data-sh-theme] body.sh-app-page button.btn:hover,
html[data-sh-theme] body.sh-app-page .media-filterbar a:hover{background:var(--sh-ui-button-hover)!important}
html[data-sh-theme] body.sh-app-page .btn.primary,
html[data-sh-theme] body.sh-app-page button.btn.primary,
html[data-sh-theme] body.sh-app-page .btn.pink,
html[data-sh-theme] body.sh-app-page .back,
html[data-sh-theme] body.sh-app-page .rsvp-submit,
html[data-sh-theme] body.sh-app-page .media-filterbar a.is-active,
html[data-sh-theme] body.sh-app-page .rsvp-pages .active,
html[data-sh-theme] body.sh-app-page .rsvp-pager span{
  background:var(--sh-ui-accent)!important;
  border-color:var(--sh-ui-accent)!important;
  color:#fff!important;
}
html[data-sh-theme] body.sh-app-page input,
html[data-sh-theme] body.sh-app-page textarea,
html[data-sh-theme] body.sh-app-page select,
html[data-sh-theme] body.sh-app-page .field,
html[data-sh-theme] body.sh-app-page .rsvp-input,
html[data-sh-theme] body.sh-app-page .rsvp-textarea,
html[data-sh-theme] body.sh-app-page .rsvp-option{
  background:var(--sh-ui-input)!important;
  border-color:var(--sh-ui-button-border)!important;
  color:var(--sh-ui-text)!important;
}
html[data-sh-theme] body.sh-app-page input::placeholder,
html[data-sh-theme] body.sh-app-page textarea::placeholder{color:var(--sh-ui-dim)!important;opacity:1}
html[data-sh-theme] body.sh-app-page code{background:var(--sh-ui-code)!important;color:var(--sh-ui-text)!important}
html[data-sh-theme] body.sh-app-page .table-wrap,
html[data-sh-theme] body.sh-app-page .data-table-wrap,
html[data-sh-theme] body.sh-app-page table{background:var(--sh-ui-panel)!important;border-color:var(--sh-ui-line)!important;color:var(--sh-ui-text)!important}
html[data-sh-theme] body.sh-app-page th{background:var(--sh-ui-panel-2)!important;color:var(--sh-ui-text)!important}
html[data-sh-theme] body.sh-app-page th,
html[data-sh-theme] body.sh-app-page td{border-color:var(--sh-ui-line)!important}
html[data-sh-theme] body.sh-app-page .domain,
html[data-sh-theme] body.sh-app-page .step,
html[data-sh-theme] body.sh-app-page .doc-search,
html[data-sh-theme] body.sh-app-page .doc-markdown code,
html[data-sh-theme] body.sh-app-page .doc-markdown blockquote,
html[data-sh-theme] body.sh-app-page .rsvp-note,
html[data-sh-theme] body.sh-app-page .vip-empty,
html[data-sh-theme] body.sh-app-page .media-stat,
html[data-sh-theme] body.sh-app-page .media-privacy-note,
html[data-sh-theme] body.sh-app-page .media-empty{
  background:var(--sh-ui-panel-2)!important;
  border-color:var(--sh-ui-line)!important;
  color:var(--sh-ui-muted)!important;
}
html[data-sh-theme] body.sh-app-page .media-preview,
html[data-sh-theme] body.sh-app-page .media-quota-bar{background:var(--sh-ui-input)!important;color:var(--sh-ui-muted)!important}
html[data-sh-theme] body.sh-app-page .meta,
html[data-sh-theme] body.sh-app-page .meta div,
html[data-sh-theme] body.sh-app-page .rsvp-form,
html[data-sh-theme] body.sh-app-page .rsvp-list,
html[data-sh-theme] body.sh-app-page .rsvp-table-wrap,
html[data-sh-theme] body.sh-app-page .rsvp-table th,
html[data-sh-theme] body.sh-app-page .rsvp-table td,
html[data-sh-theme] body.sh-app-page .rsvp-empty{border-color:var(--sh-ui-line)!important}
html[data-sh-theme] body.sh-app-page .meta dd,
html[data-sh-theme] body.sh-app-page .field-label,
html[data-sh-theme] body.sh-app-page .notice strong,
html[data-sh-theme] body.sh-app-page .fine b,
html[data-sh-theme] body.sh-app-page .media-stat b{color:var(--sh-ui-text)!important}

/* Semantic feedback survives both modes without becoming a white card in dark mode. */
html[data-sh-theme] body.sh-app-page .notice:not(.error),
html[data-sh-theme] body.sh-app-page .notice-ok,
html[data-sh-theme] body.sh-app-page .msg.ok,
html[data-sh-theme] body.sh-app-page .good,
html[data-sh-theme] body.sh-app-page .rsvp-state.is-live,
html[data-sh-theme] body.sh-app-page .media-used{
  background:var(--sh-ui-good-bg)!important;
  border-color:var(--sh-ui-good-line)!important;
  color:var(--sh-ui-good)!important;
}
html[data-sh-theme] body.sh-app-page .notice.error,
html[data-sh-theme] body.sh-app-page .notice-bad,
html[data-sh-theme] body.sh-app-page .bad,
html[data-sh-theme] body.sh-app-page .status.bad{
  background:var(--sh-ui-danger-bg)!important;
  border-color:var(--sh-ui-danger-line)!important;
  color:var(--sh-ui-danger)!important;
}
html[data-sh-theme] body.sh-app-page .gate,
html[data-sh-theme] body.sh-app-page .msg:not(.ok),
html[data-sh-theme] body.sh-app-page .vip-pending,
html[data-sh-theme] body.sh-app-page .media-unused{
  background:var(--sh-ui-warn-bg)!important;
  border-color:var(--sh-ui-warn-line)!important;
  color:var(--sh-ui-warn)!important;
}
html[data-sh-theme="light"] body.sh-app-page .status:not(.bad){background:#ecfdf3!important;border-color:#bbf7d0!important;color:#166534!important}

/* Footer and short-page geometry continue to use the shared shell in both modes. */
html[data-sh-theme] body.sh-app-page .footer-note{border-top-color:var(--sh-ui-line)!important;color:var(--sh-ui-muted)!important;text-shadow:none!important}
html[data-sh-theme] body.sh-app-page .footer-note::before{color:var(--sh-ui-accent)!important;text-shadow:none!important}

/* Workspace (Dashboard + Studio): light mode overrides legacy dark-only declarations.
   Dark mode is intentionally left visually equivalent to P85/P86. */
html[data-sh-theme="light"] body.sh-workspace-body{
  background:var(--sh-ui-bg)!important;
  color:var(--sh-ui-text)!important;
}
html[data-sh-theme="light"] body.sh-workspace-body .brand,
html[data-sh-theme="light"] body.sh-workspace-body .nav .small{color:var(--sh-ui-text)!important}
html[data-sh-theme="light"] body.sh-workspace-body .nav .small,
html[data-sh-theme="light"] body.sh-workspace-body .nav a{
  background:var(--sh-ui-raised)!important;
  border-color:var(--sh-ui-line)!important;
  color:var(--sh-ui-text)!important;
}
html[data-sh-theme="light"] body.sh-workspace-body .nav a:hover{background:var(--sh-ui-button-hover)!important}
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame{
  --ws-panel:#ffffff;
  --ws-panel-2:#eef2f7;
  --ws-soft:#f7f9fc;
  --ws-line:#d3dae6;
  --ws-line-strong:rgba(190,24,93,.34);
  --ws-text:#172033;
  --ws-muted:#526075;
  --ws-dim:#627086;
  --ws-accent:#be185d;
  --ws-accent-2:#a91451;
  --ws-good:#166534;
  --ws-warn:#92400e;
  color:var(--ws-text)!important;
  background:#ffffff!important;
  border-color:var(--ws-line)!important;
  box-shadow:0 18px 54px rgba(15,23,42,.08)!important;
}
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame h1,
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame h2,
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame h3,
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame h4,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-invitation-title,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-side-line strong,
html[data-sh-theme="light"] body.sh-workspace-body .studio-rail-list dd,
html[data-sh-theme="light"] body.sh-workspace-body .studio-utility-item strong,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .core-help strong,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .recipient-gate-state strong,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .recipient-gate-toggle strong,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .recipient-audit h4{color:var(--ws-text)!important}
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame p,
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame .small,
html[data-sh-theme="light"] body.sh-workspace-body .schema-note,
html[data-sh-theme="light"] body.sh-workspace-body .media-current,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-section-head p,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-invitation-meta,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-side-block p,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-side-line,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-design-note,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .recipient-gate-note,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-savebar-copy small{color:var(--ws-muted)!important}
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame .btn,
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame button.btn,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-more summary{
  color:var(--ws-text)!important;
  background:var(--sh-ui-raised)!important;
  border-color:var(--sh-ui-line)!important;
}
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame .btn:hover,
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame button.btn:hover{background:var(--sh-ui-button-hover)!important}
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame .btn.primary,
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame button.btn.primary{background:var(--ws-accent)!important;border-color:var(--ws-accent)!important;color:#fff!important}
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame .btn.secondary-save{background:var(--sh-ui-raised)!important;border-color:var(--sh-ui-line)!important;color:var(--ws-text)!important}
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame a{color:var(--sh-ui-link)!important}
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame a:hover{color:var(--sh-ui-link-hover)!important}
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-filter{color:var(--ws-muted)!important}
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-filter:hover,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-filter.is-active{color:var(--ws-text)!important}
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-filter span{color:#9f5375!important}
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-invitation-row,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-sidebar,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-section-head,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-side-block,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-side-line,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-tool-links a,
html[data-sh-theme="light"] body.sh-workspace-body .studio-rail,
html[data-sh-theme="light"] body.sh-workspace-body .studio-rail-block,
html[data-sh-theme="light"] body.sh-workspace-body .studio-utility-line,
html[data-sh-theme="light"] body.sh-workspace-body .studio-utility-item,
html[data-sh-theme="light"] body.sh-workspace-body .studio-rail-list div{border-color:var(--ws-line)!important}
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-more-menu,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-group-fold,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-panel,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-quiet-tool{
  background:var(--ws-panel)!important;
  border-color:var(--ws-line)!important;
  color:var(--ws-text)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.07)!important;
}
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-more-menu a{color:var(--ws-text)!important}
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-more-menu a:hover{background:var(--sh-ui-panel-2)!important}
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-more-menu a.is-danger{color:#b42318!important}
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-group-fold summary,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-panel summary,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-quiet-tool summary{background:var(--ws-panel-2)!important;color:var(--ws-text)!important}
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-group-fold[open] summary,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-panel[open] summary,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-quiet-tool[open] summary{background:var(--sh-ui-accent-soft)!important}
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-group-body,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-panel-body,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-quiet-tool-body{background:#f8fafc!important}
html[data-sh-theme="light"] body.sh-workspace-body .studio-page input,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page textarea,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page select,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .maps-link-helper,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .date-rule-note,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .font-preview-trigger,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .font-preview-popover,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .gradient-color-panel{
  background:#ffffff!important;
  border-color:#c9d1df!important;
  color:#172033!important;
}
html[data-sh-theme="light"] body.sh-workspace-body .studio-page input::placeholder,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page textarea::placeholder{color:#627086!important}
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .core-form-section label,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .form-field label,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .font-preview-row{color:#263247!important}
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .font-preview-row:hover,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .font-preview-row:focus{background:#f4e7ed!important}
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .font-preview-row.is-selected{background:#f8dce8!important}
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-savebar,
html[data-sh-theme="light"] body.sh-workspace-body .studio-shell-savebar{background:rgba(255,255,255,.98)!important;border-color:#d3dae6!important;color:#172033!important}

/* Studio chrome that historically used hard-coded plum/navy. Preview paper remains unchanged. */
html[data-sh-theme="light"] body.sh-workspace-body .studio-live-commandbar,
html[data-sh-theme="light"] body.sh-workspace-body .studio-live-toolstrip,
html[data-sh-theme="light"] body.sh-workspace-body .studio-live-editor,
html[data-sh-theme="light"] body.sh-workspace-body .studio-command-menu__content{
  background:#ffffff!important;
  border-color:#d3dae6!important;
  color:#172033!important;
}
html[data-sh-theme="light"] body.sh-workspace-body .studio-live-tool,
html[data-sh-theme="light"] body.sh-workspace-body .studio-live-toolstrip__bottom a,
html[data-sh-theme="light"] body.sh-workspace-body .studio-command-menu__content h3,
html[data-sh-theme="light"] body.sh-workspace-body .studio-command-menu__content dd,
html[data-sh-theme="light"] body.sh-workspace-body .studio-command-status strong{color:#172033!important}
html[data-sh-theme="light"] body.sh-workspace-body .studio-live-tool:hover,
html[data-sh-theme="light"] body.sh-workspace-body .studio-live-toolstrip__bottom a:hover,
html[data-sh-theme="light"] body.sh-workspace-body .studio-command-menu__content a:hover{background:#eef2f7!important;color:#172033!important}
html[data-sh-theme="light"] body.sh-workspace-body .studio-live-tool.is-active,
html[data-sh-theme="light"] body.sh-workspace-body .studio-command-menu[open]>summary{background:var(--sh-ui-accent-soft)!important;border-color:rgba(190,24,93,.35)!important;color:#831843!important}
html[data-sh-theme="light"] body.sh-workspace-body .studio-command-menu__content dt,
html[data-sh-theme="light"] body.sh-workspace-body .studio-command-status,
html[data-sh-theme="light"] body.sh-workspace-body .studio-command-status small{color:#526075!important}

/* Responsive table cards must also flip; P86 dark rules use hard-coded navy here. */
@media(max-width:640px){
  html[data-sh-theme="light"] body.sh-app-page .table-wrap tr,
  html[data-sh-theme="light"] body.sh-app-page .data-table-wrap tr{background:var(--sh-ui-panel)!important;border-color:var(--sh-ui-line)!important;box-shadow:0 8px 24px rgba(15,23,42,.06)!important}
  html[data-sh-theme="light"] body.sh-app-page .table-wrap td,
  html[data-sh-theme="light"] body.sh-app-page .data-table-wrap td{border-bottom-color:var(--sh-ui-line)!important}
}

/* Respect reduced motion: color switching is instant by default; only the compact toggle gets a tiny affordance. */
@media(prefers-reduced-motion:no-preference){
  .sh-theme-toggle{transition:background-color .14s ease,border-color .14s ease,color .14s ease}
}

/* P94 — compact header account + single-icon theme switch. */
.sh-account-menu{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:0;
  z-index:2147482500;
}
.sh-account-trigger{
  width:36px;
  height:36px;
  min-width:36px;
  display:inline-grid;
  place-items:center;
  padding:0!important;
  border:1px solid var(--sh-ui-button-border)!important;
  background:transparent!important;
  color:var(--sh-ui-text)!important;
  cursor:pointer;
  box-shadow:none!important;
}
.sh-account-trigger svg{width:18px;height:18px;display:block}
.sh-account-trigger:hover,
.sh-account-menu.is-open .sh-account-trigger,
.sh-account-menu:focus-within .sh-account-trigger{
  background:var(--sh-ui-button-hover)!important;
  color:var(--sh-ui-accent)!important;
}
.sh-account-trigger:focus-visible,
.sh-theme-toggle:focus-visible{
  outline:2px solid var(--sh-ui-accent)!important;
  outline-offset:2px;
}
.sh-account-popover{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:min(270px,calc(100vw - 24px));
  padding:10px;
  background:var(--sh-ui-panel)!important;
  border:1px solid var(--sh-ui-line)!important;
  color:var(--sh-ui-text)!important;
  box-shadow:var(--sh-ui-shadow)!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}
.sh-account-menu:hover .sh-account-popover,
.sh-account-menu:focus-within .sh-account-popover,
.sh-account-menu.is-open .sh-account-popover{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.sh-account-identity{
  display:grid;
  gap:2px;
  padding:4px 4px 9px;
  border-bottom:1px solid var(--sh-ui-line)!important;
  margin-bottom:5px;
  min-width:0;
}
.sh-account-identity strong{font-size:13px;font-weight:500;color:var(--sh-ui-text)!important;overflow-wrap:anywhere}
.sh-account-identity span{font-size:12px;color:var(--sh-ui-muted)!important;overflow-wrap:anywhere}
.sh-account-identity small{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--sh-ui-dim)!important}
html[data-sh-theme] body.sh-app-page .sh-account-popover > a{
  display:flex!important;
  width:100%;
  min-height:36px;
  align-items:center;
  padding:8px 7px!important;
  border:0!important;
  border-bottom:1px solid var(--sh-ui-line-soft)!important;
  background:transparent!important;
  color:var(--sh-ui-text)!important;
  text-decoration:none;
  font-size:12px;
  font-weight:500;
  box-shadow:none!important;
}
html[data-sh-theme] body.sh-app-page .sh-account-popover > a:last-child{border-bottom:0!important}
html[data-sh-theme] body.sh-app-page .sh-account-popover > a:hover,
html[data-sh-theme] body.sh-app-page .sh-account-popover > a:focus-visible{background:var(--sh-ui-button-hover)!important}
html[data-sh-theme] body.sh-app-page .sh-account-popover > a.sh-account-logout{color:var(--sh-ui-danger)!important}

/* Theme control is action-oriented: show the mode the button will switch to. */
.sh-theme-toggle{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
  gap:0!important;
  background:transparent!important;
  color:var(--sh-ui-text)!important;
}
.sh-theme-toggle .sh-theme-choice,
.sh-theme-toggle .sh-theme-divider{display:none!important}
.sh-theme-toggle::before{
  content:"";
  display:block;
  width:18px;
  height:18px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:18px 18px;
  mask-size:18px 18px;
}
/* Dark is active -> offer Light (sun). */
html[data-sh-theme="dark"] .sh-theme-toggle::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.65 17.65l1.42 1.42M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.65 6.35l1.42-1.42'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.65 17.65l1.42 1.42M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.65 6.35l1.42-1.42'/%3E%3C/g%3E%3C/svg%3E");
}
/* Light is active -> offer Dark (moon). */
html[data-sh-theme="light"] .sh-theme-toggle::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.3A8.6 8.6 0 0 1 8.7 4a8.7 8.7 0 1 0 11.3 11.3Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.3A8.6 8.6 0 0 1 8.7 4a8.7 8.7 0 1 0 11.3 11.3Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sh-theme-toggle:hover{background:var(--sh-ui-button-hover)!important;color:var(--sh-ui-accent)!important}
@media(max-width:640px){
  .topbar .nav .sh-theme-toggle{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important}
  .sh-account-trigger{width:40px;height:40px;min-width:40px}
  .sh-account-popover{position:fixed;right:10px;top:62px;width:min(290px,calc(100vw - 20px))}
}

/* === SOURCE: app-light-readability-p88.css === */
/* P88 UXC4 — Light Mode Structure & Readability.
   Light-mode only. Dark mode, Desktop, and invitation canvases remain untouched.
   Goal: reduce nested-card noise, strengthen hierarchy, and keep only meaningful surfaces. */

html[data-sh-theme="light"]{
  --sh-ui-bg:#f5f7fa;
  --sh-ui-bg-deep:#edf1f5;
  --sh-ui-panel:#ffffff;
  --sh-ui-panel-2:#f7f9fc;
  --sh-ui-raised:#eef2f6;
  --sh-ui-line:#cfd6e1;
  --sh-ui-line-soft:rgba(15,23,42,.09);
  --sh-ui-text:#111827;
  --sh-ui-muted:#475569;
  --sh-ui-dim:#64748b;
  --sh-ui-input:#ffffff;
  --sh-ui-button-border:#c6cfdb;
  --sh-ui-button-hover:#e5eaf1;
  --sh-ui-shadow:none;
}

/* Stronger type hierarchy and controls. */
html[data-sh-theme="light"] body.sh-app-page{color:var(--sh-ui-text)!important}
html[data-sh-theme="light"] body.sh-app-page p,
html[data-sh-theme="light"] body.sh-app-page .small,
html[data-sh-theme="light"] body.sh-app-page .help,
html[data-sh-theme="light"] body.sh-app-page .fine,
html[data-sh-theme="light"] body.sh-app-page .mini,
html[data-sh-theme="light"] body.sh-app-page .intro{color:var(--sh-ui-muted)!important}
html[data-sh-theme="light"] body.sh-app-page input,
html[data-sh-theme="light"] body.sh-app-page textarea,
html[data-sh-theme="light"] body.sh-app-page select{
  border-color:var(--sh-ui-button-border)!important;
  background:#fff!important;
  color:var(--sh-ui-text)!important;
}
html[data-sh-theme="light"] body.sh-app-page input:focus,
html[data-sh-theme="light"] body.sh-app-page textarea:focus,
html[data-sh-theme="light"] body.sh-app-page select:focus{
  outline:2px solid rgba(190,24,93,.22)!important;
  outline-offset:1px!important;
  border-color:rgba(190,24,93,.52)!important;
}

/* The page header is a section, not another card. */
html[data-sh-theme="light"] body.sh-app-standard-page .hero{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--sh-ui-line)!important;
  box-shadow:none!important;
  padding:10px 0 18px!important;
  margin-bottom:18px!important;
}

/* Top-level content may be a surface; nested surfaces must not look like stacked cards. */
html[data-sh-theme="light"] body.sh-app-page .card,
html[data-sh-theme="light"] body.sh-app-page .auth-window,
html[data-sh-theme="light"] body.sh-app-page .rsvp-card,
html[data-sh-theme="light"] body.sh-app-page .security-card,
html[data-sh-theme="light"] body.sh-app-page .doc-sidebar,
html[data-sh-theme="light"] body.sh-app-page .doc-article,
html[data-sh-theme="light"] body.sh-app-page .doc-index,
html[data-sh-theme="light"] body.sh-app-page .vip-card,
html[data-sh-theme="light"] body.sh-app-page .media-card{
  box-shadow:none!important;
}
html[data-sh-theme="light"] body.sh-app-page .card .card,
html[data-sh-theme="light"] body.sh-app-page .card .domain,
html[data-sh-theme="light"] body.sh-app-page .card .step,
html[data-sh-theme="light"] body.sh-app-page .card .doc-search,
html[data-sh-theme="light"] body.sh-app-page .card .doc-markdown blockquote{
  box-shadow:none!important;
}

/* RSVP — one content surface; statistics are columns, not three cards inside a card. */
html[data-sh-theme="light"] body.sh-app-page .rsvp-stats{
  gap:0!important;
  border-top:1px solid var(--sh-ui-line)!important;
  border-bottom:1px solid var(--sh-ui-line)!important;
  background:transparent!important;
}
html[data-sh-theme="light"] body.sh-app-page .rsvp-stat{
  background:transparent!important;
  border:0!important;
  border-right:1px solid var(--sh-ui-line)!important;
  padding:14px 18px!important;
}
html[data-sh-theme="light"] body.sh-app-page .rsvp-stat:last-child{border-right:0!important}
html[data-sh-theme="light"] body.sh-app-page .rsvp-stat span{color:#5b6678!important}
html[data-sh-theme="light"] body.sh-app-page .rsvp-stat strong{color:#8f164d!important}
html[data-sh-theme="light"] body.sh-app-page .rsvp-state{
  background:var(--sh-ui-panel-2)!important;
  color:#5b6678!important;
  border:0!important;
  border-left:3px solid var(--sh-ui-accent)!important;
}
html[data-sh-theme="light"] body.sh-app-page .rsvp-state.is-live{background:#f0fdf4!important;color:#166534!important;border-left-color:#22c55e!important}
html[data-sh-theme="light"] body.sh-app-page .rsvp-empty{
  background:transparent!important;
  border:0!important;
  border-top:1px dashed var(--sh-ui-line)!important;
  padding:18px 0!important;
}

/* Request Anda — intro is a section; each actual request remains one card. */
html[data-sh-theme="light"] body.sh-app-page .vip-hero{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--sh-ui-line)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  padding:4px 0 18px!important;
}
html[data-sh-theme="light"] body.sh-app-page .vip-card{
  background:#fff!important;
  border:1px solid var(--sh-ui-line)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html[data-sh-theme="light"] body.sh-app-page .vip-empty{
  background:transparent!important;
  border:0!important;
  border-top:1px dashed var(--sh-ui-line)!important;
  padding:18px 0!important;
}

/* Pustaka Media — intro and statistics are flat; each media item remains a meaningful card. */
html[data-sh-theme="light"] body.sh-app-page .media-hero{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--sh-ui-line)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  padding:4px 0 18px!important;
}
html[data-sh-theme="light"] body.sh-app-page .media-privacy-note{
  background:transparent!important;
  border:0!important;
  padding:4px 0!important;
}
html[data-sh-theme="light"] body.sh-app-page .media-stat-grid{
  gap:0!important;
  border-top:1px solid var(--sh-ui-line)!important;
  border-bottom:1px solid var(--sh-ui-line)!important;
}
html[data-sh-theme="light"] body.sh-app-page .media-stat{
  background:transparent!important;
  border:0!important;
  border-right:1px solid var(--sh-ui-line)!important;
  padding:14px 16px!important;
}
html[data-sh-theme="light"] body.sh-app-page .media-stat:last-child{border-right:0!important}
html[data-sh-theme="light"] body.sh-app-page .media-card{
  background:#fff!important;
  border-color:var(--sh-ui-line)!important;
  box-shadow:none!important;
}
html[data-sh-theme="light"] body.sh-app-page .media-preview{background:#f1f4f8!important;color:#64748b!important}
html[data-sh-theme="light"] body.sh-app-page .media-empty{
  background:transparent!important;
  border:0!important;
  border-top:1px dashed var(--sh-ui-line)!important;
}

/* Shared content groups: use dividers before adding another surface. */
html[data-sh-theme="light"] body.sh-app-page .domain,
html[data-sh-theme="light"] body.sh-app-page .step,
html[data-sh-theme="light"] body.sh-app-page .doc-search,
html[data-sh-theme="light"] body.sh-app-page .rsvp-note,
html[data-sh-theme="light"] body.sh-app-page .media-privacy-note{
  box-shadow:none!important;
}

/* Workspace: remove the giant outer card. Internal panels carry the hierarchy. */
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-section-head,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-side-block{
  background:transparent!important;
  box-shadow:none!important;
}
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-invitation-row,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-sidebar,
html[data-sh-theme="light"] body.sh-workspace-body .studio-rail,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-group-fold,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-panel,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-quiet-tool{
  background:#fff!important;
  border-color:var(--sh-ui-line)!important;
  box-shadow:none!important;
}
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-group-body,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-panel-body,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-quiet-tool-body{background:#fff!important}
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-group-fold summary,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-panel summary,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-quiet-tool summary{background:#f6f8fb!important}

/* Muted information should stay readable. */
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame p,
html[data-sh-theme="light"] body.sh-workspace-body .workspace-frame .small,
html[data-sh-theme="light"] body.sh-workspace-body .schema-note,
html[data-sh-theme="light"] body.sh-workspace-body .media-current,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-invitation-meta,
html[data-sh-theme="light"] body.sh-workspace-body .dashboard-side-line,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-design-note,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .recipient-gate-note,
html[data-sh-theme="light"] body.sh-workspace-body .studio-page .studio-savebar-copy small{color:#475569!important}

/* Light mode feedback keeps tint, but never pale text on pale surfaces. */
html[data-sh-theme="light"] body.sh-app-page .notice:not(.error),
html[data-sh-theme="light"] body.sh-app-page .notice-ok,
html[data-sh-theme="light"] body.sh-app-page .msg.ok,
html[data-sh-theme="light"] body.sh-app-page .good{color:#166534!important}
html[data-sh-theme="light"] body.sh-app-page .notice.error,
html[data-sh-theme="light"] body.sh-app-page .notice-bad,
html[data-sh-theme="light"] body.sh-app-page .bad{color:#9f1d14!important}
html[data-sh-theme="light"] body.sh-app-page .gate,
html[data-sh-theme="light"] body.sh-app-page .msg:not(.ok),
html[data-sh-theme="light"] body.sh-app-page .vip-pending,
html[data-sh-theme="light"] body.sh-app-page .media-unused{color:#78350f!important}

@media(max-width:760px){
  html[data-sh-theme="light"] body.sh-app-page .rsvp-stats,
  html[data-sh-theme="light"] body.sh-app-page .media-stat-grid{border:0!important}
  html[data-sh-theme="light"] body.sh-app-page .rsvp-stat,
  html[data-sh-theme="light"] body.sh-app-page .media-stat{
    border-right:0!important;
    border-bottom:1px solid var(--sh-ui-line)!important;
    padding:12px 4px!important;
  }
  html[data-sh-theme="light"] body.sh-app-page .rsvp-stat:last-child,
  html[data-sh-theme="light"] body.sh-app-page .media-stat:last-child{border-bottom:0!important}
}

/* === SOURCE: app-flat-page-surfaces-p92.css === */
/* P92 — Global flat page surfaces.
   Contract: application pages use the page background directly. Large wrapper cards/
   slabs are presentation-only and must not add a second colour layer. Meaningful
   objects (inputs, modal dialogs, media items, Studio tools) keep their own surfaces.
   Desktop index.php and invitation-theme canvases remain outside this stylesheet. */

/* Shared page shell: page heading and top-level wrappers are sections, not cards. */
html[data-sh-theme] body.sh-app-page .hero,
html[data-sh-theme] body.sh-app-standard-page .wrap > .hero,
html[data-sh-theme] body.sh-app-standard-page .wrap > .card,
html[data-sh-theme] body.sh-app-standard-page .wrap > .grid > .card,
html[data-sh-theme] body.sh-app-page main.card,
html[data-sh-theme] body.sh-app-page .auth-window,
html[data-sh-theme] body.sh-app-page .security-card,
html[data-sh-theme] body.sh-app-page .privacy-shell .hero,
html[data-sh-theme] body.sh-app-page .rsvp-card,
html[data-sh-theme] body.sh-app-page .vip-hero,
html[data-sh-theme] body.sh-app-page .media-hero{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

html[data-sh-theme] body.sh-app-standard-page .wrap > .hero{
  padding:10px 0 18px!important;
  margin-bottom:18px!important;
  border-bottom:1px solid var(--sh-ui-line)!important;
}
html[data-sh-theme] body.sh-app-standard-page .wrap > .card,
html[data-sh-theme] body.sh-app-standard-page .wrap > .grid > .card{
  padding:18px 0!important;
  margin-bottom:0!important;
  border-top:1px solid var(--sh-ui-line)!important;
  overflow:visible!important;
}
html[data-sh-theme] body.sh-app-standard-page .wrap > .hero + .card{border-top:0!important}

/* Documentation: one reading canvas = the page background itself. */
html[data-sh-theme] body.sh-app-page .doc-index,
html[data-sh-theme] body.sh-app-page .doc-article,
html[data-sh-theme] body.sh-app-page .doc-sidebar{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html[data-sh-theme] body.sh-app-page .doc-index{
  width:min(1240px,calc(100% - 40px))!important;
  margin-inline:auto!important;
  padding:clamp(48px,7vw,92px) clamp(20px,3vw,38px) 80px!important;
}
html[data-sh-theme] body.sh-app-page .doc-layout{
  background:transparent!important;
}
html[data-sh-theme] body.sh-app-page .doc-sidebar{
  padding-right:24px!important;
  border-right:1px solid var(--sh-ui-line)!important;
}
html[data-sh-theme] body.sh-app-page .doc-article{padding:8px 0!important}

/* Workspace shell: never paint a second full-page slab over the UI background. */
html[data-sh-theme] body.sh-app-workspace-page .workspace-frame,
html[data-sh-theme] body.sh-workspace-body .workspace-frame,
html[data-sh-theme] body.sh-workspace-body .workspace-header,
html[data-sh-theme] body.sh-workspace-body .dashboard-section-head,
html[data-sh-theme] body.sh-workspace-body .dashboard-side-block{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html[data-sh-theme] body.sh-app-workspace-page .workspace-frame,
html[data-sh-theme] body.sh-workspace-body .workspace-frame{border:0!important}

/* Dashboard account rail is navigation, not a giant card. Keep only a separator. */
html[data-sh-theme] body.sh-workspace-body .dashboard-sidebar{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
  border-left:1px solid var(--sh-ui-line)!important;
}
html[data-sh-theme] body.sh-workspace-body .dashboard-side-block{
  border:0!important;
  border-bottom:1px solid var(--sh-ui-line)!important;
}
html[data-sh-theme] body.sh-workspace-body .dashboard-side-block:last-child{border-bottom:0!important}

/* Dashboard child pages: large data sections are flat; rows/dividers carry hierarchy. */
html[data-sh-theme] body.sh-app-page .email-history-panel,
html[data-sh-theme] body.sh-app-page .email-alerts-side,
html[data-sh-theme] body.sh-app-page .activity-panel,
html[data-sh-theme] body.sh-app-page .online-panel,
html[data-sh-theme] body.sh-app-page .devices-panel,
html[data-sh-theme] body.sh-app-page .v78-card{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html[data-sh-theme] body.sh-app-page .email-history-panel,
html[data-sh-theme] body.sh-app-page .email-alerts-side,
html[data-sh-theme] body.sh-app-page .activity-panel,
html[data-sh-theme] body.sh-app-page .online-panel,
html[data-sh-theme] body.sh-app-page .devices-panel,
html[data-sh-theme] body.sh-app-page .v78-card{
  border-top:1px solid var(--sh-ui-line)!important;
  border-bottom:1px solid var(--sh-ui-line)!important;
}

/* RSVP / request surfaces: only actual controls or repeated objects need a fill. */
html[data-sh-theme] body.sh-app-page .rsvp-card,
html[data-sh-theme] body.sh-app-page .vip-hero{
  padding-inline:0!important;
}

/* Tables can keep header contrast, but the table wrapper itself is not another slab. */
html[data-sh-theme] body.sh-app-page .table-wrap,
html[data-sh-theme] body.sh-app-page .data-table-wrap{
  background:transparent!important;
  box-shadow:none!important;
}

/* Mobile: remove vertical-card behaviour while preserving breathing room. */
@media(max-width:900px){
  html[data-sh-theme] body.sh-app-page .doc-sidebar{border-right:0!important;padding-right:0!important}
}
@media(max-width:640px){
  html[data-sh-theme] body.sh-app-page .doc-index{
    width:100%!important;
    padding:38px 20px 64px!important;
  }
  html[data-sh-theme] body.sh-app-standard-page .wrap > .card{padding:15px 0!important}
  html[data-sh-theme] body.sh-workspace-body .dashboard-sidebar{
    border-left:0!important;
    border-top:1px solid var(--sh-ui-line)!important;
  }
}