/* EVOLUTION PHONE HUB — BLACK GLASS + GREEN ACCENTS v14 */

:root{
  --bg:#000000 !important;
  --bg2:#050505 !important;
  --panel:rgba(7,7,7,.97) !important;
  --border:rgba(255,255,255,.10) !important;
  --text:#f5f7f5 !important;
  --muted:#969b96 !important;
  --purple:#39ff14 !important;
  --purple2:#76ff5c !important;
  --green:#39ff14 !important;
  --danger:#ff6b7a !important;
  --shadow:0 18px 60px rgba(0,0,0,.7) !important;
  color-scheme:dark;
}

html,
body{
  background:#000 !important;
  color:#f5f7f5 !important;
}

body{
  background:
    radial-gradient(circle at 50% -10%,rgba(57,255,20,.055),transparent 28%),
    linear-gradient(180deg,#000 0%,#050505 50%,#000 100%) !important;
}

body::before,
body::after,
.ambient,
.ambient-one,
.ambient-two{
  opacity:0 !important;
  display:none !important;
  background:none !important;
  filter:none !important;
}

.glass,
.auth-card,
.dialog-card,
.site-card,
.active-user-card,
.user-row,
.invite-result,
.active-stat,
.search-box,
.account-section,
.panel{
  background:rgba(6,6,6,.97) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 14px 38px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter:blur(16px) saturate(112%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(112%) !important;
}

.site-card:hover,
.active-user-card:hover{
  background:rgba(12,12,12,.99) !important;
  border-color:rgba(57,255,20,.28) !important;
}

.brand-mark{
  background:#050505 !important;
  background-image:none !important;
  border:2px solid rgba(57,255,20,.72) !important;
  box-shadow:
    0 0 0 5px rgba(57,255,20,.04),
    0 0 24px rgba(57,255,20,.20) !important;
}

.brand-mark span{
  color:#f7fff5 !important;
  text-shadow:0 0 10px rgba(57,255,20,.28) !important;
}

.eyebrow{
  color:#76ff5c !important;
}

.primary-btn{
  background:linear-gradient(135deg,#163c10,#245f1b) !important;
  color:#f6fff4 !important;
  border:1px solid rgba(57,255,20,.34) !important;
  box-shadow:0 8px 22px rgba(57,255,20,.10) !important;
}

.primary-btn:hover{
  background:linear-gradient(135deg,#1d4e16,#2f7624) !important;
  border-color:rgba(57,255,20,.55) !important;
}

.open-btn,
.open-btn.app-launch{
  background:#0c160a !important;
  background-image:none !important;
  color:#dfffd9 !important;
  border:1px solid rgba(57,255,20,.26) !important;
  box-shadow:none !important;
}

.open-btn:hover,
.open-btn.app-launch:hover{
  background:#142111 !important;
  border-color:rgba(57,255,20,.48) !important;
}

.secondary-btn,
.icon-btn,
.details-btn,
.favourite-btn,
.edit-btn{
  background:#090909 !important;
  background-image:none !important;
  color:#e8ebe8 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}

.secondary-btn:hover,
.icon-btn:hover,
.details-btn:hover,
.edit-btn:hover{
  border-color:rgba(57,255,20,.26) !important;
  color:#dfffd9 !important;
}

.favourite-btn{
  color:#76ff5c !important;
}

.danger-btn{
  background:#16080b !important;
  border-color:rgba(255,107,122,.32) !important;
}

.search-box,
input,
textarea,
select,
.form-select,
.admin-select,
.auth-card input,
.dialog-card input,
.dialog-card textarea{
  background:#050505 !important;
  background-image:none !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:none !important;
}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(57,255,20,.52) !important;
  box-shadow:0 0 0 3px rgba(57,255,20,.07) !important;
}

input::placeholder,
textarea::placeholder{
  color:#707670 !important;
}

.form-select option,
.admin-select option,
select option{
  background:#080808 !important;
  color:#fff !important;
}

.category-chip,
.tag,
.pill,
.site-category{
  background:#0b0b0b !important;
  background-image:none !important;
  color:#dfe4df !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:none !important;
}

.category-chip.active{
  background:#10210d !important;
  color:#dfffd9 !important;
  border-color:rgba(57,255,20,.42) !important;
}

.site-icon{
  background:#090909 !important;
  border:1px solid rgba(57,255,20,.10) !important;
  box-shadow:none !important;
}

.site-name,
h1,h2,h3,h4,
.active-user-name{
  color:#fff !important;
}

.site-description,
.active-user-meta,
.active-user-state,
small,
footer,
.muted{
  color:#969b96 !important;
}

.active-dot.online{
  background:#39ff14 !important;
  box-shadow:0 0 12px rgba(57,255,20,.62) !important;
}

.active-stat strong,
#onlineUsersCount,
#recentUsersCount{
  color:#76ff5c !important;
}

.invite-result{
  background:#071006 !important;
  border-color:rgba(57,255,20,.20) !important;
}

dialog::backdrop{
  background:rgba(0,0,0,.84) !important;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
}

/* Remove any leftover purple/gradient styling */
[class*="purple"],
[class*="glow"]{
  box-shadow:none !important;
}

/* PWA / browser chrome */
body,
html{
  accent-color:#39ff14 !important;
}

::selection{
  background:rgba(57,255,20,.28);
  color:#fff;
}


/* LARGER FAVICON / APP ARTWORK — v15 */
.site-icon{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  border-radius:12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  font-size:1.45rem !important;
}

.site-icon img{
  width:40px !important;
  height:40px !important;
  max-width:40px !important;
  max-height:40px !important;
  object-fit:contain !important;
  border-radius:9px !important;
}

.card-top{
  align-items:center !important;
}


/* IN-APP PWA UPDATE — v16 */
#updateAppBtn{
  border-color:rgba(57,255,20,.18) !important;
}

#updateAppBtn:hover{
  border-color:rgba(57,255,20,.42) !important;
  color:#dfffd9 !important;
}

#updateAppBtn.updating{
  opacity:.75;
  pointer-events:none;
}

.update-toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:99999;
  max-width:min(92vw,420px);
  padding:11px 14px;
  border-radius:13px;
  background:rgba(5,10,5,.97);
  color:#efffee;
  border:1px solid rgba(57,255,20,.26);
  box-shadow:0 14px 36px rgba(0,0,0,.58);
  font-size:.82rem;
  text-align:center;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.update-toast.error{
  background:rgba(18,5,8,.97);
  border-color:rgba(255,107,122,.34);
}

@media(max-width:620px){
  #updateAppBtn{
    font-size:.72rem;
    padding-inline:9px;
  }
}


/* CARD TORCH GLOW + BIGGER FAVICONS — v17 */
.site-card{
  position:relative !important;
  overflow:hidden !important;
  background:rgba(8,8,8,.98) !important;
  border:1px solid rgba(57,255,20,.14) !important;
  box-shadow:
    0 0 0 1px rgba(57,255,20,.03),
    0 12px 30px rgba(0,0,0,.72),
    0 0 22px rgba(57,255,20,.09),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.site-card::before{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  background:
    radial-gradient(140px 60px at 18% 10%, rgba(255,255,255,.12), rgba(255,255,255,.05) 32%, rgba(255,255,255,0) 72%),
    radial-gradient(220px 90px at 12% -4%, rgba(57,255,20,.12), rgba(57,255,20,.05) 35%, rgba(57,255,20,0) 72%) !important;
  mix-blend-mode:screen !important;
  opacity:1 !important;
}

.site-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 18px 24px rgba(255,255,255,.02) !important;
}

.site-card:hover{
  border-color:rgba(57,255,20,.30) !important;
  box-shadow:
    0 0 0 1px rgba(57,255,20,.07),
    0 16px 36px rgba(0,0,0,.78),
    0 0 30px rgba(57,255,20,.16),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.site-card > *{
  position:relative !important;
  z-index:1 !important;
}

.site-icon{
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  border-radius:14px !important;
  background:#0b0b0b !important;
  border:1px solid rgba(57,255,20,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 14px rgba(57,255,20,.07) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  font-size:1.65rem !important;
}

.site-icon img{
  width:48px !important;
  height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  object-fit:contain !important;
  border-radius:11px !important;
}

.card-top{
  align-items:center !important;
  gap:9px !important;
}

.site-name{
  margin-top:2px !important;
}

@media(max-width:620px){
  .site-card{
    box-shadow:
      0 0 0 1px rgba(57,255,20,.03),
      0 10px 24px rgba(0,0,0,.72),
      0 0 16px rgba(57,255,20,.08),
      inset 0 1px 0 rgba(255,255,255,.03) !important;
  }

  .site-card::before{
    background:
      radial-gradient(110px 52px at 16% 9%, rgba(255,255,255,.11), rgba(255,255,255,.04) 34%, rgba(255,255,255,0) 72%),
      radial-gradient(170px 78px at 12% -6%, rgba(57,255,20,.11), rgba(57,255,20,.04) 36%, rgba(57,255,20,0) 72%) !important;
  }

  .site-icon{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
  }

  .site-icon img{
    width:46px !important;
    height:46px !important;
    max-width:46px !important;
    max-height:46px !important;
  }
}


/* TAP-SELECTED CARD GLOW — v18 */
.site-card.selected{
  border-color:rgba(57,255,20,.70) !important;
  background:rgba(11,14,10,.995) !important;
  box-shadow:
    0 0 0 1px rgba(57,255,20,.20),
    0 18px 38px rgba(0,0,0,.82),
    0 0 36px rgba(57,255,20,.38),
    0 0 72px rgba(57,255,20,.17),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  transform:translateY(-1px) scale(1.008) !important;
}

.site-card.selected::before{
  background:
    radial-gradient(180px 78px at 20% 8%, rgba(255,255,255,.21), rgba(255,255,255,.09) 30%, rgba(255,255,255,0) 72%),
    radial-gradient(270px 115px at 13% -5%, rgba(57,255,20,.30), rgba(57,255,20,.12) 36%, rgba(57,255,20,0) 74%) !important;
  opacity:1 !important;
}

.site-card.selected .site-icon{
  border-color:rgba(57,255,20,.52) !important;
  box-shadow:
    0 0 20px rgba(57,255,20,.22),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.site-card{
  transition:
    box-shadow .16s ease,
    border-color .16s ease,
    transform .16s ease,
    background .16s ease !important;
}

@media(max-width:620px){
  .site-card.selected{
    box-shadow:
      0 0 0 1px rgba(57,255,20,.18),
      0 14px 30px rgba(0,0,0,.82),
      0 0 28px rgba(57,255,20,.34),
      0 0 50px rgba(57,255,20,.14),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }
}