/* Loaded in the head, before React: never expose the temporary server markup. */
html { scrollbar-gutter:stable; background:#202124; }
html[data-bs-theme="light"] { background:#f4f5f8; }
html.stark-react-pending body { margin:0; background:transparent; }
html.stark-react-pending body > :not(#stark-react-loading):not(#editor-loading):not(#editor-retry):not(noscript),
html.stark-react-pending body > #stark-react-retry { opacity:0; pointer-events:none; }
html.stark-page-leaving body { pointer-events:none !important; }
#stark-react-loading { display:none; }
html.stark-react-pending #stark-react-loading,
html.stark-react-pending #editor-loading {
 position:fixed; inset:0; z-index:2147483647; display:flex;
 align-items:center; justify-content:center; flex-direction:column; gap:16px;
 color:#f5f5f5; font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 opacity:1; background:#202124;
}
html.stark-react-pending[data-bs-theme="light"] #stark-react-loading,
html.stark-react-pending[data-bs-theme="light"] #editor-loading { color:#232836; background:#f4f5f8; }
html.stark-react-failed #stark-react-loading,
html.stark-react-failed #editor-loading { animation:none; opacity:1; }
#stark-react-loading a { color:inherit; text-decoration:underline; }
#stark-react-retry[hidden],#editor-retry[hidden] { display:none !important; }
html.stark-react-pending #editor-retry:not([hidden]) { position:fixed; z-index:2147483647; top:calc(50% + 36px); left:50%; transform:translateX(-50%); }
@keyframes stark-loading-message { to { opacity:1; } }

/* Give immediate feedback while the next page or its data is loading. */
html.stark-react-pending :is(#stark-react-loading,#editor-loading)::before{content:"";width:30px;height:30px;border:3px solid #7164bd33;border-top-color:#9186cf;border-radius:50%;animation:stark-loading-spin .8s linear infinite}
html.stark-react-pending :is(#stark-react-loading,#editor-loading)::after{content:"";position:absolute;top:20px;left:clamp(20px,4vw,64px);width:116px;height:46px;background:url('../Images/easydom-white.png') center/contain no-repeat}
html.stark-react-pending[data-bs-theme="light"] :is(#stark-react-loading,#editor-loading)::after{background-image:url('../Images/easydom-black.png')}
html.stark-page-leaving::after{content:"";position:fixed;top:0;left:0;width:35%;height:3px;z-index:2147483647;background:#9186cf;animation:stark-navigation-progress 1.2s ease-in-out infinite;pointer-events:none}
@keyframes stark-loading-spin{to{transform:rotate(360deg)}}
@keyframes stark-navigation-progress{from{transform:translateX(-100%)}to{transform:translateX(386%)}}
@media(prefers-reduced-motion:reduce){html.stark-react-pending :is(#stark-react-loading,#editor-loading)::before,html.stark-page-leaving::after{animation:none}}

/* Shared loading geometry: available before React and during navigation. */
:root { --stark-header-height:72px; }
@media(max-width:850px) {
 :root { --stark-header-height:calc(64px + env(safe-area-inset-top)); }
 html[data-pwa-standalone="true"] { --stark-header-height:calc(88px + env(safe-area-inset-top)); }
}
html:not(.stark-react-pending):not(.stark-page-leaving):not(:has(#stark-navigation-loading)):is(.stark-section-loading,.stark-action-loading)::after,
html:not(.stark-react-pending):not(.stark-page-leaving):not(:has(#stark-navigation-loading)):has(.rx-sync-indicator[data-syncing="true"])::after {
 content:""; display:block; position:fixed; top:calc(var(--stark-header-height) - 2px); left:0;
 width:35%; height:3px; z-index:2147483647; background:#9186cf; pointer-events:none;
 transform:translateX(0); will-change:transform; animation:stark-header-progress 1.4s linear infinite;
}
@keyframes stark-header-progress { from { transform:translateX(-100%); } to { transform:translateX(286%); } }
@media(prefers-reduced-motion:reduce) {
 html:not(.stark-react-pending):not(.stark-page-leaving):not(:has(#stark-navigation-loading)):is(.stark-section-loading,.stark-action-loading)::after,
 html:not(.stark-react-pending):not(.stark-page-leaving):not(:has(#stark-navigation-loading)):has(.rx-sync-indicator[data-syncing="true"])::after { width:100%; animation:stark-header-pulse 1.2s ease-in-out infinite alternate; will-change:opacity; }
}
@keyframes stark-header-pulse { from { opacity:.35; } to { opacity:1; } }

/* Match the real mobile header before the React bundle has loaded. */
@media(max-width:850px) {
 html.stark-react-pending :is(#stark-react-loading,#editor-loading) {
  background:linear-gradient(to bottom,var(--card,#292a2d) 0 calc(var(--stark-header-height) - 1px),var(--border,#45474b) calc(var(--stark-header-height) - 1px) var(--stark-header-height),var(--background,#202124) var(--stark-header-height))!important;
 }
 html.stark-react-pending[data-bs-theme="light"] :is(#stark-react-loading,#editor-loading) { --card:#fff; --border:#dce0e9; --background:#f4f5f8; }
 html.stark-react-pending :is(#stark-react-loading,#editor-loading)::after {
  top:calc(var(--stark-header-height) - 61px); left:max(16px,env(safe-area-inset-left)); width:118px; height:44px;
 }
}

/* Page navigation uses only the central overlay; local work uses the header bar. */
html:is(.stark-react-pending,.stark-page-leaving):after,html:has(#stark-navigation-loading):after { display:none; }

/* Original three-ring loader, shared by startup and React transitions. */
.stark-navigation-spinner {
 position:relative; display:block; flex:none; width:110px; height:110px; box-sizing:border-box;
 border:3px solid transparent; border-top-color:#5b5fc6; border-radius:50%;
 animation:stark-loading-spin 1.5s linear infinite;
}
.stark-navigation-spinner::before,.stark-navigation-spinner::after {
 content:""; position:absolute; border:3px solid transparent; border-radius:50%;
}
.stark-navigation-spinner::before { inset:5px; border-top-color:#7a83eb; animation:stark-loading-spin 2s linear infinite; }
.stark-navigation-spinner::after { inset:15px; border-top-color:#c3c5f7; animation:stark-loading-spin 1s linear infinite; }
html.stark-react-pending :is(#stark-react-loading,#editor-loading)::before { display:none; }
@media(prefers-reduced-motion:reduce) {
 .stark-navigation-spinner { animation:stark-header-pulse 1.2s ease-in-out infinite alternate; }
 .stark-navigation-spinner::before,.stark-navigation-spinner::after { animation:none; }
}

/* Bright shared sync accent with feathered progress ends. */
:root { --stark-sync-accent:#9b87ff; }
.rx-header .rx-sync-indicator,
.rx-fullscreen-toolbar .rx-fullscreen-sync { color:var(--stark-sync-accent); }
.rx-sync-indicator > svg { width:20px; height:20px; stroke-width:2.5; }
html:not(.stark-react-pending):not(.stark-page-leaving):not(:has(#stark-navigation-loading)):is(.stark-section-loading,.stark-action-loading)::after,
html:not(.stark-react-pending):not(.stark-page-leaving):not(:has(#stark-navigation-loading)):has(.rx-sync-indicator[data-syncing="true"])::after,
.rx-fullscreen-toolbar[data-syncing="true"]::after {
 background:linear-gradient(90deg,transparent 0%,var(--stark-sync-accent) 22%,var(--stark-sync-accent) 78%,transparent 100%);
}

/* Sync uses the application's primary violet and a gently eased sweep. */
:root { --stark-sync-accent:var(--primary,#6264a7); }
@keyframes stark-sync-sweep { from { transform:translateX(-100%); } to { transform:translateX(223%); } }
@media(prefers-reduced-motion:no-preference) {
 html:not(.stark-react-pending):not(.stark-page-leaving):not(:has(#stark-navigation-loading)):is(.stark-section-loading,.stark-action-loading)::after,
 html:not(.stark-react-pending):not(.stark-page-leaving):not(:has(#stark-navigation-loading)):has(.rx-sync-indicator[data-syncing="true"])::after,
 .rx-fullscreen-toolbar[data-syncing="true"]::after {
  width:45%; animation:stark-sync-sweep 1.9s cubic-bezier(.42,0,.58,1) infinite;
 }
}

/* Slightly longer and quicker sync sweep. */
@keyframes stark-sync-sweep { from { transform:translateX(-100%); } to { transform:translateX(200%); } }
@media(prefers-reduced-motion:no-preference) {
 html:not(.stark-react-pending):not(.stark-page-leaving):not(:has(#stark-navigation-loading)):is(.stark-section-loading,.stark-action-loading)::after,
 html:not(.stark-react-pending):not(.stark-page-leaving):not(:has(#stark-navigation-loading)):has(.rx-sync-indicator[data-syncing="true"])::after,
 .rx-fullscreen-toolbar[data-syncing="true"]::after {
  width:50%; animation-duration:1.65s;
 }
}