/* unlazy.club — design tokens + component styles. Mobile-first. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Nunito:wght@600;700;800;900&display=swap');

:root {
  --lime: #C6FF4D;
  --lime-soft: #EEFBC8;
  --green-d: #2f7d12;
  --roast: #FF4D6D;
  --roast-mid: #FF6F8A;
  --roast-soft: #FFD3DB;
  --cream: #F3F0E8;
  --ink: #1B1C26;
  --ink-2: #5C5F6C;
  --muted: #676a76;
  --dark: #0E0F13;
  --white: #fff;
  --line: rgba(0,0,0,.10);
  --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px;
  --head: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
  --maxw: 480px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  font-family: var(--body); color: var(--ink); background: var(--cream);
  font-weight: 700; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
  overflow-x: hidden;
}
button { font-family: var(--head); cursor: pointer; border: 0; }
input, textarea { font-family: var(--body); }
a { color: inherit; }

/* App shell. Mobile = centered column (max 480). Desktop widens per-screen below. */
#app { width: 100%; min-height: 100dvh; position: relative; }
.badge { max-width: 100%; }
.screen { width: 100%; max-width: var(--maxw); margin: 0 auto; min-height: 100dvh; padding: 20px 18px 40px; display: flex; flex-direction: column; }
.screen.cream { background: var(--cream); color: var(--ink); }
.screen.dark { background: var(--dark); color: var(--white); }

/* Typography */
.h1 { font-family: var(--head); font-weight: 700; font-size: 43px; line-height: 1.02; margin: 0; }
.h2 { font-family: var(--head); font-weight: 700; font-size: 30px; line-height: 1.05; margin: 0; }
.h3 { font-family: var(--head); font-weight: 700; font-size: 19px; margin: 0; }
.sub { color: var(--muted); font-size: 16px; line-height: 1.45; }
.eyebrow { font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.lime-t { color: var(--lime); }
.roast-t { color: var(--roast); }
.center { text-align: center; }
.spacer { flex: 1; }

/* Buttons */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 17px 20px; border-radius: var(--r-md); font-weight: 700; font-size: 17px; }
.btn-lime { background: var(--lime); color: var(--ink); box-shadow: 0 10px 30px rgba(198,255,77,.35); }
.btn-roast { background: var(--roast); color: var(--white); }
.btn-dark { background: var(--dark); color: var(--white); }
.btn-ghost { background: transparent; border: 2px solid currentColor; }
.btn-line { background: var(--white); color: var(--ink); border: 1.5px solid var(--line); }
.btn:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.pulse { animation: ug_pulse 2.6s ease-in-out infinite; }
@keyframes ug_pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.035)} }
@keyframes ug_float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes ug_blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Cards — light theme. Always dark text on light surfaces; a hairline border
   gives white cards definition on the cream background. */
.card { background: var(--white); color: var(--ink); border-radius: var(--r-lg); padding: 18px;
  border: 1px solid rgba(0,0,0,.06); }
/* `.dark` is kept light on purpose (no black backgrounds anywhere). */
.card.dark { background: var(--white); color: var(--ink); border: 1px solid rgba(0,0,0,.06); }
.card.lime { background: linear-gradient(160deg, var(--lime-soft), #fff); color: var(--ink); border: 1.5px solid var(--lime); }
/* Emphasis card (e.g. "Do this next") — white with a lime outline so the lime CTA still pops. */
.card.focus { background: var(--white); color: var(--ink); border: 2px solid var(--lime);
  box-shadow: 0 8px 26px rgba(198,255,77,.25); }

/* Inputs */
.field { width: 100%; padding: 15px 16px; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  background: var(--white); font-size: 16px; font-weight: 700; color: var(--ink); }
.field:focus { outline: none; border-color: var(--lime); }
textarea.field { min-height: 120px; resize: vertical; }

/* Chips */
.chips { display: flex; gap: 10px; }
.chip { flex: 1; padding: 14px; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  background: var(--white); font-family: var(--head); font-weight: 600; text-align: center; color: var(--ink); }
.chip.active { background: var(--lime); border-color: var(--lime); }

/* Speech bubble */
.bubble { background: var(--white); color: var(--ink); border-radius: 16px; padding: 12px 14px;
  font-weight: 800; font-size: 15px; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: inline-block; }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: 1px; }
.badge-lime { background: rgba(58,138,20,.12); color: var(--green-d); border: 1px solid rgba(58,138,20,.30); }

/* Nav */
.nav { display: flex; align-items: center; justify-content: space-between; }
.logo { font-family: var(--head); font-weight: 700; font-size: 20px; display: flex; align-items: center; gap: 7px; }
.logo .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.logo .club { color: var(--muted); }

/* Checklist */
.task { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--white); margin-bottom: 8px; }
.task .box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 900; color: transparent; }
.task .txt { font-weight: 700; }
.task.done { background: rgba(198,255,77,.16); border-color: var(--lime); }
.task.done .box { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.task.done .txt { text-decoration: line-through; color: var(--ink-2); }

/* Progress ring */
.ring { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.ring .inner { width: 60px; height: 60px; border-radius: 50%; background: var(--white); display: grid; place-items: center;
  font-family: var(--head); font-weight: 700; color: var(--green-d); font-size: 16px; }

/* Streak strip */
.week { display: flex; justify-content: space-between; gap: 6px; }
.day { flex: 1; text-align: center; }
.day .d { font-size: 11px; color: var(--muted); margin-bottom: 4px; font-family: var(--head); }
.day .o { height: 34px; border-radius: 10px; background: #ECE9E1; display: grid; place-items: center; font-weight: 900; }
.day.on .o { background: var(--lime); color: var(--ink); }
.day.today .o { background: var(--white); border: 2px solid var(--lime); color: var(--lime); }

/* Stats */
.stats { display: flex; gap: 10px; }
.stat { flex: 1; background: var(--white); border-radius: var(--r-md); padding: 14px; text-align: center; }
.stat .v { font-family: var(--head); font-weight: 700; font-size: 22px; }
.stat .l { font-size: 12px; color: var(--muted); }

/* Takeover (roast/win full screen) */
.takeover { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center;
  padding: 28px 20px; overflow-y: auto; max-width: var(--maxw); margin: 0 auto; }
.takeover.roast { background: radial-gradient(130% 95% at 50% 0%, var(--roast-mid) 0%, var(--roast-soft) 74%); color: #5b1020; }
.takeover.win { background: radial-gradient(130% 95% at 50% 0%, #CDEF66 0%, var(--lime-soft) 74%); color: var(--green-d); }
.roast-line { font-family: var(--head); font-weight: 700; font-size: 26px; text-align: center; }
.win-big { font-family: var(--head); font-weight: 700; font-size: 44px; }
.wheel { background: var(--white); border-radius: var(--r-xl); padding: 20px; width: 100%; text-align: center; color: var(--ink); }
.wheel .t { font-family: var(--head); font-weight: 700; font-size: 22px; }
.wheel .s { font-size: 13px; color: var(--roast); margin-top: 4px; }
.blink { animation: ug_blink 1.1s ease-in-out infinite; }

/* Misc */
.row { display: flex; gap: 10px; }
.stack > * + * { margin-top: 14px; }
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.locked { position: relative; opacity: .55; pointer-events: none; filter: grayscale(.3); }
.lock-tag { position: absolute; top: 8px; right: 8px; background: var(--dark); color: var(--lime);
  font-size: 11px; font-family: var(--head); font-weight: 700; padding: 4px 8px; border-radius: 999px; }

/* Support widget */
.support-fab { position: fixed; right: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--dark); color: var(--lime); display: grid; place-items: center; z-index: 40; box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: 22px; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 60; display: flex; align-items: center;
  justify-content: center; padding: 20px; }
.modal { background: var(--white); color: var(--ink); border-radius: var(--r-xl); padding: 20px; width: 100%; max-width: 420px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--dark); color: #fff;
  padding: 12px 18px; border-radius: 999px; z-index: 80; font-weight: 700; font-size: 14px; max-width: 90%; }

/* Landing section grids — single column + gap on mobile, multi-column on desktop. */
.grid2, .grid3 { display: grid; gap: 14px; }

/* ───────────────────────── Desktop (≥ 860px) ─────────────────────────
   Mobile stays a centered column; desktop uses the real estate: wider
   panels, multi-column landing + dashboard, centered short screens. */
@media (min-width: 860px) {
  /* Short screens (paywall, onboard, plan) — comfy centered panel */
  .screen { max-width: 600px; padding: 40px 28px; }
  .screen.middle { justify-content: center; }
  /* Auth (signup/login) — a tidy, vertically-centered card */
  .screen.auth { max-width: 420px; justify-content: center; }
  .screen.auth .stack { width: 100%; }

  /* Landing — full marketing width, larger hero, multi-column sections */
  .screen.landing { max-width: 1100px; padding: 28px 32px 72px; }
  .screen.landing .h1 { font-size: 68px; }
  .screen.landing .hero-sub { max-width: 620px; margin-left: auto; margin-right: auto; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
  .grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; }
  .grid3 > * + *, .grid2 > * + * { margin-top: 0; }
  .grid3 .card, .grid2 .card { height: 100%; }
  .landing .cta-wrap { max-width: 460px; margin-left: auto; margin-right: auto; }

  /* Dashboard — two columns (coach/focus | checklist/report) */
  .screen.dash { max-width: 1040px; padding: 32px; }
  .dash-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: start; }
  .dash-grid > * { margin-top: 0; }

  /* Takeovers + reel studio get a bit more room on big screens */
  .takeover { max-width: 620px; }
  .studio { max-width: 760px; }
}

/* Large desktop — let the landing breathe a touch more */
@media (min-width: 1200px) {
  .screen.landing { max-width: 1180px; }
}