:root {
  color: #172033;
  background: #f6f9ff;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 209, 102, 0.22), transparent 26rem),
    radial-gradient(circle at 90% 4%, rgba(86, 215, 182, 0.24), transparent 30rem),
    linear-gradient(180deg, #f7fbff 0%, #eef3ff 45%, #f8fbff 100%);
}

#root {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

/* Preview fallback: keep custom Tailwind colors readable in file-based exports. */
.text-ink {
  color: #172033;
}

.text-violet {
  color: #7c5cff;
}

.bg-cloud {
  background-color: #f6f9ff;
}

.bg-violet {
  background-color: #7c5cff;
}

.bg-violet\/10 {
  background-color: rgba(124, 92, 255, 0.1);
}

.border-violet {
  border-color: #7c5cff;
}

.border-violet\/20 {
  border-color: rgba(124, 92, 255, 0.2);
}

.border-violet\/30 {
  border-color: rgba(124, 92, 255, 0.3);
}

.border-violet\/35 {
  border-color: rgba(124, 92, 255, 0.35);
}

.from-cloud {
  --tw-gradient-from: #f6f9ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(246, 249, 255, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-coral {
  --tw-gradient-from: #ff7a6b var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(255, 122, 107, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-mint {
  --tw-gradient-from: #56d7b6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(86, 215, 182, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-violet {
  --tw-gradient-from: #7c5cff var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(124, 92, 255, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-ocean {
  --tw-gradient-to: rgba(49, 166, 255, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #31a6ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-ocean {
  --tw-gradient-to: #31a6ff var(--tw-gradient-to-position);
}

.to-sunny {
  --tw-gradient-to: #ffd166 var(--tw-gradient-to-position);
}

.to-violet {
  --tw-gradient-to: #7c5cff var(--tw-gradient-to-position);
}

.shadow-glow {
  box-shadow: 0 18px 55px rgba(80, 91, 230, 0.18);
}

.shadow-soft {
  box-shadow: 0 12px 34px rgba(23, 32, 51, 0.1);
}

.glass-panel {
  border: 1px solid rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
}

.hero-art {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), url("../assets/summer-planner-hero.png");
  background-position: center;
  background-size: cover;
}

.soft-grid {
  background-image:
    linear-gradient(rgba(124, 92, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 92, 255, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
}

.task-token {
  border: 1px solid rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.poster-card {
  background:
    radial-gradient(circle at top right, rgba(255, 209, 102, 0.32), transparent 16rem),
    radial-gradient(circle at 12% 10%, rgba(86, 215, 182, 0.26), transparent 18rem),
    linear-gradient(160deg, #ffffff 0%, #f4f7ff 58%, #fff8e8 100%);
}

.thin-scrollbar::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(124, 92, 255, 0.28);
  border-radius: 999px;
}

.bounce-in {
  animation: bounce-in 420ms ease both;
}

.pulse-card {
  animation: pulse-card 1.6s ease-in-out infinite;
}

@keyframes bounce-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse-card {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}