:root { --bg:#050508; --pc: #00ff9d; --gld:#d4af37; --grn:#00ff9d; --red:#ff2a6d; --blu:#05d9e8; --yel:#ffc800; --stl: #5c6064; --pur:#bc13fe; --org: #ff9f00; --hc: var(--grn);}

  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

  body { font-family:'Montserrat',sans-serif; background:var(--bg); color:#fff; margin:0; padding:0; padding-bottom:40px; min-height:100vh; display:flex; flex-direction:column; align-items:center; overflow-x: hidden; }

  

.app-wrap { 

  width: 100%; 

  max-width: 600px; 

  display: flex; 

  flex-direction: column; 

  flex: 1; 

  padding: 20px;

  padding-bottom: 40px;

  position: relative;

  

}



.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-r {

  display: flex;

  align-items: center;

  gap: 10px;

}

.head-l { 

  display: flex; 

  align-items: center; 

  gap: 15px; 

}



.logo-box { 

  display: flex; 

  align-items: center; 

  gap: 1px; 

}





.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;

}

.hero-box { 

  text-align: center; 

  margin-top: 10px; 

  margin-bottom: 30px; 

  animation: fadeInTitle 1s ease-out;

  

  width: 100%;

  overflow: hidden;

}

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

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

}

.hero-title { 

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

  font-weight: 900;

  font-size: 64px;

  line-height: 0.9; 

  text-transform: uppercase; 

  letter-spacing: 12px;

  color: #fff;

  

  margin-right: -12px;

  text-shadow: 0 0 15px var(--hc), 0 0 40px var(--hc);

  

  transition: 0.3s;

}



.hero-sub { 

  font-size: 10px; 

  color: var(--grn);

  letter-spacing: 4px; 

  text-transform: uppercase; 

  font-weight: bold; 

  margin-top: 8px; 

  opacity: 0.8;

  text-shadow: 0 0 5px rgba(0,255,157,0.3);

}



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

.logo-g { 

  display: flex; 

  align-items: center; 

  gap: 10px; 

}



.logo-img { 

  height: 32px;

  width: auto; 

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

}







.btn-t { 

  width: 40px; 

  height: 40px; 

  border-radius: 50%; 

  border: 1px solid #444; 

  background: transparent; 

  color: #fff; 

  display: flex; 

  justify-content: center; 

  align-items: center; 

  cursor: pointer; 

  transition: 0.3s; 

  font-size: 18px;

}



.btn-t:hover { 

  border-color: #fff; 

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

}

 #stat { 

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

  border: 1px solid #333; 

  padding: 12px; 

  border-radius: 8px; 

  margin-bottom: 25px; 

  display: flex; 

  align-items: center; 

  justify-content: space-between; 

  font-family: 'Rajdhani'; 

  font-size: 12px; 

  font-weight: bold; 

  letter-spacing: 1px;

  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);

  overflow: hidden;

  max-height: 60px;

}



#stat.minimal {

  background: transparent;

  border-color: transparent;

  padding: 0;

  margin-bottom: 15px;

  justify-content: center;

  opacity: 0.5;

  max-height: 20px;

}



#stat.minimal #stxt {

  font-size: 10px;

  color: #666 !important;

}



#stat.minimal #dot {

  background: #333;

  box-shadow: none;

  width: 6px; height: 6px;

}

  #dot { width:10px; height:10px; border-radius:50%; background:#666; margin-right:10px; }

  .warn { border-color:var(--red)!important; animation:pRed 2s infinite; } .warn #dot { background:var(--red); box-shadow:0 0 10px var(--red); }

  .ok { border-color:var(--grn)!important; } .ok #dot { background:var(--grn); box-shadow:0 0 10px var(--grn); }



.grid { 

  display: grid; 

  grid-template-columns: 1fr 1fr; 

  gap: 15px; 

  flex: 1; 

}



.card { 

  background: linear-gradient(135deg, #12121a, #0d0d12); 

  border: 1px solid #1f1f2e; 

  border-radius: 16px; 

  padding: 20px; 

  text-decoration: none; 

  

  display: flex; 

  flex-direction: row; 

  align-items: center; 

  justify-content: space-between; 

  

  position: relative; 

  overflow: hidden; 

  min-height: 100px;

  transition: 0.3s; 

  box-shadow: 0 5px 15px rgba(0,0,0,0.3); 

}



.card:active { transform: scale(0.96); } 

.card:hover { border-color: var(--ac); box-shadow: 0 0 20px var(--ac); }



.card::before { 

  content: ''; 

  position: absolute; 

  top: -20px; 

  right: -20px; 

  width: 80px; 

  height: 80px; 

  background: var(--ac); 

  opacity: 0.15;

  filter: blur(30px); 

  border-radius: 50%; 

  pointer-events: none;

}



.card-txt {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  z-index: 2;

  padding-right: 10px;

}



.tit { 

  color: #fff; 

  font-family: 'Rajdhani'; 

  font-weight: 800;

  font-size: 18px;

  margin: 0; 

  text-transform: uppercase; 

  letter-spacing: 1px; 

  line-height: 1;

}



.dsc { 

  color: #888; 

  font-size: 10px; 

  margin-top: 6px; 

  line-height: 1.3; 

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

  font-weight: 500;

}



.card-icon {

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--ac);

  

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

  opacity: 0.9;

  transition: 0.3s;

  flex-shrink: 0;

}



.card:hover .card-icon {

  transform: scale(1.1) rotate(5deg);

  opacity: 1;

}



.card-icon svg {

  width: 100%;

  height: 100%;

  stroke: currentColor;

  fill: none;

  stroke-width: 1.5;

}

  .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: 24px;

  color: #666;

  text-decoration: none;

  transition: 0.2s;

  display: flex;

  align-items: center;

  height: 34px;

}

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

  .tit { color:#fff; font-family:'Rajdhani'; font-weight:bold; font-size:16px; margin:0; text-transform:uppercase; letter-spacing:1px; }

  .dsc { color:#888; font-size:10px; margin-top:5px; line-height:1.3; }

  .full { grid-column:span 2; background:linear-gradient(135deg, #1a1a25, #12121a); border-color:#333; }



  .core { margin-top:30px; background:#000; border-top:2px solid var(--yel); padding:20px; text-align:center; border-radius:16px 16px 0 0; }

  .btn-d { width:100%; padding:15px; border-radius:8px; font-family:'Rajdhani'; font-weight:bold; font-size:14px; cursor:pointer; letter-spacing:1px; display:flex; justify-content:center; gap:10px; margin-bottom:10px; border:1px solid #333; color:#888; background:#111; transition:0.2s; }

  .btn-d svg {

  width: 18px;

  height: 18px;

  stroke: currentColor;

  fill: none;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

}

  .btn-d:hover { color:#fff; border-color:#fff; }

  .btn-r { border-color:var(--yel); color:var(--yel); background:rgba(255,200,0,0.1); } .btn-r:hover { background:var(--yel); color:#000; }



  .panic-btn { position:fixed; bottom:20px; right:20px; width:60px; height:60px; background:var(--red); border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:24px; box-shadow:0 0 20px var(--red); z-index:100; cursor:pointer; animation:pRed 2s infinite; border:3px solid #fff; }

  

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

  .box { background:#12121a; border:1px solid #444; width:100%; max-width:400px; padding:25px; border-radius:16px; text-align:center; box-shadow:0 0 50px rgba(0,0,0,0.8); }

  .opt { width:100%; padding:15px; margin-bottom:10px; background:#1a1a25; border:1px solid #333; color:#fff; text-align:left; border-radius:8px; cursor:pointer; font-family:'Rajdhani'; font-weight:bold; transition:0.2s; }

  .opt:hover { border-color:var(--blu); background:#222; }



  #pan-ovr { display:none; position:fixed; inset:0; background:#000; z-index:2000; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }

  .br-c { width:150px; height:150px; border:4px solid var(--blu); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--blu); animation:bth 8s infinite ease-in-out; box-shadow:0 0 40px var(--blu); margin-bottom:40px; font-weight:bold; letter-spacing:2px; }

  .clm-txt { font-family:'Rajdhani'; font-size:20px; color:#fff; min-height:30px; transition:opacity 1s; }

  #fst { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.98); z-index:3000; align-items:center; justify-content:center; text-align:center; padding:40px; }



  @keyframes pRed { 0%{box-shadow:0 0 0 0 rgba(255,42,109,0.7);} 70%{box-shadow:0 0 0 20px rgba(255,42,109,0);} }

  @keyframes bth { 0%,100%{transform:scale(0.9);box-shadow:0 0 10px var(--blu)} 50%{transform:scale(1.1);box-shadow:0 0 50px var(--blu)} }

#toast { 

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

  background: #111; border: 1px solid var(--yel); 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); }

.av-card {

  display: flex;

  align-items: center;

  gap: 15px;

  position: relative;

  overflow: hidden;

  

  background-color: #0a0a0e;

  background-image: 

      radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),

      linear-gradient(135deg, rgba(255,255,255,0.02), transparent);

  background-size: 20px 20px, 100% 100%;

  

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

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

  

  padding: 18px;

  border-radius: 16px;

  margin-bottom: 25px;

  text-decoration: none;

  

  box-shadow: 0 5px 20px rgba(0,0,0,0.4);

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

}



.av-card::before {

  content: '';

  position: absolute;

  top: -50%; 

  left: -20%;

  width: 70%; 

  height: 200%;

  

  background: var(--pc);

  opacity: 0.15;

  filter: blur(60px);

  

  transform: skewX(-20deg);

  transition: opacity 0.3s;

  pointer-events: none;

}



.av-card::after {

  content: '';

  position: absolute;

  top: 15%; bottom: 15%;

  left: 0;

  width: 4px;

  background: var(--pc);

  border-radius: 0 4px 4px 0;

  box-shadow: 0 0 10px var(--pc);

}



.av-card:hover {

  transform: translateY(-3px);

  border-color: rgba(255,255,255,0.3);

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

}

.av-card:hover::before {

  opacity: 0.25;

}



.av-visual {

  width: 48px; height: 48px;

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

  border-radius: 12px;

  

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

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

  box-shadow: inset 0 0 20px rgba(255,255,255,0.05);

  

  font-size: 24px;

  position: relative;

  z-index: 2;

}



.av-content {

  display: flex; flex-direction: column;

  flex: 1; z-index: 2; justify-content: center;

}



.av-name {

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

  font-weight: 800; 

  font-size: 22px;

  color: #fff;

  text-transform: uppercase;

  line-height: 1;

  margin-bottom: 4px;

  text-shadow: 0 2px 5px rgba(0,0,0,0.5);

  letter-spacing: 1px;

}



.av-stats {

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

  font-size: 10px;

  color: #aaa;

  font-weight: 600;

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

  text-transform: uppercase;

  letter-spacing: 1px;

}



.lvl-box {

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

  padding: 2px 6px;

  border-radius: 4px;

  color: #fff;

  font-weight: bold;

}



.xp-indicator {

  display: flex; flex-direction: column; align-items: flex-end;

  z-index: 2;

}



.xp-val-big {

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

  font-weight: 800;

  font-size: 24px;

  color: #444;

  line-height: 1;

  transition: 0.3s;

}

.xp-val-big.active {

  color: var(--pc);

  text-shadow: 0 0 15px var(--pc);

}



.xp-label-mini {

  font-size: 8px; font-weight: bold; color: #555; letter-spacing: 2px;

}



.scan-line {

  position: absolute;

  top: 0; left: -100%;

  width: 50%; height: 100%;

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

  transform: skewX(-20deg);

  animation: scanPass 6s infinite ease-in-out;

  pointer-events: none;

  z-index: 1;

}



@keyframes scanPass {

  0%, 80% { left: -100%; opacity: 0; }

  85% { opacity: 1; }

  100% { left: 200%; opacity: 0; }

}



@keyframes flicker {

  0% { opacity: 0.8; transform: scale(1); filter: drop-shadow(0 0 2px orange); }

  50% { opacity: 1; transform: scale(1.2); filter: drop-shadow(0 0 8px orange); }

  100% { opacity: 0.8; transform: scale(1); filter: drop-shadow(0 0 2px orange); }

}

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

.intel-box {

  display: none;

  position: relative;

  flex-direction: row;

  align-items: center;

  justify-content: space-between;

  

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

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  

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

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

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

              0 0 0 1px rgba(255, 42, 109, 0.05) inset;

  

  padding: 16px 20px;

  margin-bottom: 25px;

  border-radius: 12px;

  

  text-decoration: none;

  overflow: hidden;

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

  

  animation: slideInHUD 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);

}



.intel-box:hover {

  transform: translateY(-2px);

  border-color: var(--red);

  background: rgba(20, 10, 15, 0.9);

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

}

.intel-box:active { transform: scale(0.98); }

.intel-box::after {

  content: '';

  position: absolute;

  top: 0;

  left: -150%;

  width: 100%;

  height: 100%;

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

  transform: skewX(-20deg);

  animation: holoScan 4s infinite ease-in-out;

  pointer-events: none;

}



.intel-wrap {

  display: flex;

  align-items: center;

  gap: 15px;

  flex: 1;

  z-index: 2;

}



.intel-icon-new {

  width: 36px;

  height: 36px;

  border-radius: 50%;

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

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

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  color: var(--red);

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

  animation: pulseCore 2s infinite;

  flex-shrink: 0;

}



.intel-info {

  display: flex;

  flex-direction: column;

}



.intel-title { 

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

  font-weight: 800; 

  color: var(--red); 

  font-size: 10px; 

  letter-spacing: 2px; 

  text-transform: uppercase;

  margin-bottom: 4px;

  opacity: 0.8;

  display: flex;

  align-items: center;

  gap: 5px;

}

.intel-title::before {

  content: ''; display: block; width: 6px; height: 6px; background: var(--red); border-radius: 50%;

}



.intel-msg { 

  color: #fff; 

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

  font-size: 12px; 

  font-weight: 600; 

  line-height: 1.4;

  text-shadow: 0 0 10px rgba(0,0,0,0.8);

}



.intel-action-btn {

  background: transparent;

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

  color: #fff;

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

  font-weight: bold;

  font-size: 10px;

  padding: 6px 10px;

  border-radius: 4px;

  letter-spacing: 1px;

  transition: 0.2s;

  white-space: nowrap;

  z-index: 2;

}



.intel-box:hover .intel-action-btn {

  background: var(--red);

  border-color: var(--red);

  color: #000;

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

}

.intel-bg-grid {

  position: absolute; inset: 0;

  background-image: 

      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),

      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

  background-size: 20px 20px;

  opacity: 0.5;

  pointer-events: none;

}



.intel-scan-beam {

  position: absolute;

  top: 0; left: -100%;

  width: 50%; height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 42, 109, 0.15), transparent);

  transform: skewX(-20deg);

  animation: hudScan 4s infinite ease-in-out;

  pointer-events: none;

}



.intel-wrap {

  display: flex; align-items: center; gap: 16px; flex: 1; z-index: 2;

}



.intel-icon-frame {

  width: 42px; height: 42px;

  border-radius: 10px;

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

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

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

  color: var(--red);

  position: relative;

  flex-shrink: 0;

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

}



.intel-icon-frame svg {

  width: 20px; height: 20px;

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

}



.icon-pulse-ring {

  position: absolute; inset: -4px;

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

  border-radius: 12px;

  opacity: 0;

  animation: iconRipple 2s infinite;

}



.intel-info { display: flex; flex-direction: column; gap: 2px; }



.intel-header {

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

  font-weight: 700;

  font-size: 10px;

  color: var(--red);

  text-transform: uppercase;

  letter-spacing: 2px;

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

  opacity: 0.9;

}

.sys-dot { font-size: 8px; animation: blink 2s infinite; }



.intel-msg {

  color: #fff;

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

  font-size: 13px;

  font-weight: 600;

  line-height: 1.4;

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

  max-width: 90%;

}



.intel-arrow-box {

  color: #666;

  transition: 0.3s;

  width: 24px; height: 24px;

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

}

.intel-box:hover .intel-arrow-box {

  color: #fff;

  transform: translateX(4px);

  filter: drop-shadow(0 0 5px #fff);

}



@keyframes hudScan {

  0% { left: -100%; opacity: 0; }

  10% { opacity: 1; }

  90% { opacity: 1; }

  100% { left: 200%; opacity: 0; }

}



@keyframes iconRipple {

  0% { transform: scale(0.8); opacity: 0.8; border-color: var(--red); }

  100% { transform: scale(1.4); opacity: 0; border-color: transparent; }

}



@keyframes slideInHUD {

  from { opacity: 0; transform: translateY(-10px) scale(0.98); }

  to { opacity: 1; transform: translateY(0) scale(1); }

}

@keyframes holoScan {

  0% { left: -150%; opacity: 0; }

  20% { opacity: 1; }

  80% { opacity: 1; }

  100% { left: 150%; opacity: 0; }

}



@keyframes slideInHUD {

  from { opacity: 0; transform: translateY(-20px) scale(0.95); }

  to { opacity: 1; transform: translateY(0) scale(1); }

}



@keyframes pulseCore {

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

  70% { box-shadow: 0 0 0 10px rgba(255, 42, 109, 0); }

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

}



@keyframes sweep { 0% { left: -100%; } 50%,100% { left: 200%; } }

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

@keyframes pulse { 0%{opacity:1} 50%{opacity:0.5} 100%{opacity:1} }

#rewind-overlay {

  display: none; position: fixed; inset: 0; 

  background: #050508; z-index: 30000;

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

  animation: fadeIn 0.3s ease-out;

}



#rewind-overlay::before {

    content: ''; position: absolute; inset: 0;

    background: 

        radial-gradient(circle at 50% 50%, transparent 0%, #000 90%),

        url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjMDUwNTA4Ii8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz4KPC9zdmc+');

    z-index: -1;

    pointer-events: none;

}



.rw-progress-bar {

  position: absolute; top: 10px; left: 10px; right: 10px;

  display: flex; gap: 4px; height: 3px; z-index: 30002;

}

.rw-prog-fill { 

    flex: 1; background: rgba(255,255,255,0.2); border-radius: 2px; transition: background 0.3s;

}

.rw-prog-fill.active { 

    background: #fff; 

    box-shadow: 0 0 10px #fff; 

}



#rewind-content {

  width: 100%; height: 100%;

  position: relative; 

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

  overflow: hidden;

  z-index: 30001;

}



.rw-slide {

  width: 100%; height: 100%;

  position: absolute; inset: 0;

  display: none; 

  flex-direction: column;

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

  padding: 30px;

  text-align: center;

  

  background: radial-gradient(circle at center, rgba(var(--pc-rgb), 0.15) 0%, transparent 60%);

}

.rw-slide.active-slide { display: flex; animation: slideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }

.insert-logo-s svg, .insert-logo-s svg path {

    fill: var(--pc) !important;

    filter: drop-shadow(0 0 10px var(--pc));

}

.rw-story-head {

    position: absolute; top: 25px; left: 0; width: 100%;

    display: flex; flex-direction: column; align-items: center; gap: 5px;

    z-index: 10;

}

.rw-head-text {

    font-size: 10px; letter-spacing: 4px; color: #fff;

    font-weight: 800; text-transform: uppercase;

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

}

.rw-head-text span { color: #666; font-weight: 600; }



.rw-story-head-big {

    margin-bottom: 20px;

    display: flex; flex-direction: column; align-items: center; gap: 10px;

    animation: slideDown 0.5s ease-out;

}

.rw-story-head-big .rw-head-text {

    font-size: 24px;

    letter-spacing: 8px;

    text-shadow: 0 0 30px var(--pc);

}

.rw-story-head span { color: var(--pc); text-shadow: 0 0 10px var(--pc); }



.rw-neon-icon {

    width: 120px; height: 120px;

    margin: 0 auto 30px auto;

    color: var(--pc);

    filter: drop-shadow(0 0 25px var(--pc));

    animation: floatIcon 4s infinite ease-in-out;

}

.rw-neon-icon svg { width: 100%; height: 100%; stroke-width: 1.2; stroke: currentColor; fill: none; }



.rw-stat-big {

    font-size: 72px; font-weight: 900; color: #fff;

    line-height: 0.9; margin-bottom: 10px;

    text-shadow: 0 0 40px rgba(var(--pc-rgb), 0.5);

    letter-spacing: -2px;

}

.rw-label {

    font-family: 'Montserrat'; font-size: 12px; color: var(--pc);

    text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px;

    font-weight: bold;

}

.rw-desc {

    font-family: 'Montserrat'; font-size: 14px; color: #ccc;

    line-height: 1.6; max-width: 320px; margin: 0 auto;

    font-weight: 500;

}



.arch-card-wrapper {

    position: relative;

    width: 100%; max-width: 340px;

    padding: 3px;

    background: linear-gradient(135deg, var(--pc), #000, var(--pc));

    border-radius: 20px;

    box-shadow: 0 0 50px rgba(var(--pc-rgb), 0.3);

    animation: borderRotate 4s linear infinite;

}

.arch-card-inner {

    background: #0a0a0f;

    border-radius: 18px;

    padding: 40px 20px;

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

    position: relative; overflow: hidden;

}

.arch-card-inner::before {

    content: ''; position: absolute; inset: 0;

    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);

    background-size: 200% 100%;

    animation: shine 3s infinite;

}



.arch-title {

    font-size: 42px; font-weight: 900; color: #fff;

    text-transform: uppercase; margin: 20px 0 10px 0;

    line-height: 0.9; letter-spacing: 1px;

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

}

.arch-tag {

    background: var(--pc); color: #000;

    padding: 4px 10px; border-radius: 4px;

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

}



.rw-footer {

    position: absolute; bottom: 40px; width: 100%;

    text-align: center;

    font-size: 10px; color: #555; letter-spacing: 2px;

    text-transform: uppercase;

}



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

@keyframes borderRotate { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }

@keyframes shine { 0%{background-position: 100% 0} 100%{background-position: -100% 0} }



.rw-close { position: absolute; top: 20px; right: 20px; color: #fff; background: none; border: none; font-size: 32px; cursor: pointer; z-index: 30005; }

.intel-card {

  background: linear-gradient(90deg, rgba(255, 159, 0, 0.05) 0%, #0a0a0e 100%);

  border: 1px solid #333;

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

  border-radius: 12px;

  margin-bottom: 25px;

  display: flex;

  align-items: center;

  padding: 18px 15px;

  cursor: pointer;

  position: relative;

  overflow: hidden;

  box-shadow: 0 5px 20px rgba(0,0,0,0.3);

  transition: 0.3s;

}



.intel-card:hover {

  transform: translateY(-3px);

  border-color: var(--org);

  box-shadow: 0 10px 40px rgba(255, 159, 0, 0.15);

}

.intel-l { margin-right: 15px; }

.intel-icon-box {

  width: 45px; height: 45px;

  border-radius: 8px;

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

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

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

  font-size: 20px;

  color: var(--org);

  animation: pulseOrg 3s infinite;

}



.intel-c { flex: 1; overflow: hidden; }

.intel-sub { 

  font-size: 9px; color: var(--org); font-weight: bold; letter-spacing: 2px; 

  margin-bottom: 4px; display:flex; align-items:center; gap:5px;

}

.intel-tit { 

  font-family: 'Rajdhani'; font-weight: 800; font-size: 18px; color: #fff; 

  line-height: 1.1; margin-bottom: 4px; text-transform: uppercase;

}

.intel-teaser { 

  font-size: 10px; color: #aaa; font-style: italic; 

  border-left: 2px solid #444; padding-left: 8px;

}



.intel-r { margin-left: 10px; }

.intel-btn-unlock {

  background: var(--org); color: #000;

  border: none; padding: 8px 12px;

  border-radius: 6px;

  font-size: 10px; font-weight: 800; font-family: 'Rajdhani';

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

  box-shadow: 0 0 15px rgba(255, 159, 0, 0.4);

  transition: 0.2s;

}

.intel-card:hover .intel-btn-unlock { transform: scale(1.05); background: #fff; }



.intel-dossier {

  width: 95%; 

  max-width: 420px;

  max-height: 85vh;

  background: #0f0f13;

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

  border-top: 4px solid var(--org);

  border-radius: 16px;

  overflow: hidden;

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

  text-align: left;

  display: flex; 

  flex-direction: column;

}

.dossier-scroll-content {

  overflow-y: auto;

  flex: 1;

  padding-bottom: 20px;

  

  scrollbar-width: thin;

  scrollbar-color: var(--org) #111;

}



.dossier-scroll-content::-webkit-scrollbar { width: 6px; }

.dossier-scroll-content::-webkit-scrollbar-track { background: #111; }

.dossier-scroll-content::-webkit-scrollbar-thumb { background: var(--org); border-radius: 3px; }

.dossier-head {

  padding: 25px 20px;

  background: linear-gradient(180deg, rgba(255,159,0,0.05), transparent);

  border-bottom: 1px solid #222;

}

.dossier-name { 

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

  line-height: 0.9; color: #fff; text-transform: uppercase; margin-bottom: 5px; 

  text-shadow: 0 0 20px rgba(255, 159, 0, 0.3);

}

.dossier-role { font-size: 11px; color: var(--org); font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }



.dossier-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #222; }

.d-cell { padding: 15px; border-right: 1px solid #222; }

.d-cell:last-child { border-right: none; }

.d-lbl { font-size: 9px; font-weight: bold; margin-bottom: 5px; opacity: 0.7; }

.d-val { font-family: 'Rajdhani'; font-weight: bold; font-size: 13px; line-height: 1.2; text-transform: uppercase; }

.d-cell.bad .d-lbl { color: var(--red); }

.d-cell.good .d-lbl { color: var(--grn); }



.dossier-takeaway {

  margin: 20px; padding: 15px;

  border: 1px dashed var(--org);

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

  border-radius: 8px;

  font-size: 13px; color: #fff; line-height: 1.5;

}



@keyframes pulseOrg { 0%{box-shadow:0 0 0 0 rgba(255,159,0,0.4)} 70%{box-shadow:0 0 0 10px rgba(0,0,0,0)} }

.intel-player {

  background: #08080a;

  border-bottom: 1px solid #333;

  padding: 12px 20px;

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

}

.ip-btn {

  width: 36px; height: 36px; border-radius: 50%;

  background: var(--pur); border: none; color: #fff;

  font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;

  box-shadow: 0 0 10px rgba(188,19,254,0.3); transition: 0.2s;

}

.ip-btn:active { transform: scale(0.9); }

.ip-info { flex: 1; }

.ip-lbl { font-size: 8px; color: #666; letter-spacing: 1px; font-weight: bold; margin-bottom: 2px; }

.ip-status { font-family: 'Rajdhani'; font-weight: bold; font-size: 12px; color: #fff; }

.ip-wave { color: var(--pur); font-weight: bold; letter-spacing: 2px; font-size: 10px; animation: pulsePur 1s infinite; }



.dossier-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #222; }

.d-cell { padding: 15px; border-right: 1px solid #222; }

.d-cell:last-child { border-right: none; }

.d-lbl { font-size: 8px; font-weight: bold; margin-bottom: 6px; opacity: 0.6; letter-spacing: 1px; }

.d-val { font-family: 'Rajdhani'; font-weight: bold; font-size: 13px; line-height: 1.2; text-transform: uppercase; }

.d-cell.bad .d-lbl { color: var(--red); }

.d-cell.good .d-lbl { color: var(--grn); }



.dossier-desc { padding: 20px; font-size: 13px; color: #aaa; line-height: 1.6; }



.dossier-takeaway {

  margin: 0 20px 20px 20px;

  padding: 15px;

  border: 1px dashed var(--pur);

  background: rgba(188, 19, 254, 0.05);

  border-radius: 8px;

  font-size: 12px; color: #fff; line-height: 1.5;

}



.dossier-actions { padding: 20px; display: flex; flex-direction: column; gap: 10px; background: #050508; border-top: 1px solid #222; }



.btn-spotify {

  width: 100%; padding: 14px;

  background: #1DB954; color: #000;

  border: none; border-radius: 8px;

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

  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;

  transition: 0.2s; letter-spacing: 1px;

}

.btn-spotify:hover { background: #1ed760; transform: scale(1.02); }



.btn-close {

  width: 100%; padding: 12px;

  background: transparent; color: #666;

  border: 1px solid #333; border-radius: 8px;

  font-size: 11px; font-weight: bold; cursor: pointer; letter-spacing: 1px;

}

.btn-close:hover { color: #fff; border-color: #fff; }

.profile-box {

  padding: 20px 20px 10px 20px;

  border-bottom: 1px solid #222;

  background: rgba(255, 159, 0, 0.02);

}



.profile-text {

  font-size: 13px;

  color: #ddd;

  line-height: 1.5;

  margin-top: 5px;

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

  font-weight: 600;

}

.tac-wrapper { width: 100%; max-width: 600px; margin: 0 auto 25px auto; display: none; }



.case-file-box {

  background: linear-gradient(180deg, rgba(20, 10, 10, 0.95) 0%, #050505 100%);

  border: 1px solid #333;

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

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

  padding: 20px; border-radius: 12px; position: relative; overflow: hidden;

  animation: slideDown 0.5s ease-out;

}



.case-file-box::before { 

  content: ''; position: absolute; top:0; left:0; width:100%; height:100%; 

  background-image: radial-gradient(#222 1px, transparent 1px); 

  background-size: 20px 20px; opacity: 0.1; pointer-events: none; 

}



.cf-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #333; padding-bottom: 10px; margin-bottom: 15px; }

.cf-label { font-size: 10px; color: var(--red); letter-spacing: 2px; font-weight: bold; }

.cf-title { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1; }

.status-badge { 

  font-family: 'Rajdhani'; font-weight: 700; font-size: 10px; 

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

  padding: 2px 8px; border-radius: 2px; 

  animation: blink 2s infinite; background: rgba(255, 42, 109, 0.1); 

}

.confirm-screen { text-align: center; padding: 30px 10px; animation: fadeIn 0.5s; }

.confirm-icon { font-size: 40px; margin-bottom: 15px; animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: block; }

.confirm-title { font-family: 'Rajdhani'; font-weight: 800; font-size: 24px; color: #fff; margin-bottom: 5px; }

.confirm-sub { color: #888; font-size: 13px; line-height: 1.5; max-width: 80%; margin: 0 auto; }

.confirm-time { color: var(--red); font-weight: bold; font-family: 'Rajdhani'; font-size: 16px; display: block; margin-top: 5px; }

.audio-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5px; }

.audio-label { 

  font-family: 'Rajdhani'; font-weight: bold; font-size: 11px; color: var(--ac, #fff); 

  text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 5px;

}

.audio-badge {

  background: var(--ac, #fff); color: #000; font-size: 9px; padding: 1px 4px; border-radius: 2px;

  animation: pulse 2s infinite; font-weight: 800;

}

.audio-brief { 

  background: #08080a; border-left: 2px solid var(--red); 

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

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

}

.wf-bar { width: 3px; background: var(--red); animation: wave 1s infinite; opacity: 0.6; height: 10px; border-radius: 2px; }



.scenario-text { 

  font-size: 14px; line-height: 1.6; color: #ccc; 

  margin-bottom: 25px; font-style: italic; 

  border-left: 1px solid #333; padding-left: 15px; 

}



.tactic-btn { 

  display: flex; 

  align-items: flex-start;

  gap: 15px; 

  width: 100%; 

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

  border: 1px solid #333; 

  color: #fff; 

  padding: 16px;

  margin-bottom: 10px; 

  text-align: left; 

  cursor: pointer; 

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

  border-radius: 6px; 

}



.tactic-btn:hover { 

  border-color: #666; 

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

  transform: translateX(4px); 

}



.tactic-btn.selected { 

  border-color: var(--red); 

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

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

  transform: translateX(4px);

}



.tb-id { 

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

  font-weight: 800; 

  font-size: 24px;

  color: #444; 

  width: 25px; 

  line-height: 1;

  margin-top: 2px;

  transition: 0.2s;

}



.tactic-btn.selected .tb-id { 

  color: var(--red); 

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

}



.tb-content {

  flex: 1;

}



.tb-txt { 

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

  font-weight: 700; 

  font-size: 15px; 

  color: #fff; 

  text-transform: uppercase;

  line-height: 1.2;

  margin-bottom: 0;

}



.tb-sub { 

  display: block; 

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

  font-size: 12px;

  color: #999;

  

  margin-top: 6px;

  line-height: 1.5;

  

  font-weight: 400; 

  text-transform: none;

  letter-spacing: 0;

}



.lock-trigger { 

  width: 100%; margin-top: 15px; 

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

  padding: 15px; font-family: 'Rajdhani'; font-weight: 800; 

  font-size: 16px; letter-spacing: 2px; cursor: pointer; 

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

  animation: pulseRed 2s infinite; display: none; 

}



.locked-screen { text-align: center; padding: 40px 20px; border: 1px dashed #333; background: #0a0a0c; border-radius: 4px; }

.lock-timer { font-family: 'Rajdhani'; font-size: 32px; font-weight: 700; color: var(--red); margin: 10px 0; text-shadow: 0 0 10px rgba(255,42,109,0.3); }



.verdict-box { border: 1px solid #333; border-radius: 12px; overflow: hidden; background: #050505; position: relative; animation: slideDown 0.5s ease-out; }

.verdict-box.win { border-color: var(--grn); box-shadow: 0 0 20px rgba(0,255,157,0.15); }

.verdict-box.lose { border-color: var(--red); box-shadow: 0 0 20px rgba(255,42,109,0.15); }

.v-header { padding: 25px 20px; text-align: center; background: radial-gradient(circle at top, rgba(255,255,255,0.05), transparent 70%); border-bottom: 1px solid #222; }

.v-title { font-family: 'Rajdhani'; font-weight: 800; font-size: 28px; letter-spacing: 2px; margin: 10px 0 5px 0; line-height: 1; }

.win .v-title { color: var(--grn); } .lose .v-title { color: var(--red); }



@keyframes blink { 50% { opacity: 0.4; } }

@keyframes wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.8); } }



.tac-tray {

  background: #050505; border: 1px solid #333; border-top: 2px solid var(--red);

  padding: 12px 20px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between;

  box-shadow: 0 5px 20px rgba(0,0,0,0.5); margin-bottom: 25px;

}



.audio-meta { font-size: 9px; color: #666; margin-left: 5px; font-weight: normal; letter-spacing: 1px; }

.tray-status { font-family: 'Rajdhani'; font-weight: 800; font-size: 12px; color: var(--red); letter-spacing: 2px; animation: blink 2s infinite; }

.tray-timer { font-family: 'Rajdhani'; font-weight: bold; font-size: 16px; color: #fff; text-shadow: 0 0 10px var(--red); }



.audio-viz-box {

  display: flex;

  align-items: center;

  gap: 15px;

  

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

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

  border-left: 2px solid var(--ac, #fff);

  border-radius: 6px;

  padding: 10px 15px;

  

  width: 100%;

  height: 50px;

  box-sizing: border-box;

  transition: 0.3s;

}



.audio-viz-box.playing {

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

  border-color: rgba(255,255,255,0.2);

  box-shadow: 0 0 15px rgba(0,0,0,0.3) inset;

}



.play-trigger {

  width: 32px; height: 32px;

  flex-shrink: 0;

  border-radius: 50%;

  background: transparent;

  border: 1px solid #555;

  color: #fff;

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

  font-size: 10px; cursor: pointer;

  transition: 0.2s;

}

.play-trigger:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.playing .play-trigger { 

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

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

}



.viz-bars {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 20px;

  gap: 2px;

}



.v-bar {

  width: 3px;

  background: #333;

  height: 4px;

  border-radius: 2px;

  transition: height 0.2s ease, background 0.2s;

}



.playing .v-bar {

  background: var(--ac);

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

  animation: equalizer 0.8s infinite ease-in-out alternate;

}



.audio-meta {

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

  color: #666; width: 40px; text-align: right; letter-spacing: 0.5px;

}

.playing .audio-meta { color: #fff; text-shadow: 0 0 5px rgba(255,255,255,0.5); }

.v-bar:nth-child(odd) { animation-duration: 0.6s; }

.v-bar:nth-child(even) { animation-duration: 0.9s; }

.v-bar:nth-child(3n) { animation-duration: 0.7s; }

.v-bar:nth-child(4n) { animation-duration: 1.1s; }

.v-bar:nth-child(5n) { animation-duration: 0.5s; }



@keyframes equalizer {

  0% { height: 4px; opacity: 0.5; }

  100% { height: 100%; opacity: 1; }

}

.tac-lure {

  background: #050508;

  border: 1px solid #333;

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

  border-radius: 6px;

  padding: 15px;

  cursor: pointer;

  position: relative;

  overflow: hidden;

  box-shadow: 0 5px 15px rgba(0,0,0,0.5);

  transition: 0.3s;

  animation: slideDown 0.5s ease-out;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.tac-lure:hover { border-color: #555; border-left-color: var(--red); }

.tac-lure:active { transform: scale(0.98); background: #0a0a0e; }

.tac-lure::before {

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

  background: linear-gradient(90deg, transparent, rgba(255, 42, 109, 0.2), transparent);

  animation: sweep 3s infinite; pointer-events: none;

}

.lure-content { display: flex; flex-direction: column; }

.lure-title { font-family: 'Rajdhani'; font-weight: 800; font-size: 14px; color: var(--red); letter-spacing: 1px; margin-bottom: 2px; text-transform: uppercase; }

.lure-sub { font-size: 9px; color: #fff; opacity: 0.8; letter-spacing: 2px; font-weight: bold; }

.lure-timer { 

  background: #000; border: 1px solid #444; color: var(--red); 

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

  padding: 5px 8px; border-radius: 4px; min-width: 60px; text-align: center;

}

.lure-header {

  display: flex; justify-content: space-between; align-items: center;

  border-bottom: 1px dashed #222; padding-bottom: 8px; margin-bottom: 5px;

}

.lure-id { 

  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 10px; 

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

}

.lure-badge {

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

  border: 1px solid var(--red); padding: 2px 6px; border-radius: 3px;

  background: rgba(255, 42, 109, 0.05); animation: pulseRed 2s infinite;

}



.lure-main { display: flex; justify-content: space-between; align-items: flex-end; }

.lure-texts { flex: 1; }

.lure-title { 

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

  color: #fff; margin-bottom: 4px; line-height: 1.1; 

}

.lure-sub { 

  font-size: 11px; color: var(--red); opacity: 0.8; 

  font-family: 'Montserrat', sans-serif; letter-spacing: 0.5px;

}



.lure-footer {

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

}

.lure-timer {

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

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

  padding: 4px 10px; border-radius: 4px; letter-spacing: 1px;

}

.lure-action {

  font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 1px;

}



@keyframes pulseRed { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

.hold-btn {

  position: relative; width: 100%; padding: 18px; margin-top: 15px;

  background: #111; border: 1px solid #444; color: #666;

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

  overflow: hidden; cursor: pointer; user-select: none; border-radius: 4px;

  display: none;

  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;

}

.hold-bg {

  position: absolute; top: 0; left: 0; bottom: 0; width: 0%;

  background: var(--red); z-index: 0;

  transition: width 2s linear; 

}

.hold-text { position: relative; z-index: 1; pointer-events: none; transition: 0.2s; }

.hold-btn.charging .hold-text { color: #000; text-shadow: none; }

.decrypting { color: var(--grn); text-shadow: 0 0 5px var(--grn); }



.v-actions { display: flex; gap: 10px; margin-top: 20px; border-top: 1px solid #222; padding-top: 15px; }

.btn-archive { 

  flex: 1; padding: 12px; background: transparent; border: 1px solid #444; color: #666; 

  font-family: 'Rajdhani'; font-weight: bold; font-size: 12px; cursor: pointer; border-radius: 4px; 

}

.btn-archive:hover { border-color: #fff; color: #fff; }



.play-trigger { 

  width: 30px; height: 30px; border-radius: 50%; background: #222; color: #fff; 

  display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; border: 1px solid #555;

}

.playing .play-trigger { border-color: var(--ac); background: var(--ac); color: #000; animation: pulse 1s infinite; }

.bg-phoenix { background: linear-gradient(160deg, #ff4d00, #220500); }

.bg-peak    { background: linear-gradient(160deg, #00ff9d, #002211); }

.bg-iron    { background: linear-gradient(160deg, #555, #111); }

:root {

  --bg: #050508;

  --grn: #00ff9d;

  --hc: var(--grn);

}



.amb {

  position: fixed;

  top: 0; 

  left: 0; 

  width: 100%; 

  height: 100%;

  background: radial-gradient(circle at 50% 30%, var(--stl), transparent 70%);

  opacity: 0.15;

  z-index: -1;

  pointer-events: none;

  animation: br 4s infinite;

}



@keyframes br {

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

  50% { opacity: 0.25; transform: scale(1.05); }

}



.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(--hc);

  padding: 10px 15px; margin: 10px 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); } }

.cycle-box {

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

  border: 1px solid #333;

  border-radius: 8px;

  padding: 15px;

  margin-bottom: 25px;

}



.cycle-head {

  display: flex; justify-content: space-between; align-items: center;

  margin-bottom: 10px;

}

.cycle-tit {

  font-family: 'Rajdhani', sans-serif; font-weight: bold; font-size: 11px;

  color: #888; letter-spacing: 1px; text-transform: uppercase;

}

.cycle-status {

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

  color: var(--grn); text-transform: uppercase;

  animation: blink 2s infinite;

}



.timeline {

  display: flex; gap: 4px; height: 24px;

}



.t-day {

  flex: 1;

  background: #1a1a20;

  border: 1px solid #333;

  border-radius: 2px;

  position: relative;

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

  font-family: 'Rajdhani'; font-weight: bold; font-size: 10px; color: #444;

  transition: 0.3s;

}



.t-day.weekend {

  border-color: rgba(255, 42, 109, 0.3);

}



.t-day.active {

  background: var(--grn); color: #000;

  border-color: var(--grn);

  box-shadow: 0 0 10px rgba(0,255,157,0.3);

  transform: scaleY(1.1); z-index: 2;

}

.t-day.weekend.active {

  background: var(--red); color: #fff;

  border-color: var(--red);

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

}



.t-day.past {

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

  color: #666;

}



.t-labels {

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

  margin-top: 5px; font-size: 8px; color: #555; font-family: 'Rajdhani'; text-transform: uppercase;

}



@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.5} }

.cycle-pill {

  display: inline-flex; align-items: center; gap: 6px;

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

  border: 1px solid #333;

  padding: 4px 10px;

  border-radius: 20px;

  cursor: pointer;

  transition: 0.3s;

  margin-bottom: 10px;

}

.cycle-pill:hover {

  border-color: var(--grn);

  box-shadow: 0 0 10px rgba(0, 255, 157, 0.2);

}



.pill-dot {

  width: 6px; height: 6px; border-radius: 50%;

  background: var(--grn);

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

  animation: blink 2s infinite;

}

.pill-txt {

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

  color: #aaa; letter-spacing: 1px; text-transform: uppercase;

}

.pill-val { color: #fff; margin-left: 2px; }







.t-day {

  position: relative;

  cursor: help;

}



.t-day::after {

  content: attr(data-tooltip);

  

  position: absolute;

  bottom: 140%;

  left: 50%; transform: translateX(-50%);

  

  width: 140px;

  padding: 8px;

  background: #111;

  border: 1px solid var(--ac, #fff);

  color: #fff;

  

  font-family: 'Montserrat'; font-size: 9px; font-weight: normal; text-transform: none; text-align: center;

  border-radius: 4px;

  box-shadow: 0 5px 15px rgba(0,0,0,0.8);

  

  opacity: 0; visibility: hidden;

  transition: 0.2s;

  pointer-events: none;

  z-index: 100;

  line-height: 1.4;

}



.t-day::before {

  content: '';

  position: absolute;

  bottom: 120%; left: 50%; transform: translateX(-50%);

  border: 5px solid transparent;

  border-top-color: var(--ac, #fff);

  

  opacity: 0; visibility: hidden;

  transition: 0.2s;

  z-index: 100;

}



.t-day:hover::after, .t-day:hover::before,

.t-day:focus::after, .t-day:focus::before,

.t-day:active::after, .t-day:active::before {

  opacity: 1; visibility: visible;

  bottom: 150%;

}

.t-day:hover::before, .t-day:focus::before, .t-day:active::before {

  bottom: 130%; 

}

.proto-sec {

  margin-bottom: 30px;

}

.sec-h-row { 

  display: flex; 

  justify-content: space-between; 

  align-items: center;

  margin-bottom: 15px; 

  padding: 0 5px;

  white-space: nowrap;

}



.sec-h { 

  font-family: 'Rajdhani'; 

  font-weight: 700; 

  font-size: 14px; 

  letter-spacing: 1px; 

  color: #fff; 

  display: flex; 

  align-items: center; 

  gap: 8px;

}



.sec-tag {

  font-size: 9px; 

  color: #666; 

  letter-spacing: 0;

  text-transform: uppercase;

}



.sec-link { 

  font-size: 10px; 

  color: var(--pc); 

  text-decoration: none; 

  font-weight: 700; 

  letter-spacing: 1px;

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

  padding: 4px 8px;

  border-radius: 4px;

  transition: 0.2s;

}



.sec-link:active {

  background: var(--pc);

  color: #000;

}



@media (max-width: 360px) {

  .sec-h { font-size: 13px; }

  .sec-tag { display: none; } 

}

.tape-scroll {

  display: flex; gap: 15px;

  overflow-x: auto; 

  padding: 10px 5px 20px 5px;

  scroll-snap-type: x mandatory; 

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

}

.tape-scroll::-webkit-scrollbar { display: none; }



.tape-card {

  position: relative;

  min-width: 160px; 

  height: 100px;

  flex-shrink: 0; 

  scroll-snap-align: start;

  

  background: rgba(20, 20, 25, 0.6);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  

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

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

  

  border-radius: 12px;

  padding: 12px;

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

  

  cursor: pointer;

  overflow: hidden;

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

  box-shadow: 0 5px 15px rgba(0,0,0,0.3);

}



.tape-card:active, .tape-card:hover { 

  transform: translateY(-3px) scale(1.02); 

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

  box-shadow: 0 10px 25px rgba(0,0,0,0.5), inset 0 0 20px var(--tc-dim);

  border-color: rgba(255,255,255,0.2);

}



.tape-card::before {

  content: ''; position: absolute;

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

  background: linear-gradient(135deg, var(--tc), transparent 60%);

  opacity: 0.1;

  pointer-events: none;

  transition: 0.3s;

}

.tape-card:hover::before { opacity: 0.2; }



.tape-scan {

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

  background: repeating-linear-gradient(

    0deg,

    transparent,

    transparent 2px,

    rgba(0, 0, 0, 0.3) 3px

  );

  opacity: 0.3; pointer-events: none;

  z-index: 0;

}



.tape-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }



.tape-top { display: flex; justify-content: space-between; align-items: flex-start; }



.tape-icon-box {

  width: 28px; height: 28px;

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

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

  border-radius: 6px;

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

  color: var(--tc);

  box-shadow: 0 0 10px var(--tc-dim);

  

  overflow: hidden; 

}



.tape-icon-box svg {

  width: 16px; 

  height: 16px; 

  stroke: currentColor; 

  stroke-width: 2;

}



.tape-play-mini svg {

  width: 8px; height: 8px; fill: #000; stroke: none;

}

.tape-id {

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

  color: #555; letter-spacing: 1px;

}



.tape-tit { 

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

  color: #fff; line-height: 1.1; text-transform: uppercase; 

  text-shadow: 0 2px 4px rgba(0,0,0,0.8);

  margin-bottom: 2px;

}



.tape-meta { 

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

  font-family: 'Rajdhani'; font-size: 9px; font-weight: 700; color: var(--tc); 

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

}



.tape-play-mini {

  width: 16px; height: 16px; border-radius: 50%; background: var(--tc); color: #000;

  display: flex; align-items: center; justify-content: center; font-size: 8px;

  margin-left: auto;

  box-shadow: 0 0 8px var(--tc);

}

.exp-card {

  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), #050508);

  border: 1px solid rgba(255, 215, 0, 0.3);

  border-radius: 12px;

  padding: 20px;

  position: relative;

  overflow: hidden;

  margin-bottom: 30px;

  display: block; text-decoration: none;

}

.exp-card::after {

  content: 'PREMIUM ACCESS';

  position: absolute; top: 10px; right: 10px;

  font-family: 'Rajdhani'; font-weight: 800; font-size: 40px; color: rgba(255, 215, 0, 0.03);

  pointer-events: none;

}



.exp-badge {

  background: var(--gld); color: #000;

  display: inline-block; padding: 3px 8px; border-radius: 4px;

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

  margin-bottom: 10px; box-shadow: 0 0 10px rgba(255,215,0,0.3);

}



.exp-tit { font-family: 'Rajdhani'; font-weight: 800; font-size: 20px; color: #fff; margin-bottom: 5px; }

.exp-sub { font-size: 11px; color: #aaa; margin-bottom: 15px; line-height: 1.4; max-width: 80%; }



.exp-prog-wrap { display: flex; align-items: center; gap: 10px; font-size: 9px; color: var(--gld); font-weight: bold; }

.exp-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }

.exp-fill { height: 100%; background: var(--gld); width: 10%; box-shadow: 0 0 5px var(--gld); }

html, body {

  overflow-x: hidden;

  width: 100%;

  position: relative;

}

.dashboard-frame {

    position: relative;

    

    width: 100%; 

    box-sizing: border-box;

    

    margin: 30px 0;

    padding: 25px 15px;

    

    background: rgba(10, 10, 12, 0.6); 

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

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

                inset 0 0 20px rgba(0, 0, 0, 0.8); 

    

    border-radius: 4px;     

    backdrop-filter: blur(5px); 

    

    animation: framePulse 4s infinite alternate;

}



.frame-label {

    position: absolute;

    top: -12px;

    left: 20px;

    background: #050505;

    padding: 0 10px;

    

    color: var(--red);

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

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

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

    z-index: 2;

}



.frame-corner-tl,

.frame-corner-br {

    position: absolute;

    width: 20px;

    height: 20px;

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

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

    pointer-events: none;

}



.frame-corner-tl {

    top: -1px;

    left: -1px;

    border-right: none;

    border-bottom: none;

}



.frame-corner-br {

    bottom: -1px;

    right: -1px;

    border-left: none;

    border-top: none;

}



@keyframes framePulse {

    0% { box-shadow: 0 0 20px rgba(255, 42, 109, 0.1); border-color: rgba(255, 42, 109, 0.3); }

    100% { box-shadow: 0 0 40px rgba(255, 42, 109, 0.25); border-color: rgba(255, 42, 109, 0.8); }

}

.streak-ico {

  margin-top: -1px;

  transition: all 0.5s ease;

  opacity: 0.5;

}



.streak-ico.burn {

  opacity: 1;

  color: var(--gld);

  filter: drop-shadow(0 0 5px rgba(255, 200, 0, 0.6));

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

}



@keyframes cyberBurn {

  0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 200, 0, 0.4)); }

  50% { transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(255, 200, 0, 0.8)); }

  100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 200, 0, 0.4)); }

}

.panic-zone {

  position: relative; overflow: hidden; border-radius: 8px; cursor: pointer;

  background: #000; border: 1px solid var(--red);

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

  margin-bottom: 25px;

  animation: panicPulse 3s infinite;

}

.panic-zone:active { transform: scale(0.98); }



.hazard-bg {

  position: absolute; inset: 0;

  background: repeating-linear-gradient(45deg, rgba(255, 42, 109, 0.1), rgba(255, 42, 109, 0.1) 10px, transparent 10px, transparent 20px);

  opacity: 0.5; z-index: 0;

}



.panic-content {

  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;

  padding: 18px; gap: 15px;

}



.panic-label {

  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 18px; color: #fff;

  letter-spacing: 4px; text-transform: uppercase; text-shadow: 0 0 10px var(--red);

}



@keyframes panic-breath {

  0%, 100% { filter: drop-shadow(0 0 5px var(--red)); opacity: 0.8; transform: scale(1); }

  50% { filter: drop-shadow(0 0 15px var(--red)); opacity: 1; transform: scale(1.05); }

}



@keyframes sos-pulse {

  0% { 

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

    transform: scale(1);

  }

  50% { 

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

    transform: scale(1.05);

  }

  100% { 

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

    transform: scale(1);

  }

}



.panic-icon-btn svg {

  animation: sos-pulse 2s infinite ease-in-out;

}



.panic-zone:active .panic-icon-btn svg {

  transform: scale(0.90);

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

  transition: 0.1s;

}



@keyframes panicPulse {

  0% { box-shadow: 0 0 10px rgba(255, 42, 109, 0.2); border-color: rgba(255, 42, 109, 0.5); }

  50% { box-shadow: 0 0 25px rgba(255, 42, 109, 0.5); border-color: var(--red); }

  100% { box-shadow: 0 0 10px rgba(255, 42, 109, 0.2); border-color: rgba(255, 42, 109, 0.5); }

}

@keyframes shake {

  0%, 90% { transform: rotate(0deg); }

  92% { transform: rotate(-10deg); } 94% { transform: rotate(10deg); }

  96% { transform: rotate(-10deg); } 98% { transform: rotate(10deg); } 100% { transform: rotate(0deg); }

}

@keyframes scanning { 0%{top:95%} 50%{top:5%} 100%{top:95%} }



.b-in { animation: box-in 4s ease-in-out forwards; }

.b-hold-high { animation: box-hold-high 4s linear forwards; }

.b-out { animation: box-out 4s ease-in-out forwards; }

.b-hold-low { animation: box-hold-low 4s linear forwards; }



@keyframes box-in { from { transform: scale(1); opacity: 0.2; } to { transform: scale(6); opacity: 0.8; } }

@keyframes box-hold-high { 0% { transform: scale(6); opacity: 0.8; } 100% { transform: scale(6); opacity: 0.8; } }

@keyframes box-out { from { transform: scale(6); opacity: 0.8; } to { transform: scale(1); opacity: 0.2; } }

@keyframes box-hold-low { 0% { transform: scale(1); opacity: 0.2; } 100% { transform: scale(1); opacity: 0.2; } }

.pulse-fire {

  filter: drop-shadow(0 0 2px rgba(255, 200, 0, 0.4));

  animation: heatGlow 2.5s infinite ease-in-out;

}



@keyframes heatGlow {

  0% { 

    transform: scale(1); 

    filter: drop-shadow(0 0 2px rgba(255, 200, 0, 0.4)); 

    opacity: 0.8;

  }

  50% { 

    transform: scale(1.1);

    filter: drop-shadow(0 0 8px rgba(255, 200, 0, 0.8));

    opacity: 1;

  }

  100% { 

    transform: scale(1); 

    filter: drop-shadow(0 0 2px rgba(255, 200, 0, 0.4)); 

    opacity: 0.8;

  }

}

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

#boot-sequence {

  font-family: 'Rajdhani', monospace;

  background-color: #000;

  overflow: hidden;

}



.crt-overlay {

  position: absolute; inset: 0; pointer-events: none; z-index: 10;

  background: repeating-linear-gradient(

    0deg,

    rgba(0, 0, 0, 0.15),

    rgba(0, 0, 0, 0.15) 1px,

    transparent 1px,

    transparent 2px

  );

  background-size: 100% 4px;

}



.term-line { margin-bottom: 2px; text-shadow: 0 0 5px var(--grn); }

.term-err { color: var(--red); text-shadow: 0 0 5px var(--red); font-weight: bold; }



.hud-ring {

  position: absolute; border: 1px solid var(--red); border-radius: 50%;

  box-shadow: 0 0 10px var(--red); opacity: 0.8;

}

.hud-spin-1 { width: 140px; height: 140px; border-top-color: transparent; border-bottom-color: transparent; animation: spin 2s infinite linear; }

.hud-spin-2 { width: 100px; height: 100px; border-left-color: transparent; border-right-color: transparent; animation: spin 1.5s infinite reverse linear; }

.hud-icon { font-size: 40px; animation: blink 0.2s infinite; }



.boot-card {

  background: rgba(10, 20, 15, 0.9);

  border: 1px solid #333;

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

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

  position: relative;

  transition: 0.3s;

}

.boot-card:focus-within {

  border-color: var(--grn);

  box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);

  transform: translateX(5px);

}

.boot-lbl {

  font-size: 9px; color: var(--grn); letter-spacing: 2px; font-weight: bold; text-transform: uppercase;

  margin-bottom: 5px; display: block;

}

.boot-in {

  width: 100%; background: transparent; border: none; color: #fff;

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

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

}

.boot-in::placeholder { color: #333; }



.btn-init {

  width: 100%; padding: 18px; margin-top: 10px;

  background: var(--grn); color: #000; border: none;

  font-family: 'Rajdhani'; font-weight: 800; font-size: 16px; letter-spacing: 4px;

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

  cursor: pointer; position: relative; overflow: hidden;

  transition: 0.2s;

}

.btn-init:hover { background: #fff; box-shadow: 0 0 30px var(--grn); }

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



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

@keyframes glitch-anim {

  0% { transform: translate(0); }

  20% { transform: translate(-2px, 2px); }

  40% { transform: translate(-2px, -2px); }

  60% { transform: translate(2px, 2px); }

  80% { transform: translate(2px, -2px); }

  100% { transform: translate(0); }

}

@keyframes alert-pulse {

  0% { 

    opacity: 1; 

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

  }

  50% { 

    opacity: 0.5;

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

  }

  100% { 

    opacity: 1; 

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

  }

}



.glitch {

  animation: alert-pulse 2s infinite ease-in-out; 

  color: var(--red);

}

@keyframes pulse-red-neon {

  0%, 100% { filter: drop-shadow(0 0 2px var(--red)) drop-shadow(0 0 5px var(--red)); opacity: 1; }

  50% { filter: drop-shadow(0 0 10px var(--red)) drop-shadow(0 0 20px var(--red)); opacity: 0.8; }

}



.svg-scan-core {

  animation: pulse-red-neon 0.5s infinite;

}

@keyframes scan-down {

  0% { top: 0%; opacity: 0; }

  10% { opacity: 1; }

  90% { opacity: 1; }

  100% { top: 100%; opacity: 0; }

}



.scan-laser {

  position: absolute; 

  left: 0; 

  width: 100%; 

  height: 2px;

  background: var(--red);

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

  animation: scan-down 1.5s infinite linear;

  z-index: 10;

}



.svg-static-core {

  opacity: 0.6; 

  filter: drop-shadow(0 0 5px rgba(255, 42, 109, 0.5));

}

.bio-container {

  position: relative; width: 240px; height: 240px;

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

}



.bio-ring {

  position: absolute; border-radius: 50%;

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

}



.bio-ring-1 { width: 100%; height: 100%; border-top-color: var(--red); animation: spin 4s infinite linear; }

.bio-ring-2 { width: 80%; height: 80%; border-bottom-color: var(--red); border-left-color: var(--red); animation: spin 3s infinite reverse linear; }

.bio-ring-3 { width: 60%; height: 60%; border: 1px dashed var(--red); opacity: 0.5; animation: pulse-slow 3s infinite; }



.bio-core {

  width: 50px; height: 50px;

  color: var(--red);

  filter: drop-shadow(0 0 10px rgba(255, 42, 109, 0.5));

}



.bio-scan-line {

  position: absolute; left: 0; width: 100%; height: 1px;

  background: var(--red);

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

  opacity: 0.8;

  animation: scan-precise 2s infinite ease-in-out;

}



@keyframes scan-precise {

  0% { top: 10%; opacity: 0; }

  20% { opacity: 1; }

  80% { opacity: 1; }

  100% { top: 90%; opacity: 0; }

}



@keyframes pulse-slow {

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

  50% { opacity: 0.7; transform: scale(1.02); }

}

@keyframes shake-input {

  0%, 100% { transform: translateX(0); border-color: #333; }

  20% { transform: translateX(-4px); border-color: var(--red); }

  40% { transform: translateX(4px); }

  60% { transform: translateX(-4px); }

  80% { transform: translateX(4px); border-color: var(--red); }

}



.input-error {

  animation: shake-input 0.4s ease-in-out;

  color: var(--red) !important;

}



.input-error-label {

  color: var(--red) !important;

}

#sys-tut-layer {

  position: fixed; inset: 0; z-index: 10010;

  background: transparent;

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

}



#sys-tut-box {

  position: fixed; z-index: 10011;

  left: 20px; right: 20px;

  max-width: 500px; margin: 0 auto;

  bottom: 40px; top: auto;

  

  background: #050508; border: 1px solid #333; border-left: 4px solid var(--pc); 

  padding: 20px; border-radius: 8px; z-index: 10001;

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

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

}



#sys-tut-box.moved-up { bottom: auto; top: 110px; }



.tm-icon {

  font-size: 40px;

  color: var(--blu);

  margin-bottom: 15px;



  display: flex;

  align-items: center;

  justify-content: center;

  height: 50px;

}



.tm-icon svg {

  width: 48px;

  height: 48px;

  stroke: currentColor;

  stroke-width: 1.5;

  stroke-linecap: round;

  stroke-linejoin: round;

  fill: none;

  filter: drop-shadow(0 0 10px currentColor);

}

#tm-head { font-family: 'Rajdhani'; font-weight: 800; font-size: 18px; color: var(--pc); letter-spacing: 2px; margin-bottom: 5px; text-transform:uppercase; }

#tm-body { font-size: 13px; color: #ccc; line-height: 1.5; margin-bottom: 20px; white-space: pre-line; }

#tm-nav { display: flex; justify-content: space-between; align-items: center; }



.b-tut-next { background: var(--pc); color: #000; border: none; padding: 10px 20px; font-weight: bold; font-family: 'Rajdhani'; letter-spacing: 1px; cursor: pointer; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

.b-tut-skip { background: transparent; color: #666; border: none; font-size: 11px; cursor: pointer; letter-spacing: 1px; }



#sys-tut-focus {

  position: fixed; top: 0; left: 0;

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

  box-shadow: 0 0 0 9999px rgba(0,0,0,0.85), 0 0 30px rgba(0,255,157,0.25); 

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

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

  opacity: 0; border-radius: 8px;

}

.f-corner { position: absolute; width: 8px; height: 8px; border-color: var(--pc); border-style: solid; }

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

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

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

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

@keyframes shake {

  0%, 100% { transform: translateX(0); }

  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }

  20%, 40%, 60%, 80% { transform: translateX(5px); }

}



.shake-box {

  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;

  border-color: var(--red) !important;

}



#sys-tut-focus {

  box-shadow: 0 0 0 9999px rgba(0,0,0,0.92), 0 0 30px rgba(0,255,157,0.25); 

}

.help-beacon {

  pointer-events: auto;

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

  border: 1px solid #444;

  border-radius: 20px;

  padding: 6px 14px;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 8px;

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

  

  position: relative;

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

}



.beacon-icon {

  width: 16px; height: 16px;

  border-radius: 50%;

  background: var(--yel);

  color: #000;

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

  font-weight: 800;

  font-size: 11px;

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

  box-shadow: 0 0 5px var(--yel);

  animation: beaconPulse 2s infinite;

}



.beacon-text {

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

  font-weight: 700;

  font-size: 10px;

  letter-spacing: 1px;

  color: #888;

  text-transform: uppercase;

  transition: 0.3s;

}



.help-beacon:hover {

  border-color: var(--yel);

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

  transform: translateY(-2px);

  box-shadow: 0 5px 20px rgba(255, 200, 0, 0.2);

}



.help-beacon:hover .beacon-text {

  color: #fff;

  text-shadow: 0 0 5px var(--yel);

}



.help-beacon:active {

  transform: scale(0.95);

}



@keyframes beaconPulse {

  0% { box-shadow: 0 0 0 0 rgba(255, 200, 0, 0.7); transform: scale(1); }

  70% { box-shadow: 0 0 0 6px rgba(255, 200, 0, 0); transform: scale(1.1); }

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

}

.info-btn {

  width: 22px; 

  height: 22px; 

  border-radius: 50%;

  border: 1px solid currentColor;

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

  

  display: flex; 

  align-items: center; 

  justify-content: center;

  

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

  font-weight: 800; 

  font-size: 12px;

  line-height: 1;

  color: inherit;

  

  cursor: pointer;

  transition: all 0.2s ease;

  

  position: relative;

  flex-shrink: 0;

}



.info-btn::after {

  content: '';

  position: absolute;

  top: -10px; bottom: -10px;

  left: -10px; right: -10px;

}



.info-btn:hover {

  background: currentColor;

  color: #000;

  box-shadow: 0 0 10px currentColor;

  transform: scale(1.1);

}

.layer-card {

    background: #15151a;

    border: 1px solid #333;

    border-radius: 8px;

    padding: 10px;

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    transition: 0.2s all;

    position: relative;

    overflow: hidden;

}



.layer-card input { display: none; }



.layer-card:hover {

    background: #202025;

    border-color: #555;

}



.layer-card.checked {

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

    border-color: var(--ac);

    box-shadow: 0 0 15px rgba(0,0,0,0.2) inset;

}



.lc-icon {

    font-size: 18px;

    filter: grayscale(1);

    transition: 0.2s;

}

.layer-card.checked .lc-icon {

    filter: grayscale(0);

    transform: scale(1.1);

}



.lc-tit { font-family: 'Rajdhani'; font-weight: bold; font-size: 13px; color: #888; transition:0.2s; }

.lc-sub { font-size: 10px; color: #555; font-weight: bold; }



.layer-card.checked .lc-tit { color: #fff; }

.layer-card.checked .lc-sub { color: var(--ac); }



.layer-card::after {

    content: '';

    position: absolute;

    top: 5px; right: 5px;

    width: 6px; height: 6px;

    border-radius: 50%;

    background: #333;

    transition: 0.2s;

}

.layer-card.checked::after {

    background: var(--ac);

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

}

#map-overlay { 

  display:none; 

  position:fixed; 

  inset:0; 

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

  z-index:10000; 

  padding:20px; 

  

  overflow-y:auto;

  align-items: flex-start;

  -webkit-overflow-scrolling: touch;

  

  animation:fade 0.3s; 

  backdrop-filter: blur(5px); 

}

.mini-viz {

    display: flex;

    align-items: flex-end;

    gap: 3px;

    height: 20px;

    margin-left: auto;

}



.mini-viz .bar {

    width: 4px;

    background: var(--org);

    height: 20%;

    transition: height 0.1s ease;

    border-radius: 2px;

}



@keyframes eq {

    0% { height: 20%; }

    50% { height: 100%; }

    100% { height: 20%; }

}



.mini-viz.playing .bar {

    animation: eq 0.5s infinite ease-in-out;

}



.mini-viz.playing .bar:nth-child(1) { animation-duration: 0.4s; }

.mini-viz.playing .bar:nth-child(2) { animation-duration: 0.6s; }

.mini-viz.playing .bar:nth-child(3) { animation-duration: 0.35s; }

.mini-viz.playing .bar:nth-child(4) { animation-duration: 0.5s; }

.mini-viz.playing .bar:nth-child(5) { animation-duration: 0.25s; }

.badge-founder {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  

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

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

  color: var(--gld);

  

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

  font-weight: 800;

  font-size: 10px;

  line-height: 1;

  letter-spacing: 1px;

  text-transform: uppercase;

  

  padding: 3px 6px;

  border-radius: 4px;

  margin-left: 8px;

  vertical-align: middle;

  

  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);

  animation: badgePulse 3s infinite ease-in-out;

}



@keyframes badgePulse {

  0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.2); opacity: 0.8; }

  50% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); opacity: 1; }

}



.sys-footer {

    margin-top: 0px;

    padding: 10px 0;

    border-top: none;

    background: transparent;

    

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    

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

    font-size: 11px;

    letter-spacing: 2px;

    cursor: pointer;

    color: #444;

    transition: 0.3s;

    

    opacity: 0.6;

}



.sys-footer:hover {

    opacity: 1;

    color: #888;

}



.sys-led {

    width: 4px; height: 4px; 

    border-radius: 50%;

    background: #333; 

    box-shadow: none;

}



.sys-footer.online { color: #555; }

.sys-footer.online .sys-led { background: #00ff9d; box-shadow: 0 0 5px #00ff9d; }



.sys-footer.offline { color: #888; }

.sys-footer.offline .sys-led { background: #ff0055; }

.gdpr-box.danger {

    border-color: #ff0055;

    box-shadow: 0 0 30px rgba(255, 0, 85, 0.1);

}

.gdpr-box.danger::before {

    background: #ff0055; box-shadow: 0 0 10px #ff0055;

}

.gdpr-box.danger .gdpr-title {

    color: #ff0055;

}

.gdpr-box.danger .gdpr-btn {

    background: #330011; color: #ff0055; border: 1px solid #ff0055;

}

.gdpr-box.danger .gdpr-btn:hover {

    background: #ff0055; color: #000; box-shadow: 0 0 20px #ff0055;

}

.gdpr-actions {

    display: flex; gap: 10px; margin-top: 20px;

}

.ios-arrow {

   animation: bounce 2s infinite;

}

@keyframes bounce {

  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}

  40% {transform: translateY(5px);}

  60% {transform: translateY(3px);}

}

#sys-status-bar {

    display: none;

    position: fixed;

    top: auto;

    bottom: 0;

    left: 0; 

    width: 100%;

    z-index: 9000;

    

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

    backdrop-filter: blur(5px);

    

    border-bottom: none;

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

    

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

    

    padding: 10px 15px;

    

    padding-bottom: max(10px, env(safe-area-inset-bottom));

    

    align-items: center; 

    justify-content: space-between;

    

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

    cursor: pointer;

    overflow: hidden;

}



#sys-status-bar::before {

    content: '';

    position: absolute;

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

    background: repeating-linear-gradient(

        0deg,

        transparent,

        transparent 2px,

        rgba(255, 42, 109, 0.05) 3px

    );

    pointer-events: none;

}



.sys-warning-box {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--red);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    text-shadow: 0 0 5px rgba(255, 42, 109, 0.4);

}



.sys-icon-pulse {

    animation: alertPulse 1.5s infinite;

}



.sys-action-btn {

    position: relative;

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

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

    color: var(--red);

    

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    

    padding: 4px 10px;

    border-radius: 2px;

    transition: all 0.3s ease;

    

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

}



#sys-status-bar:active .sys-action-btn {

    background: var(--red);

    color: #000;

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

}



@keyframes alertPulse {

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

    50% { opacity: 0.5; transform: scale(0.9); }

}



@keyframes borderGlow {

    0%, 100% { box-shadow: 0 0 2px rgba(255, 42, 109, 0.2); }

    50% { box-shadow: 0 0 10px rgba(255, 42, 109, 0.6); border-color: #fff; }

}

.profile-badge {

    display: inline-block;

    margin-left: 10px;

    font-size: 10px;

    color: #ffd700;

    border: 1px solid #ffd700;

    padding: 2px 5px;

    border-radius: 4px;

    text-transform: uppercase;

    letter-spacing: 1px;

    vertical-align: middle;

    transform: translateY(-2px);

    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);

}

.data-tools {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 15px;

  margin-top: 20px;

  padding-top: 15px;

  border-top: 1px dashed #222;

}



.data-tools button {

  background: transparent;

  border: 1px solid transparent;

  color: #444;

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

  font-size: 10px;

  font-weight: bold;

  letter-spacing: 1px;

  text-transform: uppercase;

  cursor: pointer;

  padding: 5px 10px;

  border-radius: 4px;

  transition: all 0.2s ease;

}



.data-tools button:hover {

  color: #888;

  background: #111;

  border-color: #333;

}



.dt-sep {

  color: #222;

  font-size: 10px;

}

.gdpr-link {

  color: #888;

  text-decoration: underline; 

  text-decoration-color: #444;

  transition: 0.3s;

  cursor: pointer;

}



.gdpr-link:hover {

  color: #fff;

  text-decoration-color: var(--grn);

}