:root {
  --yh-bg: #000000;
  --yh-lavender: #c9b8e8;
  --yh-lavender-deep: #9b8bc4;
  --yh-text: #f5f2fb;
  --chakra-colors-primary-50: #f3edff !important;
  --chakra-colors-primary-100: #e8e0f5 !important;
  --chakra-colors-primary-200: #d9cfee !important;
  --chakra-colors-primary-300: #c9b8e8 !important;
  --chakra-colors-primary-400: #b5a2d6 !important;
  --chakra-colors-primary-500: #9b8bc4 !important;
  --chakra-colors-primary-600: #8775b0 !important;
  --chakra-colors-primary-700: #72619a !important;
  --chakra-colors-primary-800: #5e4f84 !important;
  --chakra-colors-primary-900: #4a3f6e !important;
}

html { color-scheme: dark !important; }
html, body, body.chakra-ui-light, body.chakra-ui-dark {
  background: #000 !important;
  color: var(--yh-text) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 45% at 12% -8%, rgba(201,184,232,.26), transparent 55%),
    radial-gradient(ellipse 55% 40% at 92% 8%, rgba(155,139,196,.16), transparent 50%),
    radial-gradient(ellipse 50% 55% at 55% 110%, rgba(120,100,160,.18), transparent 55%);
}

#root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent !important;
  overflow-x: hidden;
}

/* Desktop watermark */
#root::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 38%;
  width: min(58vw, 440px);
  height: min(58vw, 440px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' overflow='visible'%3E%3Cg transform='translate(320 320) rotate(18)'%3E%3Cpolygon points='0,-100 22,-22 175,0 22,22 0,100 -22,22 -175,0 -22,-22' fill='%23E8E0F5'/%3E%3Cpath d='M -160 68 A 185 135 0 0 1 42 -165' fill='none' stroke='%23C9B8E8' stroke-width='26' stroke-linecap='round'/%3E%3Cpath d='M 160 -68 A 185 135 0 0 1 -42 165' fill='none' stroke='%239B8BC4' stroke-width='26' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: yh-spin 36s linear infinite;
}

@keyframes yh-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

#root > * { position: relative; z-index: 1; }
main, main.p-8 { background: transparent !important; }

svg[viewBox="0 0 747 747"] {
  width: 64px !important;
  height: 64px !important;
  max-width: 20vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' overflow='visible'%3E%3Cg transform='translate(320 320) rotate(18)' fill='%23E8E0F5'%3E%3Cpolygon points='0,-100 22,-22 175,0 22,22 0,100 -22,22 -175,0 -22,-22'/%3E%3Cpath d='M -160 68 A 185 135 0 0 1 42 -165' fill='none' stroke='%23E8E0F5' stroke-width='26' stroke-linecap='round'/%3E%3Cpath d='M 160 -68 A 185 135 0 0 1 -42 165' fill='none' stroke='%23E8E0F5' stroke-width='26' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
svg[viewBox="0 0 747 747"] path { opacity: 0 !important; }

a.chakra-link { color: #c9b8e8 !important; }
.chakra-button, .chakra-input, .chakra-textarea { border-radius: 10px !important; }

/* Keep form readable above watermark */
main .chakra-stack,
main form,
main input,
main button {
  position: relative;
  z-index: 2;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(201,184,232,.4); border-radius: 8px; }

/* ===== Mobile panel fixes ===== */
@media (max-width: 768px) {
  /* Soft small mark behind header only — don't cover form */
  #root::before {
    top: 12%;
    width: min(42vw, 160px);
    height: min(42vw, 160px);
    opacity: 0.14;
    animation: none;
    transform: translate(-50%, -50%);
  }

  html, body, #root {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  main.p-8 {
    padding: 1rem !important;
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom)) !important;
  }

  /* Login card: full width, no overflow */
  main .chakra-stack {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* only login fields / submit, not language menu button */
  main form {
    width: 100% !important;
    max-width: 100% !important;
  }
  main form .chakra-input,
  main form input,
  main form button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  main .chakra-menu__menu-button {
    width: auto !important;
    min-width: 40px !important;
  }

  svg[viewBox="0 0 747 747"] {
    width: 52px !important;
    height: 52px !important;
  }

  /* Tables / dashboard lists: allow horizontal scroll instead of breaking layout */
  .chakra-table__container,
  [class*="table"],
  .chakra-modal__content {
    max-width: 100vw !important;
  }

  .chakra-modal__content {
    margin: 0.5rem !important;
  }

  /* Filters / header wrap better */
  header, nav {
    max-width: 100vw;
  }
}

@media (max-width: 480px) {
  #root::before {
    display: none; /* cleanest on small phones */
  }

  main.p-8 {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }
}


@media (max-width: 768px) {
  /* Balance login layout on phones */
  main.p-8 > .chakra-stack {
    min-height: calc(100dvh - 1.5rem) !important;
    justify-content: space-between !important;
    gap: 1rem !important;
  }
  main svg[viewBox="0 0 747 747"] {
    margin-top: 0.35rem !important;
    margin-bottom: 0.25rem !important;
  }
}

@media (max-width: 768px) {
  html, body, #root {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  ::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
  * { max-width: 100vw; }
  .chakra-portal, [id^="chakra-toast"] { max-width: none; }
}