style_bsv7d651.css

:root{
  --bg:#03060a;
  --text:#eafff2;
  --muted:rgba(208,255,230,.74);

  --accent:#29ff7a;   
  --accent2:#12d85a;       
  --glass: rgba(10, 24, 18, .40);
  --glass2: rgba(6, 16, 12, .55);
  --line: rgba(41,255,122,.26);

  --glow: 0 0 16px rgba(41,255,122,.55),
          0 0 44px rgba(41,255,122,.22),
          0 0 88px rgba(41,255,122,.12);

  --glowSoft: 0 0 12px rgba(41,255,122,.35),
              0 0 28px rgba(41,255,122,.14);

  --r:22px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 620px at 70% 18%, rgba(41,255,122,.14), transparent 62%),
    radial-gradient(700px 520px at 18% 82%, rgba(41,255,122,.10), transparent 62%),
    radial-gradient(520px 420px at 50% 52%, rgba(41,255,122,.06), transparent 70%),
    linear-gradient(180deg, #010408, #02070b 60%, #010408);
  overflow:hidden;
  position:relative;
}

.grid{
  position:fixed; inset:0; pointer-events:none; opacity:.14; mix-blend-mode:screen;
  background:
    linear-gradient(to right, rgba(41,255,122,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(41,255,122,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(60% 55% at 50% 40%, #000 45%, transparent 72%);
}

.scan{
  position:fixed; inset:-80px 0 0 0; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05),
    rgba(255,255,255,.05) 1px,
    transparent 2px,
    transparent 6px
  );
  opacity:.08;
  animation: scanMove 9s linear infinite;
}
@keyframes scanMove{
  0%{transform:translateY(-60px)}
  100%{transform:translateY(60px)}
}

.wrap{
  height:100%;
  display:grid;
  place-items:center;
  padding:24px;
}

.card{
  width:min(420px, 100%);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(10,24,18,.55), rgba(6,16,12,.35));
  border:1px solid rgba(41,255,122,.14);
  box-shadow:
    0 28px 90px rgba(0,0,0,.62),
    0 0 0 1px rgba(41,255,122,.12),
    0 0 40px rgba(41,255,122,.10);
  position:relative;
  overflow:hidden;
  padding:18px;

  transform: translateY(10px);
  opacity:0;
  animation: reveal .6s ease forwards;

  transform-style: preserve-3d;
  will-change: transform;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@keyframes reveal{
  to{opacity:1; transform:translateY(0)}
}

.card::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius: calc(var(--r) + 2px);
  background: radial-gradient(600px 260px at 50% 0%, rgba(41,255,122,.25), transparent 60%);
  pointer-events:none;
  opacity:.55;
  filter: blur(10px);
}

.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(120deg, transparent, rgba(41,255,122,.42), transparent);
  opacity:.30;
  filter: blur(12px);
  transform: translateX(-35%);
  animation: sheen 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sheen{
  0%,100%{transform:translateX(-40%)}
  50%{transform:translateX(40%)}
}

.edge{
  position:absolute; inset:0; pointer-events:none;
  border-radius: var(--r);
  box-shadow:
    inset 0 0 0 1px rgba(41,255,122,.18),
    inset 0 0 24px rgba(41,255,122,.08);
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(41,255,122,.22);
  box-shadow: var(--glowSoft);
  position:relative;
  z-index:1;
}

.glitch{
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:13px;
  position:relative;
  text-shadow: 0 0 18px rgba(41,255,122,.22);
}
.glitch::before,.glitch::after{
  content: attr(data-text);
  position:absolute; left:0; top:0;
  opacity:.65; pointer-events:none;
}
.glitch::before{
  transform: translate(1px, 0);
  color: rgba(41,255,122,.95);
  clip-path: inset(0 0 70% 0);
  animation: g1 2.6s infinite linear alternate-reverse;
}
.glitch::after{
  transform: translate(-1px, 0);
  color: rgba(255,255,255,.70);
  clip-path: inset(65% 0 0 0);
  animation: g2 2.1s infinite linear alternate-reverse;
}
@keyframes g1{
  0%{clip-path: inset(0 0 80% 0)}
  50%{clip-path: inset(25% 0 45% 0)}
  100%{clip-path: inset(55% 0 15% 0)}
}
@keyframes g2{
  0%{clip-path: inset(75% 0 0 0)}
  50%{clip-path: inset(40% 0 20% 0)}
  100%{clip-path: inset(20% 0 55% 0)}
}

.status{
  font-size:12px;
  color:rgba(220,255,236,.78);
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(41,255,122,.18);
  background: rgba(10,24,18,.38);
  white-space:nowrap;
  box-shadow: 0 0 18px rgba(41,255,122,.10);
}

.dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(41,255,122,.95), 0 0 34px rgba(41,255,122,.35);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{50%{transform:scale(1.35); opacity:.7}}

.main{
  margin-top:14px;
  padding:16px;
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(41,255,122,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  position:relative;
  z-index:1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.row{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.avatar{
  width:74px;height:74px;border-radius:18px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(145deg, rgba(41,255,122,.85), rgba(0,0,0,.22));
  border:1px solid rgba(41,255,122,.25);
  box-shadow: var(--glow);
  position:relative;
  overflow:hidden;
  flex:0 0 auto;
}
.avatar::after{
  content:"";
  position:absolute; inset:-60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: rotate(25deg);
  animation: sweep 5.2s ease-in-out infinite;
}
@keyframes sweep{
  0%,100%{transform:translateX(-55%) rotate(25deg)}
  50%{transform:translateX(65%) rotate(25deg)}
}

.info{min-width:0}
.name{
  margin:0;
  font-size:20px;
  line-height:1.1;
  letter-spacing:.02em;
}
.role{
  margin:6px 0 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.chips{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(41,255,122,.22);
  background: rgba(10,24,18,.32);
  box-shadow: 0 0 16px rgba(41,255,122,.10);
}

.btns{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  margin-left: -3.80px;
}

.btn{
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  font-size:13px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(41,255,122,.18);
  background: rgba(10,24,18,.30);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
  box-shadow: 0 0 18px rgba(41,255,122,.10);
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(41,255,122,.45);
  box-shadow: var(--glow);
  background: rgba(10,24,18,.40);
}
.btn.primary{
  background: linear-gradient(135deg, rgba(41,255,122,.88), rgba(41,255,122,.18));
  border-color: rgba(41,255,122,.48);
  box-shadow: var(--glow);
  color:#03110a;
  text-shadow:none;
}

@media (max-width: 600px){
  .btns{
    flex-wrap:wrap;
    margin-left:0;
    justify-content:center;
  }
  .btns .btn{
    flex: 0 0 calc(50% - 5px);
    justify-content:center;
  }
  .btns .btn:nth-child(3){
    flex: 0 0 100%;
    justify-content:center;
  }
}

.ico{
  width:18px;height:18px;opacity:.95;
  filter: drop-shadow(0 0 10px rgba(41,255,122,.22));
}

.foot{
  margin-top:14px;
  padding:12px 14px;
  border-radius: 18px;
  background: rgba(10,24,18,.22);
  border:1px solid rgba(41,255,122,.12);
  color: rgba(230,255,242,.70);
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.foot b{color: rgba(41,255,122,.95)}
.hint{color: rgba(230,255,242,.62)}