/* Moxel Golden hour, behind the admins-default site-look switch (src/cloud/site-look.js).
   The approved look C: an Overworld evening, twilight-blue panels and sunset-gold buttons.
   Every rule is scoped to html[data-site-look="c"], so the stylesheet alone cannot change today's site. */

html[data-site-look="c"] {
  --primary: #ffc44d;
  --primary-hi: #ffe39a;
  --primary-lo: #d9901c;
  --primary-ink: #2b1700;
  --primary-soft: #343d72;
  --primary-hover: #ffd36e;
  --primary-edge: #3a2000;
  --link: #8fd8ff;
  --bg-0: #1c2245;
  --bg-1: #252c56;
  --bg-2: #2f3765;
  --bg-3: #3b4475;
  --bg-input: #171c3a;
  --bg-nav: #161b3a;
  --line: #343d6c;
  --line-2: #47518b;
  --line-3: #5d68a8;
  --text: #f7f5ff;
  --text-dim: #c3c6e2;
  --text-soft: #dfdff2;
  --text-faint: #b2b7da;
  --accent: #ff9f6e;
  --rim: rgba(255, 236, 214, 0.06);
  --drop: rgba(8, 8, 28, 0.7);
  --glow: rgba(255, 196, 77, 0.55);
  --hero-light: linear-gradient(180deg, #121840 0%, #1c2156 30%, #3a2b5e 52%, #763851 68%, #b0592c 82%, #8a4840 92%, #362a50 100%);
  --hero-filter: brightness(1.04) contrast(1.1) saturate(1.15);
  --head-light: linear-gradient(180deg, #121840 0%, #22245a 40%, #4a2e5e 62%, #7e3c50 80%, #a0552e 100%);
  --news: linear-gradient(90deg, rgba(255, 159, 110, 0.14), rgba(255, 196, 77, 0.1) 50%, rgba(143, 216, 255, 0.12));
}

html[data-site-look="c"] ::selection { background: color-mix(in srgb, var(--primary) 38%, transparent); color: #fff; }
html[data-site-look="c"] .eyebrow { color: var(--accent); }
html[data-site-look="c"] .eyebrow::before { box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 30%, transparent); }
html[data-site-look="c"] :is(.card, .panel, .plan, .feat, .step, .map-card, .guide, .faq details, .lu-card, .hs-card) {
  box-shadow: inset 0 1px 0 var(--rim), 0 16px 36px -24px var(--drop);
}
html[data-site-look="c"] .plan.pro { background: var(--bg-2); border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset, 0 30px 80px -34px var(--glow); }
html[data-site-look="c"] .code { background: var(--bg-input); }
html[data-site-look="c"] .modal { background: var(--bg-2); }
html[data-site-look="c"] { --btn-hover: color-mix(in srgb, var(--bg-3) 84%, #ffffff); }
html[data-site-look="c"] .toast { background: color-mix(in srgb, var(--bg-2) 96%, transparent); }
html[data-site-look="c"] .news-bar { background: var(--news), var(--bg-nav); }
html[data-site-look="c"] .site-nav { border-bottom-color: var(--line-2); }
html[data-site-look="c"] body:not(.console) .btn-primary {
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, 0.24), inset 3px 3px 0 rgba(255, 255, 255, 0.42), 0 0 0 2px var(--primary-edge), 0 3px 0 2px rgba(0, 0, 0, 0.6), 0 8px 30px -6px var(--glow);
}
html[data-site-look="c"] body:not(.console) .btn-primary:active {
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, 0.24), inset 3px 3px 0 rgba(255, 255, 255, 0.42), 0 0 0 2px var(--primary-edge), 0 1px 0 2px rgba(0, 0, 0, 0.6), 0 4px 18px -6px var(--glow);
}
html[data-site-look="c"] .hero-top { background: var(--bg-0); }
html[data-site-look="c"] .hero-top::before {
  display: block; content: ""; position: absolute; inset: 0; width: auto; transform: none; z-index: 0; pointer-events: none; image-rendering: auto;
  background: var(--hero-light), url("/site/img/skyglass-isles.jpg") center 38% / cover no-repeat;
  background-blend-mode: var(--hero-blend, screen, normal);
  filter: var(--hero-filter);
}
html[data-site-look="c"] .hero-top::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-0) 10%, transparent) 0%, color-mix(in srgb, var(--bg-0) 16%, transparent) 60%, color-mix(in srgb, var(--bg-0) 78%, transparent) 90%, var(--bg-0) 100%);
}
@media (max-width: 640px) {
  html[data-site-look="c"] .hero-top::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-0) 34%, transparent) 0%, color-mix(in srgb, var(--bg-0) 46%, transparent) 70%, color-mix(in srgb, var(--bg-0) 82%, transparent) 92%, var(--bg-0) 100%);
  }
}
html[data-site-look="c"] .hud-chip, html[data-site-look="c"] .presets span { background: color-mix(in srgb, var(--bg-0) 88%, transparent); }
html[data-site-look="c"] .tile { background: var(--bg-2); }
html[data-site-look="c"] .tile figcaption { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-0) 90%, transparent)); }
html[data-site-look="c"] .viewport { background: var(--bg-input); border-color: var(--bg-nav); }
html[data-site-look="c"] .lu-art { background: var(--bg-input); }
html[data-site-look="c"] .presets button { background: var(--bg-2); box-shadow: inset 0 2px 0 var(--line-3), inset 0 -2px 0 var(--bg-input), 0 0 0 2px var(--bg-nav); }
html[data-site-look="c"] .presets button:hover { background: var(--bg-3); }
html[data-site-look="c"] .presets button[aria-pressed="true"] { background: var(--primary); box-shadow: inset 0 2px 0 var(--primary-hi), inset 0 -2px 0 var(--primary-lo), 0 0 0 2px var(--primary-edge); }
html[data-site-look="c"] .page-head.blockgrid-bg:not(.mx-head) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-0) 34%, transparent) 0%, color-mix(in srgb, var(--bg-0) 48%, transparent) 55%, var(--bg-0) 100%),
    var(--head-light), url("/site/img/shaders-night.jpg") center 42% / cover no-repeat;
  background-blend-mode: normal, screen, normal;
}
@media (max-width: 800px) {
  html[data-site-look="c"] .page-head.blockgrid-bg:not(.mx-head) {
    background-image:
      linear-gradient(180deg, color-mix(in srgb, var(--bg-0) 34%, transparent) 0%, color-mix(in srgb, var(--bg-0) 48%, transparent) 55%, var(--bg-0) 100%),
      var(--head-light), url("/site/img/shaders-night-800.jpg");
  }
}
html[data-site-look="c"] :is(.ob-steps li:not(.done), .cx-live:not(.ok), .cx-prompts .prompt, .cx-client, .cx-note, .cx-advanced) { background: var(--bg-2); }
html[data-site-look="c"] .cx-client:hover { background: var(--bg-3); border-color: var(--line-3); }
html[data-site-look="c"] .cx-client[aria-checked="true"] { background: var(--primary-soft); box-shadow: 4px 4px 0 color-mix(in srgb, var(--primary) 14%, transparent); }
html[data-site-look="c"] .ob-bar { background: var(--bg-input); box-shadow: inset 0 0 0 2px var(--bg-nav); }
html[data-site-look="c"] .blink { background: var(--bg-input); }
html[data-site-look="c"] .blink:hover, html[data-site-look="c"] .blink:focus-visible { background: var(--bg-2); border-color: var(--line-3); }
html[data-site-look="c"] :is(.owner-row, .strip-cta, .plan-card.pro) { border-color: color-mix(in srgb, var(--primary) 36%, transparent); }
html[data-site-look="c"] :is(.tier[aria-pressed="true"], .open-size[aria-checked="true"], .sp-kinds button[aria-checked="true"]) { background: var(--primary-soft); }
html[data-site-look="c"] .seg button[aria-pressed="true"] { background: var(--primary-soft); }
html[data-site-look="c"] :is(.vp-ai, .xfile.main, .new-key, .by-us-opt, .steps-list > li::before) {
  background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}
html[data-site-look="c"] .payg { border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 5%, transparent); }
html[data-site-look="c"] .plan.pro li::before { background-color: var(--primary-soft); }
html[data-site-look="c"] :is(.hs-points li::before, .nb-dot) { box-shadow: 3px 3px 0 color-mix(in srgb, var(--primary) 28%, transparent); }
html[data-site-look="c"] .hs-card { background: var(--bg-1); }
html[data-site-look="c"] .site-nav { border-bottom-color: color-mix(in srgb, var(--primary) 34%, var(--line)); }
html[data-site-look="c"] .site-foot { border-top-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
html[data-site-look="c"] body .btn-primary:disabled { opacity: 1; color: var(--text-dim); background: var(--bg-3); border-color: var(--line-2); box-shadow: none; }
html[data-site-look="c"] [data-state="live"] .lu-state { color: #0b2a0e; background: var(--ok); box-shadow: inset 0 2px 0 #c4f5c6, inset 0 -2px 0 #3f8f43, 0 0 0 2px #0b2a0e; }
html[data-site-look="c"] h1 { text-shadow: 0 3px 0 rgba(20, 16, 50, 0.55); }