/* Non-invasive preview-only Canvas access points.
   Topbar HTML entry works even when the 3D module is delayed/initializing. */
.top-actions .canvas-portal-topbar{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-shrink:0;
  min-width:84px;
  height:32px;
  padding:0 13px;
  border:1px solid rgba(238,227,207,.20)!important;
  border-radius:16px;
  text-decoration:none;
  white-space:nowrap;
  font-size:11px;
  font-weight:600;
  color:var(--ds-studio-text-base,#e4e7e5)!important;
  background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.025))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 15px rgba(0,0,0,.07)!important;
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
}
.top-actions .canvas-portal-topbar:hover{
  border-color:rgba(253,206,103,.59)!important;
  color:var(--ds-optical-accent,#f2ca70)!important;
  background:linear-gradient(150deg,rgba(255,255,255,.15),rgba(244,201,112,.085))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 15px rgba(240,198,90,.08)!important;
}
#drawerContent .home-panel .canvas-portal-home{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%;
  min-height:70px;
  margin:1px 0 8px;
  padding:12px;
  border:1px solid rgba(243,222,168,.23);
  border-radius:11px;
  text-decoration:none;
  color:var(--ds-studio-text-base,#eceded);
  background:
    radial-gradient(ellipse at 2% 1%,rgba(255,255,255,.13),transparent 77%),
    linear-gradient(142deg,rgba(255,255,255,.08),rgba(236,198,108,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 7px 22px rgba(0,0,0,.08);
  backdrop-filter:blur(17px) saturate(145%);
  -webkit-backdrop-filter:blur(17px) saturate(145%);
}
#drawerContent .home-panel .canvas-portal-home:hover{
  border-color:rgba(244,201,103,.51);
  background:
    radial-gradient(ellipse at 13% -10%,rgba(255,255,255,.19),transparent 78%),
    linear-gradient(142deg,rgba(255,255,255,.11),rgba(236,198,108,.10));
}
#drawerContent .home-panel .canvas-portal-home .drawer-icon{
  width:31px;height:31px;
  background:linear-gradient(145deg,rgba(248,223,153,.21),rgba(255,255,255,.04));
  color:var(--ds-optical-accent,#f0c66a);
}
#drawerContent .home-panel .canvas-portal-home b{font-size:12px}
#drawerContent .home-panel .canvas-portal-home small{font-size:10px;color:var(--ds-studio-text-muted,#89918d);line-height:1.55}
#drawerContent .home-panel .canvas-portal-home em{font-size:15px;color:var(--ds-optical-accent,#f0c66a)}
@media(max-width:1070px){
  .top-actions .canvas-portal-topbar{min-width:66px;padding:0 9px}
}

/* Preview 3D home drawer: Canvas gets the same clear rectangular
   outline as other tool items, not a floating unframed text row. */
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home{
  box-sizing:border-box!important;
  border:1px solid rgba(190,199,202,.25)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.028)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075)!important;
}
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home:hover{
  border-color:rgba(244,201,103,.48)!important;
  background:rgba(244,201,103,.055)!important;
}
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home .drawer-icon{
  box-sizing:border-box!important;
  width:31px!important;
  min-width:31px!important;
  height:31px!important;
  border:1px solid rgba(190,199,202,.18)!important;
  border-radius:8px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.035)!important;
}
/* No bright yellow bottom rule when the AI textarea is focused.
   Keep a subtle neutral focus indication and unchanged dimensions. */
html body#daailokStudio .ai-panel #aiInputWrap:focus-within{
  border-bottom-color:transparent!important;
  outline:0!important;
  box-shadow:none!important;
}
html body#daailokStudio .ai-panel #aiInput:focus,
html body#daailokStudio .ai-panel #aiInput:focus-visible{
  border:0!important;
  border-bottom:0!important;
  outline:none!important;
  box-shadow:inset 0 0 0 1px rgba(190,199,202,.22)!important;
}
html body#daailokStudio .ai-panel #aiInputWrap::after{
  border-bottom-color:transparent!important;
}


/* Home Canvas: match the liquid-glass hover of neighboring cards; a
   selected-yellow flat fill is not a hover material. Preview only. */
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home{
  position:relative!important;isolation:isolate;overflow:visible!important;
  backdrop-filter:blur(17px) saturate(143%)!important;
  -webkit-backdrop-filter:blur(17px) saturate(143%)!important;
  transition:background .24s ease,border-color .24s ease,box-shadow .3s ease!important;
}
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home::before{
  content:"";position:absolute;z-index:0;inset:-35% auto -35% -70%;width:54%;
  pointer-events:none;transform:skewX(-20deg) translateX(-150%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),
    rgba(255,255,255,.03),transparent);
  transition:transform .6s cubic-bezier(.2,.8,.25,1);
}
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home:hover::before,
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home:focus-visible::before{
  transform:skewX(-20deg) translateX(520%);
}
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home:hover,
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home:focus-visible{
  color:var(--ds-studio-text-base,#eceded)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.135),
    rgba(255,255,255,.045) 48%,rgba(236,198,108,.035))!important;
  border-color:rgba(234,222,195,.39)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 7px 22px rgba(0,0,0,.12),0 0 14px rgba(245,209,144,.06)!important;
}
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home>*{
  position:relative;z-index:1;
}
@media(prefers-reduced-motion:reduce){
  html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home::before{
    transition:none!important;display:none;
  }
}

/* The Home Canvas control is a real button now, so it participates in the
   existing WebGL liquid-glass renderer (which deliberately registers buttons).
   Keep the CSS sheen only as a no-WebGL fallback; avoid yellow hover fills. */
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home:not([data-glass-live]){
  overflow:hidden!important;
}
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home[data-glass-live]::before{
  display:none!important;
}
html body#daailokStudio #drawerContent .home-panel button.canvas-portal-home[data-glass-live][data-glass-ready]{
  overflow:visible!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Match /preview/canvas' single ◐ 外观 switch, retaining the studio's own
   independently persisted light/dark state. */
html body#daailokStudio .top-actions #studioAppearanceToggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  flex:none!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 12px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#b3bac3!important;
  font:500 11px/1.3 system-ui,sans-serif!important;
  white-space:nowrap!important;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
html body#daailokStudio .top-actions #studioAppearanceToggle:is(:hover,:focus-visible){
  background:rgba(255,255,255,.085)!important;
  color:#f2f1eb!important;
  border-color:rgba(255,255,255,.16)!important;
}
html[data-studio-theme="light"] body#daailokStudio .top-actions #studioAppearanceToggle{
  color:#424c47!important;
}
html[data-studio-theme="light"] body#daailokStudio .top-actions #studioAppearanceToggle:is(:hover,:focus-visible){
  color:#222c28!important;
  background:rgba(255,255,255,.35)!important;
  border-color:rgba(80,91,87,.18)!important;
}