:root { color-scheme: light; --weyak-skeleton-base: #e9eef4; --weyak-skeleton-light: #f7f9fc; }
body[data-weyak-app-shell]:not([data-weyak-public-ui-source]):not([data-weyak-public-route-ui]):not([data-weyak-public-ui-template]) { margin: 0; background: #f3f6fa; color: #243850; font: 15px Tahoma, Arial, sans-serif; }
.weyak-shell-header { box-sizing: border-box; min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 4vw, 48px); background: #fff; border-bottom: 1px solid #e4eaf1; }
.weyak-shell-header > img { border-radius: 12px; }
.weyak-shell-header > span:first-of-type { font-size: 21px; font-weight: 800; color: #06459f; }
.weyak-shell-bar { display: block; width: 120px; height: 16px; margin-inline-start: auto; border-radius: 8px; }
.weyak-shell-content { max-width: 1400px; margin: auto; padding: clamp(18px, 3vw, 36px); }
.weyak-shell-heading { margin-block: 8px 26px; display: grid; gap: 12px; }
.weyak-shell-line { display: block; width: 68%; height: 14px; border-radius: 7px; }
.weyak-shell-heading > .weyak-shell-line { width: min(320px, 70%); height: 26px; }
.weyak-shell-heading > .weyak-shell-line-short { width: min(220px, 48%); height: 13px; }
.weyak-shell-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.weyak-shell-card { box-sizing: border-box; min-height: 160px; padding: 22px; display: grid; gap: 16px; background: #fff; border: 1px solid #e4eaf1; border-radius: 18px; }
.weyak-shell-icon { display: block; height: 32px; width: 32px; border-radius: 10px; }
.weyak-shell-value { display: block; width: 44%; height: 28px; border-radius: 8px; }
.weyak-shell-table { border: 1px solid #e4eaf1; background: #fff; border-radius: 18px; padding: 22px; }
.weyak-shell-table-head { height: 30px; width: 34%; border-radius: 8px; margin-bottom: 24px; }
.weyak-shell-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid #edf1f6; }
.weyak-shell-row > i { display: block; height: 15px; border-radius: 7px; }
.weyak-shell-shimmer { position: relative; overflow: hidden; background: var(--weyak-skeleton-base); }
.weyak-shell-shimmer::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(100deg, transparent 20%, var(--weyak-skeleton-light) 50%, transparent 80%); animation: weyak-shell-shimmer 1.55s ease-in-out infinite; }
.weyak-shell-status { color: #62748b; padding: 16px 0; text-align: center; font-size: 13px; }
@keyframes weyak-shell-shimmer { to { transform: translateX(-100%); } }
@media (max-width: 900px) { .weyak-shell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .weyak-shell-grid { gap: 12px; } .weyak-shell-card { padding: 16px; min-height: 148px; } .weyak-shell-table { padding: 16px; } .weyak-shell-row { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .weyak-shell-shimmer::after { animation: none; } }
@media print { .weyak-shell-header, .weyak-shell-shimmer, .weyak-shell-status { display: none !important; } }

/* Shared shapes also serve enhanced navigation and explicitly deferred regions. */
.weyak-page-skeleton { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; padding-block: 16px; }
.weyak-skeleton-card { min-height: var(--weyak-skeleton-height, 150px); border-radius: var(--weyak-skeleton-radius, 16px); border: 1px solid #e4eaf1; background: #fff; padding: 20px; display: grid; align-content: start; gap: 18px; }
.weyak-skeleton-line { display: block; height: 16px; width: var(--weyak-skeleton-width, 72%); border-radius: 7px; }
.weyak-skeleton-table { grid-column: 1 / -1; min-height: var(--weyak-skeleton-height, 280px); border-radius: 16px; background: #fff; border: 1px solid #e4eaf1; padding: 24px; display: grid; gap: 24px; }
.weyak-skeleton-shimmer { position: relative; overflow: hidden; background: var(--weyak-skeleton-base); }
.weyak-skeleton-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, var(--weyak-skeleton-light) 50%, transparent 80%); animation: weyak-shell-shimmer 1.55s ease-in-out infinite; transform: translateX(100%); }
.weyak-region-enter { animation: weyak-region-enter .18s ease-out; }
/* Preserve authored grid/flex relationships once the fragment is ready. */
section[data-weyak-region][data-weyak-ready="true"] { display: contents; }
.weyak-navigation-error { padding: 24px; margin: 16px 0; border: 1px solid #d7e1ed; border-radius: 16px; background: #fff; color: #354a63; }
.weyak-navigation-error button { cursor: pointer; border: 0; border-radius: 10px; padding: 10px 20px; background: #06459f; color: #fff; margin: 10px; font: inherit; }
.merchant-dashboard-metrics > [data-weyak-region], .merchant-dashboard-content-grid > [data-weyak-region] { min-width: 0; }
.merchant-dashboard-metrics > [data-weyak-region] > article { height: 100%; }
.weyak-cache-status { margin: 8px 0; padding: 6px 12px; color: #51657b; background: #edf3f9; border-radius: 8px; font-size: .75rem; }
.weyak-cached-snapshot { opacity: .86; }
.weyak-inline-value { display: inline-block; vertical-align: middle; min-width: 1.5em; }
.weyak-inline-skeleton { display: inline-block; width: 2.5em; height: .8em; border-radius: 4px; }
.weyak-pending-rows { display: grid; grid-column: 1 / -1; gap: 10px; width: 100%; box-sizing: border-box; padding-block: 12px; }
@keyframes weyak-region-enter { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .weyak-skeleton-shimmer::after, .weyak-region-enter, section[data-weyak-region][data-weyak-ready="true"] > * { animation: none; } }