/* The design layer shared by the whole site: the back office look (plum
   gradients, layered cards, glow buttons) for the public pages and the member
   portal too. Loaded after style.css on every page. Same one sans, same tokens;
   this layer adds depth, a chapter-purple hero, and motion. Every animation
   switches off under prefers-reduced-motion. */

:root{
  --ease:cubic-bezier(.2,.75,.15,1);
  --plum-0:#140a33;
  --plum-1:#22105a;
  --plum-2:#3b1f8c;
  --plum-3:#6a4bd6;
  --glow:rgba(106,75,214,.28);
  --card-shadow:0 1px 0 rgba(17,12,40,.04),0 1px 2px rgba(17,12,40,.04),0 12px 32px -18px rgba(34,16,90,.18);
  --card-shadow-hi:0 1px 0 rgba(17,12,40,.04),0 2px 6px rgba(17,12,40,.05),0 28px 48px -24px rgba(34,16,90,.32);
  --hair:rgba(23,16,52,.08);
}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(200%)}}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-4%,0) scale(1.06)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(230,205,122,.55)}70%{box-shadow:0 0 0 7px rgba(230,205,122,0)}}

.num{font-variant-numeric:tabular-nums}

/* ================= member portal ================= */
body:has(main.me){background:
  radial-gradient(1200px 520px at 85% -10%,rgba(106,75,214,.10),transparent 60%),
  radial-gradient(900px 480px at -10% 0%,rgba(230,205,122,.10),transparent 55%),
  #faf9fc}
main.me{padding-top:var(--s7)}

/* sign in: one floating card */
main.me #pub,main.me #gate{max-width:520px;margin:2vh auto 0;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--hair);border-radius:28px;padding:44px 40px;box-shadow:var(--card-shadow-hi);animation:rise .7s var(--ease) both}
main.me #pub h1,main.me #gate h1{font-size:clamp(2rem,4vw,2.6rem);letter-spacing:-.035em}
main.me #pub .lead{font-size:1.02rem;color:var(--muted)}
main.me .signin{max-width:none}
main.me #pub button[type=submit]{width:100%;padding:15px 22px;font-size:15px;background:linear-gradient(135deg,var(--plum-2),var(--plum-3));border:0;box-shadow:0 14px 28px -14px var(--glow)}
main.me #pub button[type=submit]:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* hero */
.me-head{position:relative;overflow:hidden;isolation:isolate;color:#fff;border-radius:30px;padding:44px 44px 40px;margin-bottom:var(--s5);
  background:linear-gradient(135deg,var(--plum-0) 0%,var(--plum-1) 38%,var(--plum-2) 75%,#4d2fb0 100%);
  box-shadow:0 30px 60px -30px rgba(34,16,90,.55);animation:rise .7s var(--ease) both}
.me-head::before,.me-head::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);pointer-events:none}
.me-head::before{width:420px;height:420px;right:-120px;top:-180px;background:radial-gradient(circle,rgba(150,120,255,.55),transparent 65%);animation:drift 14s ease-in-out infinite}
.me-head::after{width:300px;height:300px;left:-80px;bottom:-200px;background:radial-gradient(circle,rgba(230,205,122,.28),transparent 65%);animation:drift 18s ease-in-out infinite reverse}
.me-head h1{color:#fff;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.04em;margin:8px 0 8px}
.me-head .eyebrow{color:var(--gold-soft)!important;display:inline-flex;align-items:center;gap:8px}
.me-head .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-soft);animation:pulse 2.4s infinite}
.me-head .lead{color:rgba(255,255,255,.72);margin:0}
.me-head .btn{background:#fff;color:var(--plum-1);border-color:#fff}
.me-head .btn:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--plum-0)}
.me-head .btn-outline{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.me-head .btn-outline:hover{background:#fff;color:var(--plum-1);border-color:#fff}

/* tabs: segmented control with a sliding thumb */
.paytabs{position:relative;background:rgba(255,255,255,.8);border:1px solid var(--hair);box-shadow:var(--card-shadow);backdrop-filter:blur(10px);margin-bottom:var(--s5)}
.paytabs::before{content:"";position:absolute;top:4px;bottom:4px;left:var(--tx,4px);width:var(--tw,0);border-radius:999px;background:linear-gradient(135deg,var(--plum-2),var(--plum-3));box-shadow:0 8px 18px -8px var(--glow);transition:left .45s var(--ease),width .45s var(--ease)}
.paytabs.ready button.on{background:transparent}
.paytabs button{position:relative;z-index:1;font-weight:600;transition:color .3s}
.paytabs button.on{color:#fff}

/* cards */
.me .box,.me[data-tab] .paysec{border:1px solid var(--hair);border-radius:24px;background:rgba(255,255,255,.92);box-shadow:var(--card-shadow);transition:box-shadow .35s var(--ease),transform .35s var(--ease);animation:rise .6s var(--ease) both}
.me .box:hover{box-shadow:var(--card-shadow-hi);transform:translateY(-2px)}
.me .box{padding:30px 32px}
.me .box h2{font-size:clamp(2.2rem,4vw,2.9rem);letter-spacing:-.045em;font-weight:800;font-variant-numeric:tabular-nums;margin:6px 0 4px}
.me .box .eyebrow{font-size:11.5px;letter-spacing:.16em;color:var(--plum-2)}
.me-grid>*:nth-child(2),#dash>.box:nth-of-type(2){animation-delay:.06s}
#dash>.box:nth-of-type(3){animation-delay:.12s}
#dash>.box:nth-of-type(4){animation-delay:.18s}
.me-table td{padding:12px 10px 12px 0;border-top:1px solid var(--line-soft);transition:background .2s}
.me-table tr:hover td{background:rgba(106,75,214,.035)}
.me[data-tab] .paysec.t-bill{padding:30px 32px;margin-bottom:var(--s4)}
.me #payh{font-size:1.6rem;letter-spacing:-.03em;margin-bottom:var(--s4)}
.me #f button[type=submit]{background:linear-gradient(135deg,var(--plum-2),var(--plum-3));border:0;padding:15px 26px;box-shadow:0 14px 28px -14px var(--glow)}

/* points bar */
.pt-bar{height:10px;background:#efecf7;position:relative}
.pt-bar div{background:linear-gradient(90deg,var(--plum-2),var(--plum-3),var(--gold-soft));position:relative;overflow:hidden;transition:width 1.2s var(--ease)}
.pt-bar div::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 2.6s ease-in-out infinite}

/* notifications */
.update{transition:background .25s;border-radius:12px}
.update.unread{border-left:0;padding-left:16px;background:linear-gradient(90deg,rgba(106,75,214,.08),transparent 70%);box-shadow:inset 3px 0 0 var(--plum-3)}

.tag{letter-spacing:.02em;padding:4px 11px}

@media(max-width:760px){
  main.me{padding-top:var(--s5)}
  .me-head{padding:30px 22px 26px;border-radius:24px}
  .me .box,.me[data-tab] .paysec.t-bill{padding:22px 20px;border-radius:20px}
  main.me #pub,main.me #gate{padding:32px 22px;border-radius:24px}
  .paytabs{display:flex;width:100%}
  .paytabs button{flex:1}
}

/* ================= back office ================= */
body.admin{background:radial-gradient(1000px 500px at 100% -10%,rgba(106,75,214,.08),transparent 60%),#f7f6fb}

.sb{background:linear-gradient(180deg,var(--plum-0),#1b0d45 55%,var(--plum-1));border-right:0;color:#fff;box-shadow:12px 0 40px -30px rgba(20,10,51,.8)}
.sb .brand img{filter:brightness(0) invert(1)}
.sb .grp{color:rgba(255,255,255,.38)}
.sb button.nav{position:relative;color:rgba(255,255,255,.72);transition:background .25s,color .25s,padding .25s var(--ease)}
.sb button.nav:hover{background:rgba(255,255,255,.07);color:#fff}
.sb button.nav.active{background:linear-gradient(90deg,rgba(150,120,255,.32),rgba(150,120,255,.08));color:#fff;padding-left:16px}
.sb button.nav.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--gold-soft);box-shadow:0 0 12px var(--gold-soft)}
.sb button.nav .n{background:var(--gold-soft);color:var(--plum-0)}
.sb .who{border-top-color:rgba(255,255,255,.1)}
.sb .who small,.sb .who a[href="/"]{color:rgba(255,255,255,.5)!important}
.sb .who a{color:#ffb4b4}
.sb .sbtoggle{color:#fff;border-color:rgba(255,255,255,.3)}

.pg{padding:34px 42px 72px}
.pg>section[data-p]>*{animation:rise .5s var(--ease) both}
.pg>section[data-p]>*:nth-child(2){animation-delay:.04s}
.pg>section[data-p]>*:nth-child(3){animation-delay:.08s}
.pg>section[data-p]>*:nth-child(4){animation-delay:.12s}
.pg>section[data-p]>*:nth-child(n+5){animation-delay:.16s}
.ph h1{font-size:34px;letter-spacing:-.04em}

.shell .card,details.add,.shell .box{border:1px solid var(--hair);border-radius:18px;box-shadow:var(--card-shadow);transition:box-shadow .3s var(--ease)}
.shell .card:hover{box-shadow:var(--card-shadow-hi)}
.shell .card{padding:20px}
details.add[open]{animation:rise .35s var(--ease) both}

.shell .stats{gap:14px}
.shell .stat{position:relative;overflow:hidden;border:1px solid var(--hair);border-radius:18px;background:#fff;box-shadow:var(--card-shadow);padding:20px 22px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.shell .stat::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(106,75,214,.14),transparent 70%)}
.shell .stat:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hi)}
.shell .stat b{font-size:2rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,var(--plum-1),var(--plum-3));-webkit-background-clip:text;background-clip:text;color:transparent}

.shell table tr{transition:background .2s}
.shell table tbody tr:hover,.shell table tr:hover td{background:rgba(106,75,214,.035)}
.shell button:not(.nav):not(.sm),.shell .btn:not(.sm){background:linear-gradient(135deg,var(--plum-2),var(--plum-3));border:0;box-shadow:0 10px 22px -12px var(--glow)}

/* Mail group tabs wrap instead of pushing the page sideways on a phone */
#mailtabs{flex-wrap:wrap;border-radius:18px}
#mailtabs button{flex:0 1 auto}

/* tab pills stay pills, whatever the button rules above say */
.shell .paytabs button{background:transparent!important;box-shadow:none!important;color:var(--ink-2)!important;border:0}
.shell .paytabs button.on{color:#fff!important}

/* back office sign in */
#loginwrap{min-height:100vh;max-width:none;width:100%;margin:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--plum-0),var(--plum-2));padding:24px}
#loginwrap #login{width:min(460px,100%);background:#fff;border-radius:28px;padding:44px 40px;box-shadow:0 40px 80px -30px rgba(0,0,0,.55);animation:rise .7s var(--ease) both}
body.admin:has(#loginwrap[style*="none"]) #loginwrap{display:none}

@media(max-width:900px){
  .pg{padding:20px 16px 60px}
  .ph h1{font-size:26px}
  .sb{box-shadow:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ================= public site ================= */
/* Same language as the back office: plum depth, soft layered cards, glow. */
body:not(.admin):not(:has(main.me)){background:radial-gradient(1100px 520px at 100% -8%,rgba(106,75,214,.07),transparent 60%),#fff}
body:not(.admin) section.soft,body:not(.admin) .section.soft{background:linear-gradient(180deg,#f7f5fc,#fbfaff)}
body:not(.admin) .card{border-color:var(--hair);border-radius:22px;box-shadow:var(--card-shadow);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
body:not(.admin) .card:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hi)}
body:not(.admin):not(:has(main.me)) .btn:not(.ghost):not(.btn-outline),body:not(.admin):not(:has(main.me)) .nav-cta,body:not(.admin):not(:has(main.me)) main button[type=submit]{background:linear-gradient(135deg,var(--plum-2),var(--plum-3));border-color:transparent;box-shadow:0 14px 28px -14px var(--glow)}
body:not(.admin):not(:has(main.me)) .btn:not(.ghost):not(.btn-outline):hover,body:not(.admin):not(:has(main.me)) .nav-cta:hover,body:not(.admin):not(:has(main.me)) main button[type=submit]:hover{filter:brightness(1.08);background:linear-gradient(135deg,var(--plum-2),var(--plum-3))}
body:not(.admin) nav .links a.active:not(.nav-cta){background:var(--purple-wash);color:var(--plum-2)}
body:not(.admin) nav .links a.nav-cta,body:not(.admin) nav .links a.nav-cta.active{color:#fff}
body:not(.admin) .eyebrow{letter-spacing:.16em;color:var(--plum-2)}
body:not(.admin) .stat b,body:not(.admin) .stat .figure{background:linear-gradient(135deg,var(--plum-1),var(--plum-3));-webkit-background-clip:text;background-clip:text;color:transparent}
body:not(.admin) .band,body:not(.admin) .cta{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,var(--plum-0) 0%,var(--plum-1) 45%,var(--plum-2) 100%);box-shadow:0 30px 60px -30px rgba(34,16,90,.55)}
body:not(.admin) .band::before,body:not(.admin) .cta::before{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-140px;top:-200px;border-radius:50%;filter:blur(40px);background:radial-gradient(circle,rgba(150,120,255,.5),transparent 65%);animation:drift 14s ease-in-out infinite;pointer-events:none}
body:not(.admin) .band p,body:not(.admin) .band .caption,body:not(.admin) .cta p{color:rgba(255,255,255,.72)}
body:not(.admin) .cta .btn{background:#fff;color:var(--plum-1);box-shadow:none}
body:not(.admin) .cta .btn:hover{background:var(--gold-soft);color:var(--plum-0);filter:none}
body:not(.admin) footer{background:linear-gradient(180deg,var(--plum-0),#0d0624)}
body:not(.admin) input:focus,body:not(.admin) select:focus,body:not(.admin) textarea:focus{border-color:var(--plum-3);box-shadow:0 0 0 4px rgba(106,75,214,.14)}
body:not(.admin):not(:has(main.me)) main form:not(.signin):not(.inline){background:rgba(255,255,255,.9);border:1px solid var(--hair);border-radius:24px;padding:28px;box-shadow:var(--card-shadow)}