/* ==========================================================
   LES AMIGOS — SHOWSTOPPER EDITION
   Cinematic, premium, bold, modern, responsive
   ========================================================== */

:root{
  --ss-bg:#030814;
  --ss-panel:rgba(8,20,46,.74);
  --ss-panel-2:rgba(10,27,62,.82);
  --ss-border:rgba(143,191,255,.11);
  --ss-text:#f6f8ff;
  --ss-muted:#8799b8;
  --ss-cyan:#64e8ff;
  --ss-blue:#5c8dff;
  --ss-violet:#8d67ff;
  --ss-pink:#f264ff;
  --ss-red:#ff5f7a;
  --ss-green:#62e0ac;
  --ss-gold:#ffd77a;
  --ss-radius:24px;
  --ss-shadow:0 30px 100px rgba(0,0,0,.34);
}

html{
  background:var(--ss-bg);
}

body{
  position:relative;
  background:
    radial-gradient(circle at 12% 8%,rgba(121,87,255,.13),transparent 25%),
    radial-gradient(circle at 85% 5%,rgba(84,214,255,.10),transparent 23%),
    radial-gradient(circle at 50% 90%,rgba(255,76,147,.06),transparent 30%),
    linear-gradient(180deg,#020712 0%,#041022 48%,#030814 100%) !important;
  color:var(--ss-text);
}

/* animated aurora */
body::after{
  content:"";
  position:fixed;
  inset:-25%;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%,rgba(135,92,255,.10),transparent 19%),
    radial-gradient(circle at 75% 25%,rgba(72,221,255,.08),transparent 18%),
    radial-gradient(circle at 50% 75%,rgba(255,84,170,.06),transparent 20%);
  filter:blur(24px);
  animation:ssAurora 22s ease-in-out infinite alternate;
}
@keyframes ssAurora{
  0%{transform:translate3d(-2%,0,0) scale(1)}
  50%{transform:translate3d(3%,-2%,0) scale(1.04)}
  100%{transform:translate3d(1%,3%,0) scale(1.08)}
}

/* star grid */
.ss-star-layer{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.48;
  background-image:
    radial-gradient(circle at 20px 30px,rgba(255,255,255,.22) 0 1px,transparent 1.6px),
    radial-gradient(circle at 70px 80px,rgba(125,218,255,.18) 0 1px,transparent 1.5px),
    radial-gradient(circle at 120px 25px,rgba(158,127,255,.16) 0 1px,transparent 1.4px);
  background-size:140px 120px;
  animation:ssStars 40s linear infinite;
}
@keyframes ssStars{to{background-position:140px 120px,70px 60px,280px 0}}

/* cursor spotlight */
.ss-spotlight{
  position:fixed;
  width:520px;height:520px;
  margin-left:-260px;margin-top:-260px;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  opacity:.28;
  background:radial-gradient(circle,rgba(91,140,255,.18),rgba(101,231,255,.06) 35%,transparent 68%);
  filter:blur(12px);
  transition:opacity .2s ease;
}

/* ==========================================================
   NAVIGATION — compact and luxurious
   ========================================================== */
.public-topnav.final-topnav{
  width:min(1500px,calc(100% - 20px))!important;
  min-height:68px!important;
  margin:10px auto!important;
  padding:8px 10px!important;
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  align-items:center!important;
  gap:12px!important;
  border:1px solid rgba(151,200,255,.11)!important;
  border-radius:22px!important;
  background:rgba(4,14,34,.76)!important;
  backdrop-filter:blur(22px) saturate(1.15)!important;
  box-shadow:0 18px 70px rgba(0,0,0,.27)!important;
  overflow:visible!important;
}
.public-brand{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.public-brand-mark,.final-brand-mark{
  width:40px!important;height:40px!important;
  display:grid!important;place-items:center!important;
  border-radius:13px!important;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 20%),
    linear-gradient(135deg,#7e63ff,#4f86ff 55%,#62e8ff)!important;
  box-shadow:0 10px 30px rgba(74,128,255,.24),inset 0 0 0 1px rgba(255,255,255,.13)!important;
}
.public-brand strong{
  letter-spacing:.08em!important;
}
.public-brand small{
  color:#7087aa!important;
}
.public-topnav-tabs,.final-tabs{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:5px!important;
  overflow:visible!important;
}
.public-tab{
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 11px!important;
  border-radius:12px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:#9fb0cb!important;
  font-size:.66rem!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
.public-tab:hover,.public-tab.active{
  color:#fff!important;
  border-color:rgba(132,193,255,.10)!important;
  background:rgba(255,255,255,.035)!important;
}
.public-tab.active{
  box-shadow:inset 0 -2px 0 rgba(99,232,255,.75)!important;
}
.public-topnav-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}

/* More dropdown */
.ss-more-wrap{
  position:relative;
}
.ss-more-btn{
  min-height:38px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:12px;
  border:1px solid rgba(143,191,255,.08);
  background:rgba(255,255,255,.02);
  color:#a9b9d3;
  cursor:pointer;
  font-size:.66rem;
  font-weight:850;
}
.ss-more-menu{
  position:absolute;
  top:46px;
  right:0;
  width:270px;
  display:none;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:9px;
  border-radius:18px;
  border:1px solid rgba(143,191,255,.12);
  background:rgba(4,14,34,.97);
  backdrop-filter:blur(22px);
  box-shadow:0 24px 90px rgba(0,0,0,.45);
  z-index:9999;
}
.ss-more-wrap.open .ss-more-menu{display:grid}
.ss-more-menu a{
  padding:10px;
  border-radius:12px;
  color:#b6c5da;
  text-decoration:none;
  font-size:.61rem;
  border:1px solid transparent;
}
.ss-more-menu a:hover{
  color:#fff;
  border-color:rgba(143,191,255,.08);
  background:rgba(255,255,255,.025);
}

/* ==========================================================
   CARDS / PANELS
   ========================================================== */
.card,.public-card,.omni-card,.admin-panel,.prono-card,.community-match,
.live-card,.achievement-player,.challenge-card,.poll-card,.calendar-card,
.social-section,.profile-side-card,.social-composer{
  border:1px solid var(--ss-border)!important;
  background:
    linear-gradient(180deg,rgba(10,26,58,.78),rgba(5,15,34,.88))!important;
  backdrop-filter:blur(16px)!important;
  box-shadow:0 20px 70px rgba(0,0,0,.20)!important;
}
.ss-tilt{
  transform-style:preserve-3d;
  will-change:transform;
}

/* glass light line */
.card::before,.prono-card::before,.live-card::before,.community-match::before,
.social-section::before,.achievement-player::before,.challenge-card::before,
.poll-card::before,.calendar-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 10%;
  width:80%;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}

/* ==========================================================
   HOME HERO
   ========================================================== */
.ss-home-hero{
  width:min(1500px,calc(100% - 20px));
  margin:14px auto 10px;
  min-height:560px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:30px;
  padding:42px;
  border-radius:34px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(149,195,255,.12);
  background:
    radial-gradient(circle at 15% 20%,rgba(132,89,255,.18),transparent 28%),
    radial-gradient(circle at 85% 18%,rgba(88,222,255,.12),transparent 25%),
    linear-gradient(145deg,rgba(8,23,55,.95),rgba(5,14,34,.98));
  box-shadow:0 42px 140px rgba(0,0,0,.38);
}
.ss-home-hero::after{
  content:"";
  position:absolute;
  width:580px;height:580px;
  right:-230px;top:-260px;
  border-radius:50%;
  border:1px solid rgba(113,172,255,.08);
  box-shadow:
    0 0 0 45px rgba(113,172,255,.025),
    0 0 0 100px rgba(141,91,255,.02);
  animation:ssOrbit 14s linear infinite;
}
@keyframes ssOrbit{to{transform:rotate(360deg)}}
.ss-home-copy{
  position:relative;
  z-index:2;
}
.ss-home-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(99,232,255,.12);
  background:rgba(99,232,255,.025);
  color:#9eeeff;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.13em;
}
.ss-home-kicker i{
  width:7px;height:7px;border-radius:50%;
  background:#65eaff;
  box-shadow:0 0 14px #65eaff;
}
.ss-home-hero h1{
  margin:17px 0 14px;
  max-width:900px;
  font-size:clamp(4rem,7vw,7.8rem);
  line-height:.84;
  letter-spacing:-.078em;
  font-weight:950;
}
.ss-home-hero h1 span{
  background:linear-gradient(135deg,#ffffff 0%,#bfcaff 22%,#936eff 48%,#5d9cff 72%,#66edff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ss-home-hero p{
  max-width:780px;
  margin:0;
  color:#98abc8;
  font-size:1.03rem;
  line-height:1.8;
}
.ss-home-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.ss-primary,.ss-secondary{
  min-height:48px;
  padding:0 17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px;
  text-decoration:none;
  font-weight:900;
  font-size:.72rem;
}
.ss-primary{
  color:#fff;
  background:linear-gradient(135deg,#7f61ff,#4d84ff 55%,#5cddff);
  box-shadow:0 15px 38px rgba(74,128,255,.22);
}
.ss-secondary{
  color:#c6d3e6;
  border:1px solid rgba(143,191,255,.10);
  background:rgba(255,255,255,.025);
}
.ss-visual{
  position:relative;
  z-index:2;
  min-height:420px;
  display:grid;
  place-items:center;
}
.ss-orbital{
  width:min(410px,90%);
  aspect-ratio:1;
  position:relative;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(125,193,255,.08);
  box-shadow:
    inset 0 0 80px rgba(78,130,255,.08),
    0 0 120px rgba(79,130,255,.07);
}
.ss-orbital::before,.ss-orbital::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(132,172,255,.08);
}
.ss-orbital::before{inset:12%;animation:ssRing 12s linear infinite}
.ss-orbital::after{inset:25%;animation:ssRing 8s linear infinite reverse}
@keyframes ssRing{to{transform:rotate(360deg)}}
.ss-center-logo{
  width:150px;height:150px;
  border-radius:40px;
  display:grid;
  place-items:center;
  font-size:4rem;
  background:
    radial-gradient(circle at 28% 24%,rgba(255,255,255,.32),transparent 20%),
    linear-gradient(145deg,#8464ff,#527fff 52%,#63e7ff);
  box-shadow:0 30px 80px rgba(80,130,255,.25),inset 0 0 0 1px rgba(255,255,255,.13);
  animation:ssFloat 5s ease-in-out infinite;
}
@keyframes ssFloat{50%{transform:translateY(-10px) rotate(2deg)}}
.ss-float-pill{
  position:absolute;
  min-width:130px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(143,191,255,.09);
  background:rgba(7,20,47,.78);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(0,0,0,.24);
}
.ss-float-pill strong,.ss-float-pill small{display:block}
.ss-float-pill small{margin-top:3px;color:#748aaa;font-size:.5rem}
.ss-float-pill.one{left:-4%;top:14%}
.ss-float-pill.two{right:-3%;top:26%}
.ss-float-pill.three{left:10%;bottom:7%}
.ss-float-pill.four{right:9%;bottom:10%}

/* showstopper feature rail */
.ss-feature-rail{
  width:min(1500px,calc(100% - 20px));
  margin:10px auto 16px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
}
.ss-feature-rail a{
  min-height:95px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(143,191,255,.08);
  background:linear-gradient(180deg,rgba(9,25,57,.72),rgba(5,15,35,.86));
  color:#eef3ff;
  text-decoration:none;
  transition:.22s ease;
}
.ss-feature-rail a:hover{
  transform:translateY(-3px);
  border-color:rgba(100,232,255,.15);
  box-shadow:0 18px 48px rgba(0,0,0,.22);
}
.ss-feature-rail b{font-size:1.25rem}
.ss-feature-rail strong{font-size:.72rem}
.ss-feature-rail small{color:#7288a8;font-size:.52rem}

/* Section headlines */
.eyebrow{
  color:#75dbff!important;
  letter-spacing:.14em!important;
}

/* ==========================================================
   PAGE HERO UPLIFT
   ========================================================== */
.omni-hero,.pronos-hero,.live-hero,.profile-hero,.social-hero,.admin-hero{
  border-radius:30px!important;
  border-color:rgba(143,191,255,.12)!important;
  background:
    radial-gradient(circle at 12% 5%,rgba(127,92,255,.14),transparent 28%),
    radial-gradient(circle at 88% 12%,rgba(91,223,255,.08),transparent 24%),
    linear-gradient(145deg,rgba(8,24,56,.96),rgba(5,15,35,.98))!important;
  box-shadow:0 35px 120px rgba(0,0,0,.32)!important;
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn.primary,.public-cta-btn{
  border:none!important;
  color:#fff!important;
  background:linear-gradient(135deg,#7e61ff,#4c84ff 55%,#5de4ff)!important;
  box-shadow:0 12px 30px rgba(78,129,255,.19)!important;
}
.btn:hover,.public-cta-btn:hover,.public-ghost-btn:hover{
  filter:brightness(1.08);
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media(max-width:1080px){
  .public-topnav.final-topnav{
    grid-template-columns:auto 1fr!important;
  }
  .public-topnav-actions{display:none!important}
  .ss-feature-rail{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .public-topnav.final-topnav{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:60px!important;
  }
  .public-topnav-tabs,.final-tabs{
    display:none!important;
  }
  .ss-mobile-menu-btn{
    display:inline-flex!important;
  }
  .ss-home-hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:24px 18px;
    border-radius:24px;
  }
  .ss-home-hero h1{
    font-size:clamp(3.3rem,15vw,5.2rem);
  }
  .ss-visual{
    min-height:330px;
  }
  .ss-orbital{width:300px}
  .ss-center-logo{width:120px;height:120px;border-radius:34px;font-size:3.2rem}
  .ss-float-pill{min-width:110px;padding:8px 10px}
  .ss-feature-rail{grid-template-columns:repeat(2,1fr);width:calc(100% - 14px)}
}
@media(max-width:470px){
  .ss-feature-rail{grid-template-columns:1fr 1fr}
  .ss-home-actions a{width:100%}
}

/* Mobile full menu */
.ss-mobile-menu-btn{
  display:none;
  width:42px;height:42px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(143,191,255,.10);
  background:rgba(255,255,255,.025);
  color:#fff;
  cursor:pointer;
}
.ss-mobile-overlay{
  position:fixed;
  inset:0;
  z-index:100001;
  display:none;
  padding:78px 12px 90px;
  background:rgba(2,7,18,.96);
  backdrop-filter:blur(18px);
}
.ss-mobile-overlay.open{display:block}
.ss-mobile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.ss-mobile-grid a{
  min-height:70px;
  padding:13px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:18px;
  border:1px solid rgba(143,191,255,.08);
  background:rgba(255,255,255,.02);
  color:#eef3ff;
  text-decoration:none;
}
.ss-mobile-grid a small{color:#7489a7;margin-top:3px}
.ss-mobile-close{
  position:absolute;
  top:18px;right:18px;
  width:42px;height:42px;
  border-radius:12px;
  border:1px solid rgba(143,191,255,.10);
  background:rgba(255,255,255,.03);
  color:#fff;
  cursor:pointer;
}

@media(prefers-reduced-motion:reduce){
  body::after,.ss-star-layer,.ss-orbital::before,.ss-orbital::after,.ss-center-logo,.ss-home-hero::after{
    animation:none!important;
  }
}


.ss-footer{
  width:min(1500px,calc(100% - 20px));
  margin:30px auto 18px;
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  border-radius:20px;
  border:1px solid rgba(143,191,255,.08);
  background:rgba(5,15,34,.58);
  color:#9fb0ca;
}
.ss-footer strong,.ss-footer small{display:block}
.ss-footer small{margin-top:3px;color:#667d9f}
.ss-footer nav{display:flex;gap:12px;flex-wrap:wrap}
.ss-footer a{color:#8397b5;text-decoration:none;font-size:.62rem}
.ss-footer a:hover{color:#fff}
@media(max-width:650px){.ss-footer{flex-direction:column;align-items:flex-start}}


/* ==========================================================
   PLAYER OF THE DAY
   ========================================================== */
.ss-player-day{
  width:min(1500px,calc(100% - 20px));
  margin:10px auto 18px;
  min-height:125px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  padding:20px 24px;
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,215,122,.16);
  background:
    radial-gradient(circle at 0 50%,rgba(255,215,122,.11),transparent 28%),
    radial-gradient(circle at 100% 0,rgba(123,92,255,.09),transparent 28%),
    linear-gradient(145deg,rgba(15,26,48,.94),rgba(6,16,37,.97));
  box-shadow:0 24px 80px rgba(0,0,0,.28),0 0 50px rgba(255,215,122,.035);
}
.ss-player-day::after{
  content:"";
  position:absolute;
  width:260px;height:260px;
  right:-110px;top:-150px;
  border-radius:50%;
  border:1px solid rgba(255,215,122,.08);
  box-shadow:0 0 0 35px rgba(255,215,122,.018),0 0 0 70px rgba(255,215,122,.01);
  animation:ssPlayerDayOrbit 12s linear infinite;
}
@keyframes ssPlayerDayOrbit{to{transform:rotate(360deg)}}
.ss-player-day-crown{
  width:72px;height:72px;
  display:grid;
  place-items:center;
  border-radius:20px;
  font-size:2rem;
  background:linear-gradient(145deg,rgba(255,217,127,.16),rgba(255,255,255,.025));
  border:1px solid rgba(255,215,122,.15);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 14px 35px rgba(0,0,0,.2);
  animation:ssCrownFloat 3.6s ease-in-out infinite;
}
@keyframes ssCrownFloat{50%{transform:translateY(-4px) rotate(-2deg)}}
.ss-player-day-copy{position:relative;z-index:2}
.ss-player-day-copy .eyebrow{color:#ffd77a!important}
.ss-player-day-copy h2{
  margin:5px 0 4px;
  font-size:clamp(1.8rem,3vw,3rem);
  letter-spacing:-.045em;
}
.ss-player-day-copy p{margin:0;color:#8498b7}
.ss-player-day-score{
  position:relative;
  z-index:2;
  min-width:150px;
  text-align:right;
}
.ss-player-day-score small,.ss-player-day-score strong{display:block}
.ss-player-day-score small{
  color:#967f4d;
  font-size:.5rem;
  font-weight:900;
  letter-spacing:.12em
}
.ss-player-day-score strong{
  margin-top:4px;
  font-size:2.4rem;
  color:#ffd77a;
  letter-spacing:-.06em
}
.ss-player-day.is-live{
  border-color:rgba(255,215,122,.23);
}
.ss-player-day.is-live .ss-player-day-crown{
  box-shadow:0 0 30px rgba(255,215,122,.10),inset 0 0 0 1px rgba(255,255,255,.04);
}
@media(max-width:650px){
  .ss-player-day{
    width:calc(100% - 14px);
    grid-template-columns:auto 1fr;
    padding:16px;
  }
  .ss-player-day-score{
    grid-column:1/-1;
    text-align:left;
    display:flex;
    justify-content:space-between;
    align-items:end;
  }
  .ss-player-day-crown{width:58px;height:58px;border-radius:17px}
}


/* ==========================================================
   FINAL CLEAN — restrained, consistent navigation
   ========================================================== */
@media(min-width:1081px){
  .public-topnav.final-topnav{
    grid-template-columns:auto 1fr auto!important;
  }
  .public-topnav-tabs,.final-tabs{
    flex-wrap:nowrap!important;
    overflow:visible!important;
  }
  .public-topnav-actions{
    display:flex!important;
  }
}

.ss-auth-login,.ss-auth-signup{
  min-height:38px!important;
  padding:0 12px!important;
  border-radius:12px!important;
  white-space:nowrap!important;
  font-size:.64rem!important;
  font-weight:900!important;
}
.ss-auth-login{
  display:inline-flex!important;
  align-items:center!important;
  border:1px solid rgba(143,191,255,.10)!important;
  background:rgba(255,255,255,.02)!important;
  color:#b9c7dc!important;
  text-decoration:none!important;
}
.ss-auth-signup{
  display:inline-flex!important;
  align-items:center!important;
  border:0!important;
  background:linear-gradient(135deg,#7f61ff,#4d84ff 55%,#5de4ff)!important;
  color:#fff!important;
  text-decoration:none!important;
  box-shadow:0 12px 28px rgba(74,128,255,.17)!important;
}

.ss-feature-rail-clean{
  grid-template-columns:repeat(5,1fr)!important;
}
.ss-more-menu{
  width:230px!important;
  grid-template-columns:1fr!important;
}

@media(max-width:1080px) and (min-width:761px){
  .public-topnav.final-topnav{
    grid-template-columns:auto 1fr!important;
  }
  .public-topnav-actions{
    grid-column:1/-1!important;
    justify-self:center!important;
    display:flex!important;
    margin-top:2px!important;
  }
}

@media(max-width:760px){
  .public-topnav-actions{
    display:none!important;
  }
  .ss-feature-rail-clean{
    grid-template-columns:1fr 1fr!important;
  }
}

.champions-source-badge{
  position:fixed;
  left:12px;
  bottom:12px;
  z-index:99950;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(143,191,255,.09);
  background:rgba(5,15,34,.90);
  color:#8197b6;
  font-size:.52rem;
  font-weight:850;
  backdrop-filter:blur(14px);
  pointer-events:none;
}
@media(max-width:760px){
  .champions-source-badge{bottom:82px}
}

.privacy-pronos-banner{
  max-width:1180px;
  margin:14px auto 10px;
  padding:10px 14px;
  border:1px solid rgba(145,180,255,.12);
  border-radius:14px;
  background:rgba(9,18,40,.78);
  color:#b8c8df;
  font-size:.72rem;
  font-weight:800;
  line-height:1.45;
  backdrop-filter:blur(12px);
}