/*
 * Yunsu Island theme.
 * Cozy island / life-sim inspired visual layer for the AI relay console.
 * No app font-family override: preserve the product's normal typography.
 */

:root,
.dark {
  color-scheme: light;
  --background: 47 54% 92%;
  --foreground: 33 31% 24%;
  --card: 47 61% 94%;
  --card-foreground: 33 31% 24%;
  --popover: 47 61% 95%;
  --popover-foreground: 33 31% 24%;
  --primary: 176 69% 44%;
  --primary-foreground: 45 70% 97%;
  --secondary: 43 62% 86%;
  --secondary-foreground: 32 36% 30%;
  --muted: 42 42% 86%;
  --muted-foreground: 33 19% 45%;
  --accent: 28 86% 66%;
  --accent-foreground: 33 31% 24%;
  --destructive: 6 75% 55%;
  --destructive-foreground: 45 70% 97%;
  --border: 37 33% 74%;
  --input: 46 45% 90%;
  --ring: 176 70% 42%;
  --radius: 1.05rem;
}

html.ys-island-theme {
  --ys-paper: #f7f3df;
  --ys-paper-2: #fff8df;
  --ys-cream: #fff5cf;
  --ys-mint: 25, 200, 185;
  --ys-mint-dark: #0fa99e;
  --ys-grass: 114, 186, 104;
  --ys-sky: 104, 196, 223;
  --ys-sand: 242, 204, 132;
  --ys-peach: 239, 141, 97;
  --ys-coral: 236, 113, 117;
  --ys-lavender: 154, 132, 218;
  --ys-brown: #725d42;
  --ys-brown-strong: #3d3428;
  --ys-muted: rgba(114, 93, 66, .68);
  --ys-line: rgba(196, 184, 158, .82);
  --ys-soft-line: rgba(216, 208, 195, .72);
  --ys-panel: rgba(247, 243, 223, .86);
  --ys-panel-strong: rgba(255, 248, 223, .94);
  --ys-accent-rgb: var(--ys-mint);
  --ys-accent-2-rgb: var(--ys-sky);
  --ys-accent-3-rgb: var(--ys-peach);
  --ys-route-name: "薄荷岛";
  --ys-badge-symbol: "leaf";
  --ys-shadow: 0 12px 30px rgba(91, 74, 45, .14);
  --ys-shadow-strong: 0 20px 60px rgba(91, 74, 45, .20);
}

html.ys-island-theme,
html.ys-island-theme body {
  background-color: #f3edd8 !important;
}

html.ys-island-theme body {
  color: var(--ys-brown-strong);
  background-image:
    radial-gradient(circle at 10% 9%, rgba(var(--ys-accent-rgb), .18), transparent 26rem),
    radial-gradient(circle at 82% 8%, rgba(var(--ys-accent-2-rgb), .20), transparent 28rem),
    radial-gradient(circle at 92% 84%, rgba(var(--ys-accent-3-rgb), .18), transparent 27rem),
    linear-gradient(180deg, rgba(255, 250, 225, .96), rgba(241, 229, 199, .96)) !important;
  overflow-x: hidden;
}

html.ys-island-theme body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18px 18px, rgba(114, 93, 66, .065) 0 2px, transparent 2.5px),
    radial-gradient(circle at 52px 48px, rgba(var(--ys-accent-rgb), .075) 0 2px, transparent 2.5px),
    linear-gradient(45deg, transparent 0 47%, rgba(255, 255, 255, .25) 48% 51%, transparent 52% 100%);
  background-size: 72px 72px, 82px 82px, 160px 160px;
  opacity: .8;
  mask-image: radial-gradient(circle at 50% 8%, #000 0 62%, transparent 100%);
}

html.ys-island-theme body::after {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  height: min(34vh, 260px);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 100%, rgba(var(--ys-grass), .22), transparent 42%),
    radial-gradient(ellipse at 76% 100%, rgba(var(--ys-accent-rgb), .18), transparent 48%),
    repeating-linear-gradient(-8deg, rgba(var(--ys-grass), .12) 0 12px, rgba(255, 255, 255, 0) 12px 34px);
  opacity: .75;
}

html.ys-island-theme body > :not(#ys-island-particles):not(#ys-island-badge):not(#ys-route-tag) {
  position: relative;
  z-index: 1;
}

html.ys-island-theme ::selection {
  color: #fff8df;
  background: rgb(var(--ys-accent-rgb));
}

html.ys-island-theme :focus-visible {
  outline: 2px solid #f5c31c !important;
  outline-offset: 3px;
}

html.ys-island-theme a,
html.ys-island-theme button,
html.ys-island-theme [role="button"] {
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease, filter .18s ease;
}

html.ys-island-theme a:hover,
html.ys-island-theme button:hover,
html.ys-island-theme [role="button"]:hover {
  transform: translateY(-1px);
}

#ys-island-particles {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: .66;
}

#ys-route-tag {
  position: fixed;
  left: max(18px, 2vw);
  bottom: max(14px, 2vh);
  z-index: 1;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(114, 93, 66, .58);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#ys-route-tag::before {
  content: "";
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgb(var(--ys-accent-rgb)) 0 8px, transparent 8px 13px);
}

#ys-island-badge {
  position: fixed;
  right: clamp(14px, 3vw, 48px);
  bottom: clamp(74px, 7vw, 120px);
  z-index: 1;
  width: clamp(92px, 10vw, 144px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  border: 3px solid rgba(255, 248, 223, .86);
  border-radius: 34% 42% 36% 45%;
  background:
    radial-gradient(circle at 36% 32%, rgba(255, 255, 255, .88), transparent 18%),
    linear-gradient(145deg, rgba(var(--ys-accent-rgb), .86), rgba(var(--ys-accent-2-rgb), .78));
  box-shadow: 0 18px 40px rgba(91, 74, 45, .18), inset 0 2px 0 rgba(255, 255, 255, .42);
  opacity: .64;
  transform: rotate(-8deg);
}

#ys-island-badge::before,
#ys-island-badge::after {
  content: "";
  position: absolute;
  background: rgba(255, 248, 223, .88);
}

#ys-island-badge::before {
  width: 48%;
  height: 34%;
  left: 24%;
  top: 32%;
  border-radius: 56% 6% 56% 6%;
  transform: rotate(-28deg);
  box-shadow: 0 0 0 4px rgba(114, 93, 66, .08);
}

#ys-island-badge::after {
  width: 10%;
  height: 58%;
  left: 50%;
  top: 26%;
  border-radius: 999px;
  transform: rotate(18deg);
  opacity: .78;
}

html.ys-island-theme header,
html.ys-island-theme aside,
html.ys-island-theme [data-sidebar],
html.ys-island-theme [class*="bg-background"],
html.ys-island-theme [class*="bg-card"],
html.ys-island-theme [class*="bg-popover"],
html.ys-island-theme [class*="bg-white"],
html.ys-island-theme [class*="bg-slate"],
html.ys-island-theme [class*="bg-zinc"],
html.ys-island-theme [class*="bg-neutral"],
html.ys-island-theme [class*="bg-gray"] {
  color: var(--ys-brown-strong) !important;
  background-color: var(--ys-panel) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .08)),
    radial-gradient(circle at 100% 0%, rgba(var(--ys-accent-rgb), .12), transparent 20rem) !important;
  border-color: var(--ys-line) !important;
  box-shadow: var(--ys-shadow), inset 0 1px 0 rgba(255, 255, 255, .72);
  backdrop-filter: blur(16px) saturate(118%);
}

html.ys-island-theme header {
  border-bottom: 2px dashed rgba(196, 184, 158, .72) !important;
}

html.ys-island-theme header > div,
html.ys-island-theme nav {
  position: relative;
}

html.ys-island-theme header > div::after,
html.ys-island-theme nav::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -2px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(var(--ys-accent-rgb), .72) 0 9px, transparent 9px 15px);
  pointer-events: none;
}

html.ys-island-theme img[src="/logo.png"],
html.ys-island-theme .logo {
  filter: drop-shadow(0 5px 12px rgba(61, 52, 40, .12));
}

html.ys-island-theme aside,
html.ys-island-theme [data-sidebar="sidebar"] {
  background:
    linear-gradient(180deg, rgba(255, 248, 223, .96), rgba(241, 232, 206, .88)),
    radial-gradient(circle at 0 0, rgba(var(--ys-accent-rgb), .14), transparent 16rem) !important;
}

html.ys-island-theme aside a,
html.ys-island-theme aside button,
html.ys-island-theme nav a {
  border-radius: 999px;
}

html.ys-island-theme aside a:hover,
html.ys-island-theme aside button:hover,
html.ys-island-theme nav a:hover,
html.ys-island-theme [data-sidebar="menu-button"]:hover {
  color: var(--ys-brown-strong) !important;
  background: rgba(var(--ys-accent-rgb), .14) !important;
  box-shadow: inset 0 0 0 2px rgba(var(--ys-accent-rgb), .22);
}

html.ys-island-theme [data-sidebar="menu-button"][data-active="true"],
html.ys-island-theme aside [aria-current="page"],
html.ys-island-theme aside [data-state="open"] > button {
  color: #2f4a42 !important;
  background:
    linear-gradient(135deg, rgba(var(--ys-accent-rgb), .28), rgba(var(--ys-accent-2-rgb), .15)) !important;
  box-shadow: inset 0 0 0 2px rgba(var(--ys-accent-rgb), .34), 0 8px 16px rgba(91, 74, 45, .08);
}

html.ys-island-theme [class*="rounded-xl"],
html.ys-island-theme [class*="rounded-lg"],
html.ys-island-theme .card,
html.ys-island-theme section,
html.ys-island-theme article {
  border-color: var(--ys-line) !important;
}

html.ys-island-theme [class*="bg-card"],
html.ys-island-theme [class*="bg-popover"],
html.ys-island-theme .card,
html.ys-island-theme .panel,
html.ys-island-theme .hero-card,
html.ys-island-theme section,
html.ys-island-theme article {
  position: relative;
  overflow: hidden;
}

html.ys-island-theme [class*="bg-card"]::before,
html.ys-island-theme [class*="bg-popover"]::before,
html.ys-island-theme .card::before,
html.ys-island-theme .panel::before,
html.ys-island-theme .hero-card::before,
html.ys-island-theme section::before,
html.ys-island-theme article::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 94% 8%, rgba(var(--ys-accent-rgb), .10), transparent 17rem),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .08) 0 8px, transparent 8px 22px);
  opacity: .76;
}

html.ys-island-theme [class*="shadow"],
html.ys-island-theme [class*="bg-card"],
html.ys-island-theme .card,
html.ys-island-theme .panel {
  box-shadow: var(--ys-shadow) !important;
}

html.ys-island-theme button:not([role="switch"]),
html.ys-island-theme [data-slot="button"],
html.ys-island-theme .btn {
  color: var(--ys-brown-strong) !important;
  border: 2px solid rgba(196, 184, 158, .78) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .62), 0 6px 0 rgba(196, 184, 158, .38), 0 12px 22px rgba(91, 74, 45, .12);
}

html.ys-island-theme button:not([role="switch"]):not([data-variant="ghost"]):hover,
html.ys-island-theme [data-slot="button"]:hover {
  border-color: rgba(var(--ys-accent-rgb), .72) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .70), 0 7px 0 rgba(var(--ys-accent-rgb), .22), 0 14px 26px rgba(91, 74, 45, .14);
}

html.ys-island-theme input,
html.ys-island-theme textarea,
html.ys-island-theme select,
html.ys-island-theme [role="combobox"] {
  color: var(--ys-brown-strong) !important;
  background: rgba(255, 252, 236, .88) !important;
  border: 2px solid rgba(196, 184, 158, .78) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .72);
}

html.ys-island-theme input:focus,
html.ys-island-theme textarea:focus,
html.ys-island-theme [role="combobox"]:focus {
  border-color: rgb(var(--ys-accent-rgb)) !important;
  box-shadow: 0 0 0 3px rgba(var(--ys-accent-rgb), .16), inset 0 2px 0 rgba(255, 255, 255, .72) !important;
}

html.ys-island-theme input::placeholder,
html.ys-island-theme textarea::placeholder {
  color: rgba(114, 93, 66, .46) !important;
}

html.ys-island-theme [class*="border"],
html.ys-island-theme table,
html.ys-island-theme th,
html.ys-island-theme td {
  border-color: rgba(216, 208, 195, .9) !important;
}

html.ys-island-theme table {
  overflow: hidden;
  background: rgba(247, 243, 223, .82) !important;
  border-radius: 20px;
}

html.ys-island-theme thead,
html.ys-island-theme th {
  color: var(--ys-brown) !important;
  background:
    linear-gradient(180deg, rgba(255, 248, 223, .86), rgba(240, 232, 216, .76)) !important;
  font-weight: 700 !important;
}

html.ys-island-theme tbody tr {
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

html.ys-island-theme tbody tr:nth-child(even) {
  background-color: rgba(255, 252, 236, .36);
}

html.ys-island-theme tbody tr:hover {
  color: var(--ys-brown-strong) !important;
  background:
    repeating-linear-gradient(-45deg, rgba(var(--ys-accent-rgb), .16) 0 10px, rgba(var(--ys-accent-rgb), .08) 10px 20px) !important;
  box-shadow: inset 4px 0 0 rgba(var(--ys-accent-rgb), .72);
}

html.ys-island-theme [role="tab"],
html.ys-island-theme [data-state] {
  border-color: rgba(196, 184, 158, .72);
}

html.ys-island-theme [data-state="active"],
html.ys-island-theme [aria-selected="true"] {
  color: #2f4a42 !important;
  background:
    linear-gradient(135deg, rgba(var(--ys-accent-rgb), .25), rgba(var(--ys-accent-2-rgb), .13)) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .58), 0 8px 18px rgba(91, 74, 45, .10);
}

html.ys-island-theme [role="switch"][data-state="checked"],
html.ys-island-theme [role="checkbox"][data-state="checked"] {
  background: linear-gradient(135deg, rgb(var(--ys-accent-rgb)), rgb(var(--ys-accent-2-rgb))) !important;
  border-color: transparent !important;
}

html.ys-island-theme [class*="text-muted"],
html.ys-island-theme [class*="text-slate"],
html.ys-island-theme [class*="text-zinc"],
html.ys-island-theme [class*="text-neutral"],
html.ys-island-theme [class*="text-gray"],
html.ys-island-theme .muted,
html.ys-island-theme small {
  color: var(--ys-muted) !important;
}

html.ys-island-theme h1,
html.ys-island-theme h2,
html.ys-island-theme h3,
html.ys-island-theme .brand {
  color: var(--ys-brown-strong);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .64);
}

html.ys-island-theme code,
html.ys-island-theme pre,
html.ys-island-theme kbd {
  color: #2f6e67;
  background: rgba(255, 252, 236, .86) !important;
  border-color: rgba(196, 184, 158, .76) !important;
  text-shadow: none;
}

html.ys-island-theme [class*="badge"],
html.ys-island-theme [class*="Badge"],
html.ys-island-theme .tag,
html.ys-island-theme .pill {
  color: var(--ys-brown-strong) !important;
  border-color: rgba(196, 184, 158, .72) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(var(--ys-accent-rgb), .16), rgba(255, 248, 223, .72)) !important;
}

html.ys-island-theme .hero,
html.ys-island-theme .hero-card,
html.ys-island-theme .content,
html.ys-island-theme .grid-card,
html.ys-island-theme .callout,
html.ys-island-theme .api-card,
html.ys-island-theme .warn-card {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(var(--ys-accent-rgb), .16), transparent 17rem),
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04)) !important;
}

html.ys-island-theme .hero,
html.ys-island-theme .hero-card,
html.ys-island-theme .codebox,
html.ys-island-theme .api-card,
html.ys-island-theme .card,
html.ys-island-theme .warn-card,
html.ys-island-theme pre {
  color: var(--ys-brown-strong) !important;
  border: 2px solid rgba(196, 184, 158, .78) !important;
  background-color: var(--ys-panel-strong) !important;
  box-shadow: var(--ys-shadow-strong), inset 0 2px 0 rgba(255, 255, 255, .62) !important;
  backdrop-filter: blur(14px) saturate(115%);
}

html.ys-island-theme .step {
  color: #fff8df !important;
  background: linear-gradient(135deg, rgb(var(--ys-accent-rgb)), rgb(var(--ys-accent-2-rgb))) !important;
  box-shadow: 0 8px 18px rgba(91, 74, 45, .12);
}

html.ys-island-theme [class*="prose"] {
  color: rgba(61, 52, 40, .88);
}

html.ys-island-theme [class*="prose"] a,
html.ys-island-theme a:hover {
  color: var(--ys-mint-dark) !important;
}

html.ys-route-playground textarea,
html.ys-route-playground [contenteditable="true"],
html.ys-route-playground [class*="ProseMirror"] {
  background: rgba(255, 252, 236, .94) !important;
  color: var(--ys-brown-strong) !important;
}

html.ys-route-playground main::before {
  content: "";
  position: fixed;
  left: 50%;
  bottom: 72px;
  z-index: 0;
  width: min(820px, 86vw);
  height: 180px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(var(--ys-accent-rgb), .20), transparent 70%),
    repeating-linear-gradient(-8deg, rgba(var(--ys-grass), .13) 0 11px, transparent 11px 30px);
  transform: translateX(-50%);
  opacity: .65;
}

html.ys-route-pricing [class*="grid"] > [class*="border"],
html.ys-route-models [class*="grid"] > [class*="border"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .45), rgba(var(--ys-accent-rgb), .065)),
    rgba(255, 248, 223, .88) !important;
}

html.ys-route-pricing [class*="grid"] > [class*="border"]:hover,
html.ys-route-models [class*="grid"] > [class*="border"]:hover {
  border-color: rgba(var(--ys-accent-rgb), .54) !important;
  box-shadow: 0 0 0 2px rgba(var(--ys-accent-rgb), .14), var(--ys-shadow-strong) !important;
}

html.ys-route-settings main [class*="bg-card"],
html.ys-route-settings main section,
html.ys-route-settings main article {
  background-color: rgba(255, 248, 223, .92) !important;
}

html.ys-route-settings label,
html.ys-route-channels label,
html.ys-route-keys label {
  color: rgba(61, 52, 40, .90) !important;
}

@media (max-width: 900px) {
  #ys-island-badge {
    width: 82px;
    right: 10px;
    bottom: 72px;
    opacity: .36;
  }

  #ys-route-tag {
    display: none;
  }
}

@media (max-width: 640px) {
  html.ys-island-theme header > div::after,
  html.ys-island-theme nav::after {
    left: 10px;
    right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ys-island-theme *,
  html.ys-island-theme *::before,
  html.ys-island-theme *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  #ys-island-particles {
    display: none;
  }
}