/* DCU ExamHub — mood-reactive unified header + consistent card spacing.
   One shared header surface; no standalone greeting card. */
:root{--examhub-card-gap:18px;--examhub-card-gap-mobile:12px}

/* Smooth mood transitions happen on the actual header surface. */
.workspace>.topbar{
  position:sticky!important;isolation:isolate;overflow:hidden;
  transition:background 1.25s ease,border-color 1.1s ease,box-shadow 1.1s ease,color .8s ease!important;
}
.workspace>.topbar::before{
  z-index:0!important;pointer-events:none;
  transition:background 1.2s ease,opacity 1s ease!important;
}
.workspace>.topbar::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:150px;height:150px;right:24%;top:-62px;border-radius:50%;opacity:.68;
  background:radial-gradient(circle,#fff9d9 0 22%,#ffd783 28% 38%,rgba(255,211,131,.22) 52%,transparent 72%);
  filter:blur(.2px);animation:header-orb-drift 8s ease-in-out infinite;
  transition:background 1.2s ease,opacity 1s ease,transform 1.2s ease;
}
.workspace>.topbar>*{position:relative;z-index:1}
.workspace>.topbar[data-mood="morning"]{
  background:linear-gradient(108deg,rgba(255,246,224,.97),rgba(255,237,226,.94) 52%,rgba(237,233,255,.96))!important;
  border-bottom-color:rgba(218,174,126,.34)!important;
  box-shadow:0 8px 28px rgba(153,105,72,.09),inset 0 1px 0 rgba(255,255,255,.82)!important;
}
.workspace>.topbar[data-mood="morning"]::before{
  background:radial-gradient(circle at 78% 15%,rgba(255,255,255,.5) 0 2px,transparent 3px),linear-gradient(105deg,rgba(255,221,163,.2),transparent 44%,rgba(223,211,255,.22))!important;
}
.workspace>.topbar[data-mood="afternoon"]{
  background:linear-gradient(108deg,rgba(226,246,255,.97),rgba(230,249,246,.95) 54%,rgba(242,248,224,.97))!important;
  border-bottom-color:rgba(111,184,190,.32)!important;
  box-shadow:0 8px 28px rgba(67,134,151,.08),inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.workspace>.topbar[data-mood="afternoon"]::before{
  background:linear-gradient(105deg,rgba(158,221,255,.19),transparent 43%,rgba(199,239,192,.23))!important;
}
.workspace>.topbar[data-mood="afternoon"]::after{
  background:radial-gradient(circle,#fffde0 0 22%,#ffd45f 30% 39%,rgba(255,221,115,.23) 53%,transparent 72%);
  transform:translateY(8px);animation-duration:10s;
}
.workspace>.topbar[data-mood="evening"]{
  background:linear-gradient(108deg,rgba(255,232,222,.97),rgba(252,222,240,.95) 53%,rgba(231,228,255,.97))!important;
  border-bottom-color:rgba(205,143,181,.32)!important;
  box-shadow:0 8px 28px rgba(139,82,130,.09),inset 0 1px 0 rgba(255,255,255,.78)!important;
}
.workspace>.topbar[data-mood="evening"]::before{
  background:linear-gradient(105deg,rgba(255,189,156,.2),transparent 44%,rgba(203,182,255,.22))!important;
}
.workspace>.topbar[data-mood="evening"]::after{
  background:radial-gradient(circle,#fff0d5 0 22%,#ffb77d 30% 39%,rgba(249,151,186,.25) 54%,transparent 73%);
  transform:translateY(26px);animation-duration:11s;
}
.workspace>.topbar[data-mood="night"]{
  background:linear-gradient(108deg,rgba(18,32,57,.98),rgba(37,45,91,.97) 53%,rgba(68,48,95,.97))!important;
  border-bottom-color:rgba(151,169,229,.25)!important;
  box-shadow:0 8px 30px rgba(7,15,35,.2),inset 0 1px 0 rgba(226,235,255,.06)!important;
}
.workspace>.topbar[data-mood="night"]::before{
  background:radial-gradient(circle at 72% 24%,rgba(255,255,255,.95) 0 1px,transparent 2px),radial-gradient(circle at 82% 68%,rgba(222,231,255,.85) 0 1px,transparent 2px),radial-gradient(circle at 62% 72%,rgba(255,255,255,.7) 0 1px,transparent 2px),radial-gradient(circle at 91% 22%,rgba(255,255,255,.72) 0 1px,transparent 2px),linear-gradient(105deg,rgba(54,84,130,.2),transparent 42%,rgba(91,66,130,.2))!important;
  animation:header-stars 4.5s ease-in-out infinite alternate;
}
.workspace>.topbar[data-mood="night"]::after{
  width:90px;height:90px;right:24%;top:-24px;opacity:.92;
  background:radial-gradient(circle at 35% 34%,#fffef0 0 35%,#e8efff 57%,#cddfff 72%,transparent 75%);
  box-shadow:0 0 42px rgba(205,221,255,.22);animation-duration:7s;
}
/* Greeting stays transparent and borderless inside the shared header. */
.topbar .top-greeting,.topbar #headerGreeting{
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;outline:0!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.topbar .top-greeting h1,.topbar .top-greeting p{background:transparent!important}
.topbar .top-greeting-art{
  display:inline-block;transform-origin:center;animation:header-symbol-float 5s ease-in-out infinite;
  transition:filter .8s ease,transform .8s ease;
}
.topbar[data-mood="morning"] .top-greeting-art{filter:drop-shadow(0 2px 10px rgba(244,174,63,.28))}
.topbar[data-mood="afternoon"] .top-greeting-art{filter:drop-shadow(0 2px 10px rgba(66,166,204,.25))}
.topbar[data-mood="evening"] .top-greeting-art{filter:drop-shadow(0 2px 10px rgba(219,111,164,.28))}
.topbar[data-mood="night"] .top-greeting-art{filter:drop-shadow(0 2px 10px rgba(180,195,255,.36))}
body.theme-dark .workspace>.topbar[data-mood="morning"]{background:linear-gradient(108deg,rgba(47,42,45,.98),rgba(61,43,51,.97) 52%,rgba(48,45,74,.98))!important;border-bottom-color:rgba(232,183,143,.22)!important}
body.theme-dark .workspace>.topbar[data-mood="afternoon"]{background:linear-gradient(108deg,rgba(24,48,67,.98),rgba(25,57,61,.97) 54%,rgba(45,57,54,.98))!important;border-bottom-color:rgba(125,204,208,.2)!important}
body.theme-dark .workspace>.topbar[data-mood="evening"]{background:linear-gradient(108deg,rgba(52,35,57,.98),rgba(66,39,67,.97) 53%,rgba(43,43,78,.98))!important;border-bottom-color:rgba(224,157,200,.2)!important}
body.theme-dark .workspace>.topbar[data-mood="night"]{background:linear-gradient(108deg,rgba(11,21,38,.99),rgba(20,29,57,.98) 53%,rgba(37,28,61,.98))!important;border-bottom-color:rgba(151,169,229,.2)!important}
body.theme-dark .topbar .top-greeting,body.theme-dark .topbar .top-greeting[data-mood]{color:#f4f7ff!important}
body.theme-dark .topbar .top-greeting p,body.theme-dark .topbar .top-greeting[data-mood] p{color:#d0dcf2!important}

@keyframes header-orb-drift{0%,100%{translate:0 0;scale:1}50%{translate:-9px 7px;scale:1.035}}
@keyframes header-symbol-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes header-stars{from{opacity:.62}to{opacity:1}}

/* Same outside spacing for card groups throughout Home, Routine, Calendar, Study and Profile. */
.view.active{display:flex!important;flex-direction:column!important;gap:var(--examhub-card-gap)!important}
#dashboard.active{gap:var(--examhub-card-gap)!important}
.view.active>*{margin-block:0!important}
.view .hero-grid,.view .duo-grid,.view .study-stack,.view .metrics,.view .quick-access{gap:var(--examhub-card-gap)!important}
#dashboard .upcoming-sections{gap:var(--examhub-card-gap)!important}
#dashboard .upcoming-footer{margin-top:var(--examhub-card-gap)!important}
.view .section-head{margin:0!important}
.view .panel,.view .filter-panel,.view .center-card,.view .myroutine-box,.view .streak-panel{margin-block:0!important}
/* Keep inner cards aligned in two-column and stacked layouts. */
.view .duo-grid>.panel,.view .study-stack>.panel{height:100%;min-width:0}
.view .metrics>.metric{margin:0!important;min-width:0}
.view .hero-grid>.next-card,.view .hero-grid>.center-card{margin:0!important}
@media(max-width:760px){
  :root{--examhub-card-gap:var(--examhub-card-gap-mobile)}
  .workspace>.topbar::after{width:105px;height:105px;right:24%;top:-35px;opacity:.52}
  .workspace>.topbar[data-mood="night"]::after{width:65px;height:65px;right:22%;top:-13px;opacity:.82}
  .topbar .top-greeting-art{font-size:20px!important}
  .view .hero-grid,.view .duo-grid,.view .study-stack,.view .metrics{gap:var(--examhub-card-gap)!important}
  .view .panel,.view .filter-panel,.view .center-card,.view .myroutine-box{border-radius:18px}
}
@media(prefers-reduced-motion:reduce){
  .workspace>.topbar,.workspace>.topbar::before,.workspace>.topbar::after,.topbar .top-greeting-art{transition:none!important;animation:none!important}
}

/* Admin CMS: use the same spacing rhythm between its major cards and sections. */
body:has(#workspace) main{display:flex;flex-direction:column;gap:var(--examhub-card-gap)}
body:has(#workspace) main>.welcome,
body:has(#workspace) main>#setup,
body:has(#workspace) main>#authPanel,
body:has(#workspace) main>#workspace{margin:0!important}
body:has(#workspace) #workspace:not([hidden]){display:flex;flex-direction:column;gap:var(--examhub-card-gap)}
body:has(#workspace) #workspace>.stats{gap:var(--examhub-card-gap)!important;margin:0!important}
body:has(#workspace) #workspace>.controls{margin:0!important}
body:has(#workspace) #workspace>.area:not([hidden]){display:flex;flex-direction:column;gap:var(--examhub-card-gap);margin:0!important}
body:has(#workspace) #workspace>.area:not([hidden])>.section-title,
body:has(#workspace) #workspace>.area:not([hidden])>.card{margin:0!important}
@media(max-width:650px){body:has(#workspace) #workspace>.stats{gap:var(--examhub-card-gap)!important}}
body:not(.theme-dark) .workspace>.topbar[data-mood="night"] .top-greeting{color:#f8faff!important}
body:not(.theme-dark) .workspace>.topbar[data-mood="night"] .top-greeting p{color:#e0e8ff!important}
body:not(.theme-dark) .workspace>.topbar[data-mood="night"] .mini-brand{color:#f4f7ff!important}
body:not(.theme-dark) .workspace>.topbar[data-mood="night"] .mini-brand small{color:#c8d6ee!important}
@media print{.view.active{display:none!important}#schedule.view.active{display:block!important}}