/* Lumora Experience: shared, theme-aware interaction tokens. */
:root{--xp-fast:120ms;--xp-enter:180ms;--xp-ease:cubic-bezier(.2,.7,.2,1);--xp-radius:12px;--xp-panel-radius:20px;--xp-shadow:0 12px 40px #0002;--xp-selected:color-mix(in srgb,var(--accent) 13%,var(--surface));--xp-success:#81d9b0;--xp-error:#ffacb8}
:root[data-theme=light]{--xp-shadow:0 10px 35px #17223a12;--xp-success:#176946;--xp-error:#a52643}
:where(button,.home-button,.nav-link,summary){transition:background-color var(--xp-fast),border-color var(--xp-fast),box-shadow var(--xp-fast),opacity var(--xp-fast)}
:where(.home-button,.upload-button){border-radius:var(--xp-radius);min-height:40px}
:where(button,a,input,textarea,select,summary,[tabindex]):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
:where(button):disabled{cursor:not-allowed;opacity:.55}
:where(button)[aria-busy=true]{cursor:progress}
:where(button)[aria-pressed=true],.command-results [aria-selected=true]{box-shadow:inset 0 0 0 1px var(--accent);background:var(--xp-selected)}
:where(.settings-dialog,.actions-sheet,.command-palette){border-radius:var(--xp-panel-radius);box-shadow:var(--xp-shadow)}
dialog::backdrop{backdrop-filter:blur(3px);background:#070912ad}
dialog[open]:not(.workspace-panel):not(.ai-docked){animation:xp-enter var(--xp-enter) var(--xp-ease)}
@keyframes xp-enter{from{opacity:.6;translate:0 5px}to{opacity:1;translate:0 0}}
@media(hover:hover){:where(.home-button,.lumora-action,.nav-link):hover{border-color:var(--accent);background-color:var(--xp-selected)}:where(.home-button,.upload-button,.lumora-action):active:not(:disabled){scale:.98}}
.experience-toasts{position:fixed;z-index:10000;inset:auto max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) auto;display:grid;gap:8px;max-width:min(420px,calc(100vw - 32px));pointer-events:none}
.experience-toast{display:flex;align-items:center;gap:12px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-inline-start:3px solid var(--xp-success);padding:12px 14px;border-radius:var(--xp-radius);box-shadow:var(--xp-shadow);pointer-events:auto;animation:xp-enter var(--xp-enter) var(--xp-ease);font-size:14px}
.experience-toast.is-error{border-inline-start-color:var(--xp-error)}.experience-toast button{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:8px;min-width:36px;min-height:36px}.experience-toast span{flex:1}
.experience-skeletons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;padding-block:16px;min-height:200px}.experience-skeleton{aspect-ratio:4/3;border-radius:var(--xp-radius);background:linear-gradient(115deg,var(--surface),var(--line),var(--surface));background-size:200% 100%;animation:xp-loading 1.6s ease-in-out 3}.media-skeleton{grid-template-columns:1fr;min-height:50dvh}.media-skeleton .experience-skeleton{aspect-ratio:16/9;max-height:65dvh}
@keyframes xp-loading{50%{background-position:100% 0}}@keyframes xp-like{50%{scale:1.12}}
.experience-liked{animation:xp-like 240ms ease-out}
.explorer-card,.project-card,.universe-world-card,.universe-element{transition:box-shadow var(--xp-fast),border-color var(--xp-fast);border-radius:var(--xp-panel-radius);overflow:hidden}
@media(hover:hover){.explorer-card:hover,.project-card:hover,.universe-world-card:hover,.universe-element:hover{box-shadow:var(--xp-shadow)}.explorer-card .explorer-hover{opacity:0;transition:opacity var(--xp-fast)}.explorer-card:hover .explorer-hover,.explorer-card:focus-within .explorer-hover{opacity:1}}
.actions-group-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:12px 10px 4px;margin:0}.actions-list .lumora-action{min-height:44px;border-radius:10px}.actions-list .danger-action{border-top:1px solid var(--line);margin-top:12px;padding-top:14px;color:var(--xp-error)}
.command-palette input{min-height:48px}.command-results [aria-selected=true]{border-inline-start:3px solid var(--accent)}.command-palette[open]{animation-duration:100ms}
.workspace-head{border-bottom:1px solid var(--line);padding-bottom:12px}.workspace-bar{gap:8px}.workspace-center{background:var(--bg);border-radius:var(--xp-radius)}.workspace-versions,.workspace-ai,.workspace-info{background:var(--surface);border-color:var(--line)}
.workspace-versions:not([hidden]),.workspace-ai:not([hidden]),.workspace-info:not([hidden]){animation:xp-enter var(--xp-enter) var(--xp-ease)}
.versions-list button[aria-pressed=true]{border-inline-start:3px solid var(--accent);background:var(--xp-selected)}.versions-preview,.workspace-media{animation:xp-media 160ms ease-out}.versions-comparison img{animation:none!important;transition:none!important}
@keyframes xp-media{from{opacity:.6}to{opacity:1}}
.workspace-immersive .workspace-head,.workspace-immersive .workspace-foot{opacity:.35;transition:opacity var(--xp-fast)}.workspace-immersive .workspace-head:hover,.workspace-immersive .workspace-foot:hover,.workspace-immersive .workspace-head:focus-within,.workspace-immersive .workspace-foot:focus-within{opacity:1}
.ai-panel{border-color:var(--line)}.ai-message{border-radius:var(--xp-radius)}.experience-working{border-inline-start:2px solid var(--accent);padding-inline-start:12px;color:var(--accent);animation:xp-work 1.8s ease-in-out 3}@keyframes xp-work{50%{opacity:.65}}
.flow-node{box-shadow:0 4px 16px #0001;transition:opacity var(--xp-fast),border-color var(--xp-fast),box-shadow var(--xp-fast)}.flow-node.selected{border:2px solid var(--accent);box-shadow:0 0 0 3px var(--xp-selected)}.flow-node.flow-muted{opacity:.68}.flow-lines path.flow-muted{opacity:.3}.flow-lines path.flow-active-edge{stroke:var(--accent);stroke-width:3}.flow-lines path{transition:opacity var(--xp-fast),stroke-width var(--xp-fast)}.flow-viewport{cursor:grab}.flow-viewport:active{cursor:grabbing}.flow-node button{cursor:pointer}
.universe-hero,.project-hero{border-radius:var(--xp-panel-radius);box-shadow:var(--xp-shadow);overflow:hidden}.universe-world-card:focus-visible,.project-card:focus-visible{outline-offset:4px}.universe-element.selected{outline:2px solid var(--accent);outline-offset:-2px}.universe-details,.flow-details{border-radius:var(--xp-panel-radius)}
.experience-motion{grid-template-columns:auto 1fr;align-items:center;gap:10px;padding-block:16px;border-top:1px solid var(--line)}.experience-motion input{width:22px;height:22px;accent-color:var(--accent)}.experience-motion small{grid-column:2;color:var(--muted);font-size:12px}
@media(min-width:1700px){.workspace-versions{flex-basis:280px}.workspace-ai{flex-basis:380px}.universe-grid,.project-grid{gap:24px}.flow-work{grid-template-columns:minmax(0,1fr) 340px}}
@media(max-width:760px){.experience-skeletons{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.experience-skeletons.media-skeleton{grid-template-columns:1fr}.experience-skeletons:not(.media-skeleton) .experience-skeleton:nth-child(n+3){display:none}.experience-toasts{inset-inline:12px;max-width:none}.actions-sheet,.command-palette{padding-bottom:max(20px,env(safe-area-inset-bottom))}.workspace-immersive .workspace-head,.workspace-immersive .workspace-foot{opacity:1}}
@media(pointer:coarse){.home-button,.lumora-action,.actions-more,.image-menu-toggle,.command-results button,.ai-button{min-height:44px;min-width:44px}.explorer-hover{opacity:1!important}.workspace-immersive .workspace-head,.workspace-immersive .workspace-foot{opacity:1}}
/* No movement in precision comparisons, and no decorative animation against user preference. */
:root[data-reduce-motion=true] *, :root[data-reduce-motion=true] *::before,:root[data-reduce-motion=true] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.card:hover img{transform:none}}
:root[data-reduce-motion=true] .card:hover img{transform:none}
/* Keep fields readable in both existing themes. */
.explorer-search input{background:var(--field);color:var(--text);border-color:var(--line)}
.image-menu-list{box-shadow:var(--xp-shadow);border-radius:var(--xp-radius)}.image-menu[open] .image-menu-list{animation:xp-enter var(--xp-fast) var(--xp-ease)}
@media(hover:hover) and (pointer:fine){.image-card:not(.feed-post) .image-menu:not([open]) summary{opacity:.4;transition:opacity var(--xp-fast)}.image-card:hover .image-menu summary,.image-card:focus-within .image-menu summary{opacity:1}}
.explorer-hub,.projects-root,.universe-root,.flow-root{animation:xp-media var(--xp-fast) ease-out}
@media(pointer:coarse){.image-menu summary{min-width:44px;min-height:44px}}

/* Shared Lumora navigation: the same night palette as the creative Home. */
aside.sidebar{
 --side:#111a2e;--surface:#1c2942;--field:#111d32;--text:#f8f5ff;
 --muted:#c0c6dc;--accent:#c1afff;--line:#43506b;
 color-scheme:dark;color:var(--text);
 background:radial-gradient(ellipse at 100% 0,#8057ce30,transparent 52%),linear-gradient(165deg,#172740,#111a2e 65%,#201b35);
 border-color:#414361;box-shadow:8px 0 30px #080f2114;
 scrollbar-width:thin;scrollbar-color:#636185 #142038;
}
.sidebar a.brand{
 color:#faf8ff;padding:14px 10px 20px;gap:12px;border-bottom:1px solid #b4a0ed26;
 letter-spacing:-.8px;font-size:29px;border-radius:14px 14px 0 0;
 background:linear-gradient(115deg,#728cfa0d,#9865e10b);
}
.sidebar .brand-mark{width:46px;height:46px;filter:drop-shadow(0 4px 13px #7551da55)}
.sidebar .brand small{color:#c4bddf;letter-spacing:1.7px;font-size:9px;line-height:1.6}
.sidebar>nav{margin-top:22px;display:grid;gap:5px}
.sidebar .nav-link{
 min-height:44px;padding:11px 13px;border:1px solid transparent;border-radius:12px;
 color:#cbd0e3;background:transparent;line-height:1.4;
 transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s;
}
.sidebar .nav-link svg,.sidebar .nav-link .lumora-icon{flex-shrink:0;color:#b9aceb}
.sidebar .nav-link:hover{color:#fff;background:#b3a1fa12;border-color:#8c82b443}
.sidebar .nav-link.active,.sidebar .nav-link[aria-current=page]{
 color:#fff;background:linear-gradient(110deg,#36558e77,#694b9b66);
 border-color:#9181d182;box-shadow:inset 3px 0 #b69aff,0 4px 14px #070d1f28;
}
.sidebar .nav-link.active svg,.sidebar .nav-link[aria-current=page] svg{color:#eee6ff}
.sidebar .nav-link:disabled{opacity:.5;cursor:not-allowed}
.sidebar .nav-create-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:2px}
.sidebar .nav-create-actions :is(button,#nav-create-board,#add-wallpapers){
 flex:1 1 42px!important;min-width:42px!important;width:auto!important;max-width:56px;
 height:46px;margin:0!important;padding:10px!important;border-radius:13px;
 color:#fff;border:1px solid #9b92ec65;
 background:linear-gradient(135deg,#4479d9,#7750c6);box-shadow:0 4px 12px #070d2030;
}
.sidebar .nav-create-actions button:hover{background:linear-gradient(135deg,#568ced,#9162dd);border-color:#c6b8ff}
.sidebar .nav-create-actions button:disabled{opacity:.5}
.sidebar .nav-create-actions svg{width:24px;height:24px}
.sidebar .home-button{color:#e3dcff;background:#29314c;border-color:#686082;border-radius:12px}
.sidebar .home-button:hover{background:#393453;border-color:#a595d1}
.sidebar .community-nav{border-color:#b4a0ed26;margin-top:10px;padding-top:12px}
.sidebar .sidebar-bottom{border-top:1px solid #b4a0ed26;margin-top:24px;padding-top:18px}
.sidebar .private,.sidebar .language-label{color:#bcb8d0}
.sidebar select{color:#f8f5ff;background:#17233a;border-color:#596080;border-radius:10px}
.sidebar :is(a,button,select):focus-visible{outline:2px solid #cab6ff;outline-offset:3px}
@media(max-width:760px){
 aside.sidebar{padding:16px;grid-template-columns:1fr;gap:14px;border-bottom:1px solid #414361}
 .sidebar a.brand{font-size:25px;padding:4px 4px 15px}
 .sidebar .brand-mark{width:42px;height:42px}
 .sidebar>nav{display:flex;flex-wrap:wrap;margin-top:0;gap:6px}
 .sidebar .nav-link{flex:1 1 auto;white-space:normal;justify-content:center;padding:10px;font-size:13px;min-height:44px}
 .sidebar .nav-create-actions{flex-basis:100%;margin-bottom:6px;gap:9px}
 .sidebar .nav-create-actions :is(button,#nav-create-board,#add-wallpapers){max-width:60px}
 .sidebar .community-nav{width:100%}
}
@media(prefers-reduced-motion:reduce){.sidebar .nav-link{transition:none}}

/* Three layered motions: travelling dots, a breathing halo and a slow light sweep. */
.generation-motion{position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:250px;aspect-ratio:16/9;max-height:420px;border:1px solid #7664ad55;border-radius:20px;background:#080f22;margin:16px 0;color:#d8c9ff}
.generation-motion[hidden]{display:none!important}
.generation-motion::before,.generation-motion::after{content:'';position:absolute;inset:-25%;pointer-events:none;z-index:-1}
.generation-motion::before{background:radial-gradient(ellipse at 35% 45%,#386add45,transparent 40%),radial-gradient(ellipse at 70% 65%,#9955dc40,transparent 45%);animation:lumora-halo 9s ease-in-out infinite alternate}
.generation-motion::after{background:linear-gradient(115deg,transparent 35%,#8c9dff10 48%,transparent 60%);animation:lumora-sweep 8s ease-in-out infinite alternate}
.generation-motion-dots{position:absolute;inset:9% 7% 17%;display:grid;grid-template-columns:repeat(20,1fr);grid-template-rows:repeat(12,1fr);align-items:center;justify-items:center;mask-image:radial-gradient(ellipse,#000 30%,transparent 78%)}
.generation-motion-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#7b8dff;opacity:var(--glow);animation:lumora-wave 4.8s ease-in-out var(--delay) infinite;box-shadow:0 0 9px #6469df66}
.generation-motion-caption{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:10px;font-weight:700;letter-spacing:3px;color:#c4b6e3}
.studio2-empty:has(.generation-motion:not([hidden])){padding:16px}
.studio2-empty:has(.generation-motion:not([hidden]))>.studio2-empty-frame{display:none}
dialog:not([open]) .generation-motion *,dialog:not([open]) .generation-motion::before,dialog:not([open]) .generation-motion::after{animation-play-state:paused}
@keyframes lumora-wave{0%,100%{transform:translateY(5px) scale(.55);background:#5578db}50%{transform:translateY(-7px) scale(1.5);background:#b39aff}}
@keyframes lumora-halo{from{transform:translate(-4%,-3%) scale(.9)}to{transform:translate(5%,4%) scale(1.1)}}
@keyframes lumora-sweep{from{transform:translateX(-25%)}to{transform:translateX(25%)}}
:root[data-reduce-motion=true] .generation-motion *,:root[data-reduce-motion=true] .generation-motion::before,:root[data-reduce-motion=true] .generation-motion::after{animation:none!important}
@media(prefers-reduced-motion:reduce){.generation-motion *,.generation-motion::before,.generation-motion::after{animation:none!important}}
@media(max-width:620px){.generation-motion{min-height:190px;border-radius:14px}.generation-motion-dots i{width:3px;height:3px}}