:root{ --bg:#050508; --blu:#05d9e8; --pc: #00ff9d; --red:#ff2a6d; --grn:#00ff9d; --yel:#ffc800; --hc:var(--blu); --pur:#bc13fe; --cc:var(--blu); --lc:var(--blu); --ac:var(--blu); }

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

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

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



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

}



.head-r {

  display: flex;

  align-items: center;

  gap: 10px;

}



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

}

.ico { width:36px; height:36px; border:1px solid #444; border-radius:50%; display:flex; justify-content:center; align-items:center; color:#fff; background:transparent; cursor:pointer; transition:0.2s; }

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

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

.hero-box { text-align: center; margin-top: 10px; margin-bottom: 30px; animation: fadeInTitle 1s ease-out; }

  .hero-title { font-family: 'Rajdhani'; font-weight: 800; font-size: 42px; line-height: 1; text-transform: uppercase; letter-spacing: 2px; color: #fff; text-shadow: 0 0 10px 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; }

.btn-ref {

  position: absolute; top: 15px; right: 15px;

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

  font-size: 9px; padding: 4px 8px; border-radius: 4px;

  cursor: pointer; transition: 0.2s; font-family: 'Rajdhani'; font-weight: bold;

}

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

  #phase-2 { display: none; animation: slideIn 0.5s ease-out; }



  .scn-wrap{ width:120px; height:180px; position:relative; margin:0 auto 20px; filter:drop-shadow(0 0 5px var(--blu)); }

  .bp{ transition:fill 0.5s ease; fill-opacity:0.8; stroke:rgba(255,255,255,0.5); stroke-width:1; }

  #p-hd{ fill:var(--hc); } #p-ch{ fill:var(--cc); } #p-lg{ fill:var(--lc); }

  .scn-line{ position:absolute; top:0; left:0; width:100%; height:2px; background:#fff; box-shadow:0 0 10px #fff; animation:scn 2.5s linear infinite; opacity:0.6; }



  .cp{ background:rgba(18,18,26,0.8); border:1px solid #333; padding:15px; border-radius:12px; margin-bottom:15px; }

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

  .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.act{ background:var(--blu); color:#000; border-color:#fff; transform:scale(1.1); box-shadow:0 0 15px var(--blu); }

  

  textarea { width:100%; background:transparent; border:1px solid #333; color:#fff; padding:10px; height:60px; font-family:'Montserrat'; font-size:12px; border-radius:6px; resize:none; }

  textarea:focus { border-color:var(--blu); outline:none; }



  .sh{ display:flex; justify-content:space-between; font-weight:bold; font-size:13px; margin-bottom:5px; margin-top:10px; } .sv{ color:var(--blu); font-family:'Rajdhani'; font-size:16px; }

  .s-desc { display:flex; justify-content:space-between; font-size:9px; color:#666; margin-top:-5px; margin-bottom:15px; text-transform:uppercase; }

.trig { 

  display: none; 

  padding: 10px; 

  margin-top: 5px; 

  margin-bottom: 15px; 

  border-left: 3px solid; 

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

  animation: in 0.5s; 

  border-radius: 0 4px 4px 0;

}

.trig-label {

  font-size: 10px; 

  font-weight: bold; 

  margin-bottom: 5px; 

  font-family: 'Rajdhani';

}

.trig input { 

  width: 100%; 

  background: transparent; 

  border: none; 

  border-bottom: 1px solid #555; 

  color: #fff; 

  font-size: 12px; 

  font-family: 'Montserrat';

  padding: 5px 0;

}

.trig input:focus { border-color: #fff; outline: none; }

  input[type=range]{ width:100%; -webkit-appearance:none; background:transparent; margin-bottom:25px; margin-top:10px; touch-action: pan-y;}

  input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; height:18px; width:18px; border-radius:50%; background:#fff; border:2px solid var(--blu); margin-top:-7px; cursor:pointer; }

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



  .btn-main { width:100%; padding:15px; background:var(--blu); color:#000; font-weight:bold; border:none; font-family:'Rajdhani'; font-size:14px; margin-top:10px; cursor:pointer; clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition:0.3s; letter-spacing:1px; }

  .btn-main:hover { box-shadow:0 0 20px var(--blu); }

  

  .btn-flush { background:var(--grn); margin-top:30px; }

  .btn-flush:hover { box-shadow:0 0 20px var(--grn); }



  .card{ position:relative; background:#12121a; border-left:4px solid var(--blu); padding:20px; padding-top:35px; margin-top:15px; border-radius:8px; animation:in 0.5s; box-shadow:0 5px 15px rgba(0,0,0,0.3); }

  .card-type { font-size:10px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }

  .type-patch { color:var(--yel); } .type-bounty { color:var(--red); }

  

  .c-act-btn { width:100%; margin-top:10px; padding:10px; border:none; font-family:'Rajdhani'; font-weight:bold; cursor:pointer; border-radius:4px; font-size:11px; display:flex; align-items:center; justify-content:center; gap:5px; transition:0.2s; }

  .btn-patch { background:rgba(255,200,0,0.1); border:1px solid var(--yel); color:var(--yel); }

  .btn-patch:hover { background:var(--yel); color:#000; }

  .btn-bounty { background:rgba(255,42,109,0.1); border:1px solid var(--red); color:var(--red); }

  .btn-bounty:hover { background:var(--red); color:#000; }

  .btn-done { background:#222; color:#666; border:1px solid #444; pointer-events:none; }



  .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; backdrop-filter:blur(5px); }

  .deb-box { background:#0a0a0f; border:1px solid var(--blu); padding:30px 20px; border-radius:12px; width:100%; max-width:400px; text-align:center; position:relative; box-shadow:0 0 50px rgba(5,217,232,0.1); border-top:4px solid var(--blu); }

  .deb-score { font-size:60px; font-family:'Rajdhani'; font-weight:800; color:var(--blu); line-height:1; text-shadow:0 0 20px var(--blu); margin-bottom:10px; }

  .deb-tit { font-size:18px; font-weight:bold; color:#fff; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }

  .deb-msg { color:#ccc; font-size:13px; line-height:1.6; margin-bottom:20px; }

  .deb-kill { background:rgba(255,42,109,0.1); border:1px dashed var(--red); color:#ff8fa3; padding:10px; font-size:11px; margin-bottom:20px; border-radius:4px; display:none; }



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

}

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

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

  @keyframes scn{ 0%{top:0%;opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{top:100%;opacity:0} }

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

  

  #toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: #111; border: 1px solid var(--blu); color: #fff; padding: 10px 20px; border-radius: 30px; font-family: 'Rajdhani'; font-weight: bold; font-size: 12px; z-index: 10000; opacity: 0; pointer-events: none; transition: 0.3s; box-shadow: 0 5px 20px rgba(0,0,0,0.8); text-transform: uppercase; }

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

.top-nav {

  display: flex;

  gap: 10px;

  margin-bottom: 25px;

}



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

  color: #fff;

  background: rgba(5, 217, 232, 0.05);

  box-shadow: 0 0 15px rgba(5, 217, 232, 0.1);

}



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

#flush-overlay {

  display: none;

  position: fixed; inset: 0;

  background: #000;

  z-index: 20000;

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

  text-align: center;

  opacity: 0;

  transition: opacity 0.5s ease-in;

}



.flush-content {

  transform: scale(0.8);

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

}



.flush-icon { font-size: 60px; margin-bottom: 20px; filter: drop-shadow(0 0 20px var(--grn)); animation: float 3s infinite ease-in-out; }

.flush-title { font-family: 'Rajdhani'; font-weight: 800; font-size: 32px; color: #fff; letter-spacing: 2px; margin-bottom: 5px; }

.flush-sub { color: #666; font-size: 10px; text-transform: uppercase; letter-spacing: 4px; font-weight: bold; margin-bottom: 30px; }

.flush-xp { display: inline-block; background: rgba(0, 255, 157, 0.1); border: 1px solid var(--grn); color: var(--grn); padding: 5px 15px; border-radius: 50px; font-family: 'Rajdhani'; font-weight: bold; font-size: 18px; box-shadow: 0 0 20px rgba(0, 255, 157, 0.2); }



.app-flushing {

  filter: blur(10px) grayscale(100%);

  transform: scale(0.9) translateY(50px);

  opacity: 0;

  transition: all 0.8s ease-in;

}



.overlay-active {

  opacity: 1 !important;

}

.overlay-active .flush-content {

  transform: scale(1);

}



@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

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

  vertical-align: middle;

}

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

  margin-bottom: 20px;

  position: relative;

  z-index: 5;

}



.data-pill:hover {

  border-color: var(--st);

  color: #fff;

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

  transform: translateY(-2px);

}



.data-pill .dp-ico {

  color: var(--st);

  font-size: 14px;

}

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

}

.amb {

  position: fixed;

  top: 0; 

  left: 0; 

  width: 100%; 

  height: 100%;

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

  opacity: 0.1;

  z-index: -1;

  animation: amb-pulse 5s infinite alternate;

  pointer-events: none;

}



@keyframes amb-pulse {

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

  100% { opacity: 0.15; transform: scale(1.1); }

}

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

  color: var(--blu);

  transform: scale(1.1);

}

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



#sys-tut-mask { 

  position:absolute; inset:0; 

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

  transition: 0.4s ease;

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

}



#sys-tut-focus {

  position: fixed; 

  border: 2px solid #05d9e8; 

  box-shadow: 0 0 30px #05d9e8, inset 0 0 20px rgba(5, 217, 232, 0.2);

  border-radius: 8px;

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

  pointer-events: none;

  z-index: 10002;

  opacity: 0;

}



#sys-tut-msg {

  position: absolute; 

  left: 50%;

  transform: translateX(-50%);

  width: 90%;

  max-width: 400px;

  background: #050a10;

  border: 1px solid #05d9e8;

  padding: 20px;

  border-radius: 12px;

  color: #fff;

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

  font-size: 13px;

  line-height: 1.5;

  z-index: 10003;

  pointer-events: auto;

  text-align: center;

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

  

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

  opacity: 0; 

}



.tut-head { color: #05d9e8; font-family: 'Rajdhani'; font-weight: 800; font-size: 18px; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 1px; }



.t-bot {

  bottom: 100px;

  top: auto;

}



.t-top {

  top: 100px;

  bottom: auto;

}



.tut-head { color: var(--blu); font-family: 'Rajdhani'; font-weight: 800; font-size: 18px; text-transform: uppercase; margin-bottom: 8px; }

.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(--blu); color: #000; 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)} }

::-webkit-scrollbar {

    width: 6px;

    height: 6px;

}



::-webkit-scrollbar-track {

    background: #111;

    border-radius: 4px;

}



::-webkit-scrollbar-thumb {

    background: var(--blu);

    border-radius: 4px;

    border: 1px solid #111;

}



* {

    scrollbar-width: thin;

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

}