/* YSGame OpenAI - iOS 26 inspired Liquid Glass theme layer. */
:root {
  --ys-lg-bg-0: #f6f9ff;
  --ys-lg-bg-1: #edf3ff;
  --ys-lg-bg-2: #fff6fb;
  --ys-lg-ink: #141b2a;
  --ys-lg-muted: #5f6b7f;
  --ys-lg-blue: #0a84ff;
  --ys-lg-cyan: #38c8ff;
  --ys-lg-pink: #ff5ac8;
  --ys-lg-violet: #7d61ff;
  --ys-lg-green: #30d158;
  --ys-lg-warn: #ff9f0a;
  --ys-lg-danger: #ff453a;
  --ys-lg-glass: rgba(255,255,255,.54);
  --ys-lg-glass-strong: rgba(255,255,255,.76);
  --ys-lg-glass-deep: rgba(255,255,255,.88);
  --ys-lg-stroke: rgba(255,255,255,.76);
  --ys-lg-stroke-dark: rgba(67,83,116,.16);
  --ys-lg-shadow: 0 18px 50px rgba(33, 58, 110, .14), 0 4px 16px rgba(20, 34, 65, .08);
  --ys-lg-shadow-soft: 0 10px 24px rgba(33, 58, 110, .10);
  --ys-lg-shadow-strong: 0 24px 80px rgba(33, 58, 110, .18);
  --ys-lg-blur: 20px;
  --ys-lg-radius-sm: 16px;
  --ys-lg-radius-md: 22px;
  --ys-lg-sat: 1.22;
  color-scheme: light;
}
html.dark {
  --ys-lg-bg-0: #070b14;
  --ys-lg-bg-1: #111827;
  --ys-lg-bg-2: #1b1030;
  --ys-lg-ink: #f6f8ff;
  --ys-lg-muted: #bac4d4;
  --ys-lg-glass: rgba(18,24,38,.56);
  --ys-lg-glass-strong: rgba(24,31,48,.80);
  --ys-lg-glass-deep: rgba(28,35,54,.92);
  --ys-lg-stroke: rgba(255,255,255,.18);
  --ys-lg-stroke-dark: rgba(255,255,255,.10);
  --ys-lg-shadow: 0 20px 70px rgba(0,0,0,.40), 0 4px 18px rgba(0,0,0,.28);
  --ys-lg-shadow-soft: 0 12px 34px rgba(0,0,0,.24);
  --ys-lg-shadow-strong: 0 26px 86px rgba(0,0,0,.40);
  color-scheme: dark;
}
html.ys-liquid-clear { --ys-lg-glass: rgba(255,255,255,.42); --ys-lg-glass-strong: rgba(255,255,255,.62); --ys-lg-blur: 30px; }
html.dark.ys-liquid-clear { --ys-lg-glass: rgba(18,24,38,.44); --ys-lg-glass-strong: rgba(24,31,48,.62); }
html.ys-liquid-reduce { --ys-lg-glass: rgba(255,255,255,.88); --ys-lg-glass-strong: rgba(255,255,255,.96); --ys-lg-blur: 12px; }
html.dark.ys-liquid-reduce { --ys-lg-glass: rgba(22,28,42,.90); --ys-lg-glass-strong: rgba(26,34,51,.98); }
* { letter-spacing: 0 !important; }
html, body, #app { min-height: 100%; }
body {
  color: var(--ys-lg-ink) !important;
  background: linear-gradient(145deg, var(--ys-lg-bg-0), color-mix(in srgb, var(--ys-lg-bg-1) 78%, var(--ys-lg-bg-0)) 52%, var(--ys-lg-bg-2)) !important;
  background-attachment: scroll !important;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 24%, rgba(255,255,255,.34), transparent 56%);
  opacity: .20;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  opacity: .20;
}
@media (prefers-reduced-motion: reduce) { .ys-liquid-orb { animation: none !important; } }
:is(header, nav, aside, main, section, article, form, dialog, [role="dialog"], .card, .panel, .modal, .dropdown, .popover, .bg-card, .bg-background, .bg-sidebar, .rounded-lg, .rounded-xl, .rounded-2xl) { border-color: var(--ys-lg-stroke-dark) !important; }
header.pointer-events-none.fixed > div,
header.fixed > div,
.bg-sidebar,
aside,
[class*="sidebar"],
nav[class*="bg"],
main .bg-card,
.bg-card,
[class*="bg-card"],
[class*="bg-popover"],
[class*="bg-background"],
.rounded-lg.border,
.rounded-xl.border,
.rounded-2xl.border,
.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
[role="dialog"],
[data-radix-popper-content-wrapper] > *,
.table-container,
form > section,
main section > div.border,
main div.border.bg-white,
main div.border.dark\:bg-dark-900 {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ys-lg-glass-deep) 92%, transparent), color-mix(in srgb, var(--ys-lg-glass) 88%, transparent)) !important;
  -webkit-backdrop-filter: blur(calc(var(--ys-lg-blur) * .82)) saturate(1.08) contrast(1.01);
  backdrop-filter: blur(calc(var(--ys-lg-blur) * .82)) saturate(1.08) contrast(1.01);
  box-shadow: var(--ys-lg-shadow-soft), inset 0 1px 0 var(--ys-lg-stroke), inset 0 -1px 0 rgba(255,255,255,.18) !important;
}
header.pointer-events-none.fixed > div,
header.fixed > div {
  border-radius: 999px !important;
  border: 1px solid var(--ys-lg-stroke-dark) !important;
  margin-top: 10px;
  overflow: hidden;
}
header > div > nav {
  gap: 10px !important;
}
header a.group.flex,
header nav a,
header nav button {
  border-radius: 999px !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
header a.group.flex {
  padding: 8px 14px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.46), rgba(255,255,255,.18)) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  box-shadow: 0 10px 24px rgba(33,58,110,.14), inset 0 1px 0 rgba(255,255,255,.48) !important;
}
header a.group.flex::before {
  content: "";
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: 12px 16px 14px 18px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.98), transparent 20%),
    radial-gradient(circle at 70% 76%, rgba(10,132,255,.25), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(188,221,255,.62));
  box-shadow: inset 0 1px 10px rgba(255,255,255,.68), 0 10px 26px rgba(10,132,255,.18);
  border: 1px solid rgba(255,255,255,.54);
  flex: 0 0 auto;
}
header a.group.flex span {
  color: var(--ys-lg-ink) !important;
  font-weight: 780 !important;
  letter-spacing: .01em !important;
}
header nav a svg, header nav button svg, button svg, .btn svg, [role="button"] svg {
  stroke-width: 1.85 !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.15));
}
h1, h2, h3, h4, h5, h6, label, th, .font-semibold, .font-medium { color: var(--ys-lg-ink) !important; }
.text-gray-400, .text-gray-500, .text-gray-600, .text-muted-foreground, [class*="text-dark-300"], [class*="text-dark-400"] { color: var(--ys-lg-muted) !important; }
a, .text-primary-600, .text-primary-500, .text-blue-600 { color: var(--ys-lg-blue) !important; }
button, .btn, a[class*="btn"], [role="button"], input[type="button"], input[type="submit"] {
  border-radius: 999px !important;
  border-color: color-mix(in srgb, var(--ys-lg-blue) 20%, var(--ys-lg-stroke-dark)) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}
.btn-primary, button[class*="primary"], .bg-primary, [class*="bg-primary"] {
  color: white !important;
  background: linear-gradient(135deg, var(--ys-lg-blue), var(--ys-lg-cyan) 52%, var(--ys-lg-violet)) !important;
  box-shadow: 0 12px 28px rgba(10,132,255,.26), inset 0 1px 0 rgba(255,255,255,.42) !important;
}
.btn-secondary, button:not(.btn-primary):not([class*="destructive"]), .bg-secondary {
  background: color-mix(in srgb, var(--ys-lg-glass-deep) 84%, transparent) !important;
  color: var(--ys-lg-ink) !important;
  -webkit-backdrop-filter: blur(calc(var(--ys-lg-blur) * .72)) saturate(1.08);
  backdrop-filter: blur(calc(var(--ys-lg-blur) * .72)) saturate(1.08);
}
button:hover, .btn:hover, [role="button"]:hover, a:hover { transform: translateY(-1px); box-shadow: var(--ys-lg-shadow), inset 0 1px 0 rgba(255,255,255,.46) !important; }
button:active, .btn:active, [role="button"]:active { transform: translateY(0) scale(.985); }
input, textarea, select, [contenteditable="true"], button[role="combobox"] {
  border-radius: 18px !important;
  color: var(--ys-lg-ink) !important;
  background: color-mix(in srgb, var(--ys-lg-glass-deep) 80%, transparent) !important;
  border-color: var(--ys-lg-stroke-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34) !important;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--ys-lg-muted) 86%, transparent) !important; }
input:focus, textarea:focus, select:focus, button[role="combobox"]:focus {
  outline: 2px solid color-mix(in srgb, var(--ys-lg-blue) 38%, transparent) !important;
  border-color: color-mix(in srgb, var(--ys-lg-blue) 48%, var(--ys-lg-stroke-dark)) !important;
}
.card, .panel, .bg-card, .bg-background, main section > div.border, main div.border.bg-white, main div.border.dark\:bg-dark-900 {
  border-radius: 24px !important;
}
.table-container, table, tbody tr, tr.group, tr.border-b { border-radius: 18px !important; }
table { border-collapse: separate !important; border-spacing: 0 10px !important; }
thead tr { background: transparent !important; }
tbody tr, tr.group, tr.border-b {
  background: color-mix(in srgb, var(--ys-lg-glass-deep) 80%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28) !important;
}
tbody tr td:first-child { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
tbody tr td:last-child { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
.badge, [class*="badge"], .rounded-full, [class*="rounded-full"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.38); }
.text-green-500, .text-emerald-500, .text-success, [class*="text-green"], [class*="text-emerald"] { color: var(--ys-lg-green) !important; }
.bg-green-500, .bg-emerald-500, [class*="bg-green"], [class*="bg-emerald"] { background: linear-gradient(135deg, #30d158, #64f0a6) !important; }
.text-red-500, .text-destructive, [class*="text-red"] { color: var(--ys-lg-danger) !important; }
.bg-red-500, [class*="bg-red"] { background: linear-gradient(135deg, #ff453a, #ff7b72) !important; }
.text-yellow-500, .text-amber-500, [class*="text-yellow"], [class*="text-amber"] { color: var(--ys-lg-warn) !important; }
.bg-yellow-500, .bg-amber-500, [class*="bg-yellow"], [class*="bg-amber"] { background: linear-gradient(135deg, #ff9f0a, #ffd166) !important; }
[role="alert"], .alert, [class*="bg-amber"], [class*="bg-red"] { border-radius: var(--ys-lg-radius-sm) !important; -webkit-backdrop-filter: blur(var(--ys-lg-blur)) saturate(1.18); backdrop-filter: blur(var(--ys-lg-blur)) saturate(1.18); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, color-mix(in srgb, var(--ys-lg-blue) 48%, transparent), color-mix(in srgb, var(--ys-lg-pink) 36%, transparent)); border: 4px solid transparent; border-radius: 999px; background-clip: padding-box; }
::selection { color: white; background: color-mix(in srgb, var(--ys-lg-blue) 72%, var(--ys-lg-violet)); }
.ys-liquid-orb { position: fixed; z-index: 0; pointer-events: none; border-radius: 999px; filter: blur(10px) saturate(1.04); opacity: .18; mix-blend-mode: screen; }
.ys-liquid-orb.one { width: 180px; height: 180px; right: 8vw; top: 16vh; background: radial-gradient(circle, rgba(56,200,255,.82), rgba(56,200,255,0)); animation: none; }
.ys-liquid-orb.two { width: 150px; height: 150px; left: 8vw; bottom: 12vh; background: radial-gradient(circle, rgba(255,90,200,.70), rgba(255,90,200,0)); animation: none; }
@keyframes ys-orb-one { to { transform: translate3d(-20px, 34px, 0) scale(1.08); } }
@keyframes ys-orb-two { to { transform: translate3d(26px, -22px, 0) scale(.96); } }
.ys-liquid-switch {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--ys-lg-stroke-dark);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ys-lg-glass-deep) 84%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
  backdrop-filter: blur(22px) saturate(1.18);
  box-shadow: var(--ys-lg-shadow-soft), inset 0 1px 0 rgba(255,255,255,.42);
}
.ys-liquid-switch button {
  min-width: 38px;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  border: 0 !important;
  color: var(--ys-lg-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ys-liquid-switch button.is-active {
  color: white !important;
  background: linear-gradient(135deg, var(--ys-lg-blue), var(--ys-lg-violet)) !important;
  box-shadow: 0 8px 18px rgba(10,132,255,.22), inset 0 1px 0 rgba(255,255,255,.38) !important;
}
@media (max-width: 720px) { header.pointer-events-none.fixed > div, header.fixed > div { margin: 8px 10px 0; border-radius: 22px !important; } .ys-liquid-switch { right: 10px; bottom: 10px; transform: scale(.92); transform-origin: bottom right; } body::before { background-size: 34px 34px; } }

/* Hide the old Liquid Glass intensity selector; the visual mode is fixed by theme. */
.ys-liquid-switch {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}