/* PlanYour.Date — Frontend CSS v2.0 */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Nunito:wght@400;600;700;800;900&display=swap');

:root{
  --pink:#e91e63;--pink2:#f06292;--pink3:#fce4ec;--pink4:#f8bbd0;
  --dark2:#2d0018;--muted:#888;
  --r:14px;--r2:20px;--r3:28px;
}

/* ── WRAP ── */
.pyd-wrap{
  width:100%;max-width:560px;
  margin:0 auto;
  padding:0 0 100px;
  font-family:'Nunito',sans-serif;
  position:relative;
}
.pyd-wrap *{box-sizing:border-box;font-family:'Nunito',sans-serif}

/* ── PROGRESS BAR ── */
.pyd-prog{
  height:4px;background:linear-gradient(90deg,var(--pink),var(--pink2));
  width:0;transition:width .4s ease;
  position:fixed;top:0;left:0;right:0;z-index:9999;
}

/* ── STEP DOTS ── */
.pyd-steps{
  display:flex;align-items:center;gap:4px;
  justify-content:center;
  padding:20px 16px 0;
  margin-bottom:4px;
}
.pyd-dot{
  width:28px;height:28px;border-radius:50%;
  font-size:12px;font-weight:800;
  border:2px solid var(--pink4);color:var(--muted);background:#fff;
  display:flex;align-items:center;justify-content:center;transition:all .3s;
  flex-shrink:0;
}
.pyd-dot.done{background:var(--pink);border-color:var(--pink);color:#fff}
.pyd-dot.active{background:var(--pink3);border-color:var(--pink);color:var(--pink)}
.pyd-dot-line{flex:1;max-width:32px;height:2px;background:var(--pink4);border-radius:2px;transition:background .3s}
.pyd-dot-line.done{background:var(--pink)}

/* ── STAGE ── */
.pyd-stage{display:none;padding:24px 16px 0;animation:pydUp .35s ease}
.pyd-stage.pyd-active{display:block}
@keyframes pydUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.pyd-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--pink);margin-bottom:6px;text-align:center}
.pyd-stage-title{font-family:'Pacifico',cursive;font-size:clamp(22px,5vw,32px);color:var(--dark2);margin-bottom:6px;line-height:1.2;text-align:center}
.pyd-stage-sub{font-size:13px;color:var(--muted);margin-bottom:24px;line-height:1.55;text-align:center}

/* ── FIELD ── */
.pyd-field{margin-bottom:16px}
.pyd-field label{display:block;font-size:11px;font-weight:800;color:#666;letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px}
.pyd-field input,.pyd-field textarea{
  width:100%;padding:13px 15px;border:1.5px solid #e8e8e8;border-radius:var(--r);
  font-size:15px;font-family:'Nunito',sans-serif;color:#222;
  outline:none;background:#fafafa;transition:border-color .2s,background .2s;
  -webkit-appearance:none;appearance:none;
}
.pyd-field input:focus,.pyd-field textarea:focus{border-color:var(--pink2);background:#fff;box-shadow:0 0 0 3px rgba(233,30,99,.07)}
.pyd-field textarea{resize:none;height:80px}
.pyd-char{font-size:10px;color:var(--muted);text-align:right;margin-top:4px}

/* ── SLUG ROW ── */
.pyd-slug-row{
  display:flex;align-items:stretch;
  border:1.5px solid #e8e8e8;border-radius:var(--r);
  overflow:hidden;background:#fafafa;transition:border-color .2s;
}
.pyd-slug-row:focus-within{border-color:var(--pink2);background:#fff;box-shadow:0 0 0 3px rgba(233,30,99,.07)}
.pyd-slug-prefix{
  padding:13px 8px 13px 14px;font-size:12px;font-weight:700;
  color:var(--muted);white-space:nowrap;background:transparent;flex-shrink:0;
  display:flex;align-items:center;
}
.pyd-slug-input{
  flex:1;border:none;outline:none;
  padding:13px 14px 13px 2px;
  font-size:14px;font-family:'Nunito',sans-serif;color:#222;background:transparent;
  min-width:0;
}
.pyd-slug-note{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4}

/* ── EMOJI GRID ── */
.pyd-emoji-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px;justify-content:center}
.pyd-eg-btn{
  width:42px;height:42px;border-radius:12px;border:2px solid #eee;
  background:#fafafa;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
  -webkit-appearance:none;
}
.pyd-eg-btn:hover{transform:scale(1.12);border-color:var(--pink2)}
.pyd-eg-btn.sel{border-color:var(--pink);background:var(--pink3);transform:scale(1.08)}

/* ── IDEA GRID ── */
.pyd-idea-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;margin-bottom:18px;
}
.pyd-idea-tile{
  padding:12px 6px;border-radius:var(--r);border:2px solid var(--pink4);
  text-align:center;cursor:pointer;background:#fff;transition:all .2s;
}
.pyd-idea-tile:hover{border-color:var(--pink);transform:translateY(-2px)}
.pyd-idea-tile.sel{border-color:var(--pink);background:var(--pink3)}
.pyd-idea-tile .it-icon{font-size:20px;margin-bottom:4px}
.pyd-idea-tile .it-label{font-size:10px;font-weight:800;color:#444;line-height:1.3}

/* ── WHEN GRID ── */
.pyd-when-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;margin-bottom:18px;
}
.pyd-when-card{
  padding:16px 12px;border-radius:var(--r);border:2px solid var(--pink4);
  background:#fff;cursor:pointer;text-align:center;transition:all .2s;
}
.pyd-when-card:hover{border-color:var(--pink);transform:translateY(-2px)}
.pyd-when-card.sel{border-color:var(--pink);background:var(--pink3)}
.pyd-when-card .wc-icon{font-size:24px;margin-bottom:6px}
.pyd-when-card .wc-label{font-size:13px;font-weight:800;color:#333}

/* ── TONE ROW ── */
.pyd-tone-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;justify-content:center}
.pyd-tone{
  padding:8px 16px;border-radius:20px;border:2px solid var(--pink4);
  font-size:13px;font-weight:700;background:#fff;cursor:pointer;transition:all .2s;
  font-family:'Nunito',sans-serif;-webkit-appearance:none;
}
.pyd-tone:hover{border-color:var(--pink)}
.pyd-tone.sel{background:var(--pink);border-color:var(--pink);color:#fff}

/* ── MINI PREVIEW ── */
.pyd-mini-preview{
  background:#fff;border-radius:var(--r2);border:1px solid var(--pink4);
  padding:18px;margin-bottom:18px;
  box-shadow:0 4px 16px rgba(233,30,99,.07);
}
.pyd-mp-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pyd-mp-avatar{width:38px;height:38px;border-radius:50%;background:var(--pink3);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.pyd-mp-name{font-size:13px;font-weight:800;color:var(--dark2)}
.pyd-mp-msg{font-size:13px;color:#555;line-height:1.45;margin-bottom:8px}
.pyd-mp-chips{display:flex;gap:6px;flex-wrap:wrap}
.pyd-mp-chip{background:var(--pink3);color:var(--pink);padding:3px 10px;border-radius:10px;font-size:11px;font-weight:700}

/* ── INFO BOX ── */
.pyd-info-box{
  background:var(--pink3);border-radius:var(--r);padding:12px 14px;
  font-size:13px;color:var(--pink);font-weight:700;
  line-height:1.55;margin-bottom:16px;border:1px solid var(--pink4);
  text-align:center;
}

/* ── ERROR ── */
.pyd-error{
  background:#fff3f3;border:1px solid #ffcdd2;border-radius:var(--r);
  padding:12px 14px;font-size:13px;color:#c62828;font-weight:700;
  margin-bottom:14px;display:none;text-align:center;
}

/* ── BOTTOM NAV ── */
.pyd-bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--pink4);
  padding:12px 16px;
  display:flex;align-items:center;gap:10px;
  z-index:500;
}
.pyd-btn-back{
  background:none;border:2px solid var(--pink4);color:var(--muted);
  padding:12px 18px;border-radius:30px;font-size:14px;font-weight:700;
  cursor:pointer;font-family:'Nunito',sans-serif;transition:all .2s;
  white-space:nowrap;-webkit-appearance:none;
}
.pyd-btn-back:hover{border-color:var(--pink);color:var(--pink)}
.pyd-btn-next{
  flex:1;background:var(--pink);color:#fff;border:none;
  padding:14px 20px;border-radius:30px;font-size:15px;font-weight:800;
  cursor:pointer;font-family:'Nunito',sans-serif;
  box-shadow:0 4px 18px rgba(233,30,99,.35);transition:all .2s;
  -webkit-appearance:none;
}
.pyd-btn-next:hover{background:#c2185b;transform:translateY(-1px)}
.pyd-btn-next:disabled{background:#ddd;box-shadow:none;transform:none;cursor:not-allowed}

/* ── SHARE PANEL ── */
.pyd-share{display:none;padding:24px 16px 100px}
.pyd-share.pyd-active{display:block}

.pyd-share-card{
  background:#fff;border-radius:var(--r3);
  box-shadow:0 12px 50px rgba(233,30,99,.12);
  padding:28px 20px;text-align:center;
  border:1px solid var(--pink4);
  max-width:480px;margin:0 auto;
}
.pyd-share-emoji{font-size:48px;margin-bottom:12px}
.pyd-share-title{font-family:'Pacifico',cursive;font-size:26px;color:var(--dark2);margin-bottom:6px}
.pyd-share-sub{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.55}

.pyd-url-box{
  background:#f4f4f4;border-radius:var(--r);padding:10px 12px;
  display:flex;align-items:center;gap:8px;margin-bottom:14px;border:1px solid #e8e8e8;
}
.pyd-url-text{
  flex:1;font-size:12px;font-weight:700;color:#333;
  word-break:break-all;text-align:left;line-height:1.4;
}
.pyd-copy-btn{
  background:var(--pink);color:#fff;border:none;border-radius:10px;
  padding:9px 14px;font-size:12px;font-weight:800;cursor:pointer;
  font-family:'Nunito',sans-serif;flex-shrink:0;transition:background .2s;
  white-space:nowrap;-webkit-appearance:none;
}
.pyd-copy-btn:hover{background:#c2185b}

.pyd-share-btns{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.pyd-share-btn{
  width:100%;padding:13px;border-radius:var(--r);font-size:14px;font-weight:800;
  cursor:pointer;font-family:'Nunito',sans-serif;border:none;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;-webkit-appearance:none;
}
.pyd-share-btn-primary{background:var(--pink);color:#fff;box-shadow:0 4px 16px rgba(233,30,99,.28)}
.pyd-share-btn-primary:hover{background:#c2185b;transform:translateY(-1px)}
.pyd-share-btn-outline{background:#fff;color:var(--dark2);border:2px solid var(--pink4)}
.pyd-share-btn-outline:hover{border-color:var(--pink);background:var(--pink3)}
.pyd-start-over{font-size:12px;color:var(--muted);cursor:pointer;text-decoration:underline;text-align:center;display:block;margin-top:4px}
.pyd-start-over:hover{color:var(--pink)}

/* ── TOAST ── */
.pyd-toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(16px);
  background:#1a0010;color:#fff;padding:12px 22px;border-radius:30px;
  font-size:13px;font-weight:700;opacity:0;transition:all .3s;z-index:9999;
  white-space:nowrap;pointer-events:none;font-family:'Nunito',sans-serif;
}
.pyd-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── CONFETTI ── */
@keyframes pyd-cfall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(420px) rotate(800deg);opacity:0}}
.pyd-cbit{position:fixed;pointer-events:none;z-index:9999;animation:pyd-cfall 2.2s ease-in forwards}

/* ══════════════════
   MOBILE RESPONSIVE
══════════════════ */
@media(max-width:600px){
  .pyd-idea-grid{grid-template-columns:repeat(3,1fr)}
  .pyd-stage-title{font-size:24px}
  .pyd-share-card{border-radius:20px;padding:22px 16px}
  .pyd-wrap{padding:0 0 90px}
}
@media(max-width:380px){
  .pyd-idea-grid{grid-template-columns:repeat(2,1fr)}
  .pyd-eg-btn{width:38px;height:38px;font-size:18px}
}