/* Cute pastel theme extras */
:root { --rose:#FFB5C5; --lilac:#D9B8FF; --peach:#FFD6C9; }
body { background-image: radial-gradient(1200px 600px at -10% -10%, #FFE0EC 0%, transparent 50%), radial-gradient(1000px 500px at 110% 0%, #E9DBFF 0%, transparent 50%), radial-gradient(800px 400px at 50% 110%, #FFF1C4 0%, transparent 60%); }
.bg-deco{ position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 10% 80%, rgba(255,181,197,.35) 0 6px, transparent 7px),
    radial-gradient(circle at 80% 20%, rgba(217,184,255,.4) 0 8px, transparent 9px),
    radial-gradient(circle at 60% 70%, rgba(190,227,255,.45) 0 5px, transparent 6px),
    radial-gradient(circle at 30% 30%, rgba(255,233,168,.5) 0 7px, transparent 8px);
}
main, header, section { position: relative; z-index: 1; }

@keyframes bounceIn { 0%{transform:translateY(-30px) scale(.9); opacity:0} 60%{transform:translateY(6px) scale(1.02); opacity:1} 100%{transform:translateY(0) scale(1)} }
.animate-bounce-in{ animation: bounceIn .55s cubic-bezier(.34,1.56,.64,1); }

@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.floaty{ animation: floaty 3s ease-in-out infinite; }

@keyframes pop { 0%{transform:scale(.7); opacity:0} 100%{transform:scale(1); opacity:1} }
.pop{ animation: pop .35s ease-out both; }

.card{ background:rgba(255,255,255,.85); border:1px solid rgba(255,181,197,.35); border-radius:1.25rem; box-shadow: 0 10px 30px -12px rgba(255,150,180,.35); }
.btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1rem; border-radius:9999px; font-weight:600; transition:.15s transform; }
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: linear-gradient(135deg,#FFB5C5,#D9B8FF); color:white; }
.btn-mint{ background: linear-gradient(135deg,#C8F4DE,#BEE3FF); color:#0f766e; }
.btn-butter{ background: linear-gradient(135deg,#FFE9A8,#FFD6C9); color:#92400e; }
.btn-ghost{ background:white; border:1px solid #f1d6df; color:#be185d; }
.btn-danger{ background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; }

.input{ width:100%; padding:.7rem 1rem; border-radius:1rem; border:1px solid #f1d6df; background:white; }
.input:focus{ outline:none; border-color:#D9B8FF; box-shadow:0 0 0 4px #EADCFF; }

.tag{ display:inline-block; padding:.15rem .65rem; border-radius:9999px; font-size:.75rem; font-weight:600; }
.tag-pink{ background:#ffe4ec; color:#be185d }
.tag-lilac{ background:#efe1ff; color:#6d28d9 }
.tag-mint{ background:#dcfce7; color:#047857 }
.tag-sky{ background:#dbeafe; color:#1d4ed8 }

.heart::after{ content:"♡"; color:#ff8fb1; margin-left:.25rem }
.spinner{ width:18px; height:18px; border:3px solid #f5d0e0; border-top-color:#ff8fb1; border-radius:50%; animation: spin .9s linear infinite; display:inline-block; vertical-align:-3px; }
@keyframes spin { to { transform: rotate(360deg) } }

details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }

/* ============ Modern Toast ============ */
.toast{
  position:relative; display:flex; gap:.75rem; align-items:flex-start;
  padding:.9rem 2.4rem .9rem 1rem;
  background: rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,181,197,.4);
  border-radius:1.25rem; box-shadow: 0 18px 40px -16px rgba(168,85,247,.35);
  overflow:hidden; transform: translateX(120%) scale(.95); opacity:0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s;
}
.toast.in{ transform: translateX(0) scale(1); opacity:1 }
.toast.out{ transform: translateX(120%) scale(.95); opacity:0 }
.toast-icon{ width:42px; height:42px; flex:0 0 42px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; background:linear-gradient(135deg,#FFE4EC,#EADCFF); }
.toast-body{ flex:1; min-width:0; }
.toast-title{ font-weight:700; color:#9d174d; font-size:.95rem; }
.toast-msg{ font-size:.85rem; color:#475569; margin-top:.1rem; word-break:break-word; }
.toast-close{ position:absolute; top:.45rem; right:.6rem; width:24px; height:24px; border-radius:9999px; background:rgba(0,0,0,.05); border:0; color:#64748b; cursor:pointer; line-height:1; }
.toast-close:hover{ background:rgba(0,0,0,.1); }
.toast-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,181,197,.2); }
.toast-bar > span{ display:block; height:100%; width:100%; background:linear-gradient(90deg, var(--brand,#FFB5C5), var(--accent,#D9B8FF)); transform-origin: left; animation: toastbar linear forwards; }
@keyframes toastbar { from { transform: scaleX(1) } to { transform: scaleX(0) } }
.toast-success{ border-color:#bbf7d0 }
.toast-success .toast-icon{ background:linear-gradient(135deg,#dcfce7,#bee3ff) }
.toast-success .toast-title{ color:#047857 }
.toast-error{ border-color:#fecaca }
.toast-error .toast-icon{ background:linear-gradient(135deg,#fee2e2,#ffe4ec) }
.toast-error .toast-title{ color:#b91c1c }
.toast-code .toast-icon{ background:linear-gradient(135deg,#FFE9A8,#FFD6C9) }
.toast-mail .toast-icon{ background:linear-gradient(135deg,#EADCFF,#BEE3FF) }

/* ============ Code reveal ============ */
.code-reveal{
  display:flex; gap:.4rem; justify-content:center; margin:.5rem 0;
}
.code-reveal span{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:3.4rem; border-radius:.9rem;
  background:linear-gradient(180deg,#fff,#fff7fa);
  border:1px solid #fbcfe8; color:#be185d;
  font-family:ui-monospace, monospace; font-weight:800; font-size:1.6rem;
  box-shadow: 0 6px 16px -8px rgba(244,114,182,.5);
  transform: translateY(8px); opacity:0; animation: digitIn .45s ease-out forwards;
}
@keyframes digitIn { to{ transform: translateY(0); opacity:1 } }

/* ============ Polling progress ============ */
.poll-box{
  margin-top:.6rem; padding:.85rem 1rem;
  background: linear-gradient(135deg, rgba(255,233,168,.5), rgba(190,227,255,.45));
  border:1px solid rgba(255,181,197,.45); border-radius:1rem;
}
.poll-bar{
  position:relative; height:8px; background:rgba(255,255,255,.7); border-radius:9999px; overflow:hidden;
}
.poll-bar > i{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, var(--brand,#FFB5C5), var(--accent,#D9B8FF));
  border-radius:9999px;
  transition: width .25s linear;
  box-shadow: 0 0 16px rgba(217,184,255,.7);
}
.poll-pulse{
  display:inline-block; width:8px; height:8px; border-radius:9999px; background:var(--brand,#FFB5C5);
  box-shadow:0 0 0 0 var(--brand,#FFB5C5);
  animation: pulse 1.4s ease-out infinite;
  vertical-align:middle; margin-right:.4rem;
}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,181,197,.6)} 70%{box-shadow:0 0 0 12px rgba(255,181,197,0)} 100%{box-shadow:0 0 0 0 rgba(255,181,197,0)} }

.timer-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.15rem .65rem; border-radius:9999px;
  background:rgba(255,255,255,.75); border:1px solid rgba(255,181,197,.5);
  font-family: ui-monospace, monospace; font-size:.78rem; color:#9d174d;
}

/* ============ Compact Mail List ============ */
.mail-list{
  display:flex; flex-direction:column; gap:.5rem;
  list-style:none; padding:0; margin:0;
}
.mail-row{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,181,197,.3);
  border-radius: 1rem;
  box-shadow: 0 4px 14px -10px rgba(244,114,182,.3);
  transition: border-color .2s, box-shadow .2s, transform .12s;
  overflow: hidden;
}
.mail-row:hover{
  border-color: rgba(217,184,255,.55);
  box-shadow: 0 8px 22px -12px rgba(217,184,255,.45);
}
.mail-row-main{
  display:flex; align-items:center; gap:.6rem;
  padding: .55rem .75rem;
}
.mail-icon{
  flex:0 0 32px; width:32px; height:32px; border-radius:.7rem;
  background: linear-gradient(135deg,#FFB5C5,#D9B8FF);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.95rem; box-shadow: 0 4px 10px -4px rgba(217,184,255,.6);
}
.mail-text{ flex:1; min-width:0; }
.mail-addr{
  font-size:.82rem; font-weight:600; color:#334155;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mail-note{
  font-size:.68rem; color:#94a3b8; margin-top:.05rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mail-actions{ display:flex; gap:.3rem; flex-shrink:0; }

.chip{
  width:34px; height:34px; border-radius:.7rem;
  border:0; cursor:pointer; font-weight:700; font-size:.82rem;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .12s, filter .2s, box-shadow .2s;
}
.chip:hover{ transform: translateY(-1px); }
.chip:active{ transform: translateY(0) scale(.96); }
.chip-4{ background: linear-gradient(135deg,#FFE9A8,#FFD6C9); color:#9a3412; }
.chip-6{ background: linear-gradient(135deg,#EADCFF,#FFC9DD); color:#7c3aed; }
.chip-ghost{ background:#fff; color:#94a3b8; border:1px solid #f1d6df; font-size:.75rem; }
.chip.busy{ filter: saturate(.5) brightness(1.1); cursor:wait; }
.chip.active{ box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 0 0 2px var(--brand,#FFB5C5); }

/* Panel under row (collapsible) */
.mail-panel{
  padding: 0 .75rem .65rem .75rem;
  animation: slideDown .22s ease-out;
}
@keyframes slideDown {
  from{ opacity:0; transform: translateY(-4px); max-height:0; }
  to{ opacity:1; transform: translateY(0); max-height: 200px; }
}

.mp{
  padding:.5rem .7rem; border-radius:.85rem;
  font-size:.78rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
}
.mp-loading{ background:#fff7fa; color:#be185d; }
.mp-error{ background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

.mp-success{
  background: linear-gradient(135deg,#C8F4DE,#BEE3FF);
  border:1px solid #bee3ff;
}
.mp-success.mp-code6{
  background: linear-gradient(135deg,#EADCFF,#FFE4EC);
  border-color:#EADCFF;
}
.mp-meta{
  font-size:.7rem; color:#475569;
  flex:1; min-width:120px;
}

.code-mini{ display:inline-flex; gap:.25rem; }
.code-mini span{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.7rem; height:2.1rem; border-radius:.5rem;
  background:#fff; color:#0f766e; font-family:ui-monospace,monospace;
  font-weight:800; font-size:1.05rem;
  box-shadow: 0 3px 8px -4px rgba(16,185,129,.4);
  transform: translateY(6px); opacity:0; animation: digitIn .35s ease-out forwards;
}
.code-mini.code-code6 span{ color:#7c3aed; box-shadow:0 3px 8px -4px rgba(124,58,237,.4); }

.mp-tools{ display:flex; gap:.3rem; flex-shrink:0; margin-left:auto; }
.mini-btn{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.25rem .55rem; border-radius:9999px;
  background: rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.9);
  color:#334155; font-size:.7rem; font-weight:600; cursor:pointer;
  text-decoration:none;
}
.mini-btn:hover{ background:#fff; }
.mini-btn.primary{ background: linear-gradient(135deg,#FFB5C5,#D9B8FF); color:#fff; border-color:transparent; }
.mini-btn.close{ background:rgba(0,0,0,.06); color:#64748b; padding:.25rem .45rem; }

/* Poll inline */
.mp-poll{
  flex-direction:column; align-items:stretch; gap:.35rem;
  background: linear-gradient(135deg, rgba(255,233,168,.45), rgba(190,227,255,.45));
  border:1px solid rgba(255,181,197,.35);
}
.mp-poll.mp-code6{
  background: linear-gradient(135deg, rgba(234,220,255,.55), rgba(255,228,236,.55));
}
.mp-poll-line{
  display:flex; align-items:center; gap:.4rem;
  font-size:.72rem; color:#9d174d; flex-wrap:wrap;
}
.mp-poll-text{ font-weight:600; }
.mp-poll-num{
  padding:.05rem .45rem; border-radius:9999px;
  background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.9);
  font-family:ui-monospace,monospace; font-size:.68rem;
}
.mp-poll-left{
  margin-left:auto; font-family:ui-monospace,monospace;
  color:#be185d; font-weight:700; font-size:.78rem;
}

/* Mobile tweaks */
@media (max-width: 480px){
  .mail-addr{ font-size:.78rem; }
  .chip{ width:32px; height:32px; font-size:.78rem; }
  .mp-meta{ width:100%; min-width:0; }
  .mp-tools{ margin-left:0; }
}