html, body { margin: 0; min-height: 100%; background: #f7f8fa; font-family: "Inter", "Segoe UI", "Malgun Gothic", "Yu Gothic", Meiryo, "Microsoft YaHei", "Microsoft JhengHei", "Leelawadee UI", sans-serif; color: #252735; }
.playground-host { min-height: 100vh; }
.playground-loading, .app-loading { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; font-size: 13px; color: #818594; }
.loading-mark { width: 42px; height: 42px; border: 3px solid #e6dff5; border-top-color: #7351d8; border-radius: 50%; animation: loading-spin 1s linear infinite; }
.app-loading strong { font-size: 20px; font-weight: 600; color: #252735; letter-spacing: -.4px; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
#blazor-error-ui { display: none; position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 100; background: #fff0e9; color: #a8432c; border: 1px solid #e3b19c; border-radius: 8px; padding: 13px 20px; font-size: 12px; }
#blazor-error-ui a { color: inherit; margin-left: 12px; }
#blazor-error-ui .dismiss { cursor: pointer; margin-left: 10px; }
@media (prefers-reduced-motion: reduce) { .loading-mark { animation: none; } }