:root{
    --bg1:#ffe7f2;
    --ink:#2b1f2a;
    --muted:#6e5b69;
    --pink:#ff5ca8;
    --shadow: 0 18px 50px rgba(41,16,33,.18);
    --shadow2: 0 10px 30px rgba(41,16,33,.12);
    --ring: 0 0 0 3px rgba(255,92,168,.22);
    --radius: 26px;
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color:var(--ink);
    overflow:hidden;
  }
  
  /* Background coquette */
  .bg{
    position:fixed; inset:0;
    background: radial-gradient(1200px 700px at 15% 15%, #fff 0%, var(--bg1) 42%, #ffd9ec 100%);
  }
  .gingham{
    position:absolute; inset:-20%;
    background:
      linear-gradient(90deg, rgba(255,255,255,.52) 0 22px, rgba(255,92,168,.10) 22px 44px),
      linear-gradient(0deg,  rgba(255,255,255,.52) 0 22px, rgba(255,92,168,.10) 22px 44px);
    background-size: 44px 44px;
    opacity:.55;
    transform: rotate(-6deg) scale(1.08);
  }
  .lace{
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(circle at 10px 10px, rgba(255,255,255,.9) 0 6px, transparent 7px) 0 0/22px 22px,
      radial-gradient(circle at 10px 10px, rgba(255,92,168,.14) 0 5px, transparent 6px) 11px 11px/22px 22px;
    padding:26px; opacity:.35;
  }
  .grain{
    position:absolute; inset:-20%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    opacity:.22; mix-blend-mode:soft-light; transform: rotate(3deg) scale(1.2);
  }
  .sparkles{
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(circle at 12% 22%, rgba(255,255,255,.9) 0 2px, transparent 3px),
      radial-gradient(circle at 78% 18%, rgba(255,255,255,.85) 0 1.6px, transparent 3px),
      radial-gradient(circle at 64% 78%, rgba(255,255,255,.9) 0 2px, transparent 3px),
      radial-gradient(circle at 20% 82%, rgba(255,255,255,.85) 0 1.6px, transparent 3px);
    opacity:.65;
    animation: twinkle 3.6s ease-in-out infinite;
  }
  @keyframes twinkle{ 0%,100%{ opacity:.55; } 50%{ opacity:.85; } }
  
  .wrap{ height:100%; display:grid; place-items:center; padding:24px; position:relative; }
  
  .card{
    width:min(420px, 92vw);
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
    border: 1px solid rgba(255,255,255,.65);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 22px 22px 16px;
    position:relative;
    overflow:hidden;
    transform: translateY(10px) scale(.98);
    opacity:0;
    animation: popIn .75s cubic-bezier(.2,.9,.2,1) forwards;
  }
  @keyframes popIn{ to{ transform: translateY(0) scale(1); opacity:1; } }
  
  .card::before{
    content:"";
    position:absolute; inset:-2px;
    background:
      radial-gradient(500px 180px at 20% 0%, rgba(255,92,168,.18), transparent 60%),
      radial-gradient(420px 220px at 90% 20%, rgba(255,183,216,.22), transparent 55%),
      radial-gradient(520px 260px at 40% 120%, rgba(255,92,168,.12), transparent 60%);
    pointer-events:none;
  }
  
  .card__head{ position:relative; z-index:1; }
  .badge{
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 12px; border-radius:999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,92,168,.18);
    box-shadow: var(--shadow2);
  }
  .badge__dot{
    width:10px; height:10px; border-radius:999px;
    background: radial-gradient(circle at 30% 30%, #fff 0 30%, var(--pink) 31% 100%);
    box-shadow: 0 0 0 4px rgba(255,92,168,.14);
  }
  .badge__text{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: rgba(43,31,42,.75); }
  
  .title{ margin:14px 0 6px; font-size:28px; line-height:1.1; letter-spacing:-.02em; }
  .title__sub{ display:block; margin-top:6px; font-size:14px; color:var(--muted); letter-spacing:.02em; }
  .subtitle{ margin:0 0 14px; color:rgba(43,31,42,.78); font-size:14px; }
  
  .card__body{ position:relative; z-index:1; }
  
  .toast{
    min-height:0; padding:0; margin: 0 0 12px;
    border-radius:14px; overflow:hidden;
    max-height:0; opacity:0;
    transition: max-height .28s ease, opacity .28s ease, padding .28s ease;
  }
  .toast.is-show{
    max-height:140px; opacity:1; padding: 10px 12px;
    border:1px solid rgba(255,92,168,.18);
    background: rgba(255,255,255,.72);
  }
  .toast.is-ok{ border-color: rgba(0,160,100,.22); }
  .toast.is-err{ border-color: rgba(220,50,90,.26); }
  .toast__t{ font-size:13px; color: rgba(43,31,42,.85); }
  .toast__s{ font-size:12px; color: rgba(110,91,105,.9); margin-top:4px; }
  
  .form{ display:grid; gap:14px; }
  .field .hint{ margin:8px 6px 0; font-size:12px; color: rgba(110,91,105,.92); }
  
  .input{
    position:relative;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(255,92,168,.18);
    border-radius: 18px;
    box-shadow: 0 10px 20px rgba(41,16,33,.08);
    padding: 14px 14px 12px;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  }
  .input:hover{ transform: translateY(-1px); }
  .input input{
    width:100%;
    border:0; outline:none;
    background:transparent;
    font-size:15px;
    padding: 14px 44px 6px 2px;
    color: rgba(43,31,42,.95);
  }
  .input label{
    position:absolute; left:16px; top:16px;
    font-size:13px; color: rgba(110,91,105,.92);
    transition: top .18s ease, font-size .18s ease, opacity .18s ease;
    pointer-events:none;
  }
  .input input:focus + label,
  .input input:not(:placeholder-shown) + label{
    top:10px; font-size:11px; opacity:.9;
  }
  .input__icon{
    position:absolute; right:12px; top:50%;
    transform: translateY(-50%);
    opacity:.75; font-size:16px;
  }
  .input__line{
    position:absolute; left:14px; right:14px; bottom:10px;
    height:2px; border-radius:999px;
    background: linear-gradient(90deg, rgba(255,92,168,.0), rgba(255,92,168,.55), rgba(255,92,168,.0));
    transform: scaleX(.25); opacity:0;
    transition: transform .2s ease, opacity .2s ease;
  }
  .input:focus-within{ border-color: rgba(255,92,168,.36); box-shadow: var(--shadow2), var(--ring); }
  .input:focus-within .input__line{ transform: scaleX(1); opacity:.95; }
  
  .eye{
    position:absolute; right:10px; top:50%;
    transform: translateY(-50%);
    border:0;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,92,168,.18);
    border-radius: 12px;
    padding: 6px 8px;
    cursor:pointer;
    font-size:14px;
    opacity:.9;
  }
  .eye:hover{ opacity:1; }
  
  .row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-top:8px;
    padding: 0 6px;
  }
  
  .btn{
    position:relative; width:100%;
    border:0; cursor:pointer;
    border-radius: 18px;
    padding: 14px 14px;
    font-size:15px; font-weight:650;
    letter-spacing:.01em;
    color: rgba(43,31,42,.92);
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.62));
    box-shadow: 0 18px 30px rgba(255,92,168,.16), 0 12px 26px rgba(41,16,33,.10);
    border: 1px solid rgba(255,92,168,.22);
    overflow:hidden;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn:active{ transform: translateY(1px) scale(.99); }
  
  .btn--soft{
    background: linear-gradient(180deg, rgba(255,92,168,.10), rgba(255,255,255,.62));
  }
  
  .btn__shine{
    position:absolute; inset:-40%;
    background: linear-gradient(120deg, transparent 45%, rgba(255,92,168,.18) 50%, transparent 55%);
    transform: translateX(-40%);
    animation: shine 2.2s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes shine{ 0%{ transform: translateX(-42%);} 55%{ transform: translateX(42%);} 100%{ transform: translateX(42%);} }
  
  .btn__loader{
    position:absolute; right:14px; top:50%;
    width:18px; height:18px;
    border-radius:999px;
    border: 2px solid rgba(255,92,168,.22);
    border-top-color: rgba(255,92,168,.9);
    transform: translateY(-50%);
    opacity:0;
    animation: spin .8s linear infinite;
  }
  @keyframes spin{ to{ transform: translateY(-50%) rotate(360deg);} }
  .btn.is-loading{ pointer-events:none; opacity:.9; }
  .btn.is-loading .btn__loader{ opacity:1; }
  .btn__text{ position:relative; z-index:1; }
  
  .link{
    border:0; background:transparent;
    color: rgba(255,92,168,.95);
    cursor:pointer;
    font-weight:650;
    letter-spacing:.01em;
    padding:0;
  }
  .link:hover{ text-decoration: underline; }
  .link.muted{ color: rgba(110,91,105,.92); font-weight:600; }
  .link.mini{ font-size:12px; font-weight:750; }
  
  .meta{
    display:flex; align-items:center; justify-content:center;
    flex-wrap:wrap; gap:10px;
    margin-top:2px; color: rgba(110,91,105,.9);
    font-size:12px;
  }
  .meta__pill{ padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,92,168,.16); }
  .meta__dot{ opacity:.6; }
  
  .card__foot{ margin-top: 14px; position:relative; z-index:1; }
  .fineprint{ margin:0; text-align:center; font-size:12px; color: rgba(110,91,105,.92); }
  
  /* hearts */
  .hearts{ position:absolute; inset:0; pointer-events:none; }
  .heart{
    position:absolute; width:14px; height:14px;
    transform: rotate(45deg);
    opacity:.55;
    animation: floatUp linear forwards;
    filter: drop-shadow(0 10px 10px rgba(255,92,168,.16));
  }
  .heart::before,.heart::after{
    content:""; position:absolute; width:14px; height:14px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #fff 0 20%, rgba(255,92,168,.75) 55%, rgba(255,183,216,.75) 100%);
  }
  .heart::before{ left:-7px; top:0; }
  .heart::after{ left:0; top:-7px; }
  .heart{ background: rgba(255,92,168,.65); }
  @keyframes floatUp{
    from{ transform: translateY(20px) translateX(0) rotate(45deg) scale(.9); opacity:0; }
    15%{ opacity:.65; }
    to{ transform: translateY(-120vh) translateX(var(--drift)) rotate(45deg) scale(1.15); opacity:0; }
  }
  
  /* --- Saved account view --- */
  .saved.is-hidden{ display:none; }
  
  .profile{
    display:flex;
    align-items:center;
    gap:14px;
    padding: 10px 8px 6px;
  }
  
  .avatarWrap{
    position:relative;
    width:74px;
    height:74px;
    flex: 0 0 74px;
  }
  
  .avatar{
    width:74px;
    height:74px;
    border-radius: 20px;
    object-fit: cover;
    border: 1px solid rgba(255,92,168,.22);
    box-shadow: 0 12px 22px rgba(255,92,168,.12), 0 10px 18px rgba(41,16,33,.10);
    background: rgba(255,255,255,.7);
  }
  
  .avatarBtn{
    position:absolute;
    right:-8px;
    bottom:-8px;
    border:0;
    cursor:pointer;
    border-radius: 999px;
    padding: 8px 10px;
    font-size:12px;
    font-weight:700;
    color: rgba(43,31,42,.9);
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,92,168,.20);
    box-shadow: 0 12px 18px rgba(41,16,33,.10);
  }
  .avatarBtn:hover{ transform: translateY(-1px); }
  
  .profileInfo{ flex:1; min-width:0; }
  .usernameRow{ display:flex; align-items:center; gap:10px; }
  .username{
    font-size:18px;
    font-weight:800;
    letter-spacing:-.01em;
    color: rgba(43,31,42,.94);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .email{
    margin-top:4px;
    font-size:13px;
    color: rgba(110,91,105,.92);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  .editName{ margin-top: 10px; padding: 8px 6px 0; }
  .editName.is-hidden{ display:none; }
  
  .input.compact{ padding: 12px 14px 10px; }
  .input.compact input{ padding: 12px 8px 6px 2px; }
  
  .row2{ display:flex; align-items:center; gap:12px; margin-top: 10px; }
  
  .savedActions{ display:grid; gap:12px; margin-top: 12px; }
  
  .centerHint{ text-align:center; margin-top: 10px !important; }
  
  /* Button vanish + card exit */
  .btn.is-vanish{
    transform: translateY(6px) scale(.98);
    opacity:0;
    filter: blur(.6px);
    transition: transform .25s ease, opacity .25s ease, filter .25s ease;
  }
  .card.is-exit{
    transform: translateY(16px) scale(.98);
    opacity:0;
    transition: transform .28s ease, opacity .28s ease;
  }
  
  @media (prefers-reduced-motion: reduce){
    .card, .sparkles, .btn__shine, .heart{ animation:none !important; }
    .btn, .input{ transition:none !important; }
  }