:root{ --bg:#050508; --pc: #00ff9d; --red:#ff2a6d; --blu:#05d9e8; --st:var(--red); --hc: var(--red); --ac:var(--red); }

  body{ font-family:'Montserrat',sans-serif; background:var(--bg); color:#fff; margin:0; padding:20px; padding-bottom:120px; transition:0.5s; display:flex; justify-content:center; }

  .app-wrap { width:100%; max-width:600px; }

  .amb{ position:fixed; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at 50% 50%,var(--st),transparent 70%); opacity:0.1; z-index:-1; animation:p 4s infinite; }

  .nav{ display:flex; justify-content:space-between; margin-bottom:20px; } 

.head { 

  display: flex; 

  justify-content: space-between; 

  align-items: center; 

  padding-bottom: 15px; 

  border-bottom: 1px solid rgba(255,255,255,0.1); 

  margin-bottom: 20px; 

  height: 60px; 

}



.head-l { 

  display: flex; 

  align-items: center; 

  gap: 15px;

}



.head-r { 

  display: flex; 

  align-items: center; 

  gap: 10px;

}

@media all and (display-mode: standalone) {

  .ico[onclick="full()"], .btn-t[onclick="full()"] { display: none !important; }

}

.logo-box { 

  display: flex; 

  align-items: center; 

  gap: 1px;

}



.logo-img { 

  height: 22px; 

  width: auto; 

  filter: drop-shadow(0 0 8px var(--red)); 

}



.logo-txt { 

  font-family: 'Rajdhani', sans-serif; 

  font-weight: 800; 

  font-size: 16px; 

  color: #ccc; 

  letter-spacing: 2px; 

  line-height: 1; 

  position: relative;

  top: -2px;

}



.head-r { 

  display: flex; 

  align-items: center; 

  gap: 8px; 

}



.ico { 

  width: 34px; 

  height: 34px; 

  border: 1px solid #333; 

  border-radius: 50%; 

  display: flex; 

  justify-content: center; 

  align-items: center; 

  color: #fff; 

  text-decoration: none; 

  background: transparent; 

  cursor: pointer; 

  transition: 0.2s;

}



.ico:hover { 

  border-color: #fff; 

  background: rgba(255,255,255,0.1); 

}



.btn-back {

  font-size: 36px;

  color: #666;

  text-decoration: none;

  transition: 0.2s;

  

  display: flex;

  align-items: center;

  justify-content: center;

  

  height: 48px;

  width: 30px;

  margin-right: 5px;



  position: relative;

  top: -5px;

  line-height: 0;

  padding-bottom: 4px;

}



.btn-back:hover { color: #fff; }

  .tut-n{ border-color:var(--red)!important; animation:p 1.5s infinite; }

  

  #ghst{ display:none; border:1px dashed var(--red); background:rgba(255,42,109,0.05); padding:10px; margin-bottom:20px; font-size:12px; }

  .cp { 

  background: rgba(18,18,26,0.8); 

  border: 1px solid #333;

  border-radius: 8px; 

  padding: 15px; 

  margin-bottom: 15px; 

  transition: 0.3s; 

  position: relative;

}

  .sh{ display:flex; justify-content:space-between; font-weight:bold; margin-bottom:5px; font-size:12px; }

 input[type=range] { 

    width: 100%; 

    -webkit-appearance: none; 

    background: transparent; 

    

    touch-action: pan-y;  

    

    margin-bottom: 20px; 

    

    padding: 10px 0;

    margin-top: 10px;

}

  input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; height:18px; width:18px; background:#fff; border:2px solid var(--st); margin-top:-7px; transform:skewX(-10deg); }

  input[type=range]::-webkit-slider-runnable-track{ width:100%; height:4px; background:#333; }



  .btn{ width:100%; padding:15px; background:var(--st); color:#000; font-weight:bold; border:none; font-family:'Rajdhani'; font-size:16px; margin-top:10px; cursor:pointer; clip-path:polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }

 .card {

  background: rgba(255,255,255,0.03);

  border: 1px solid #333;

  border-left: 4px solid var(--red);

  padding: 15px;

  border-radius: 8px;

  margin-bottom: 10px;

  position: relative;

  text-align: left;

}



.card-type {

  font-size: 10px; font-weight: bold; letter-spacing: 2px;

  margin-bottom: 5px; color: var(--red); display: flex; align-items: center;

}



.topic-badge {

  display: inline-block;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: #fff;

  font-size: 9px; font-weight: 800;

  padding: 2px 6px; border-radius: 4px;

  margin-left: 8px;

  text-transform: uppercase; letter-spacing: 1px;

}



.beast-card-footer {

    margin-top: 12px;

    padding: 10px;

    border: 1px solid var(--red);

    background: rgba(255, 42, 109, 0.1);

    color: var(--red);

    font-size: 11px; font-weight: bold; text-align: center; border-radius: 6px; letter-spacing: 1px;

    opacity: 0.8;

}

 .neural{ margin-top:10px; background:rgba(0,0,0,0.3); border:1px solid #333; border-left:2px solid var(--st); padding:8px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:10px; }

.btn-ref { 

  position: absolute; 

  top: 10px; 

  right: 10px; 

  background: rgba(0,0,0,0.5); 

  border: 1px solid #555; 

  color: #ccc; 

  font-family: 'Rajdhani', sans-serif; 

  font-weight: bold; 

  font-size: 10px; 

  padding: 5px 10px; 

  border-radius: 6px; 

  cursor: pointer; 

  z-index: 5; 

  transition: 0.2s; 

  display: flex; 

  align-items: center; 

  gap: 5px; 

}



.btn-ref:hover { 

  border-color: #fff; 

  color: #fff; 

  background: rgba(255,255,255,0.1); 

}

.btn-hold { 

  position: relative; 

  width: 120px; height: 120px; 

  margin: 0 auto;

  border-radius: 50%; 

  background: #0a0505; 

  border: 2px dashed #444; 

  display: flex; flex-direction: column; align-items: center; justify-content: center; 

  cursor: pointer; user-select: none; overflow: hidden; 

  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: inset 0 0 30px #000;

}



.btn-hold:active { 

  transform: scale(0.95); 

  border-style: solid;

  border-color: var(--red);

  box-shadow: 0 0 40px rgba(255, 42, 109, 0.4), inset 0 0 15px var(--red);

}



.btn-hold.locked { 

  background: var(--red); 

  border-color: #fff; 

  box-shadow: 0 0 60px var(--red); 

  transform: scale(1.1); 

}



.hold-fill { 

  position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; 

  background: var(--red); 

  opacity: 0.8; 

  transition: height 0.05s linear; 

  z-index: 0;

}



.hold-content { position: relative; z-index: 2; text-align: center; pointer-events: none; }

.hold-ico { font-size: 24px; display: block; margin-bottom: 2px; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.8)); }

.hold-main { font-family: 'Rajdhani'; font-weight: 800; font-size: 14px; color: #fff; line-height: 1; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }

.hold-sub { font-size: 8px; color: #888; margin-top: 4px; font-weight: bold; letter-spacing: 2px; display: block; }



.btn-hold.locked .hold-main, .btn-hold.locked .hold-sub { color: #000; }

  .l-btn.on{ background:var(--red); color:#000; border-color:#fff; box-shadow:0 0 30px var(--red); transform:scale(1.1); }

  .aud{ display:none; width:100%; padding:12px; border:1px solid #fff; background:transparent; color:#fff; margin-bottom:15px; text-decoration:none; text-align:center; font-weight:bold; font-size:12px; }

  

.modal { 

  display: none; 

  position: fixed; inset: 0; 

  background: rgba(0,0,0,0.95); 

  z-index: 20000 !important;

  align-items: center; justify-content: center; 

  padding: 20px; 

  backdrop-filter: blur(5px);

}

  .box{ background:#12121a; border:1px solid #444; padding:20px; width:100%; border-radius:10px; }

  .v-mod{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:9999; align-items:center; justify-content:center; padding:20px; }

  .v-box{ width:100%; max-width:600px; border:1px solid var(--st); background:#000; position:relative; }

  

  @keyframes p{ 0%{box-shadow:0 0 0 0 rgba(255,42,109,0.7);opacity:0.1} 70%{box-shadow:0 0 0 10px rgba(0,0,0,0)} 50%{opacity:0.2} }

  @keyframes up{ from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} } @keyframes in{ from{opacity:0} to{opacity:1} }

#toast { 

  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(50px); 

  background: #111; border: 1px solid var(--red); color: #fff; 

  padding: 12px 25px; border-radius: 50px; 

  font-family: 'Rajdhani'; font-weight: bold; font-size: 13px; 

  z-index: 10000; opacity: 0; pointer-events: none; 

  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 

  box-shadow: 0 5px 20px rgba(0,0,0,0.8); text-transform: uppercase; letter-spacing: 1px;

  display: flex; align-items: center; gap: 8px;

}

#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }



.launch-overlay {

  display: none;

  position: fixed; inset: 0;

  background: rgba(5, 5, 8, 0.96);

  z-index: 20000;

  flex-direction: column; align-items: center; justify-content: center;

  backdrop-filter: blur(5px);

  animation: fadeIn 0.3s ease-out;

}



.launch-card {

  width: 85%; max-width: 380px;

  background: linear-gradient(160deg, #15151a, #000);

  border: 1px solid #333;

  border-top: 3px solid var(--red); 

  border-bottom: 3px solid var(--red);

  padding: 40px 25px;

  position: relative;

  box-shadow: 0 0 60px rgba(255, 42, 109, 0.15);

  text-align: center;

  clip-path: polygon(

    20px 0, 100% 0, 

    100% calc(100% - 20px), calc(100% - 20px) 100%, 

    0 100%, 0 20px

  );

}



.l-corner { position: absolute; width: 8px; height: 8px; border-color: var(--red); border-style: solid; opacity: 0.7; }

.l-corner.tl { top: 0; left: 0; border-width: 1px 0 0 1px; }

.l-corner.tr { top: 0; right: 0; border-width: 1px 1px 0 0; }

.l-corner.bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }

.l-corner.br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }



.launch-ico-wrap {

  width: 100px; height: 100px;

  margin: 0 auto 25px auto;

  color: var(--red);

  filter: drop-shadow(0 0 15px rgba(255, 42, 109, 0.4));

}



.spin-slow { transform-origin: center; animation: spin 10s linear infinite; }

.pulse-tick { animation: blink 2s infinite; }



.draw-check {

  stroke-dasharray: 50;

  stroke-dashoffset: 50;

  animation: drawCheck 0.8s cubic-bezier(0.65, 0, 0.45, 1) forwards 0.3s;

}



@keyframes drawCheck { to { stroke-dashoffset: 0; } }

@keyframes spin { 100% { transform: rotate(360deg); } }



.launch-title {

  font-family: 'Rajdhani', sans-serif;

  font-weight: 800; font-size: 36px; color: #fff;

  letter-spacing: 2px; line-height: 1; margin-bottom: 5px;

  text-transform: uppercase;

  text-shadow: 0 0 20px rgba(255, 42, 109, 0.5);

}



.launch-sub {

  color: var(--red); font-size: 11px; font-weight: bold;

  letter-spacing: 3px; margin-bottom: 25px;

}



.launch-text {

  font-family: 'Montserrat'; font-size: 13px; color: #aaa;

  line-height: 1.6; margin-bottom: 35px;

  border-top: 1px dashed #333;

  border-bottom: 1px dashed #333;

  padding: 15px 0;

}



.btn-go {

  width: 100%;

  padding: 18px;

  background: var(--red);

  color: #fff;

  font-family: 'Rajdhani'; font-weight: 800; font-size: 20px; letter-spacing: 2px;

  border: none; cursor: pointer;

  position: relative; overflow: hidden;

  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);

  transition: transform 0.2s, box-shadow 0.2s;

}



.btn-go:hover {

  transform: scale(1.02);

  box-shadow: 0 0 30px rgba(255, 42, 109, 0.6);

}



.btn-go:active { transform: scale(0.98); }



.btn-go-glare {

  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);

  transform: skewX(-20deg);

  animation: glare 3s infinite;

}



@keyframes glare {

  0% { left: -100%; }

  20% { left: 200%; }

  100% { left: 200%; }

}



.btn-go {

  width: 100%; 

  padding: 18px;

  background: var(--red); 

  color: #fff;

  font-family: 'Rajdhani'; 

  font-weight: 800; 

  font-size: 20px;

  border: none; 

  cursor: pointer;

  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);

  transition: 0.3s ease;

  

  animation: pulseRed 2s infinite ease-in-out;

  box-shadow: 0 0 20px rgba(255, 42, 109, 0.5);

}



.btn-go:active { 

  transform: scale(0.95); 

  background: #fff; 

  color: var(--red);

}



@keyframes pulseRed {

  0% { 

    box-shadow: 0 0 0 0 rgba(255, 42, 109, 0.7); 

    transform: scale(1);

  }

  50% { 

    box-shadow: 0 0 30px rgba(255, 42, 109, 0.4); 

    transform: scale(1.02);

  }

  100% { 

    box-shadow: 0 0 0 0 rgba(255, 42, 109, 0.7); 

    transform: scale(1);

  }

}

#lck { 

  display: none;

  margin-top: 30px; 

  animation: in 0.5s; 

  text-align: center; 

}

.s-desc { 

  display: flex; 

  justify-content: space-between; 

  font-size: 9px; 

  color: #666; 

  margin-top: -5px; 

  margin-bottom: 15px; 

  text-transform: uppercase; 

  font-weight: bold; 

  letter-spacing: 1px;

}

body.beast-mode {

  animation: beastPulse 0.5s infinite alternate;

  --st: #ff0000;

}



body.beast-mode .amb {

  opacity: 0.4;

  background: radial-gradient(circle at 50% 50%, #ff0000, transparent 60%);

  animation: none;

}



body.beast-mode .card {

  border: 2px solid #fff;

  box-shadow: 0 0 30px #ff0000;

  background: #2a0000;

}



@keyframes beastPulse {

  0% { background-color: #050508; }

  100% { background-color: #1a0000; }

}

.hero-box { 

  text-align: center; 

  margin-top: 10px; 

  margin-bottom: 30px; 

  animation: fadeInTitle 1s ease-out;

}



.hero-title { 

  font-family: 'Rajdhani', sans-serif; 

  font-weight: 800; 

  font-size: 42px;

  line-height: 1; 

  text-transform: uppercase; 

  letter-spacing: 2px; 

  color: #fff;

  

  text-shadow: 0 0 10px var(--hc), 0 0 20px var(--hc);

}



.hero-sub { 

  font-size: 10px; 

  color: var(--hc); 

  letter-spacing: 4px; 

  text-transform: uppercase; 

  font-weight: bold; 

  margin-top: 5px; 

  opacity: 0.8;

}



@keyframes fadeInTitle { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.dock {

  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);

  display: flex; 

  gap: 6px;

  background: rgba(10, 10, 15, 0.95);

  padding: 10px 12px; 

  border-radius: 50px; 

  border: 1px solid #333;

  backdrop-filter: blur(10px); 

  z-index: 9000; 

  box-shadow: 0 10px 30px rgba(0,0,0,0.5);

  width: max-content;

  max-width: 95%;

}

.dock {

  z-index: 20000 !important;

}



#post-mode {

  padding-bottom: 100px;

}

.dock-item {

  width: 38px; 

  height: 38px; 

  border-radius: 50%;

  display: flex; 

  justify-content: center; 

  align-items: center;

  text-decoration: none; 

  font-size: 16px; 

    background: #1a1a1a; 

  border: 1px solid rgba(255,255,255,0.1); 

    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  flex-shrink: 0;

    color: var(--ac); 

}





.dock-item svg {

  stroke: var(--ac);

  transition: 0.3s;

  filter: drop-shadow(0 0 3px var(--ac));

}





.dock-item:hover, .dock-item.active {

 

  background: var(--ac); 

  filter: none;

  box-shadow: 0 0 15px var(--ac); 

  border-color: var(--ac);

  

  transform: translateY(-5px) scale(1.1);

}





.dock-item:hover svg, .dock-item.active svg {

  stroke: #000000;

}





body { padding-bottom: 100px; }

@keyframes pulseRedAttention {

  0% { box-shadow: 0 0 0 0 rgba(255, 42, 109, 0.4); transform: scale(1); }

  50% { box-shadow: 0 0 20px 10px rgba(255, 42, 109, 0); transform: scale(1.03); border-color: var(--red); color: var(--red); }

  100% { box-shadow: 0 0 0 0 rgba(255, 42, 109, 0); transform: scale(1); }

}



.btn-id-check {

  width: 100%;

  background: rgba(255, 42, 109, 0.05); 

  border: 1px solid #333;

  color: #888;

  padding: 15px;

  border-radius: 8px;

  margin-bottom: 20px;

  cursor: pointer;

  display: flex; align-items: center; justify-content: center; gap: 10px;

  font-family: 'Rajdhani'; font-weight: 800; font-size: 14px; letter-spacing: 1px;

  transition: 0.3s;

  animation: pulseRedAttention 3s infinite;

}



.btn-id-check:hover { 

  background: var(--red); color: #000; border-color: var(--red); 

  animation: none;

  box-shadow: 0 0 20px var(--red);

}

.train-memo {

  background: rgba(255, 255, 255, 0.05);

  border-left: 3px solid #666;

  padding: 15px;

  text-align: left;

  font-size: 12px;

  line-height: 1.5;

  color: #ccc;

  margin-bottom: 25px;

}

.train-memo strong { color: #fff; display: block; margin-bottom: 5px; font-family: 'Rajdhani'; letter-spacing: 1px; }



.holo-card { position: relative; transform-style: preserve-3d; transition: transform 0.1s; }

.hc-inner {

  position: absolute; inset: 0; border-radius: 20px;

  background: rgba(15, 15, 20, 0.8);

  border: 1px solid rgba(255, 42, 109, 0.3);

  box-shadow: 0 20px 40px rgba(0,0,0,0.5);

  transform: rotateX(calc((var(--my) - 50%) * -20deg)) rotateY(calc((var(--mx) - 50%) * 20deg));

  transform-style: preserve-3d;

  overflow: hidden;

}

.hc-layer { position: absolute; inset: 0; border-radius: 20px; }

.hc-bg {

  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 100%);

  pointer-events: none;

}

.hc-content { transform: translateZ(40px); }

.hc-label { display: block; font-size: 10px; color: var(--red); letter-spacing: 2px; margin-bottom: 5px; font-weight: bold; }

.hc-glare {

  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.3) 0%, rgba(0,0,0,0) 70%);

  mix-blend-mode: overlay; opacity: 0.7; pointer-events: none; transform: translateZ(1px);

}

.gg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }

.gb { 

  aspect-ratio: 1; border-radius: 8px; 

  background: #111; border: 1px solid #333; 

  color: #666; font-family: 'Rajdhani'; font-weight: bold; font-size: 16px; 

  transition: 0.2s; cursor: pointer; 

}

.gb:hover { border-color: #fff; color: #fff; }

.gb:active { transform: scale(0.9); }

#post-mode {

  position: fixed;

  inset: 0;

  background: #050508;

  z-index: 15000;

  

  display: none;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  

  padding: 20px;

}

.gb.selected {

  background: var(--grn) !important;

  color: #000 !important;

  border-color: #fff !important;

  transform: scale(1.1);

  box-shadow: 0 0 20px var(--grn);

}

.top-nav {

  display: flex;

  gap: 10px;

  margin-bottom: 20px;

  margin-top: -10px;

}



.btn-tn {

  flex: 1;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid #333;

  color: #888;

  padding: 12px;

  border-radius: 8px;

  font-family: 'Rajdhani', sans-serif;

  font-weight: bold;

  font-size: 12px;

  cursor: pointer;

  transition: 0.3s;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  text-transform: uppercase;

  letter-spacing: 1px;

}



.btn-tn:hover {

  border-color: var(--red);

  color: #fff;

  background: rgba(255, 42, 109, 0.05);

  box-shadow: 0 0 15px rgba(255, 42, 109, 0.1);

}



.tn-ico { font-size: 14px; }

.btn-card-close {

  width: 100%;

  padding: 15px;

  background: transparent;

  border: 1px solid var(--red);

  color: #fff;

  font-family: 'Rajdhani', sans-serif;

  font-weight: 800;

  font-size: 14px;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-top: 20px;

  cursor: pointer;

  transition: 0.3s;

  

  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);

}



.btn-card-close:hover {

  background: var(--red);

  color: #000;

  box-shadow: 0 0 20px var(--red);

}

.radar { 

  width: 140px; 

  height: 140px; 

  margin: 0 auto 10px; 

}



.poly { 

  fill: var(--st); 

  fill-opacity: 0.3; 

  stroke: var(--st); 

  stroke-width: 2; 

  transition: 0.5s; 

  filter: drop-shadow(0 0 8px var(--st)); 

}

.ins-bar {

  display: flex;

  align-items: center;

  gap: 10px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-left: 3px solid var(--st);

  padding: 10px 15px;

  margin: 0 auto 20px auto;

  border-radius: 6px;

  max-width: 100%;

  transition: 0.3s;

}



.ins-icon {

  font-size: 16px;

  opacity: 0.8;

  animation: pulse-slow 3s infinite;

}



.ins-text {

  font-family: 'Montserrat', sans-serif;

  font-size: 11px;

  color: #ccc;

  line-height: 1.4;

  text-align: left;

}



.ins-text strong {

  color: #fff;

  font-family: 'Rajdhani';

  text-transform: uppercase;

  letter-spacing: 1px;

}



@keyframes pulse-slow {

  0%, 100% { opacity: 0.5; transform: scale(1); }

  50% { opacity: 1; transform: scale(1.1); }

}

.data-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(0, 0, 0, 0.4);

  border: 1px solid #333;

  padding: 6px 16px;

  border-radius: 50px;

  color: #666;

  font-family: 'Rajdhani', sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;

  cursor: pointer;

  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  backdrop-filter: blur(4px);

  text-transform: uppercase;

  margin-bottom: 20px;

  position: relative;

  z-index: 5;

}



.data-pill:hover {

  border-color: var(--red);

  color: #fff;

  box-shadow: 0 0 20px rgba(255, 42, 109, 0.2);

  transform: translateY(-2px);

}



.data-pill .dp-ico {

  color: var(--red);

  font-size: 14px;

}

.neural-card {

  background: linear-gradient(135deg, #050508, #1a0508);

  border: 1px solid var(--red);

  box-shadow: 0 0 50px rgba(255, 42, 109, 0.15), inset 0 0 30px rgba(0,0,0,0.8);

  border-radius: 12px;

  padding: 30px 20px;

  width: 90%; max-width: 420px;

  text-align: center;

  position: relative;

  overflow: hidden;

  animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.neural-bg-anim {

  position: absolute; inset: 0; 

  background: radial-gradient(circle at 50% 50%, rgba(255,42,109,0.1), transparent 70%);

  animation: pulse-slow 4s infinite; z-index: 0; pointer-events: none;

}



.neural-header {

  position: relative; z-index: 2;

  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 28px;

  color: #fff; text-transform: uppercase; letter-spacing: 2px;

  margin-bottom: 5px;

  text-shadow: 0 0 20px var(--red);

}



.neural-sub {

  position: relative; z-index: 2;

  font-size: 10px; color: var(--red); letter-spacing: 3px; font-weight: bold;

  margin-bottom: 25px; border-bottom: 1px solid rgba(255,42,109,0.3);

  display: inline-block; padding-bottom: 5px;

}



.archetype-box {

  margin-bottom: 25px; padding-bottom: 20px;

  border-bottom: 1px solid rgba(255,42,109,0.2);

}

.archetype-label { font-size: 9px; color: var(--red); letter-spacing: 2px; font-weight: bold; text-transform: uppercase; margin-bottom: 5px; opacity:0.8;}

.archetype-word {

  font-family: 'Rajdhani', sans-serif; font-size: 38px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 3px; line-height: 1;

  text-shadow: 0 0 20px var(--red);

  animation: pulse-arch-red 3s infinite alternate;

}

@keyframes pulse-arch-red { 0% {transform:scale(1); text-shadow:0 0 20px var(--red);} 100% {transform:scale(1.05); text-shadow:0 0 40px var(--red);} }



.memory-node {

  background: rgba(255, 255, 255, 0.03);

  border-left: 3px solid var(--red);

  padding: 15px; margin-bottom: 12px;

  text-align: left; position: relative; z-index: 2;

  border-radius: 0 6px 6px 0;

  transition: 0.3s;

}

.mn-label { font-size: 9px; color: var(--red); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; display:block;}

.mn-text { font-size: 13px; color: #ddd; line-height: 1.4; font-weight: 500; }



#id-ovr {

  position: fixed; top: 0; left: 0; width: 100%; height: 100%;

  background: rgba(0,0,0,0.95); z-index: 9999;

  display: none; align-items: center; justify-content: center;

  padding: 20px; box-sizing: border-box; overflow-y: auto;



  .neural-header, 

.neural-sub {

  text-align: center !important;

  width: 100%;

  display: block;

  margin-left: auto; 

  margin-right: auto;

}



.archetype-box {

  display: flex !important; 

  flex-direction: column;

  align-items: center;

  justify-content: center;

  

  text-align: center !important;

  width: 100%;

  margin-bottom: 25px; 

  padding-bottom: 20px;

  border-bottom: 1px solid rgba(255,42,109,0.2);

}



.archetype-word {

  text-align: center !important;

  width: 100%;

  display: block;

  font-family: 'Rajdhani', sans-serif; 

  font-size: 38px; 

  font-weight: 800; 

  color: #fff; 

  text-transform: uppercase; 

  letter-spacing: 3px; 

  line-height: 1;

  text-shadow: 0 0 20px var(--red);

  animation: pulse-arch-red 3s infinite alternate;

}

}

.i-btn {

  background: transparent;

  border: 1px solid #444;

  color: #666;

  width: 18px; height: 18px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 10px;

  font-weight: bold;

  margin-left: 8px;

  cursor: pointer;

  font-family: 'Rajdhani', sans-serif;

  transition: 0.2s;

}

.i-btn:hover {

  border-color: var(--red);

  color: var(--red);

  transform: scale(1.1);

}

#sys-tut-layer { position: fixed; inset: 0; z-index: 20002; display: none; }



#sys-tut-mask { 

  position: absolute; inset: 0; 

  background: rgba(0,0,0,0.85); 

}



#sys-tut-focus {

  position: fixed;

  border: 2px solid var(--red); 

  box-shadow: 0 0 40px var(--red), inset 0 0 20px rgba(255, 42, 109, 0.3);

  border-radius: 8px;

  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  pointer-events: none;

  z-index: 20003;

  opacity: 0;

}



#sys-tut-msg {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  width: 90%;

  max-width: 400px;

  background: #1a0505;

  border: 1px solid var(--red);

  padding: 20px;

  border-radius: 12px;

  color: #fff;

  font-family: 'Montserrat', sans-serif;

  font-size: 13px;

  line-height: 1.5;

  z-index: 20004;

  text-align: center;

  box-shadow: 0 10px 40px rgba(0,0,0,0.9);

  

  opacity: 0; 

  

  transition: opacity 0.3s ease, top 0.3s ease, bottom 0.3s ease;

}



.t-bot {

  bottom: 100px;

  top: auto;

}



.t-top {

  top: 120px;

  bottom: auto;

}



.tut-head { 

  color: var(--red); 

  font-family: 'Rajdhani'; 

  font-weight: 800; 

  font-size: 18px; 

  text-transform: uppercase; 

  margin-bottom: 8px; 

  letter-spacing: 1px; 

}



.tut-controls { display: flex; gap: 10px; margin-top: 20px; justify-content: center; }



.btn-tut { 

  padding: 10px 20px; border: none; border-radius: 6px; 

  font-family: 'Rajdhani'; font-weight: bold; cursor: pointer; font-size: 14px; 

}

.btn-tut-next { background: var(--red); color: #fff; flex: 2; }

.btn-tut-skip { background: transparent; border: 1px solid #444; color: #888; flex: 1; }



@keyframes slideUp { from{opacity:0; transform:translate(-50%, 20px)} to{opacity:1; transform:translate(-50%, 0)} }

.card-svg {

  width: 24px;

  height: 24px;

  fill: none;

  stroke: var(--st);

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

  vertical-align: bottom;

  margin-right: 8px;

  filter: drop-shadow(0 0 5px var(--st));

}