:root {
  --pink: #ff6b9d;
  --pink-hot: #ff4081;
  --pink-light: #ff8fb8;
  --pink-soft: #ffd1e3;
  --pink-pale: #fff0f5;
  --white: #ffffff;
  --text: #4a3347;
  --text-light: #7a5f76;
  --shadow-pink: rgba(255,107,157,0.25);
  --glow-pink: rgba(255,107,157,0.4);
  --green: #2bb673;
  --red: #ef5d72;
  --warn: #f5a623;
  --accent: #6c8cff;
}
*{margin:0;padding:0;box-sizing:border-box}

body{font-family:'Quicksand',sans-serif;min-height:100vh;overflow-x:hidden;color:var(--text);background:linear-gradient(160deg,#fff 0%,#fff5f9 30%,#ffe8f0 60%,#ffd6e7 100%)}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,107,157,0.06) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,143,184,0.08) 0%,transparent 50%);pointer-events:none;z-index:0}

/* ── scattered cats ── */
.scattered-cats{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.scattered-cat{position:absolute;opacity:0.18;filter:drop-shadow(0 4px 12px rgba(255,107,157,0.15));animation:cat-float ease-in-out infinite}
@keyframes cat-float{0%,100%{transform:translateY(0) rotate(var(--rot-start,-3deg))}50%{transform:translateY(var(--float-y,-15px)) rotate(var(--rot-end,3deg))}}

/* ── sparkles ── */
.sparkles{position:fixed;inset:0;pointer-events:none;z-index:2}
.sparkle{position:absolute;border-radius:50%;background:var(--pink-soft);animation:sparkle-rise linear infinite;opacity:0}
@keyframes sparkle-rise{0%{opacity:0;transform:translateY(100vh) scale(0)}15%{opacity:0.6}85%{opacity:0.4}100%{opacity:0;transform:translateY(-10vh) scale(1)}}

/* ── hero ── */
.hero{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center}
.title{font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(3.5rem,12vw,7rem);line-height:1.2;margin-bottom:0.8rem;display:flex;gap:0.3em;flex-wrap:wrap;justify-content:center;padding:0.1em 0}
.letter-wrap{display:inline-flex}
.letter{display:inline-block;color:var(--pink);animation:letter-pop 0.6s cubic-bezier(0.175,0.885,0.32,1.275) backwards calc(var(--i)*0.07s),letter-hover 3s ease-in-out infinite calc(var(--i)*0.2s);text-shadow:0 2px 15px rgba(255,107,157,0.3);cursor:default}
.letter:hover{animation:letter-hover 3s ease-in-out infinite,letter-bounce 0.4s ease;text-shadow:0 4px 25px rgba(255,107,157,0.5)}
@keyframes letter-pop{0%{opacity:0;transform:scale(0) translateY(30px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes letter-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes letter-bounce{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-4deg)}70%{transform:scale(0.95) rotate(2deg)}100%{transform:scale(1)}}
.tagline{font-size:1.1rem;color:var(--text-light);margin-bottom:2.5rem;font-weight:600;animation:fade-up 0.8s ease backwards 0.9s;letter-spacing:0.02em}
@keyframes fade-up{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}

/* ── buttons ── */
.auth-buttons{display:flex;gap:1rem;animation:fade-up 0.8s ease backwards 1.1s}
.btn{font-family:'Quicksand',sans-serif;font-weight:700;font-size:0.95rem;padding:0.7rem 2rem;border:none;border-radius:50px;cursor:pointer;transition:all 0.25s ease;letter-spacing:0.03em}
.btn:active{transform:translateY(0) scale(0.97)}
.btn-pink,.btn-signup{background:var(--pink);color:var(--white);box-shadow:0 4px 20px var(--shadow-pink)}
.btn-pink:hover,.btn-signup:hover{transform:translateY(-2px);box-shadow:0 6px 28px var(--glow-pink);background:var(--pink-hot)}
.btn-login{background:var(--white);color:var(--pink);border:2px solid var(--pink-soft);box-shadow:0 2px 10px rgba(0,0,0,0.04)}
.btn-login:hover{transform:translateY(-2px);border-color:var(--pink-light);background:var(--pink-pale)}
.btn-sm{padding:0.55rem 1rem;font-size:0.82rem;border-radius:10px}
.btn-outline{background:transparent;color:var(--pink);border:1.5px solid var(--pink-soft)}
.btn-outline:hover{background:var(--pink-pale);border-color:var(--pink)}
.btn-danger{background:var(--red);color:#fff;box-shadow:0 3px 12px rgba(239,93,114,0.25)}
.btn-danger:hover{transform:translateY(-2px);opacity:0.9}
.btn-green{background:var(--green);color:#fff;box-shadow:0 3px 12px rgba(43,182,115,0.25)}
.btn-green:hover{transform:translateY(-2px);opacity:0.9}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none !important}

/* ── modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(74,51,71,0.35);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal-overlay.active{display:flex;animation:overlay-in 0.25s ease}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
.modal{background:var(--white);border-radius:24px;padding:2.5rem;width:100%;max-width:400px;position:relative;box-shadow:0 20px 60px rgba(255,107,157,0.15),0 0 0 1px var(--pink-soft);animation:modal-pop 0.35s cubic-bezier(0.175,0.885,0.32,1.275)}
@keyframes modal-pop{from{opacity:0;transform:scale(0.92) translateY(15px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-close{position:absolute;top:1rem;right:1.2rem;background:none;border:none;font-size:1.6rem;color:var(--text-light);cursor:pointer;line-height:1;transition:color 0.2s}
.modal-close:hover{color:var(--pink)}
.modal-title{font-weight:700;font-size:1.5rem;color:var(--pink);text-align:center;margin-bottom:1.5rem}

/* ── forms ── */
.form-group{margin-bottom:0.7rem}
.form-group label{display:block;font-size:0.78rem;font-weight:700;color:var(--text-light);margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.04em}
.form-group input,.form-group select{width:100%;padding:0.7rem 0.9rem;border:2px solid #f0e0ea;border-radius:10px;font-family:'Quicksand',sans-serif;font-size:0.9rem;font-weight:500;color:var(--text);background:#fef8fb;transition:all 0.25s;outline:none}
.form-group input::placeholder{color:#c8a8bb}
.form-group input:focus,.form-group select:focus{border-color:var(--pink-light);background:var(--white);box-shadow:0 0 0 3px rgba(255,107,157,0.08)}
.form-group select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23c8a8bb' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.8rem center;padding-right:2rem}
.form-row{display:flex;gap:0.5rem;align-items:flex-end}
.flex-1{flex:1}
.form-section-label{font-size:0.72rem;font-weight:700;color:var(--pink);text-transform:uppercase;letter-spacing:0.06em;margin:0.8rem 0 0.4rem;padding-bottom:0.3rem;border-bottom:1px solid #f5e0ec}
.form-error{color:var(--red);font-size:0.82rem;font-weight:600;text-align:center;min-height:1.2rem;margin-bottom:0.4rem}
.btn-submit{width:100%;background:var(--pink);color:var(--white);padding:0.8rem;font-size:1rem;box-shadow:0 4px 15px var(--shadow-pink);border-radius:12px}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 6px 25px var(--glow-pink);background:var(--pink-hot)}
.form-switch{text-align:center;margin-top:1.1rem;font-size:0.82rem;color:var(--text-light)}
.form-switch a{color:var(--pink);font-weight:700;text-decoration:none}
.form-switch a:hover{text-decoration:underline}

/* ── dashboard ── */
.dashboard{min-height:100vh;padding:1.5rem;position:relative;z-index:3;max-width:900px;margin:0 auto}
.dash-header{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 1.5rem;background:var(--white);border-radius:14px;box-shadow:0 2px 12px rgba(255,107,157,0.08);margin-bottom:1rem}
.dash-title{font-weight:700;font-size:1.3rem;color:var(--pink)}
.dash-user{display:flex;align-items:center;gap:0.7rem;font-weight:600;color:var(--text);font-size:0.9rem}
.dash-sub{font-size:0.65rem;padding:0.15rem 0.5rem;border-radius:20px;background:var(--pink-pale);border:1px solid var(--pink-soft);color:var(--pink);text-transform:uppercase;letter-spacing:0.05em;font-weight:700}
.btn-logout{background:var(--pink-pale);color:var(--pink);padding:0.4rem 1rem;font-size:0.78rem;border:1px solid var(--pink-soft)}
.btn-logout:hover{background:var(--pink-soft)}

/* ── tabs ── */
.tabs{display:flex;gap:0.3rem;margin-bottom:1rem;background:var(--white);border-radius:12px;padding:0.3rem;box-shadow:0 2px 8px rgba(255,107,157,0.06);overflow-x:auto}
.tab{font-family:'Quicksand',sans-serif;font-weight:600;font-size:0.82rem;padding:0.55rem 1rem;border:none;border-radius:10px;cursor:pointer;background:transparent;color:var(--text-light);transition:all 0.2s;white-space:nowrap}
.tab.active{background:var(--pink);color:var(--white);box-shadow:0 2px 10px var(--shadow-pink)}
.tab:not(.active):hover{background:var(--pink-pale);color:var(--pink)}
.tab-panel{animation:fade-up 0.3s ease}

/* ── panel cards ── */
.panel-card{background:var(--white);border-radius:16px;padding:1.5rem;box-shadow:0 2px 12px rgba(255,107,157,0.06)}
.panel-title{font-weight:700;font-size:1.1rem;color:var(--pink);margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem}
.badge{font-size:0.7rem;padding:0.15rem 0.5rem;border-radius:20px;background:var(--pink-pale);color:var(--pink);font-weight:700}
.empty-state{text-align:center;color:var(--text-light);padding:3rem 1rem;font-weight:500}

/* ── order card ── */
.order-card{background:var(--white);border-radius:16px;padding:1.2rem 1.5rem;box-shadow:0 2px 12px rgba(255,107,157,0.06);margin-bottom:1rem;border-left:4px solid var(--accent);transition:border-color 0.3s}
.order-card.status-draft_ready{border-left-color:var(--green)}
.order-card.status-placed{border-left-color:var(--green)}
.order-card.status-cancelled,.order-card.status-failed,.order-card.status-expired{border-left-color:var(--red)}
.order-card.status-placing{border-left-color:var(--warn)}

.order-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.6rem}
.order-store{font-weight:700;font-size:1rem;color:var(--text)}
.order-status{font-size:0.75rem;font-weight:700;padding:0.2rem 0.7rem;border-radius:20px;text-transform:uppercase;letter-spacing:0.04em}
.status-pending,.status-validating,.status-addressing,.status-cart_syncing,.status-previewing{background:#eef2ff;color:var(--accent)}
.status-draft_ready{background:#e8f8ef;color:var(--green)}
.status-placing{background:#fff5e6;color:var(--warn)}
.status-placed{background:#e8f8ef;color:var(--green)}
.status-cancelled,.status-failed,.status-expired,.status-fraud_block_promo_abuse{background:#fde8ec;color:var(--red)}
.status-awaiting_config{background:#fff5e6;color:var(--warn)}

.order-items{margin:0.6rem 0;font-size:0.85rem;color:var(--text-light)}
.order-item{display:flex;justify-content:space-between;padding:0.15rem 0}
.order-item-name{color:var(--text)}

.order-pricing{margin:0.6rem 0;font-size:0.85rem;border-top:1px solid #f5e0ec;padding-top:0.5rem}
.price-line{display:flex;justify-content:space-between;padding:0.1rem 0;color:var(--text-light)}
.price-line.total{font-weight:700;color:var(--pink);font-size:0.95rem;margin-top:0.3rem;padding-top:0.3rem;border-top:1px solid #f5e0ec}
.price-line.promo{color:var(--green)}

.order-details{margin:0.5rem 0;font-size:0.8rem;color:var(--text-light)}
.order-detail{display:flex;gap:0.5rem;padding:0.1rem 0}
.order-detail-label{font-weight:700;color:var(--text);min-width:70px}

.order-tracking{margin:0.8rem 0;padding:0.8rem;background:linear-gradient(135deg,#e8f8ef,#f0faf5);border-radius:10px;text-align:center}
.order-tracking a{color:var(--green);font-weight:700;text-decoration:none;font-size:0.95rem}
.order-tracking a:hover{text-decoration:underline}

.order-payment{display:inline-block;font-size:0.75rem;font-weight:700;padding:0.2rem 0.6rem;border-radius:20px;margin-top:0.3rem}
.payment-succeeded{background:#e8f8ef;color:var(--green)}
.payment-declined,.payment-failed{background:#fde8ec;color:var(--red)}
.payment-unverified,.payment-verifying,.payment-verifying_long{background:#fff5e6;color:var(--warn)}

.order-actions{display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:0.8rem;padding-top:0.8rem;border-top:1px solid #f5e0ec}

.order-error{margin:0.5rem 0;padding:0.6rem 0.8rem;background:#fde8ec;border-radius:8px;font-size:0.82rem;color:var(--red);font-weight:600}

.order-expires{font-size:0.75rem;color:var(--warn);font-weight:600;margin-top:0.3rem}

/* progress dots animation */
.progress-dots::after{content:'';animation:dots 1.5s steps(4) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* ── address list ── */
.addr-item{display:flex;align-items:center;gap:0.6rem;padding:0.6rem 0.8rem;border-radius:10px;margin-bottom:0.4rem;background:#fef8fb;border:1px solid transparent;transition:all 0.2s}
.addr-item.is-default{border-color:var(--pink-soft);background:var(--pink-pale)}
.addr-label{font-weight:700;color:var(--pink);min-width:60px;font-size:0.85rem}
.addr-text{flex:1;font-size:0.85rem;color:var(--text)}
.addr-unit{font-size:0.8rem;color:var(--text-light)}
.addr-actions{display:flex;gap:0.3rem}

/* ── history card ── */
.history-card{background:var(--white);border-radius:12px;padding:1rem 1.2rem;box-shadow:0 1px 8px rgba(255,107,157,0.04);margin-bottom:0.6rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.history-info{flex:1}
.history-store{font-weight:700;font-size:0.9rem;color:var(--text)}
.history-meta{font-size:0.78rem;color:var(--text-light);margin-top:0.15rem}
.history-total{font-weight:700;color:var(--pink);font-size:0.95rem}

/* ── credits bar ── */
.credits-bar{display:flex;align-items:center;gap:0.8rem;background:var(--white);border-radius:12px;padding:0.7rem 1.2rem;box-shadow:0 2px 10px rgba(255,107,157,0.06);margin-bottom:1rem}
.credits-info{display:flex;flex-direction:column;min-width:90px}
.credits-label{font-size:0.68rem;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:0.05em}
.credits-count{font-size:1.1rem;font-weight:700;color:var(--pink)}
.credits-track{flex:1;height:8px;background:#f5e0ec;border-radius:10px;overflow:hidden}
.credits-fill{height:100%;background:linear-gradient(90deg,var(--pink),var(--pink-hot));border-radius:10px;transition:width 0.4s ease;width:0%}
.credits-extra-info{border-left:1px solid #f5e0ec;padding-left:0.8rem}
.credits-extra-count{color:var(--accent)}
.credits-reset{font-size:0.7rem;color:var(--text-light);font-weight:600;white-space:nowrap}
.credits-info-btn{background:none;border:2px solid var(--pink-soft);color:var(--pink);font-size:0.9rem;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;font-weight:700;line-height:1}
.credits-info-btn:hover{background:var(--pink-pale);border-color:var(--pink)}

/* ── redeem ── */
.redeem-form{display:flex;gap:0.5rem}
.redeem-form input{flex:1;padding:0.7rem 1rem;border:2px solid #f0e0ea;border-radius:12px;font-family:'Quicksand',sans-serif;font-size:0.95rem;font-weight:600;color:var(--text);background:#fef8fb;outline:none;transition:all 0.25s;text-transform:uppercase;letter-spacing:0.08em}
.redeem-form input::placeholder{color:#c8a8bb;text-transform:none;letter-spacing:normal}
.redeem-form input:focus{border-color:var(--pink-light);box-shadow:0 0 0 3px rgba(255,107,157,0.08)}
.btn-redeem{background:var(--pink);color:var(--white);padding:0.7rem 1.3rem;box-shadow:0 3px 12px var(--shadow-pink);border-radius:12px;white-space:nowrap}
.btn-redeem:hover{transform:translateY(-2px);background:var(--pink-hot)}
.redeem-msg{margin-top:0.6rem;font-size:0.82rem;font-weight:600;min-height:1.2rem}
.redeem-msg.success{color:var(--green)}
.redeem-msg.error{color:var(--red)}

/* ── responsive ── */
@media(max-width:600px){
  .modal{padding:2rem 1.5rem}
  .auth-buttons{flex-direction:column;width:100%;max-width:280px}
  .btn-signup,.btn-login{width:100%}
  .form-row{flex-wrap:wrap}
  .dash-header{flex-direction:column;gap:0.6rem;text-align:center}
  .tabs{gap:0.15rem}
  .tab{padding:0.45rem 0.7rem;font-size:0.75rem}
  .redeem-form{flex-direction:column}
  .history-card{flex-direction:column;align-items:flex-start}
  .history-card-detail{flex-direction:column}
}

/* ── history detail cards ── */
.history-card-detail{background:var(--white);border-radius:14px;padding:1.2rem 1.4rem;box-shadow:0 2px 10px rgba(255,107,157,0.06);margin-bottom:0.8rem;border-left:4px solid var(--accent)}
.history-card-detail.status-placed{border-left-color:var(--green)}
.history-card-detail.status-cancelled,.history-card-detail.status-failed,.history-card-detail.status-expired,.history-card-detail.status-fraud_block_promo_abuse{border-left-color:var(--red)}
.history-card-detail .history-header{display:flex;justify-content:space-between;align-items:center}
.history-card-detail .history-store{font-weight:700;font-size:0.95rem;color:var(--text)}
.history-card-detail .history-total{font-weight:700;color:var(--pink);font-size:1rem}
.history-card-detail .history-meta{font-size:0.78rem;color:var(--text-light);margin-top:0.2rem}
.history-items{margin:0.6rem 0;font-size:0.82rem;border-top:1px solid #f5e0ec;padding-top:0.5rem}
.history-item{display:flex;justify-content:space-between;padding:0.12rem 0;color:var(--text-light)}
.history-item span:first-child{color:var(--text)}
.history-details{margin:0.6rem 0;padding-top:0.5rem;border-top:1px solid #f5e0ec;font-size:0.82rem}
.history-detail{display:flex;gap:0.5rem;padding:0.15rem 0}
.history-detail-label{font-weight:700;color:var(--text);min-width:80px}
.history-job-id{font-family:monospace;font-size:0.85rem;background:var(--pink-pale);padding:0.1rem 0.4rem;border-radius:4px;color:var(--pink);font-weight:700;letter-spacing:0.05em}
.history-track-btn{display:inline-block;margin-top:0.5rem;font-size:0.82rem;color:var(--green);font-weight:700;text-decoration:none}
.history-track-btn:hover{text-decoration:underline}
.dash-expiry{font-size:0.62rem;color:var(--text-light);font-weight:600}

/* ── toast notifications ── */
.toast-container{position:fixed;top:1.2rem;right:1.2rem;z-index:300;display:flex;flex-direction:column;gap:0.5rem;pointer-events:none}
.toast{pointer-events:auto;background:#fff;border-radius:12px;padding:0.7rem 1rem;box-shadow:0 4px 20px rgba(0,0,0,0.12);font-family:'Quicksand',sans-serif;font-size:0.85rem;font-weight:600;display:flex;align-items:center;gap:0.6rem;animation:toastIn 0.35s ease,toastOut 0.35s ease forwards;animation-delay:0s,4s;max-width:340px}
.toast-icon{font-size:1.1rem;flex-shrink:0}
.toast-body{flex:1}
.toast-title{font-weight:700;font-size:0.82rem}
.toast-sub{font-size:0.75rem;color:var(--text-light);margin-top:0.1rem}
.toast-success{border-left:4px solid var(--green)}
.toast-warn{border-left:4px solid var(--warn)}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}