.login-wrap{position:relative;min-height:calc(100dvh - 44px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;overflow:hidden;isolation:isolate;background:#d8c4a8}
.login-wrap::before{content:"";position:absolute;inset:0;background-image:url("/static/img/authbg.png");background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(8px) saturate(.95);opacity:0;transform:scale(1.08);z-index:-2;animation:authbg-fade-in 1.2s ease-out .15s forwards}
@keyframes authbg-fade-in{from{opacity:0}to{opacity:1}}
.login-wrap::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.15);z-index:-1}
.card{background:rgba(254,249,244,.9);border:1px solid var(--divider);border-radius:14px;padding:1.5rem;width:100%;max-width:340px;text-align:center;box-shadow:var(--shadow)}
.card-title{font-size:.9rem;font-weight:700;margin-bottom:.4rem}
.trial-note{display:inline-flex;align-items:center;justify-content:center;margin:0 0 .8rem;padding:.32rem .72rem;border-radius:999px;background:var(--pink-pale);color:var(--pink-deep);font-size:.72rem;font-weight:700;line-height:1.4}
.card-desc{font-size:.7rem;color:var(--muted);margin-bottom:1.2rem;line-height:1.6}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.7rem;border-radius:10px;font-family:'Zen Maru Gothic',sans-serif;font-size:.8rem;font-weight:700;text-decoration:none;cursor:pointer;transition:.2s;margin-bottom:.6rem}
.google-btn{background:var(--card);border:1.5px solid var(--divider);color:var(--text)}
.google-btn:hover{border-color:var(--pink);background:var(--pink-pale)}
.line-btn{background:#06C755;border:1.5px solid #06C755;color:#fff}
.line-btn:hover{background:#05b34d;border-color:#05b34d}
.btn-icon{width:18px;height:18px;flex-shrink:0}
.plans{margin-top:1.5rem;font-size:.65rem;color:var(--muted);line-height:1.8}
.plans strong{color:var(--text)}
.login-link-wrap{margin-top:1rem}
.login-link{font-size:.68rem;color:var(--pink);text-decoration:none;font-weight:700}
@media(max-width:480px){
  .login-wrap{padding:1rem;justify-content:flex-start;padding-top:2rem}
  .card{padding:1.2rem}
  .trial-note{margin-bottom:.65rem;font-size:.7rem}
  .card-desc{margin-bottom:.8rem}
  .oauth-btn{padding:.6rem;margin-bottom:.5rem}
  .plans{display:none}
}

/* ===== 紹介コード ===== */
.referral-notice{
  background:#fef6f9;border:1px solid #f4d2dc;border-radius:8px;
  padding:.7rem 1rem;margin-top:.4rem;margin-bottom:1rem;
  text-align:center;line-height:1.6
}
.referral-notice-title{
  font-size:.78rem;font-weight:700;color:#d4789a;margin-bottom:.2rem
}
.referral-notice-body{
  font-size:.7rem;color:#7a6358;line-height:1.65
}
.referral-details{
  margin-top:1rem;
  border:1px solid var(--divider);border-radius:10px;
  background:#fff;
}
.referral-details[open]{border-color:var(--pink-soft);background:#fffafb}
.referral-summary{
  padding:.65rem .9rem;
  font-size:.74rem;color:var(--muted);font-weight:700;
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;
}
.referral-summary::-webkit-details-marker{display:none}
.referral-summary::after{
  content:'▾';color:var(--muted);font-size:.75rem;
  transition:transform .2s;
}
.referral-details[open] .referral-summary::after{transform:rotate(180deg)}
.referral-summary:hover{color:var(--pink-deep)}
.referral-form{padding:0 .9rem .9rem;display:flex;flex-direction:column;gap:.5rem}
.referral-form-note{font-size:.65rem;color:var(--muted);margin:0;line-height:1.6}
.referral-input{
  width:100%;padding:.55rem .8rem;
  border:1.5px solid var(--divider);border-radius:9px;
  font-family:'Quicksand',monospace;font-size:.85rem;font-weight:700;
  letter-spacing:.06em;text-align:center;
  color:var(--text);background:#fff;outline:none;
  text-transform:uppercase;
}
.referral-input:focus{border-color:var(--pink)}
.referral-form-error{
  font-size:.68rem;color:#b91c1c;margin:0;line-height:1.5
}
.referral-submit{
  background:var(--pink);color:#fff;border:none;
  padding:.55rem;border-radius:9px;
  font-family:'Zen Maru Gothic',sans-serif;
  font-size:.78rem;font-weight:700;cursor:pointer;
  transition:opacity .15s;
}
.referral-submit:hover{opacity:.88}