:root{
  --bg:#05050f;
  --panel:rgba(20,20,40,.92);
  --a1:#7a00ff;
  --a2:#00eaff;
  --text:#fff;
  --header-h:56px;
  --footer-h:64px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui;
  overflow:hidden;
}

/* =========================
   APP SHELL
========================= */
#app{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at top left, rgba(122,0,255,.25), transparent 40%),
    radial-gradient(circle at bottom right, rgba(0,234,255,.25), transparent 40%),
    var(--bg);
}

/* LOGO WATERMARK */
#app::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("media/logo.png") center/70% no-repeat;
  opacity:.10;
  pointer-events:none;
  z-index:0;
}

/* =========================
   HEADER
========================= */
.header{
  height:var(--header-h);
  display:flex;
  align-items:center;
  padding:0 14px;
  background:linear-gradient(90deg,var(--a1),var(--a2));
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
}

.logo{
  font-weight:900;
  font-size:18px;
}

.nav{
  margin-left:auto;
  display:flex;
  gap:16px;
}

.nav button,
#hamburger{
  background:none;
  border:none;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

/* =========================
   MOBILE MENU
========================= */
#hamburger{
  display:none;
  font-size:22px;
}

.mobile-menu{
  position:absolute;
  top:var(--header-h);
  right:14px;
  width:220px;
  background:var(--panel);
  backdrop-filter:blur(18px);
  padding:10px;
  display:grid;
  gap:8px;
  border-radius:14px;
  z-index:2000;
}

.mobile-menu button{
  padding:12px;
  border-radius:12px;
  border:none;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  color:#fff;
  font-weight:700;
}

/* =========================
   MAIN CONTENT
========================= */
#app-view{
  position:absolute;
  top:var(--header-h);
  left:0;
  right:0;
  bottom:var(--footer-h);
  padding:16px;
  overflow-y:auto;
  z-index:1;
}

/* =========================
   FOOTER NAV
========================= */
.mobile-footer{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:var(--footer-h);
  background:var(--panel);
  backdrop-filter:blur(14px);
  display:none;
  justify-content:space-around;
  align-items:center;
  z-index:1000;
}

.mobile-footer button{
  background:none;
  border:none;
  color:#fff;
  font-weight:800;
  font-size:11px;
}

/* =========================
   LOGIN
========================= */
.login-wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-card{
  width:100%;
  max-width:360px;
  background:linear-gradient(180deg,#1a1a3a,#0b0b1e);
  padding:26px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}

.login-logo img{
  width:90px;
  margin-bottom:12px;
}

.login-title{
  font-size:22px;
  margin-bottom:6px;
}

.login-sub{
  font-size:13px;
  opacity:.8;
  margin-bottom:20px;
}

.login-form input{
  width:100%;
  padding:14px;
  margin-bottom:12px;
  border-radius:14px;
  border:none;
}

.login-form button{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:none;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  color:#fff;
  font-weight:800;
}

/* =========================
   UTIL
========================= */
.hidden{display:none}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){
  .nav{display:none}
  #hamburger{display:block;margin-left:auto}
  .mobile-footer{display:flex}
}

/* =========================
   CRM PWA DASHBOARD (FINAL)
========================= */

.dashboard{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* ---------- HEADER ---------- */
.dash-header{
  padding:18px 16px;
  border-radius:20px;
  background:
    linear-gradient(135deg,
      rgba(122,0,255,.35),
      rgba(0,234,255,.25)
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 22px 45px rgba(0,0,0,.7);
}

/* ---------- CRM CARD GRID ---------- */
.dash-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

/* Tablet */
@media(min-width:768px){
  .dash-stats{
    grid-template-columns:repeat(3,1fr);
  }
}

/* Desktop */
@media(min-width:1024px){
  .dash-stats{
    grid-template-columns:repeat(4,1fr);
  }
}

.stat-card{
  position:relative;
  min-height:110px;
  padding:16px;
  border-radius:20px;

  background:
    linear-gradient(180deg,
      rgba(28,28,55,.98),
      rgba(12,12,28,.98)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 20px 45px rgba(0,0,0,.85);

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  transition:
    transform .18s ease,
    box-shadow .18s ease;

  touch-action:manipulation;
}

.stat-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(135deg,
      rgba(122,0,255,.45),
      rgba(0,234,255,.45)
    );
  opacity:.14;
  pointer-events:none;
}

.stat-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 30px 65px rgba(0,0,0,.95),
    0 0 35px rgba(122,0,255,.45);
}

.stat-card:active{
  transform:scale(.96);
}

/* ---------- CARD TEXT ---------- */
.stat-label{
  font-size:11px;
  letter-spacing:.6px;
  text-transform:uppercase;
  opacity:.65;
}

.stat-value{
  font-size:30px;
  font-weight:900;
  line-height:1;
  background:linear-gradient(90deg,var(--a2),var(--a1));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- CRM TABLE ---------- */
.dash-table-wrap{
  border-radius:22px;
  overflow:hidden;

  background:
    linear-gradient(180deg,
      rgba(20,20,45,.98),
      rgba(10,10,25,.98)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 22px 45px rgba(0,0,0,.85);
}

.dash-table-title{
  padding:16px 18px;
  font-weight:900;
  font-size:15px;
  background:
    linear-gradient(90deg,
      rgba(122,0,255,.25),
      rgba(0,234,255,.15)
    );
  border-bottom:1px solid rgba(255,255,255,.08);
}

.dash-table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.dash-table{
  width:100%;
  border-collapse:collapse;
}

.dash-table thead{
  background:rgba(255,255,255,.04);
}

.dash-table th{
  padding:14px 16px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.7;
}

.dash-table td{
  padding:14px 16px;
  font-size:13px;
  font-weight:600;
}

.dash-table tr{
  border-bottom:1px solid rgba(255,255,255,.06);
}

.dash-table tbody tr:hover{
  background:rgba(122,0,255,.14);
}

/* ---------- BADGES ---------- */
.badge{
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}

.badge.live{
  background:rgba(0,234,255,.18);
  color:var(--a2);
  box-shadow:0 0 14px rgba(0,234,255,.45);
}

/* ---------- APP GRAIN ---------- */
.dashboard::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0;
}

/* =========================
   CRM PWA MESSENGER (STACKED)
========================= */

.messenger-stack{
  position:relative;
  height:100%;
}

/* ---------- SHARED VIEWS ---------- */
.msg-list-view,
.msg-chat-view{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;

  background:
    linear-gradient(180deg,
      rgba(18,18,40,.98),
      rgba(8,8,20,.98)
    );

  border-radius:20px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 20px 45px rgba(0,0,0,.85);
}

.msg-list-view.active,
.msg-chat-view.active{
  display:flex;
}

/* =========================
   LIST VIEW
========================= */

.msg-list-header{
  padding:16px;
  font-weight:900;
  font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.msg-search{
  padding:12px;
}

.msg-search input{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:none;
  background:rgba(255,255,255,.06);
  color:#fff;
}

/* ---------- THREAD LIST ---------- */
.msg-threads{
  flex:1;
  overflow-y:auto;
}

.msg-thread{
  display:flex;
  gap:12px;
  padding:14px;
  cursor:pointer;
  transition:background .15s ease;
}

.msg-thread:hover{
  background:rgba(122,0,255,.14);
}

.msg-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.msg-thread-info{
  flex:1;
}

.msg-name{
  font-weight:800;
  font-size:14px;
}

.msg-preview{
  font-size:12px;
  opacity:.6;
}

/* =========================
   CHAT VIEW
========================= */

.msg-chat-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.msg-back{
  font-size:20px;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
}

.msg-chat-title{
  font-weight:900;
  font-size:15px;
}

.msg-chat-body{
  flex:1;
  padding:18px;
  overflow-y:auto;
}

.msg-placeholder{
  opacity:.5;
}

/* ---------- INPUT ---------- */
.msg-chat-input{
  display:flex;
  gap:10px;
  padding:14px;
  border-top:1px solid rgba(255,255,255,.08);
}

.msg-chat-input input{
  flex:1;
  padding:12px;
  border-radius:14px;
  border:none;
  background:rgba(255,255,255,.06);
  color:#fff;
}

.msg-chat-input button{
  padding:12px 18px;
  border-radius:14px;
  border:none;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  color:#fff;
  font-weight:900;
}

/* =========================
   DESKTOP (OPTIONAL UPGRADE)
========================= */
/*
@media(min-width:1024px){
  .messenger-stack{
    display:grid;
    grid-template-columns:320px 1fr;
  }

  .msg-list-view,
  .msg-chat-view{
    position:relative;
    display:flex;
  }

  .msg-back{
    display:none;
  }
}
*/

//* =========================
   SOCIAL MEDIA PREVIEWS (PWA)
========================= */

.previews{
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* ---------- SECTION ---------- */
.preview-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.preview-title{
  font-size:16px;
  font-weight:900;
}

/* ---------- GRID ---------- */
.preview-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr); /* 🔑 mobile */
  gap:14px;
}

/* tablet */
@media(min-width:768px){
  .preview-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

/* desktop */
@media(min-width:1024px){
  .preview-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

/* ---------- CARD ---------- */
.preview-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;

  background:
    linear-gradient(180deg,
      rgba(26,26,55,.98),
      rgba(12,12,28,.98)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 20px 45px rgba(0,0,0,.85);

  transition:
    transform .18s ease,
    box-shadow .18s ease;

  touch-action:manipulation;
}

.preview-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(135deg,
      rgba(122,0,255,.45),
      rgba(0,234,255,.45)
    );
  opacity:.12;
  pointer-events:none;
}

.preview-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 30px 65px rgba(0,0,0,.95),
    0 0 35px rgba(122,0,255,.45);
}

.preview-card:active{
  transform:scale(.96);
}

/* ---------- THUMB ---------- */
.preview-thumb{
  aspect-ratio:9/16;
  background:#000;
  position:relative;
}

.preview-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* play overlay */
.preview-thumb::after{
  content:"â–¶";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  font-weight:900;
  color:#fff;
  opacity:.75;
  text-shadow:0 10px 30px rgba(0,0,0,.85);
  pointer-events:none;
}

.thumb-placeholder{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.4;
}

/* ---------- META ---------- */
.preview-meta{
  padding:12px;
}

.preview-name{
  font-size:13px;
  font-weight:800;
}

.preview-platform{
  font-size:11px;
  opacity:.6;
}

/* =========================
   FULLSCREEN PREVIEW PLAYER
========================= */

.preview-player{
  position:fixed;
  inset:0;
  z-index:4000;

  background:
    linear-gradient(180deg,
      rgba(5,5,15,.98),
      rgba(0,0,0,.98)
    );

  display:flex;
  flex-direction:column;
}

.preview-player.hidden{
  display:none;
}

/* ---------- PLAYER HEADER ---------- */
.player-header{
  height:56px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  font-weight:900;

  background:
    linear-gradient(90deg,var(--a1),var(--a2));
}

.player-header button{
  background:none;
  border:none;
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

.player-header div{
  font-size:14px;
  font-weight:800;
}

/* ---------- PLAYER BODY ---------- */
.player-body{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.player-body video{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}

/* =========================
   STORE PRODUCT GRID (PWA)
========================= */

.store{
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* ---------- GRID ---------- */
.store-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr); /* 🔑 mobile */
  gap:14px;
}

/* tablet */
@media(min-width:768px){
  .store-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

/* desktop */
@media(min-width:1024px){
  .store-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

/* ---------- CARD ---------- */
.store-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;

  background:
    linear-gradient(180deg,
      rgba(26,26,55,.98),
      rgba(12,12,28,.98)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 20px 45px rgba(0,0,0,.85);

  display:flex;
  flex-direction:column;

  transition:
    transform .18s ease,
    box-shadow .18s ease;

  touch-action:manipulation;
}

.store-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(135deg,
      rgba(122,0,255,.45),
      rgba(0,234,255,.45)
    );
  opacity:.12;
  pointer-events:none;
}

.store-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 30px 65px rgba(0,0,0,.95),
    0 0 35px rgba(122,0,255,.45);
}

.store-card:active{
  transform:scale(.96);
}

/* ---------- THUMB ---------- */
.store-thumb{
  aspect-ratio:1/1;
  background:#000;
}

.store-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.store-thumb-placeholder{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.4;
}

/* ---------- META ---------- */
.store-meta{
  padding:12px;
}

.store-name{
  font-size:14px;
  font-weight:900;
}

.store-price{
  font-size:12px;
  opacity:.7;
}

/* ---------- ACTIONS ---------- */
.store-actions{
  margin-top:auto;
  display:flex;
  gap:10px;
  padding:12px;
}

.store-btn{
  flex:1;
  padding:10px;
  border-radius:14px;
  border:none;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:800;
}

.store-btn.primary{
  background:linear-gradient(135deg,var(--a1),var(--a2));
}

/* =========================
   SETTINGS FORM (PWA)
========================= */

.settings{
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* ---------- FORM ---------- */
.settings-form{
  display:flex;
  flex-direction:column;
  gap:18px;

  background:
    linear-gradient(180deg,
      rgba(22,22,50,.98),
      rgba(10,10,25,.98)
    );

  padding:18px;
  border-radius:22px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 22px 45px rgba(0,0,0,.85);
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.form-group label{
  font-size:13px;
  font-weight:900;
}

.form-group small{
  font-size:11px;
  opacity:.6;
}

/* ---------- INPUTS ---------- */
.settings-form input,
.settings-form textarea{
  padding:14px;
  border-radius:16px;
  border:none;

  background:rgba(255,255,255,.06);
  color:#fff;

  font-size:14px;
}

.settings-form textarea{
  min-height:110px;
  resize:vertical;
}

/* ---------- ACTIONS ---------- */
.form-actions{
  margin-top:10px;
}

.btn{
  width:100%;
  padding:14px;
  border-radius:16px;
  border:none;
  font-weight:900;
  font-size:14px;
}

.btn.primary{
  background:linear-gradient(135deg,var(--a1),var(--a2));
  color:#fff;
}

/* =========================
   BIO PAGE (PWA)
========================= */

.bio-page{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* ---------- BANNER ---------- */
.bio-banner{
  position:relative;
  width:100%;
  height:220px;
  border-radius:22px;
  overflow:hidden;

  background:
    linear-gradient(135deg,
      rgba(122,0,255,.35),
      rgba(0,234,255,.25)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 24px 55px rgba(0,0,0,.85);
}

.bio-banner img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.bio-banner-placeholder{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  opacity:.4;
}

/* ---------- CARD ---------- */
.bio-card{
  padding:20px;
  border-radius:22px;

  background:
    linear-gradient(180deg,
      rgba(22,22,50,.98),
      rgba(10,10,25,.98)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 22px 45px rgba(0,0,0,.85);
}

.bio-name{
  font-size:20px;
  font-weight:900;
  margin-bottom:10px;

  background:linear-gradient(90deg,var(--a2),var(--a1));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.bio-text{
  font-size:14px;
  line-height:1.6;
  opacity:.9;
  white-space:pre-line;
}

/* ---------- MOBILE ---------- */
@media(max-width:768px){
  .bio-banner{
    height:180px;
    border-radius:18px;
  }
}

/* =========================
   BECOME A MEMBER (LANDING)
========================= */

.member-landing{
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* ---------- HERO ---------- */
.member-hero{
  position:relative;
  height:360px;
  border-radius:26px;
  overflow:hidden;

  background:
    linear-gradient(135deg,
      rgba(122,0,255,.6),
      rgba(0,234,255,.45)
    ),
    url("/media/banners/member.jpg") center/cover no-repeat;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 30px 70px rgba(0,0,0,.9);
}

.member-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.15),
      rgba(0,0,0,.65)
    );
}

.member-hero-content{
  position:relative;
  z-index:2;
  height:100%;
  padding:28px;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:12px;
}

.member-hero-content h1{
  font-size:28px;
  font-weight:900;
}

.member-hero-content p{
  font-size:14px;
  opacity:.85;
  max-width:420px;
}

/* ---------- CTA ---------- */
.member-cta{
  margin-top:10px;
  padding:14px 20px;
  border-radius:18px;
  border:none;

  background:linear-gradient(135deg,var(--a1),var(--a2));
  color:#fff;

  font-weight:900;
  font-size:15px;

  width:fit-content;
}

.member-cta.big{
  font-size:16px;
  padding:16px 26px;
}

/* ---------- BENEFITS ---------- */
.member-benefits{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

@media(min-width:768px){
  .member-benefits{
    grid-template-columns:repeat(3,1fr);
  }
}

.benefit-card{
  padding:18px;
  border-radius:22px;

  background:
    linear-gradient(180deg,
      rgba(22,22,50,.98),
      rgba(10,10,25,.98)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 18px 40px rgba(0,0,0,.85);

  display:flex;
  flex-direction:column;
  gap:8px;
}

.benefit-icon{
  font-size:22px;
}

.benefit-title{
  font-weight:900;
  font-size:14px;
}

.benefit-text{
  font-size:12px;
  opacity:.7;
}

/* ---------- FINAL ---------- */
.member-final{
  text-align:center;
  padding:28px;
  border-radius:26px;

  background:
    linear-gradient(135deg,
      rgba(122,0,255,.25),
      rgba(0,234,255,.18)
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 30px 60px rgba(0,0,0,.85);
}

.member-final h2{
  font-size:22px;
  font-weight:900;
  margin-bottom:6px;
}

.member-final p{
  font-size:13px;
  opacity:.8;
}

/* =========================
   FAN SIGNUP (PWA)
========================= */

.signup-page{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.signup-form{
  display:flex;
  flex-direction:column;
  gap:18px;

  background:
    linear-gradient(180deg,
      rgba(22,22,50,.98),
      rgba(10,10,25,.98)
    );

  padding:22px;
  border-radius:24px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 24px 55px rgba(0,0,0,.9);
}

.signup-note{
  text-align:center;
  font-size:13px;
  opacity:.8;
}

.signup-note span{
  color:var(--a2);
  font-weight:900;
  cursor:pointer;
}