/* Approved Rose Atelier sidebar with Sakura footer — shared across pages. */
html body[data-page] #sidebar.rose-sidebar {
  --rose-art:url("../images/ui/rose-atelier-sidebar-approved.png");
  --rose-icon:clamp(20px,1.8vw,32px);
  display:flex!important; flex-direction:column!important;
  height:100dvh!important; min-height:0!important; padding:0!important;
  gap:0!important; overflow:hidden!important; scrollbar-gutter:auto!important; box-sizing:border-box!important;
  border:1px solid #cb8e7b!important; border-radius:14px!important;
  background:radial-gradient(ellipse at top right,#291922,transparent 48%),#100e13!important;
  box-shadow:inset 0 0 0 1px #69443e,8px 0 24px #0005!important;
}
html body[data-page] #sidebar.rose-sidebar::before,
html body[data-page] #sidebar.rose-sidebar::after { display:none!important; }
html body[data-page] #sidebar.rose-sidebar .rose-header {
  display:block!important; position:relative!important; inset:auto!important;
  flex:0 0 auto!important; order:0!important; width:100%!important;
  height:auto!important; min-height:0!important; aspect-ratio:508/253;
  margin:0!important; padding:0!important; border:0!important;
  border-radius:0!important; background:none!important; opacity:1!important;
  overflow:hidden!important; transform:none!important;
}
#sidebar.rose-sidebar .rose-header img { position:absolute; width:174.61%!important; max-width:none!important; height:auto!important; left:-37.4%; top:-27.67%; }
html body[data-page] #sidebar.rose-sidebar .command-nav {
  position:relative!important; inset:auto!important; order:1!important;
  flex:1 1 0!important; min-height:0!important; display:grid!important;
  grid-template-rows:repeat(9,minmax(0,1fr)); width:auto!important;
  gap:0!important; margin:0 8px!important; padding:0!important;
}
html body[data-page] #sidebar.rose-sidebar .tab {
  position:relative!important; inset:auto!important; display:flex!important;
  align-items:center!important; gap:clamp(8px,.75vw,13px)!important;
  width:100%!important; height:100%!important; min-height:0!important;
  padding:3px clamp(10px,1.25vw,22px)!important; margin:0!important;
  border:0!important; border-bottom:1px solid #875c554f!important;
  border-radius:0!important; background:transparent!important;
  color:#f3dcd5!important; font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(15px,1.05vw,19px)!important; font-weight:400!important;
  text-align:left!important; line-height:1.15!important;
  opacity:1!important; transform:none!important; box-shadow:none!important;
}
html body[data-page] #sidebar.rose-sidebar .tab > span:not(.nav-icon) {
  color:inherit!important; font:inherit!important; opacity:1!important; min-width:0; white-space:nowrap;
}
html body[data-page] #sidebar.rose-sidebar .tab::before { display:none!important; }
html body[data-page] #sidebar.rose-sidebar .tab::after {
  content:"›"!important; display:block!important; position:static!important;
  margin-left:auto!important; width:auto!important; height:auto!important;
  background:none!important; color:#e4ad97!important; font:20px Georgia!important;
  opacity:1!important; box-shadow:none!important;
}
html body[data-page] #sidebar.rose-sidebar .tab.active {
  border:1px solid #efa2b4!important; border-radius:10px!important;
  background:radial-gradient(ellipse at 10% 0,#c24674,transparent 75%),linear-gradient(135deg,#762240,#300c24)!important;
  box-shadow:inset 0 0 0 2px #ffffff10,0 0 14px #c6377340!important;
}
html body[data-page] #sidebar.rose-sidebar .tab:hover { background-color:#ac6a7730!important; }
html body[data-page] #sidebar.rose-sidebar .tab:focus-visible,
html body[data-page] #sidebar.rose-sidebar button:focus-visible { outline:2px solid #ffd2bc!important; outline-offset:-3px!important; }
html body[data-page] #sidebar.rose-sidebar .nav-icon {
  display:block!important; width:var(--rose-icon)!important; height:var(--rose-icon)!important;
  flex:0 0 var(--rose-icon)!important; margin:0!important; padding:0!important;
  background-image:var(--rose-art)!important;
  background-size:calc(var(--rose-icon)*12.6714) calc(var(--rose-icon)*25.3429)!important;
  background-position:calc(var(--rose-icon)*-3.1714) calc(var(--rose-icon)*var(--rose-y))!important;
  border:0!important; border-radius:0!important; filter:none!important;
  mask-image:radial-gradient(ellipse,#000 55%,transparent 74%);
}
html body[data-page] #sidebar.rose-sidebar .nav-icon svg { display:none!important; }
html body[data-page] #sidebar.rose-sidebar .command-secondary-nav,
html body[data-page] #sidebar.rose-sidebar .sidebar-divider,
html body[data-page] #sidebar.rose-sidebar .sidebar-footer { display:none!important; }
html body[data-page] #sidebar.rose-sidebar .premium-sidebar-card {
  position:relative!important; inset:auto!important; order:2!important; flex:0 0 auto!important;
  display:block!important; width:calc(100% - 16px)!important; height:auto!important;
  aspect-ratio:488/180; min-height:0!important; margin:6px 8px!important; padding:0!important;
  border:1px solid #c38c80!important; border-radius:10px!important; opacity:1!important;
  background-image:var(--rose-art)!important; background-size:181.76% 985.56%!important;
  background-position:50% 81.0%!important; box-shadow:none!important;
}
html body[data-page] #sidebar.rose-sidebar .premium-sidebar-card > * { opacity:0!important; }
html body[data-page] #sidebar.rose-sidebar .mockup-nav-hotspots {
  position:relative!important; inset:auto!important; order:3!important; flex:0 0 auto!important;
  height:clamp(32px,5.5dvh,58px)!important; min-height:0!important; display:block!important;
  width:auto!important; margin:0 8px!important; padding:0!important; border:0!important;
}
html body[data-page] #sidebar.rose-sidebar .mockup-nav-hotspots .tab { height:100%!important; min-height:0!important; }
html body[data-page] #sidebar.rose-sidebar .rose-footer-art {
  position:relative!important; order:4!important; flex:0 0 auto!important;
  width:100%; aspect-ratio:508/208; overflow:hidden; pointer-events:none;
}
#sidebar.rose-sidebar .rose-footer-art img { position:absolute; width:174.61%!important; max-width:none!important; height:auto!important; left:-37.4%; top:-747.1%; }
@media(max-height:740px) {
 html body[data-page] #sidebar.rose-sidebar .rose-header { aspect-ratio:508/200; }
 html body[data-page] #sidebar.rose-sidebar .rose-header img { top:-34.9%; }
 html body[data-page] #sidebar.rose-sidebar .rose-footer-art { aspect-ratio:508/145; }
 html body[data-page] #sidebar.rose-sidebar .rose-footer-art img { top:-1071.7%; }
 html body[data-page] #sidebar.rose-sidebar .premium-sidebar-card { aspect-ratio:488/140; }
}

#sidebar.rose-sidebar [data-page="dashboard"],
#sidebar.rose-sidebar [data-page="journey-home"] { --rose-y:-5; }

#sidebar.rose-sidebar [data-page="account"] { --rose-y:-6.414285714285715; }

#sidebar.rose-sidebar [data-page="battle"] { --rose-y:-7.857142857142857; }

#sidebar.rose-sidebar [data-page="missions"] { --rose-y:-7.857142857142857; }

#sidebar.rose-sidebar [data-page="hunt"] { --rose-y:-9.471428571428572; }

#sidebar.rose-sidebar [data-page="opponents"] { --rose-y:-10.9; }

#sidebar.rose-sidebar [data-page="cards"] { --rose-y:-12.428571428571429; }

#sidebar.rose-sidebar [data-page="economy"] { --rose-y:-13.871428571428572; }

#sidebar.rose-sidebar [data-page="data"] { --rose-y:-15.314285714285715; }

#sidebar.rose-sidebar [data-page="membership"] { --rose-y:-16.885714285714286; }

#sidebar.rose-sidebar [data-go="guides"] { --rose-y:-21.3429; }

/* Integrate Rose Atelier with the site's continuous midnight Sakura shell. */
html body[data-page] #sidebar.rose-sidebar {
  border:0!important; border-right:1px solid rgba(226,124,167,.22)!important;
  border-radius:0!important;
  background:radial-gradient(ellipse at 35% 0,rgba(105,42,70,.20),transparent 46%),linear-gradient(180deg,#090910,#050711 75%,#090b16)!important;
  box-shadow:8px 0 24px rgba(0,0,0,.20)!important;
}
html body[data-page] #sidebar.rose-sidebar .rose-header {
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
}
#sidebar.rose-sidebar .rose-header img {
  width:178%!important; left:-39.1%; top:-28.3%;
  -webkit-mask-image:linear-gradient(90deg,transparent 21%,#000 24%,#000 75%,transparent 79%);
  mask-image:linear-gradient(90deg,transparent 21%,#000 24%,#000 75%,transparent 79%);
}
html body[data-page] #sidebar.rose-sidebar .tab {
  border-bottom-color:rgba(214,132,162,.13)!important;
  color:#eee2ec!important; padding-block:4px!important;
}
html body[data-page] #sidebar.rose-sidebar .tab::after { color:#bd90ad!important; }
html body[data-page] #sidebar.rose-sidebar .nav-icon { mix-blend-mode:screen; }
html body[data-page] #sidebar.rose-sidebar .tab.active {
  border-color:rgba(241,115,185,.57)!important;
  background:radial-gradient(ellipse at 0 0,rgba(215,57,135,.32),transparent 80%),linear-gradient(110deg,#532039,#231326)!important;
  box-shadow:inset 0 1px 0 #ffffff0c,0 0 12px #d53b8026!important;
}
html body[data-page] #sidebar.rose-sidebar .premium-sidebar-card {
  border-color:rgba(208,129,158,.36)!important;
  box-shadow:0 0 12px #ab39681a!important;
}
html body[data-page] #sidebar.rose-sidebar .rose-footer-art {
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 25%,#000 94%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 25%,#000 94%,transparent 100%);
}
#sidebar.rose-sidebar .rose-footer-art img {
  width:178%!important; left:-39.1%; top:-762%;
}
@media(max-height:740px) {
  html body[data-page] #sidebar.rose-sidebar .rose-header img { top:-35.7%; }
  html body[data-page] #sidebar.rose-sidebar .rose-footer-art img { top:-1093%; }
}

/* Original approved rose-gold artwork icons retained. */
html body[data-page] #sidebar.rose-sidebar .premium-sidebar-card {
  border-color:rgba(197,139,159,.23)!important; box-shadow:none!important;
  filter:saturate(.8) brightness(.86);
}
html body[data-page] #sidebar.rose-sidebar .premium-sidebar-card:hover,
html body[data-page] #sidebar.rose-sidebar .premium-sidebar-card:focus-visible { filter:none; }

/* v10.560 — clearly separate companion tools from the optional Ultimate journey. */
html body[data-page] #sidebar.rose-sidebar .command-nav {
  grid-template-rows:auto repeat(6,minmax(0,1fr)) auto repeat(7,minmax(0,1fr))!important;
}
html body[data-page] #sidebar.rose-sidebar .nav-family-label {
  display:flex; align-items:center; min-height:22px; padding:5px clamp(10px,1.25vw,22px) 3px;
  font:700 clamp(9px,.72vw,12px)/1.1 Inter,Arial,sans-serif;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
html body[data-page] #sidebar.rose-sidebar .nav-family-label::after {
  content:""; flex:1; height:1px; margin-left:9px; background:currentColor; opacity:.18;
}
html body[data-page] #sidebar.rose-sidebar .companion-label { color:#6fc7ff; }
html body[data-page] #sidebar.rose-sidebar .journey-label { color:#f18ac8; padding-top:7px; }
html body[data-page] #sidebar.rose-sidebar .nav-companion-link .nav-icon { filter:hue-rotate(120deg) saturate(.78) brightness(1.25)!important; }
html body[data-page] #sidebar.rose-sidebar .nav-journey-link .nav-icon { filter:saturate(1.12) brightness(1.08)!important; }
html body[data-page] #sidebar.rose-sidebar .nav-membership-link { margin-top:1px!important; }
@media(max-height:800px) {
  html body[data-page] #sidebar.rose-sidebar .nav-family-label { min-height:17px; padding-block:2px; }
  html body[data-page] #sidebar.rose-sidebar .journey-label { padding-top:3px; }
}

/* v10.588 — normalize Chromium's larger Georgia rendering to Safari's measured height. */
html.upimd-chromium body[data-page] #sidebar.rose-sidebar .tab {
  font-size:clamp(14px,.97vw,17.5px)!important;
}
html.upimd-chromium body[data-page] #sidebar.rose-sidebar .nav-family-label {
  font-size:11px!important;
}

/* v10.583 — cap the desktop rail so wide Chrome viewports match the approved layout. */
@media(min-width:901px) {
  html body[data-page] {
    --sidebar-width:clamp(230px,17.5vw,360px)!important;
  }

  html body[data-page] #sidebar.rose-sidebar {
    width:var(--sidebar-width)!important;
    max-width:360px!important;
  }

  html body[data-page="dashboard"] .workspace,
  html body[data-page]:not([data-page="dashboard"]) .workspace {
    width:calc(100vw - var(--sidebar-width))!important;
    margin-left:var(--sidebar-width)!important;
  }
}