/* ═══ SAKURA · Cherry sidebar scene ═════════════════════════════════════════
   Loaded only by the live build. Inert unless <html data-palette="cherry">
   and the main sidebar carries .sakura-host. Desktop rail only: the sidebar
   becomes a top bar at 920px, where the scene is deliberately hidden. */
.sakura-scene { display: none; }

@media (min-width: 921px) {
  :root[data-palette="cherry"] .sakura-host {
    background: #16060b;
    border-right-color: #3a1422;
    isolation: isolate;
  }

  :root[data-palette="cherry"] .sakura-host > .sakura-scene {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, #16060b 0%, #2a0f19 58%, #3a1422 100%);
  }

  :root[data-palette="cherry"] .sakura-host > :not(.sakura-scene) {
    position: relative;
    z-index: 2;
  }

  .sakura-scene > div {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .sakura-sky {
    z-index: 0;
    background-image: url("images/sakura/sky.webp");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .58;
  }

  .sakura-tree-back {
    z-index: 1;
    background-image: url("images/sakura/tree-back.webp");
    background-position: right bottom;
    background-size: 138% auto;
    background-repeat: no-repeat;
    opacity: .97;
  }

  .sakura-tree-mid {
    z-index: 2;
    background-image: url("images/sakura/tree-mid.webp");
    background-position: right bottom;
    background-size: 138% auto;
    background-repeat: no-repeat;
    opacity: .34;
    filter: brightness(.86) saturate(.92);
  }

  .sakura-branch-front {
    z-index: 3;
    background-image: url("images/sakura/branches-front.webp");
    background-position: left top;
    background-size: 142% auto;
    background-repeat: no-repeat;
    opacity: .86;
  }

  .sakura-branch-hanging {
    z-index: 3;
    background-image: url("images/sakura/branch-hanging.webp");
    background-position: right top;
    background-size: 120% auto;
    background-repeat: no-repeat;
    opacity: .9;
  }

  .sakura-scrim {
    z-index: 4;
    background:
      linear-gradient(90deg, rgb(10 4 7 / .9) 0%, rgb(10 4 7 / .68) 34%, rgb(10 4 7 / .22) 70%, rgb(10 4 7 / .46) 100%),
      linear-gradient(180deg, rgb(22 6 11 / .12) 0%, transparent 38%, rgb(22 6 11 / .58) 100%);
  }

  .sakura-petals {
    z-index: 5;
    overflow: hidden;
  }

  :root[data-palette="cherry"] .sakura-host .side-brand {
    border: 1px solid rgb(255 196 212 / .24);
    background: linear-gradient(135deg, rgb(58 20 34 / .82), rgb(22 6 11 / .55));
    box-shadow: inset 0 1px 0 rgb(255 244 247 / .16), 0 12px 28px rgb(0 0 0 / .28);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
  }

  :root[data-palette="cherry"] .sakura-host .side-brand::after {
    display: none;
    content: none;
  }

  :root[data-palette="cherry"] .sakura-host .side-brand .brand-mark {
    color: #f7b0c3;
    border-color: rgb(247 176 195 / .38);
    background: #171c16 url("images/warchief-concept-a-regent-ruby.webp") center / cover no-repeat;
    filter: drop-shadow(0 0 10px rgb(247 176 195 / .25));
  }

  :root[data-palette="cherry"] .sakura-host .side-brand-name {
    color: #fff4f7;
    font-size: 15px;
    letter-spacing: .1em;
  }

  :root[data-palette="cherry"] .sakura-host .side-brand-name em { color: #ffd9e4; }

  :root[data-palette="cherry"] .sakura-host .side-brand-sub {
    color: #d9bcc5;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  :root[data-palette="cherry"] .sakura-host .nav-section {
    color: #d6aab5;
    text-shadow: 0 1px 3px rgb(0 0 0 / .65);
  }

  :root[data-palette="cherry"] .sakura-host .nav-item {
    color: #f3e1e6;
    border: 1px solid transparent;
    border-radius: 8px;
    text-shadow: 0 1px 3px rgb(0 0 0 / .6);
  }

  :root[data-palette="cherry"] .sakura-host .nav-item svg { color: #e9b9c6; }

  :root[data-palette="cherry"] .sakura-host .nav-item:hover {
    background: rgb(255 196 212 / .1);
    border-color: rgb(255 196 212 / .18);
    color: #fff4f7;
  }

  :root[data-palette="cherry"] .sakura-host .nav-item.active {
    background: linear-gradient(90deg, rgb(238 152 174 / .34), rgb(238 152 174 / .08));
    border-color: rgb(255 196 212 / .28);
    color: #fff4f7;
    box-shadow: inset 3px 0 0 #f7b0c3, 0 4px 14px rgb(0 0 0 / .18);
  }

  :root[data-palette="cherry"] .sakura-host .nav-item.active::before {
    display: none;
    content: none;
  }

  :root[data-palette="cherry"] .sakura-host .nav-item.active svg {
    color: #ffd9e4;
    filter: drop-shadow(0 0 6px rgb(247 176 195 / .35));
  }

  :root[data-palette="cherry"] .sakura-host .side-conn {
    color: #d9bcc5;
    border-top-color: rgb(255 196 212 / .16);
    text-shadow: 0 1px 3px rgb(0 0 0 / .55);
  }

  :root[data-palette="cherry"] .sakura-host > .btn-danger-ghost {
    color: #f0b7b7;
    border-color: rgb(255 196 212 / .18);
    background: rgb(22 6 11 / .35);
  }
}

.sakura-petal {
  position: absolute;
  top: 0;
  left: var(--sakura-x);
  width: var(--sakura-size);
  height: var(--sakura-size);
  background-image: var(--sakura-sprite);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: var(--sakura-opacity);
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .18));
  animation: sakura-fall var(--sakura-duration) linear var(--sakura-delay) infinite;
  will-change: transform;
}

.sakura-petal.sakura-blossom { filter: drop-shadow(0 2px 4px rgb(0 0 0 / .24)); }

@keyframes sakura-fall {
  0% { transform: translate3d(0, -14vh, 0) rotate(0deg); }
  50% { transform: translate3d(var(--sakura-sway), 48vh, 0) rotate(calc(var(--sakura-spin) * .5)); }
  100% { transform: translate3d(var(--sakura-drift), 112vh, 0) rotate(var(--sakura-spin)); }
}

@media (prefers-reduced-motion: reduce) {
  .sakura-petals { display: none; }
}

/* ── CHERRY TOPBAR · branches over the command strip ───────────────────────── */
.sakura-topbar-scene { display: none; }

@media (min-width: 921px) {
  :root[data-palette="cherry"] .sakura-topbar {
    padding: 5.5px clamp(9px, 1.3vw, 18px);
    border-bottom-color: rgb(255 196 212 / .16);
    background: linear-gradient(180deg, rgb(10 4 7 / .72), rgb(10 4 7 / .38));
    box-shadow: 0 10px 32px rgb(0 0 0 / .3);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    backdrop-filter: blur(14px) saturate(1.06);
    isolation: isolate;
  }

  :root[data-palette="cherry"] .sakura-topbar > .sakura-topbar-scene {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(90deg, #16060b 0%, #2a0f19 45%, #3a1422 100%);
  }

  :root[data-palette="cherry"] .sakura-topbar > :not(.sakura-topbar-scene) {
    position: relative;
    z-index: 2;
  }

  .sakura-topbar-scene > div {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .sakura-topbar-branch-left {
    z-index: 1;
    background-image: url("images/sakura/branches-front.webp");
    background-position: left top;
    background-size: 78% auto;
    background-repeat: no-repeat;
    opacity: .9;
  }

  .sakura-topbar-branch-right {
    z-index: 1;
    background-image: url("images/sakura/branch-hanging.webp");
    background-position: right top;
    background-size: 52% auto;
    background-repeat: no-repeat;
    opacity: .92;
  }

  .sakura-topbar-scrim {
    z-index: 2;
    background:
      linear-gradient(90deg, rgb(10 4 7 / .9) 0%, rgb(10 4 7 / .66) 24%, rgb(22 6 11 / .16) 52%, rgb(22 6 11 / .52) 72%, rgb(10 4 7 / .86) 100%),
      linear-gradient(180deg, rgb(22 6 11 / .22) 0%, transparent 48%, rgb(22 6 11 / .46) 100%);
  }

  :root[data-palette="cherry"] .sakura-topbar .page-title {
    color: #fff4f7;
    text-shadow: 0 1px 3px rgb(0 0 0 / .55);
  }

  :root[data-palette="cherry"] .sakura-topbar .page-title::before { color: #d6aab5; }

  :root[data-palette="cherry"] .sakura-topbar .acct-select,
  :root[data-palette="cherry"] .sakura-topbar .btn:not(.run-pill) {
    border-color: rgb(255 196 212 / .22);
    background: rgb(22 6 11 / .62);
    color: #f3e1e6;
    box-shadow: inset 0 1px 0 rgb(255 244 247 / .06);
  }

  :root[data-palette="cherry"] .sakura-topbar .acct-select { color-scheme: dark; }

  :root[data-palette="cherry"] .sakura-topbar .btn:not(.run-pill):hover {
    border-color: rgb(255 196 212 / .34);
    background: rgb(255 196 212 / .12);
    color: #fff4f7;
  }

  :root[data-palette="cherry"] .sakura-topbar .connect-pill {
    border-color: rgb(255 196 212 / .22);
    background: rgb(22 6 11 / .55);
    color: #e9c5cd;
  }

  :root[data-palette="cherry"] .sakura-topbar .connect-pill.connected {
    border-color: rgb(127 191 143 / .42);
    background: rgb(47 122 82 / .22);
    color: #b7e3c5;
  }

  :root[data-palette="cherry"] .sakura-topbar .run-pill {
    border-color: rgb(255 196 212 / .22);
    box-shadow: 0 5px 16px rgb(0 0 0 / .28), inset 0 1px 0 rgb(255 255 255 / .12);
  }

  :root[data-palette="cherry"] .sakura-topbar .run-pill.running {
    border-color: rgb(127 191 143 / .55);
    background: linear-gradient(135deg, #3f8a5f, #2f6b49);
    color: #f2fff6;
  }

  :root[data-palette="cherry"] .sakura-topbar .run-pill.stopped {
    border-color: rgb(255 196 212 / .35);
    background: linear-gradient(135deg, #d95c70, #a91f3a);
    color: #fff4f7;
  }

  :root[data-palette="cherry"] .sakura-topbar .run-pending { color: #f0d2a0; }
}

/* ── CHERRY MAIN · one continuous hero image behind the dashboard ─────────── */
@media (min-width: 921px) {
  :root[data-palette="cherry"] .sakura-main {
    position: relative;
    isolation: isolate;
    background: #16060b;
  }

  :root[data-palette="cherry"] .sakura-main::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: clamp(230px, 20vw, 286px);
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgb(10 4 7 / .1) 0%, rgb(10 4 7 / .3) 36%, rgb(10 4 7 / .68) 100%),
      url("images/field-command-hero-v2.webp") center top / cover no-repeat;
  }

  :root[data-palette="cherry"] .sakura-main > .content {
    position: relative;
    z-index: 1;
    padding: clamp(10px, 1.5vw, 21px);
  }

  :root[data-palette="cherry"] .sakura-main .command-hero {
    align-self: stretch;
    min-height: 126px;
    padding: clamp(9px, 1.2vw, 15px);
    background: linear-gradient(90deg, rgb(10 4 7 / .88) 0%, rgb(10 4 7 / .6) 42%, rgb(10 4 7 / .12) 78%, rgb(10 4 7 / .35) 100%);
    border-color: rgb(255 196 212 / .16);
    box-shadow: 0 18px 42px rgb(0 0 0 / .26);
  }

  :root[data-palette="cherry"] .sakura-main .command-hero-copy {
    flex: 1 1 auto;
    max-width: 760px;
  }

  :root[data-palette="cherry"] .sakura-main .command-hero h1 { margin: 4px 0 2px; }

  :root[data-palette="cherry"] .sakura-main .command-hero p {
    max-width: 720px;
    margin: 0;
  }

  :root[data-palette="cherry"] .sakura-main .command-hero::before {
    background: linear-gradient(120deg, rgb(238 152 174 / .2), transparent 64%);
  }

  :root[data-palette="cherry"] .sakura-main .page-banner {
    background: linear-gradient(90deg, rgb(10 4 7 / .9) 0%, rgb(10 4 7 / .62) 45%, rgb(10 4 7 / .14) 80%);
    border-color: rgb(255 196 212 / .16);
    box-shadow: 0 14px 34px rgb(0 0 0 / .24);
  }

  :root[data-palette="cherry"] .sakura-main .page-banner::before {
    background: linear-gradient(120deg, rgb(238 152 174 / .18), transparent 64%);
  }

  :root[data-palette="cherry"] .sakura-main .panel {
    border-color: color-mix(in srgb, var(--line-strong) 64%, transparent);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    box-shadow: 0 12px 32px rgb(0 0 0 / .16), inset 0 1px 0 rgb(255 244 247 / .05);
    -webkit-backdrop-filter: blur(12px) saturate(1.06);
    backdrop-filter: blur(12px) saturate(1.06);
  }

  :root[data-palette="cherry"] .sakura-main .status-strip {
    grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
    border-color: color-mix(in srgb, var(--line-strong) 64%, transparent);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    box-shadow: 0 8px 24px rgb(0 0 0 / .14);
    -webkit-backdrop-filter: blur(12px) saturate(1.06);
    backdrop-filter: blur(12px) saturate(1.06);
  }

  :root[data-palette="cherry"] .sakura-main .stat-card {
    padding: 7px 9px;
  }

  :root[data-palette="cherry"] .sakura-main .stat-ico {
    width: 36px;
    height: 36px;
    right: 7px;
    opacity: .6;
  }

  :root[data-palette="cherry"] .sakura-main .seg {
    border-color: color-mix(in srgb, var(--line-strong) 60%, transparent);
    background: color-mix(in srgb, var(--surface) 66%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  :root[data-palette="cherry"] .sakura-main .seg-btn.active {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }

  :root[data-palette="cherry"] .sakura-main .bot-card {
    border-color: color-mix(in srgb, var(--line-strong) 60%, transparent);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  :root[data-palette="cherry"] .sakura-main .bot-card:hover {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
  }

  :root[data-palette="cherry"] .sakura-main .bot-card.on {
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--accent-wash) 72%, transparent),
      color-mix(in srgb, var(--surface) 82%, transparent) 72%);
  }

  :root[data-palette="cherry"] .sakura-main .console-col {
    border-color: color-mix(in srgb, var(--chrome-line) 80%, transparent);
    background: color-mix(in srgb, var(--console) 84%, transparent);
    box-shadow: 0 14px 34px rgb(0 0 0 / .24), inset 0 1px 0 rgb(255 244 247 / .04);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    backdrop-filter: blur(14px) saturate(1.05);
  }

  :root[data-palette="cherry"] .sakura-main .console-head {
    border-bottom-color: color-mix(in srgb, var(--chrome-line) 80%, transparent);
    background: color-mix(in srgb, var(--console) 72%, transparent);
  }

  :root[data-palette="cherry"] .sakura-main .console-body {
    background: transparent;
  }

  :root[data-palette="cherry"] .sakura-main .session-gains {
    border-color: color-mix(in srgb, var(--chrome-line) 70%, transparent);
    background: color-mix(in srgb, var(--console) 55%, transparent);
  }
}