@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800&family=Noto+Sans+SC:wght@400;500;700;800&display=swap");

:root {
  --dora-blue: #00a0e9;
  --dora-blue-2: #2bb8f0;
  --dora-blue-deep: #0077c0;
  --dora-navy: #0b4a72;
  --dora-sky: #e7f6ff;
  --dora-sky-2: #bfe9fb;
  --dora-red: #e60012;
  --dora-bell: #ffd54a;
  --dora-ink: #16324a;
  --dora-card: rgba(255, 255, 255, 0.92);
  --dora-radius: 28px;
}

html,
body,
#app {
  min-height: 100%;
}

html,
html.dark {
  color-scheme: light !important;
  font-family: Nunito, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body,
.dark body,
html.dark body {
  color: var(--dora-ink) !important;
  background-color: #cfeeff !important;
  background-image:
    radial-gradient(circle at 8% 10%, #fff 0 46px, transparent 48px),
    radial-gradient(circle at 14% 16%, #fff 0 28px, transparent 30px),
    radial-gradient(circle at 86% 6%, #fff 0 58px, transparent 60px),
    radial-gradient(circle at 92% 12%, #fff 0 32px, transparent 34px),
    radial-gradient(circle at 50% 100%, rgba(255, 213, 74, 0.35) 0 140px, transparent 220px),
    linear-gradient(180deg, #b8e9ff 0%, #e7f7ff 38%, #fff8dc 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  right: -40px;
  bottom: -70px;
  width: 220px;
  height: 220px;
  pointer-events: none;
  z-index: 30;
  background:
    radial-gradient(circle at 50% 42%, #ffd54a 0 34px, transparent 35px),
    radial-gradient(circle at 50% 42%, transparent 38px, #c49200 38px 42px, transparent 43px),
    radial-gradient(circle at 50% 58%, #1a1a1a 0 4px, transparent 5px);
  filter: drop-shadow(0 10px 16px rgba(0, 80, 130, 0.18));
  opacity: 0.55;
  transform: rotate(-8deg);
}

body::after {
  content: "";
  position: fixed;
  left: -30px;
  bottom: -20px;
  width: 180px;
  height: 110px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 40% 60%, #fff 0 44px, transparent 45px),
    radial-gradient(circle at 62% 52%, #fff 0 34px, transparent 35px),
    radial-gradient(circle at 22% 58%, #fff 0 28px, transparent 29px);
  opacity: 0.7;
}

.dark .card,
.dark .stat-card,
.dark .card-glass,
.dark .glass,
.dark .btn-secondary,
.dark .input,
.dark .sidebar {
  color: var(--dora-ink);
}

#app {
  position: relative;
  z-index: 1;
}

/* Recolor the compiled teal palette to Doraemon blue. */
.bg-primary-50,
.hover\:bg-primary-50:hover { background-color: #e8f7fd !important; }
.bg-primary-100,
.hover\:bg-primary-100:hover { background-color: #c5ebfb !important; }
.bg-primary-200 { background-color: #8dd7f7 !important; }
.bg-primary-300 { background-color: #55c3f2 !important; }
.bg-primary-400,
.hover\:bg-primary-400:hover { background-color: #2bb4ee !important; }
.bg-primary-500,
.hover\:bg-primary-500:hover,
.focus\:bg-primary-500:focus { background-color: #00a0e9 !important; }
.bg-primary-600,
.hover\:bg-primary-600:hover { background-color: #0089d0 !important; }
.bg-primary-700 { background-color: #0070b0 !important; }

.text-primary-400 { color: #2bb4ee !important; }
.text-primary-500,
.hover\:text-primary-500:hover { color: #00a0e9 !important; }
.text-primary-600,
.hover\:text-primary-600:hover { color: #0077c0 !important; }
.text-primary-700 { color: #005a8c !important; }

.border-primary-200 { border-color: #8dd7f7 !important; }
.border-primary-300 { border-color: #55c3f2 !important; }
.border-primary-400 { border-color: #2bb4ee !important; }
.border-primary-500 { border-color: #00a0e9 !important; }

.ring-primary-500 { --tw-ring-color: #00a0e9 !important; }
.shadow-primary-500\/30,
.shadow-primary-500\/25 { --tw-shadow-color: rgb(0 160 233 / 0.3) !important; }

.from-primary-50 { --tw-gradient-from: #e8f7fd var(--tw-gradient-from-position) !important; }
.from-primary-400 { --tw-gradient-from: #2bb4ee var(--tw-gradient-from-position) !important; }
.from-primary-500 { --tw-gradient-from: #00a0e9 var(--tw-gradient-from-position) !important; }
.to-primary-500 { --tw-gradient-to: #00a0e9 var(--tw-gradient-to-position) !important; }
.to-primary-600 { --tw-gradient-to: #0089d0 var(--tw-gradient-to-position) !important; }
.to-primary-700 { --tw-gradient-to: #0070b0 var(--tw-gradient-to-position) !important; }
.via-primary-50\/30 { --tw-gradient-to: rgb(232 247 253 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(232 247 253 / 0.3), var(--tw-gradient-to) !important; }

.bg-primary-400\/20 { background-color: rgb(0 160 233 / 0.2) !important; }
.bg-primary-500\/15 { background-color: rgb(0 160 233 / 0.15) !important; }
.bg-primary-300\/10 { background-color: rgb(85 195 242 / 0.1) !important; }

.text-gradient {
  background-image: linear-gradient(90deg, #0077c0, #00a0e9 40%, #e60012 85%, #ffd54a) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.btn {
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
}

.btn-primary {
  background-color: var(--dora-blue) !important;
  background-image: linear-gradient(180deg, #4ec8f6 0%, #00a0e9 52%, #0077c0 100%) !important;
  color: #fff !important;
  border: 2px solid #0b4a72 !important;
  box-shadow:
    0 8px 18px rgb(0 160 233 / 0.32),
    inset 0 2px 0 rgb(255 255 255 / 0.35) !important;
}

.btn-primary:hover,
.dark .btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.dark .btn-primary {
  color: #fff !important;
}

.btn-secondary {
  border-radius: 999px !important;
  border: 2px solid #8dd7f7 !important;
  background: #fff !important;
  color: var(--dora-navy) !important;
}

.card,
.stat-card,
.card-glass,
.glass {
  border-radius: var(--dora-radius) !important;
  border: 2px solid rgb(0 160 233 / 0.18) !important;
  background: var(--dora-card) !important;
  box-shadow:
    0 16px 36px rgb(0 90 150 / 0.1),
    0 1px 0 rgb(255 255 255 / 0.8) inset !important;
  backdrop-filter: blur(16px);
}

.dark .card,
.dark .stat-card,
.dark .card-glass,
.dark .glass {
  background: var(--dora-card) !important;
  border-color: rgb(0 160 233 / 0.18) !important;
  color: var(--dora-ink) !important;
}

.card-glass {
  position: relative;
  overflow: hidden;
  padding-top: 3.25rem !important;
}

.card-glass::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(90deg, #e60012, #ff4d4d);
  box-shadow: 0 8px 0 #ffd54a;
}

.card-glass::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 22px;
  height: 22px;
  pointer-events: none;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe56a, #f0b400);
  border: 2px solid #1a1a1a;
  box-shadow: 0 2px 0 #c49200;
}

.input {
  border-radius: 18px !important;
  border: 2px solid #bfe9fb !important;
  background: #fff !important;
  box-shadow: inset 0 1px 2px rgb(0 80 130 / 0.04);
}

.input:focus {
  border-color: var(--dora-blue) !important;
  box-shadow: 0 0 0 4px rgb(0 160 233 / 0.16) !important;
  outline: none;
}

.sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #e8f7fd 100%) !important;
  border-right: 3px solid var(--dora-blue) !important;
  border-top-right-radius: 32px;
  border-bottom-right-radius: 32px;
  box-shadow: 8px 0 24px rgb(0 120 180 / 0.08);
}

.dark .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #e8f7fd 100%) !important;
}

.dark .page-title,
.dark .page-description,
.dark h1,
.dark h2,
.dark h3,
.dark .text-white,
.dark .text-gray-100,
.dark .text-gray-200 {
  color: var(--dora-navy) !important;
}

.dark .text-gray-500,
.dark .text-dark-400,
.dark .text-dark-300,
.dark .text-gray-400,
.dark .text-gray-600 {
  color: #4b6a80 !important;
}

.dark .bg-dark-950,
.dark .bg-dark-900,
.dark .bg-dark-800,
.dark .dark\:bg-dark-950,
.dark .from-dark-950,
.dark .via-dark-900,
.dark .to-dark-950 {
  background-color: transparent !important;
}

.dark .bg-white\/5,
.dark .bg-white\/10 {
  background-color: rgb(255 255 255 / 0.72) !important;
}

.page-title {
  color: var(--dora-navy) !important;
  font-weight: 800 !important;
}

.badge {
  border-radius: 999px !important;
}

.min-h-screen.bg-gray-50,
.bg-gray-50,
.dark .bg-dark-950,
.bg-gradient-to-br {
  background-color: transparent !important;
}

.bg-gradient-to-br.from-gray-50 {
  background-image:
    radial-gradient(circle at 80% 10%, rgb(0 160 233 / 0.16), transparent 28%),
    radial-gradient(circle at 10% 90%, rgb(230 0 18 / 0.08), transparent 26%),
    linear-gradient(180deg, rgb(234 248 255 / 0.7), rgb(255 246 216 / 0.55)) !important;
}

header,
.border-b {
  border-color: rgb(0 160 233 / 0.15) !important;
}

a {
  text-underline-offset: 3px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#2bb8f0, #0077c0) !important;
  border-radius: 99px;
}

::selection {
  background: rgb(0 160 233 / 0.22);
  color: var(--dora-navy);
}

img[src*="logo"],
img[src*="doraemon"],
header img,
.sidebar img {
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgb(0 160 233 / 0.28);
}

@media (max-width: 720px) {
  body::before,
  body::after {
    display: none;
  }
}