/* DJIVA AI landing · dedicated premium LIGHT theme.
   Restores a coherent warm light canvas while keeping the existing approved
   wizard art, gold AI badges, and two cinematic action cards.
   All selectors are scoped to the AI hub; other tabs and AI conversations
   retain their established design. */
html[data-theme="light"]:has(#app > main.screen-body.section-ai .gu-ai-hub){
  background:#f7f5f0!important;
  color-scheme:light;
}
html[data-theme="light"] body:has(#app > main.screen-body.section-ai .gu-ai-hub){
  background:linear-gradient(180deg,#f8f5ef 0%,#fcfaf6 56%,#f8f5f0 100%)!important;
  color:#1a2632!important;
}

/* The header and footer belong to the same light page, not a black island. */
html[data-theme="light"] body:has(#app > main.screen-body.section-ai .gu-ai-hub) .v2-top.v2-top-ai{
  background:linear-gradient(180deg,rgba(250,247,241,.99) 0%,rgba(250,247,241,.97) 74%,rgba(250,247,241,.74) 92%,rgba(250,247,241,0) 100%)!important;
  box-shadow:none!important;
  border-bottom:0!important;
  color:#1b2633!important;
  backdrop-filter:blur(17px);
}
html[data-theme="light"] body:has(#app > main.screen-body.section-ai .gu-ai-hub) .v2-top.v2-top-ai .v2-page{
  color:#9c5d13!important;
  text-shadow:none!important;
}
html[data-theme="light"] body:has(#app > main.screen-body.section-ai .gu-ai-hub) .v2-top.v2-top-ai .v2-page::after{
  color:#d88c31!important;
  text-shadow:none!important;
}
/* Preserve the real pre-approved DJIVA wordmark.
   Its light-mode variant has a dark D, which now has a light background. */
html[data-theme="light"] body:has(#app > main.screen-body.section-ai .gu-ai-hub) .v2-top.v2-top-ai .djiva-header-d{
  color:#1e2937!important;
}
html[data-theme="light"] body:has(#app > main.screen-body.section-ai .gu-ai-hub) .v2-top.v2-top-ai .v2-icon-btn{
  background:#fffdf9!important;
  border:1px solid #d9d4cf!important;
  color:#293546!important;
  box-shadow:0 4px 13px rgba(69,54,36,.06)!important;
}
html[data-theme="light"] body:has(#app > main.screen-body.section-ai .gu-ai-hub) .v2-top.v2-top-ai .v2-pro.on{
  background:linear-gradient(135deg,#ffb141,#ffc960)!important;
  border:1px solid #e6a23c!important;
  box-shadow:0 6px 15px rgba(209,132,27,.20)!important;
  color:#322008!important;
}

/* Page surface: pearly light base with a restrained warm glow behind art. */
html[data-theme="light"] #app > main.screen-body.section-ai:has(.gu-ai-hub){
  background:
    radial-gradient(ellipse 94% 280px at 100% 3%,rgba(239,168,64,.13) 0%,transparent 74%),
    linear-gradient(180deg,#f8f5ef 0%,#fffaf5 63%,#f8f5f1 100%)!important;
  color:#1c2835!important;
}
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub){
  background:transparent!important;
}

/* Dark artwork is an intentional floating illustrated HERO, not the page.
   Keep the existing image and live text; do not modify any asset or crop. */
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-welcome.gs-hero{
  width:100%!important;
  max-width:100%!important;
  margin:9px 0 17px!important;
  border:1px solid #c7a16e!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:#08111b!important;
  box-shadow:0 13px 28px rgba(34,32,34,.18),0 1px 4px rgba(127,84,36,.1)!important;
}
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-ai-cinematic-art{
  background-color:transparent!important;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.62) 18%,#000 39%)!important;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.62) 18%,#000 39%)!important;
}
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-welcome.gs-hero::before{
  background:
    linear-gradient(90deg,#08111b 0%,rgba(8,17,27,.91) 19%,rgba(8,17,27,.35) 46%,rgba(8,17,27,0) 74%),
    linear-gradient(0deg,#08111b 0%,rgba(8,17,27,0) 14%,rgba(8,17,27,0) 86%,#08111b 100%)!important;
}
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero .gs-date{
  color:#d9e3ef!important;
}
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero h1{
  color:#fff!important;
}
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero .gs-hero-subtitle{
  color:#d4e0ee!important;
}

/* The two approved dark cards are deliberate premium contrasts
   on ivory, with softer gold strokes and tactile but light shadows. */
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home .gu-ai-hub{
  gap:13px!important;
}
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home .gu-ai-hub .gu-ai-choice{
  box-shadow:
    0 12px 24px rgba(50,40,31,.14),
    0 2px 6px rgba(47,36,27,.08),
    inset 0 1px 0 rgba(255,221,162,.11)!important;
}
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home .gu-ai-choice--review{
  border-color:rgba(174,121,60,.75)!important;
}
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home .gu-ai-choice--self{
  border-color:rgba(186,99,67,.73)!important;
}
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home .gu-ai-choice-text strong{
  color:#fffaf6!important;
}
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home .gu-ai-choice-text small{
  color:#d4d9e0!important;
}
html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home .gu-ai-choice-meta{
  color:#d0d0d5!important;
}

/* Navigation connects to the rest of the light app and to the canvas. */
html[data-theme="light"] #app:has(> main.screen-body.section-ai .gu-ai-hub) > nav.v2-nav{
  background:rgba(255,252,248,.98)!important;
  border-top:1px solid #e4dbd1!important;
  box-shadow:0 -8px 25px rgba(50,47,45,.09)!important;
}
html[data-theme="light"] #app:has(> main.screen-body.section-ai .gu-ai-hub) > nav.v2-nav button{
  color:#687483!important;
}
html[data-theme="light"] #app:has(> main.screen-body.section-ai .gu-ai-hub) > nav.v2-nav button.on{
  background:#f8e8d9!important;
  color:#37251b!important;
}
html[data-theme="light"] #app:has(> main.screen-body.section-ai .gu-ai-hub) > nav.v2-nav button.on .v2-icon{
  color:#bd7523!important;
}
@media(min-width:600px){
  html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-welcome.gs-hero{
    margin:15px 0 20px!important;
    border-radius:24px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html[data-theme="light"] #app > main.screen-body.section-ai .gh-ai-page.gs-home .gu-ai-hub .gu-ai-choice{
    transition:none!important;
  }
}