/* ============================================================
   Yin's Daily Plan — girly pastel timetable
   Self-hosted fonts, no inline styles → first-party / CSP-clean.
   ============================================================ */

@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/baloo2-700.woff2) format('woff2');}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/fredoka-600.woff2) format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/quicksand-500.woff2) format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/quicksand-700.woff2) format('woff2');}

:root{
  --blush:#fff2f9;
  --lav:#f4ecff;
  --card:#ffffff;

  --pink:#ff7ab8;
  --pink-deep:#e85ba0;
  --pink-soft:#ffdcee;
  --purple:#a97cf5;
  --purple-deep:#7c4dd6;
  --purple-soft:#e9dbff;
  --mint:#67d9b6;
  --gold:#ffce5c;

  --ink:#5b3b6e;
  --ink-soft:#7d6690;
  --ink-mute:#b09ec2;
  --line:#f3e3f4;

  --shadow: 0 18px 40px -20px rgba(233,91,160,.45);
  --shadow-sm: 0 10px 24px -14px rgba(169,124,245,.5);

  --f-display:'Baloo 2', system-ui, sans-serif;
  --f-label:'Fredoka', system-ui, sans-serif;
  --f-body:'Quicksand', system-ui, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important;}
}

body{
  font-family:var(--f-body);
  font-weight:500;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 12% -8%, #ffe3f3 0%, transparent 55%),
    radial-gradient(1000px 560px at 92% 0%, #ece1ff 0%, transparent 50%),
    radial-gradient(900px 700px at 50% 120%, #ffe9f6 0%, transparent 55%),
    linear-gradient(160deg, var(--blush) 0%, var(--lav) 100%);
  min-height:100vh;
  padding:44px 26px 72px;
  overflow-x:hidden;
}

.container{max-width:1280px;margin:auto;position:relative;z-index:1;}

.svg-defs{position:absolute;width:0;height:0;}

/* icons tint via currentColor; the mascot keeps its own fill attributes */
svg{fill:currentColor;stroke:none;}

/* ---------------- FLOATING BACKGROUND ---------------- */
.bg-fx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.bg-fx span{
  position:absolute;bottom:-14vh;display:block;opacity:0;
  animation:floaty linear infinite;
  will-change:transform,opacity;
}
.bg-fx svg{width:100%;height:100%;display:block;}
.bg-fx .c-pink{color:#ffa8d4;}
.bg-fx .c-purple{color:#c3a7fb;}
.bg-fx .c-gold{color:#ffd97a;}
.bg-fx .c-mint{color:#9fe9d2;}

@keyframes floaty{
  0%{transform:translateY(0) translateX(0) rotate(0deg) scale(.7);opacity:0;}
  12%{opacity:.9;}
  50%{transform:translateY(-62vh) translateX(var(--sway,14px)) rotate(calc(var(--spin,20deg)*.5)) scale(1);}
  88%{opacity:.9;}
  100%{transform:translateY(-124vh) translateX(0) rotate(var(--spin,20deg)) scale(.7);opacity:0;}
}

/* ---------------- HEADER ---------------- */
header{
  display:flex;justify-content:space-between;align-items:center;
  gap:26px;flex-wrap:wrap;margin-bottom:30px;
}
.brand{display:flex;align-items:center;gap:16px;min-width:0;}
.mascot{
  flex:none;width:76px;height:76px;border-radius:50%;
  background:linear-gradient(160deg,#fff,#ffe6f4);
  border:3px solid #fff;box-shadow:var(--shadow-sm);
  display:grid;place-items:center;
  animation:bob 3.6s ease-in-out infinite;
}
.mascot svg{width:52px;height:52px;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-6px) rotate(3deg);}}

.kicker{
  font-family:var(--f-label);font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pink-deep);margin-bottom:2px;
  display:flex;align-items:center;gap:7px;
}
.kicker .tw{width:14px;height:14px;color:var(--gold);animation:twinkle 2.4s ease-in-out infinite;}
h1{
  font-family:var(--f-display);font-weight:700;line-height:1;
  font-size:clamp(30px,6vw,52px);color:var(--purple-deep);
  letter-spacing:.5px;
}
h1 .pink{color:var(--pink);}
h1 .heart{display:inline-block;width:.72em;height:.72em;color:var(--pink);vertical-align:baseline;animation:heartbeat 1.8s ease-in-out infinite;}

.now-card{
  background:var(--card);border:2px solid #fff;border-radius:22px;
  box-shadow:var(--shadow);padding:14px 20px;min-width:240px;max-width:340px;
  position:relative;overflow:hidden;
}
.now-card::before{
  content:"";position:absolute;inset:0;border-radius:22px;padding:2px;
  background:linear-gradient(120deg,var(--pink),var(--purple));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.now-label{
  font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);display:flex;align-items:center;gap:7px;margin-bottom:5px;
}
.now-dot{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 rgba(255,122,184,.6);animation:ping 1.8s ease-out infinite;}
.now-activity{font-family:var(--f-display);font-size:17px;color:var(--ink);line-height:1.2;}

@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,122,184,.6);}70%{box-shadow:0 0 0 9px rgba(255,122,184,0);}100%{box-shadow:0 0 0 0 rgba(255,122,184,0);}}
@keyframes twinkle{0%,100%{transform:scale(.8) rotate(0);opacity:.6;}50%{transform:scale(1.15) rotate(20deg);opacity:1;}}
@keyframes heartbeat{0%,100%{transform:scale(1);}15%{transform:scale(1.22);}30%{transform:scale(1);}45%{transform:scale(1.14);}}

/* ---------------- WEEKLY STATS ---------------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px;
}
.stat{
  background:var(--card);border-radius:22px;padding:16px 18px;
  box-shadow:var(--shadow-sm);border:2px solid #fff;position:relative;overflow:hidden;
}
.stat::after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:var(--tint,#ffe6f4);opacity:.5;}
.stat .code{font-family:var(--f-label);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:8px;position:relative;z-index:1;}
.stat .badge{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;}
.stat .badge svg{width:18px;height:18px;}
.stat h2{font-family:var(--f-display);font-weight:700;font-size:34px;color:var(--purple-deep);line-height:1;margin:10px 0 12px;position:relative;z-index:1;}
.stat h2 sup{font-family:var(--f-body);font-weight:700;font-size:13px;color:var(--ink-mute);vertical-align:super;margin-left:3px;}
.bar{height:9px;border-radius:99px;background:#f4e8f6;overflow:hidden;position:relative;z-index:1;}
.bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pink),var(--purple));background-size:200% 100%;animation:shimmer 3s linear infinite;}
@keyframes shimmer{to{background-position:200% 0;}}
.fill-100{width:100%;}.fill-95{width:95%;}.fill-90{width:90%;}.fill-85{width:85%;}.fill-80{width:80%;}.fill-75{width:75%;}.fill-70{width:70%;}.fill-65{width:65%;}.fill-60{width:60%;}.fill-55{width:55%;}

/* per-category tints */
.t-de{--tint:#e9dbff;} .t-study{--tint:#ffd9ec;} .t-me{--tint:#ffe1ee;} .t-move{--tint:#d3f6ec;} .t-rest{--tint:#e6e2ff;}
.badge.de{background:#efe4ff;color:var(--purple-deep);}
.badge.study{background:#ffe1f0;color:var(--pink-deep);}
.badge.me{background:#ffe6f1;color:var(--pink-deep);}
.badge.move{background:#d5f7ee;color:#1f9e7d;}
.badge.rest{background:#e7e3ff;color:var(--purple-deep);}

/* ---------------- BOARDS ---------------- */
.boards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:38px;align-items:start;}

.board{
  background:var(--card);border-radius:26px;border:2px solid #fff;
  box-shadow:var(--shadow-sm);overflow:hidden;position:relative;
  transition:transform .45s cubic-bezier(.2,.9,.3,1.2), box-shadow .45s ease, opacity .45s ease;
}
.board--active{
  box-shadow:0 0 0 3px var(--pink), 0 26px 50px -22px rgba(233,91,160,.65);
  transform:translateY(-4px);
}
.board--off{opacity:.68;}
.board--off .board-head{filter:saturate(.8);}

.board-head{
  padding:18px 20px 16px;position:relative;
  background:linear-gradient(135deg,#fff6fb,#f6efff);
  border-bottom:2px dashed var(--line);
}
.board--active .board-head{background:linear-gradient(135deg,#ffe9f5,#efe3ff);}
.days{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.day{
  font-family:var(--f-label);font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:3px 10px;border-radius:99px;background:#fff;color:var(--ink-soft);
  border:1.5px solid var(--line);
}
.board--active .day{background:var(--pink);color:#fff;border-color:var(--pink);}
.board-head h3{font-family:var(--f-display);font-size:19px;color:var(--purple-deep);line-height:1.1;}
.board-head .sub{font-family:var(--f-body);font-weight:700;font-size:12.5px;color:var(--ink-mute);margin-top:3px;}

/* TODAY pill — sits inside the header so overflow:hidden won't clip it */
.today-pill{
  display:none;position:absolute;top:14px;right:14px;z-index:3;
  align-items:center;gap:5px;
  background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff;
  font-family:var(--f-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px 5px 9px;border-radius:99px;box-shadow:var(--shadow-sm);
  animation:bob 2.8s ease-in-out infinite;
}
.today-pill svg{width:15px;height:15px;color:var(--gold);}
.board--active .today-pill{display:inline-flex;}

.timeline{padding:8px 14px 16px;}

.section-tag{
  font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);display:flex;align-items:center;gap:8px;margin:14px 6px 8px;
}
.section-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink-soft);}
.section-tag::after{content:"";flex:1;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);}
.section-tag.active{color:var(--pink-deep);}
.section-tag.active::before{background:var(--pink);box-shadow:0 0 0 4px rgba(255,122,184,.25);}

.row{
  display:grid;grid-template-columns:38px 64px 1fr;gap:11px;align-items:start;
  padding:10px;border-radius:18px;margin-bottom:5px;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.icon-badge{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:none;}
.icon-badge svg{width:21px;height:21px;}
.icon-badge.de{background:#efe4ff;color:var(--purple-deep);}
.icon-badge.study{background:#ffe1f0;color:var(--pink-deep);}
.icon-badge.me{background:#ffe6f1;color:var(--pink-deep);}
.icon-badge.move{background:#d5f7ee;color:#1f9e7d;}
.icon-badge.rest{background:#e7e3ff;color:var(--purple-deep);}

.time{font-family:var(--f-body);font-weight:700;font-size:12px;color:var(--ink-soft);padding-top:3px;line-height:1.35;}
.time .dash{display:block;font-size:10px;color:var(--ink-mute);}

.info{min-width:0;}
.info .title{font-family:var(--f-display);font-size:14.5px;color:var(--ink);line-height:1.2;}
.info .desc{font-size:12px;color:var(--ink-soft);margin-top:2px;line-height:1.35;}
.info .tag{
  display:inline-block;margin-top:6px;font-family:var(--f-label);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 9px;border-radius:99px;
}
.tag.de{background:#efe4ff;color:var(--purple-deep);}
.tag.study{background:#ffe1f0;color:var(--pink-deep);}
.tag.me{background:#ffe6f1;color:var(--pink-deep);}
.tag.move{background:#d5f7ee;color:#1f9e7d;}
.tag.rest{background:#e7e3ff;color:var(--purple-deep);}

/* NOW + NEXT states */
.row.now{
  background:linear-gradient(120deg,#fff0f8,#f3e9ff);
  box-shadow:inset 0 0 0 2px var(--pink), var(--shadow-sm);
  transform:translateX(2px);
  position:relative;
}
.row.now .icon-badge{animation:wiggle 1.6s ease-in-out infinite;}
.row.now .info .title::after{
  content:"now";font-family:var(--f-label);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:linear-gradient(90deg,var(--pink),var(--purple));
  padding:2px 8px;border-radius:99px;margin-left:8px;vertical-align:middle;
}
.row.next{background:#fbf4ff;box-shadow:inset 0 0 0 1.5px var(--purple-soft);}
.row.next .info .title::after{
  content:"soon";font-family:var(--f-label);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--purple-deep);background:var(--purple-soft);padding:2px 8px;border-radius:99px;margin-left:8px;vertical-align:middle;
}
@keyframes wiggle{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}

/* ---------------- GOALS ---------------- */
.goals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px;}
.goal{background:var(--card);border-radius:24px;border:2px solid #fff;box-shadow:var(--shadow-sm);padding:20px;position:relative;overflow:hidden;}
.goal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.goal .label{display:flex;align-items:center;gap:10px;}
.goal .label .badge{width:34px;height:34px;border-radius:12px;}
.goal .label .badge svg{width:19px;height:19px;}
.goal h3{font-family:var(--f-display);font-size:17px;color:var(--purple-deep);}
.goal .pct{font-family:var(--f-display);font-size:20px;color:var(--pink-deep);}
.progress{height:11px;border-radius:99px;background:#f4e8f6;overflow:hidden;margin-bottom:14px;}
.progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pink),var(--purple));background-size:200% 100%;animation:shimmer 3s linear infinite;}
.goal ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;}
.goal li{
  font-family:var(--f-body);font-weight:700;font-size:12px;color:var(--ink-soft);
  background:#fbf1f8;border:1.5px solid var(--line);border-radius:99px;padding:5px 11px;
  display:flex;align-items:center;gap:6px;
}
.goal li::before{content:"";width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--purple));flex:none;box-shadow:0 0 0 2px #fff inset;}

/* ---------------- FOOTER ---------------- */
footer{
  text-align:center;font-family:var(--f-display);font-size:15px;color:var(--purple-deep);
  padding:22px 10px 6px;
}
footer .hearts{display:inline-flex;gap:5px;vertical-align:middle;margin:0 8px;}
footer .hearts svg{width:15px;height:15px;color:var(--pink);}
footer .hearts svg:nth-child(2){color:var(--purple);}
footer .hearts svg:nth-child(3){color:var(--gold);}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1000px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .boards{grid-template-columns:repeat(2,1fr);}
  .goals{grid-template-columns:1fr;}
}
@media (max-width:660px){
  body{padding:28px 14px 54px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .boards{grid-template-columns:1fr;}
  header{justify-content:center;text-align:center;}
  .now-card{width:100%;}
}