:root{
  --purple:#3b0a57;
  --purple-2:#5b2a78;
  --purple-soft:#efe1f4;
  --lavender:#f6eaf8;

  --ink:#111827;
  --muted:#6b7280;
  --bg:#ffffff;
  --page:#f7f7f8;

  --line:#e7e7ea;
  --shadow:0 8px 22px rgba(17,24,39,.08);

  --red:#c4362f;
  --red-2:#a92d28;

  --radius:10px;
  --radius-lg:12px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--page);
}

/* top bar */
.topbar{
  background:var(--purple);
  position:sticky;
  top:0;
  z-index:20;
}
.topbar__inner{
  height:56px;
  width:min(1200px, calc(100% - 64px));
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
}
.brand__mark{
  width:30px;height:30px;
  border-radius:6px;
  background:#c9131b;
  display:grid;
  place-items:center;
}
.brand__bird{
  width:14px;height:14px;
  border-radius:4px;
  background:#fff;
  transform:skewX(-8deg) rotate(10deg);
  position:relative;
}
.brand__bird::after{
  content:"";
  position:absolute;
  right:-6px; top:4px;
  width:6px;height:6px;
  border-radius:0 6px 6px 6px;
  background:#fff;
  transform:rotate(20deg);
}
.brand__text{ font-size:16px; }
.brand__reg{ font-weight:700; font-size:12px; vertical-align:top; margin-left:1px; opacity:.9; }

.nav{
  display:flex;
  gap:22px;
  align-items:center;
  margin-right:auto;
}
.nav__link{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:650;
  font-size:14px;
  padding:18px 0;
  position:relative;
}
.nav__link:hover{ color:#fff; }
.nav__link--active{
  color:#fff;
}
.nav__link--active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height:4px;
  background:#fff;
  border-radius:4px 4px 0 0;
  opacity:.95;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  line-height:1;
  padding:10px 16px;
  border-radius:999px;
  user-select:none;
  cursor:pointer;
}

.btn--move{
  background:var(--red);
  color:#fff;
  padding:10px 18px;
  box-shadow:0 10px 18px rgba(196,54,47,.20);
}
.btn--move:hover{ background:var(--red-2); }

.btn--pill{
  background:var(--purple-2);
  color:#fff;
  padding:10px 18px;
  box-shadow:0 10px 18px rgba(91,42,120,.18);
}
.btn--pill:hover{ filter:brightness(1.03); }

.btn--soft{
  background:var(--purple-soft);
  color:var(--purple-2);
  border:1px solid rgba(91,42,120,.10);
  padding:10px 20px;
}
.btn--soft:hover{ filter:brightness(0.98); }

.btn--primary{
  background:var(--purple-2);
  color:#fff;
}
.btn--primary:hover{ filter:brightness(1.04); }

.btn--outline{
  background:transparent;
  color:var(--purple-2);
  border:1px solid rgba(91,42,120,.35);
}
.btn--outline:hover{ background:rgba(91,42,120,.06); }

/* icons */
.icon-btn{
  width:36px;height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.14);
  text-decoration:none;
  position:relative;
}
.icon-btn:hover{ background:rgba(255,255,255,.20); }
.icon{
  width:16px;height:16px;
  position:relative;
}
.icon--bell{
  border:2px solid #fff;
  border-bottom:none;
  border-radius:10px 10px 4px 4px;
  transform:translateY(1px);
}
.icon--bell::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:6px;height:6px;
  background:#fff;
  border-radius:999px;
  transform:translateX(-50%);
}
.icon-badge{
  position:absolute;
  top:7px; right:8px;
  width:8px;height:8px;
  background:#ff3b30;
  border-radius:999px;
  box-shadow:0 0 0 2px var(--purple);
}
.icon--search{
  border:2px solid #fff;
  border-radius:999px;
}
.icon--search::after{
  content:"";
  position:absolute;
  width:8px;height:2px;
  background:#fff;
  right:-6px; bottom:-4px;
  transform:rotate(45deg);
  border-radius:2px;
}

.avatar-btn{
  width:36px;height:36px;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.avatar{
  width:36px;height:36px;
  border-radius:999px;
  background:rgba(255,255,255,.30);
  display:block;
}

/* page layout */
.page{
  padding:28px 0 80px;
}
.wrap{
  width:min(920px, calc(100% - 64px));
  margin:0 auto;
}
.headline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:30px 0 10px;
}
.headline__title{
  margin:0;
  font-size:34px;
  font-weight:800;
  letter-spacing:-.3px;
  color:#2a2a2a;
}

.section{
  margin-top:14px;
}
.section__title{
  margin:18px 0 12px;
  font-size:16px;
  font-weight:800;
  color:#2a2a2a;
}

/* cards */
.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

.account-card{
  padding:20px 22px 18px;
  position:relative;
}

.account-card__top{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:10px;
  border-bottom:1px solid #f0f0f2;
}
.acct-badge{
  width:38px;height:38px;
  border-radius:999px;
  background:#f0b53a;
  display:grid;
  place-items:center;
}
.acct-badge__stripe{
  width:16px;height:10px;
  border-radius:3px;
  background:#fff;
  position:relative;
}
.acct-badge__stripe::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:4px;
  height:2px;
  background:rgba(0,0,0,.10);
}
.acct-title__name{
  font-size:18px;
  font-weight:850;
  color:#2a2a2a;
}
.reg{ font-size:12px; vertical-align:top; }
.tm{ font-size:12px; vertical-align:top; }

.account-card__mid{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:18px 0 16px;
  border-bottom:1px solid #f0f0f2;
}
.acct-left__line1{
  font-size:14px;
  font-weight:700;
  color:#404040;
  margin-bottom:6px;
}
.mini-links{
  display:flex;
  gap:18px;
  font-size:13px;
  margin-bottom:18px;
}
.mini-links a{
  color:var(--purple-2);
  text-decoration:none;
  font-weight:700;
}
.mini-links a:hover{ text-decoration:underline; }
.acct-left__muted{
  color:#7a7a7a;
  font-size:13px;
}

.acct-right{
  text-align:right;
  min-width:220px;
}
.acct-right__label{
  color:#7a7a7a;
  font-size:13px;
  margin-bottom:8px;
}
.acct-right__value{
  font-size:34px;
  font-weight:900;
  letter-spacing:-.3px;
  color:#2a2a2a;
  margin-bottom:6px;
}
.acct-right__sub{
  font-size:14px;
  font-weight:700;
  color:#4a4a4a;
}

.info-dot{
  display:inline-grid;
  place-items:center;
  width:16px;height:16px;
  border-radius:999px;
  border:1px solid #cfcfd6;
  color:#7a7a7a;
  font-size:11px;
  margin-left:6px;
  transform:translateY(-1px);
}

.account-card__bottom{
  display:flex;
  justify-content:flex-end;
  padding-top:14px;
}
.quick-action{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--purple-2);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  padding:10px 12px;
  border-radius:12px;
}
.quick-action:hover{ background:rgba(91,42,120,.06); }
.quick-action__icon{
  width:34px;height:34px;
  border-radius:999px;
  background:#efe1f4;
  position:relative;
}
.quick-action__icon::before{
  content:"";
  position:absolute;
  inset:10px 12px 10px 12px;
  border-left:2px solid var(--purple-2);
  border-right:2px solid var(--purple-2);
  opacity:.35;
}
.quick-action__icon::after{
  content:"";
  position:absolute;
  left:11px; right:11px; top:16px;
  height:2px;
  background:var(--purple-2);
  opacity:.35;
}

.account-card__footer{
  display:flex;
  justify-content:center;
  margin-top:12px;
}
.account-card__footer .btn{
  min-width:140px;
}

/* divider line with sparkle */
.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:26px 0 6px;
  color:#b7b7bc;
}
.divider__line{
  height:1px;
  background:#d7d7db;
  flex:1;
}
.divider__spark{
  font-size:14px;
  transform:translateY(-1px);
}

/* rewards promo */
.promo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px;
  border-radius:10px 10px 0 0;
  background:var(--purple-soft);
  border:1px solid rgba(91,42,120,.10);
  box-shadow:var(--shadow);
}
.promo__title{
  font-weight:900;
  color:var(--purple-2);
  font-size:20px;
  margin-bottom:4px;
}
.promo__desc{
  color:#444;
  font-size:13px;
}

/* points card */
.points-card{
  border-top-left-radius:0;
  border-top-right-radius:0;
  margin-top:-1px;
  padding:20px 20px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.points-card__left{
  display:flex;
  align-items:center;
  gap:14px;
}
.points-icon{
  width:38px;height:38px;
  border-radius:999px;
  background:#d91e18;
  display:grid;
  place-items:center;
}
.points-icon__card{
  width:18px;height:12px;
  background:#fff;
  border-radius:3px;
  position:relative;
}
.points-icon__card::after{
  content:"";
  position:absolute;
  left:3px; right:3px; top:4px;
  height:2px;
  background:rgba(0,0,0,.10);
}
.points-card__title{
  font-size:18px;
  font-weight:900;
  color:#2a2a2a;
}
.mini-links--purple a{ color:var(--purple-2); }

.points-card__right{
  text-align:right;
}
.points-card__pts{
  font-size:40px;
  font-weight:950;
  letter-spacing:-.6px;
  color:#2a2a2a;
  line-height:1;
}
.points-card__pts .pts{
  font-size:18px;
  font-weight:800;
  color:#4a4a4a;
}
.points-card__sub{
  margin-top:6px;
  font-size:13px;
  color:#4a4a4a;
}

/* suggested card */
.suggest{
  border:1px solid rgba(91,42,120,.12);
  background:var(--lavender);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:22px 22px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
}
.suggest__title{
  font-size:22px;
  font-weight:950;
  color:#2a2a2a;
  margin-bottom:8px;
}
.suggest__desc{
  margin:0 0 14px;
  color:#4a4a4a;
  font-size:14px;
  max-width:520px;
}
.suggest__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.suggest__media{
  width:220px;
  display:flex;
  justify-content:flex-end;
}
.tilt-card{
  width:120px;
  height:170px;
  border-radius:16px;
  background:linear-gradient(160deg, #4b1766, #2f0b42);
  transform:rotate(16deg);
  box-shadow:0 18px 30px rgba(17,24,39,.20);
  position:relative;
}
.tilt-card__mark{
  position:absolute;
  left:14px; top:14px;
  width:18px;height:18px;
  border-radius:6px;
  background:rgba(255,255,255,.18);
}
.tilt-card__circles{
  position:absolute;
  right:14px; bottom:14px;
  display:flex;
  gap:6px;
}
.tilt-card__circles span{
  width:18px;height:18px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
}

/* responsive */
@media (max-width: 760px){
  .topbar__inner{ width:calc(100% - 24px); gap:14px; }
  .nav{ display:none; }
  .wrap{ width:calc(100% - 24px); }
  .headline{ flex-direction:column; align-items:flex-start; }
  .headline__title{ font-size:28px; }
  .account-card__mid{ flex-direction:column; text-align:left; }
  .acct-right{ text-align:left; }
  .points-card{ flex-direction:column; align-items:flex-start; }
  .points-card__right{ text-align:left; }
  .suggest{ flex-direction:column; align-items:flex-start; }
  .suggest__media{ width:100%; justify-content:flex-start; }
}
.brand__logo{
  width:30px;
  height:30px;
  border-radius:6px;
  display:block;
  object-fit:contain;
}

.icon-img{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
}
/* logout / sign-out icon */
.avatar{
  width:36px;
  height:36px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  position:relative;
  display:block;
}

/* 门框 */
.avatar::before{
  content:"";
  position:absolute;
  left:10px;
  top:9px;
  width:10px;
  height:18px;
  border:2px solid #fff;
  border-right:none;
  border-radius:3px 0 0 3px;
  opacity:.95;
}

/* 箭头（→） */
.avatar::after{
  content:"";
  position:absolute;
  right:9px;
  top:16px;
  width:8px;
  height:8px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  transform:rotate(45deg);
  opacity:.95;
}

/* hover 状态更明显一点 */
.avatar-btn:hover .avatar{
  background:rgba(255,255,255,.26);
}
/* ===== Processing modal (copied from transactions.css) ===== */

.tx-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.tx-modal[aria-hidden="false"]{ display:block; }

.tx-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(11,18,32,0.45);
}

.tx-modal__dialog{
  position: relative;
  width: min(760px, 92vw);
  margin: 14vh auto 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(11,18,32,0.28);
  border: 2px solid rgba(91,42,120,0.90);
  overflow: hidden;
}

.tx-modal__close{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(11,18,32,0.06);
  color: rgba(11,18,32,0.75);
  font-size: 22px;
  cursor: pointer;
}

.tx-modal__panel{ padding: 20px 22px 18px; }

.tx-processing{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px 2px;
}
.tx-spinner{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 4px solid rgba(11,18,32,0.12);
  border-top-color: #5b2a78;
  animation: txspin 0.9s linear infinite;
}
@keyframes txspin { to { transform: rotate(360deg); } }

.tx-processing__title{
  font-weight: 900;
  color:#0b1220;
}
.tx-processing__sub{
  font-size: 12px;
  color: rgba(11,18,32,0.60);
}