/* ZTCloud API · New new-api Sakura UI 2026
   Fresh active theme. Does not reuse previous sakura-home.css/js.
   Scope is intentionally broad because new-api class names are generated by the bundled frontend.
*/

:root {
  --zt-bg-0: #fff7fb;
  --zt-bg-1: #fffdf7;
  --zt-bg-2: #f8ecff;
  --zt-ink: #33243b;
  --zt-muted: #7e647b;
  --zt-line: rgba(177, 102, 143, 0.18);
  --zt-pink: #ff8fbd;
  --zt-pink-2: #ffc7dc;
  --zt-sakura: #ffb7d5;
  --zt-violet: #b99cff;
  --zt-gold: #d2a15d;
  --zt-card: rgba(255, 255, 255, 0.72);
  --zt-card-strong: rgba(255, 255, 255, 0.88);
  --zt-shadow: 0 24px 70px rgba(128, 75, 121, 0.14);
}

html.light,
html:not(.dark) {
  color-scheme: light;
}

body,
.bg-background,
.text-foreground.relative.min-h-svh {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 199, 220, 0.46), transparent 32%),
    radial-gradient(circle at 92% 8%, rgba(198, 174, 255, 0.35), transparent 28%),
    radial-gradient(circle at 48% 88%, rgba(255, 238, 202, 0.34), transparent 34%),
    linear-gradient(145deg, var(--zt-bg-0) 0%, var(--zt-bg-1) 42%, var(--zt-bg-2) 100%) !important;
  color: var(--zt-ink) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.46) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.42) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 50% 18%, rgba(0,0,0,0.5), transparent 72%);
}

body::after {
  content: "桜";
  position: fixed;
  right: clamp(18px, 4vw, 72px);
  bottom: clamp(18px, 5vh, 72px);
  z-index: 0;
  pointer-events: none;
  font-size: clamp(5rem, 16vw, 18rem);
  line-height: 1;
  font-weight: 800;
  color: rgba(255, 143, 189, 0.075);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  transform: rotate(-8deg);
}

#root,
#root > div {
  position: relative;
  z-index: 1;
}

header.pointer-events-none {
  z-index: 60 !important;
}

header nav,
header .pointer-events-auto > div,
header .pointer-events-auto nav {
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(255, 155, 196, 0.22) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 44px rgba(139, 82, 131, 0.10) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
}

header a,
header button,
header span {
  color: var(--zt-ink) !important;
}

header a.active,
header a:hover,
header button:hover {
  background: rgba(255, 183, 213, 0.22) !important;
  color: #9a3f6c !important;
}

header a[href*="login"],
header a:has(span),
a.bg-primary,
button.bg-primary,
.bg-primary {
  background: linear-gradient(135deg, #ff89b7 0%, #c2a0ff 100%) !important;
  border-color: rgba(255,255,255,0.62) !important;
  color: white !important;
  box-shadow: 0 12px 28px rgba(192, 119, 188, 0.22) !important;
}

section:first-of-type {
  min-height: 88vh;
  padding-top: clamp(7rem, 13vh, 10rem) !important;
}

section:first-of-type::before,
section:first-of-type::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(10px);
}

section:first-of-type::before {
  width: min(32vw, 420px);
  height: min(32vw, 420px);
  left: -8vw;
  top: 16vh;
  background: radial-gradient(circle, rgba(255, 183, 213, 0.32), transparent 68%);
}

section:first-of-type::after {
  width: min(38vw, 520px);
  height: min(38vw, 520px);
  right: -12vw;
  top: 2vh;
  background: radial-gradient(circle, rgba(185, 156, 255, 0.24), transparent 70%);
}

h1,
h2,
h3 {
  color: #2d2035 !important;
  letter-spacing: -0.035em;
}

h1 {
  text-shadow: 0 2px 0 rgba(255,255,255,0.78);
}

h1 span,
.bg-gradient-to-r.bg-clip-text,
.text-transparent {
  background: linear-gradient(100deg, #e96b9f 0%, #b789ff 52%, #d69a48 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

p,
.text-muted-foreground,
.text-muted-foreground\/80,
.text-muted-foreground\/60,
.text-foreground\/40,
.text-foreground\/55,
.text-foreground\/75,
.text-foreground\/80 {
  color: var(--zt-muted) !important;
}

.border,
.border-border,
.border-border\/40,
.border-border\/50,
.border-border\/60 {
  border-color: var(--zt-line) !important;
}

.bg-white\/95,
.bg-background,
.bg-muted\/15,
.bg-muted\/30,
.dark\:bg-input\/30,
[class*="bg-white"],
[class*="bg-muted"] {
  background-color: rgba(255, 255, 255, 0.58) !important;
}

.rounded-2xl.border,
[class*="shadow-"][class*="rounded"],
section .rounded-2xl,
section .rounded-full.border,
main .rounded-2xl,
main .rounded-xl,
main .rounded-lg.border {
  background: var(--zt-card) !important;
  border-color: rgba(255, 155, 196, 0.22) !important;
  box-shadow: var(--zt-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
}

code,
.font-mono {
  color: #5b465f !important;
}

.text-blue-600,
.dark\:text-blue-400,
.text-blue-500,
.dark\:text-blue-400 {
  color: #d85f97 !important;
}

.bg-blue-500\/10,
.bg-blue-500\/5,
.dark\:bg-blue-400\/10,
.dark\:bg-blue-400\/5 {
  background-color: rgba(255, 143, 189, 0.13) !important;
}

.border-blue-500,
.border-blue-500\/20,
.dark\:border-blue-400,
.dark\:border-blue-400\/20 {
  border-color: rgba(255, 143, 189, 0.34) !important;
}

.text-emerald-600,
.dark\:text-emerald-400 {
  color: #5f9f79 !important;
}

.text-amber-700,
.dark\:text-amber-300 {
  color: #b77a42 !important;
}

footer,
contentinfo,
[role="contentinfo"] {
  background: linear-gradient(180deg, transparent, rgba(255, 232, 242, 0.52)) !important;
}

/* Decorative fresh Sakura layer */
#zt-new-sakura-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  opacity: 0.88;
}

.zt-new-petal {
  position: absolute;
  top: -8vh;
  left: var(--x);
  width: var(--s);
  height: calc(var(--s) * 0.72);
  border-radius: 72% 28% 70% 30% / 68% 34% 66% 32%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.96) 0 12%, rgba(255,255,255,0.34) 13%, transparent 36%),
    linear-gradient(135deg, rgba(255,247,251,0.94), var(--c));
  box-shadow: 0 8px 18px rgba(255, 143, 189, 0.18);
  opacity: 0;
  animation: zt-new-petal-fall var(--d) linear infinite;
  animation-delay: var(--delay);
  transform-origin: center;
}

@keyframes zt-new-petal-fall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  12% { opacity: var(--o); }
  54% { transform: translate3d(var(--dx1), 58vh, 0) rotate(190deg); opacity: calc(var(--o) * 0.95); }
  100% { transform: translate3d(var(--dx2), 112vh, 0) rotate(420deg); opacity: 0; }
}

#zt-new-sakura-branch {
  position: fixed;
  right: -2vw;
  top: 8vh;
  width: min(34vw, 460px);
  height: min(34vw, 460px);
  z-index: 1;
  pointer-events: none;
  opacity: 0.26;
  transform: rotate(-12deg);
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 183, 213, 0.96) 0 3%, transparent 3.2%),
    radial-gradient(circle at 52% 28%, rgba(255, 199, 220, 0.96) 0 3.2%, transparent 3.4%),
    radial-gradient(circle at 61% 42%, rgba(255, 183, 213, 0.86) 0 2.8%, transparent 3%),
    radial-gradient(circle at 34% 48%, rgba(255, 214, 230, 0.88) 0 3%, transparent 3.2%),
    linear-gradient(28deg, transparent 0 48%, rgba(92, 54, 71, 0.72) 49% 51%, transparent 52%);
  filter: blur(0.1px) drop-shadow(0 16px 30px rgba(148, 86, 133, 0.14));
}

@media (max-width: 768px) {
  header nav,
  header .pointer-events-auto > div,
  header .pointer-events-auto nav {
    border-radius: 22px !important;
  }

  #zt-new-sakura-branch {
    opacity: 0.12;
    width: 58vw;
    height: 58vw;
  }

  #zt-new-sakura-layer {
    opacity: 0.54;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zt-new-petal {
    animation-duration: 28s !important;
  }
}