/* Shared by the initial HTML and React: loading is visible before JavaScript. */
html, body, #root { margin: 0; width: 100%; height: 100%; min-height: 100dvh; }
#root { isolation: isolate; background: #fdf8f6; }
.cuoree-skeleton { display: block; position: relative; overflow: hidden; isolation: isolate; background: #efe4e6; }
.cuoree-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #f8f2f3 50%, transparent); transform: translateX(-100%); animation: cuoree-shimmer 1.5s ease-in-out infinite; }
@keyframes cuoree-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .cuoree-skeleton::after { animation: none; transform: none; opacity: .45; } }
.cuoree-loading-screen { display: flex; width: 100%; height: 100dvh; min-height: 100dvh; overflow: hidden; background: #fdf8f6; }
.cuoree-loading-section { display: flex; flex-direction: column; flex: 0 0 400px; position: relative; min-width: 0; background: #fdf8f6; border-right: 1px solid #efe4e6; }
.cuoree-loading-content { flex: 1; min-width: 0; background: #ffffff; }
.cuoree-loading-panel { box-sizing: border-box; padding: 20px 16px; flex: 1; min-height: 0; background: transparent; }
.cuoree-loading-title { width: 160px; height: 28px; margin-bottom: 24px; }
.cuoree-loading-row { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.cuoree-loading-avatar { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.cuoree-loading-lines { flex: 1; min-width: 0; }
.cuoree-loading-line { width: 75%; height: 14px; margin: 10px 0; }
.cuoree-loading-line-short { width: 45%; }
.cuoree-loading-menu { position: absolute; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-around; gap: 20px; padding: 20px 16px; border-radius: 32px; background: #21141c; }
.cuoree-loading-menu > span { width: 24px; height: 24px; background: #4e3c47; }
.cuoree-loading-menu > span::after { background: linear-gradient(90deg, transparent, #6e5a66 50%, transparent); }
.cuoree-loading-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 767px) { .cuoree-loading-section { flex: 1; border: 0; } .cuoree-loading-content { display: none; } }

.cuoree-loading-title, .cuoree-loading-line { border-radius: 6px; }
.cuoree-loading-menu > span { border-radius: 50%; }