*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#030a14;color:#e9f4ff}
body{overflow-x:hidden}
.ambient{position:fixed;width:420px;height:420px;border-radius:50%;filter:blur(80px);opacity:.16;pointer-events:none}
.ambient-a{left:-180px;top:20%;background:#00b7ff}.ambient-b{right:-180px;bottom:5%;background:#8d4dff}
.app-shell{width:min(1100px,94%);margin:28px auto 50px;position:relative;z-index:1}
.hero{position:relative;min-height:300px;padding:28px 28px 35px;border:1px solid #087fae;border-radius:16px;background:linear-gradient(145deg,#071426,#08101d 65%,#071321);overflow:hidden;text-align:center;box-shadow:0 0 35px #00a6d61a}
.hero:before,.hero:after{content:"";position:absolute;inset:12px;border:1px solid #00a9d633;pointer-events:none}
.hero:after{inset:auto 28px 18px;height:1px;background:linear-gradient(90deg,transparent,#00d9ff55,transparent)}
.brand{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;gap:12px}
.brand-shield{width:45px;height:52px;display:grid;place-items:center;border:2px solid #5ce7ff;border-radius:12px;color:#b5f6ff;font-size:28px;box-shadow:0 0 18px #00cfff66}
.brand-title{font-size:21px;font-weight:900;letter-spacing:4px;background:linear-gradient(90deg,#fff,#ff9ad9,#70e7ff);-webkit-background-clip:text;color:transparent}
.brand-subtitle{font-size:9px;letter-spacing:4px;color:#6bbdd1;margin-top:3px}
.hero-orb{width:52px;height:52px;border-radius:50%;margin:34px auto 18px;display:grid;place-items:center;background:radial-gradient(circle,#fff 0,#8eeeff 16%,#168cff 46%,transparent 70%);filter:drop-shadow(0 0 14px #00bfff);animation:pulse 2.4s ease-in-out infinite}
.hero-orb span{width:18px;height:18px;border-radius:50%;border:2px solid #fff}
@keyframes pulse{50%{transform:scale(1.12);filter:drop-shadow(0 0 24px #00e1ff)}}
.hero h1{margin:0;font-size:24px;background:linear-gradient(90deg,#c6ff9d,#71f0ff);-webkit-background-clip:text;color:transparent}
.hero p{margin:8px 0 13px;font-size:10px;letter-spacing:2px;color:#7894ab}
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #0f846b;border-radius:30px;font-size:9px;color:#63efbd;letter-spacing:1px;background:#07332655}
.status-pill i{width:7px;height:7px;border-radius:50%;background:#28e89d;box-shadow:0 0 10px #28e89d}
.floating-words{position:absolute;inset:0;pointer-events:none;color:#08d8ff55;font-size:9px;font-weight:bold;letter-spacing:3px}
.floating-words span{position:absolute;animation:float 6s ease-in-out infinite}
.floating-words span:nth-child(1){left:7%;top:42%}.floating-words span:nth-child(2){right:9%;top:31%;animation-delay:1s}.floating-words span:nth-child(3){left:24%;bottom:18%;animation-delay:2s}.floating-words span:nth-child(4){right:25%;bottom:20%;animation-delay:3s}.floating-words span:nth-child(5){right:5%;bottom:8%;animation-delay:4s}
@keyframes float{50%{transform:translateY(-9px);opacity:.9}}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0}
.stats article{padding:13px 15px;border:1px solid #1b405f;border-radius:9px;background:#071322}
.stats small{display:block;color:#668198;font-size:8px;letter-spacing:1px}.stats strong{display:block;margin-top:6px;color:#ffd32e;font-size:17px}.stats .active{font-size:14px}
.panel,.results{margin-top:12px;padding:16px;border:1px solid #17334b;border-radius:14px;background:#071321cc}
.field-heading{display:flex;justify-content:space-between;gap:10px;margin:0 2px 8px;font-size:10px}.field-heading label{font-weight:800}.field-heading span{color:#70869a}
textarea{width:100%;min-height:155px;resize:vertical;border:1px solid #174a6b;border-radius:9px;background:#020b15;color:#e7f7ff;padding:14px;font:11px Consolas,monospace;outline:none}
textarea:focus{border-color:#00bfe8;box-shadow:0 0 0 2px #00bfe822}.detail{min-height:105px;margin-top:2px}.counter{text-align:right;color:#657c91;font-size:9px;margin-top:4px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
button{border:0;border-radius:8px;padding:11px 15px;font-weight:800;cursor:pointer;transition:.18s}
button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.primary{background:linear-gradient(90deg,#0aaee8,#26d8ff);color:#02111a}.secondary{background:#14263d;color:#9eb3c7;border:1px solid #29435d}
.all-row{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid #7a6815;border-radius:8px;padding:11px 13px;background:#0a1725}.all-row b{color:#ffe22c;margin-right:10px}.all-row span{font-size:10px;color:#93a7b9}.all-row small{display:block;margin-left:32px;margin-top:3px;color:#627a90;font-size:8px}.all-button{background:#0b8b6a;color:#eafff8;padding:9px 14px;font-size:10px}
.queue{display:grid;gap:7px;margin-top:8px}.item{display:grid;grid-template-columns:35px 1fr auto;align-items:center;gap:9px;padding:9px 10px;border:1px solid #163b57;border-radius:8px;background:#061321}
.num{width:29px;height:29px;border:1px solid #516a1d;border-radius:8px;display:grid;place-items:center;color:#ffe22c;font-weight:800}.url{font:10px Consolas,monospace;color:#9db2c5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-line{font-size:8px;color:#61778b;margin-top:3px}.item-actions{display:flex;gap:6px}.item button{padding:8px 10px;font-size:9px}.copy{background:#172b43;color:#b6cadc;border:1px solid #38516a}.open{background:#168bd8;color:white}.opened{background:#09825f;color:white}
.note{margin-top:10px;padding:10px;border-left:3px solid #e7d020;color:#6e8497;background:#08131f;font-size:8px;line-height:1.7}
footer{text-align:right;margin-top:10px;color:#40566c;font:8px Consolas,monospace;letter-spacing:2px}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}.stats article:last-child{grid-column:span 2}.actions{grid-template-columns:1fr}.all-row{align-items:flex-start;flex-direction:column}.item{grid-template-columns:30px 1fr}.item-actions{grid-column:2}.hero{min-height:280px}.floating-words{display:none}}
/* =========================================
   BASMI PHISING — CYBER COMMAND CENTER FX
   TAMBAHAN VISUAL SAJA
   ========================================= */

/* Ambient background */
body {
  position: relative;
  overflow-x: hidden;
  background-image:
    linear-gradient(rgba(0, 180, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 180, 255, 0.025) 1px, transparent 1px);
  background-size: 45px 45px;
  animation: gridDrift 18s linear infinite;
}

/* Ambient light */
body::before,
body::after {
  content: "";
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(80px);
  opacity: 0.14;
}

body::before {
  top: 5%;
  left: -180px;
  background: rgba(0, 190, 255, 0.45);
  animation: ambientLeft 8s ease-in-out infinite alternate;
}

body::after {
  right: -180px;
  bottom: 5%;
  background: rgba(110, 60, 255, 0.35);
  animation: ambientRight 10s ease-in-out infinite alternate;
}

/* Scanline layar */
main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  top: -5%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 220, 255, 0.5),
    transparent
  );
  box-shadow: 0 0 18px rgba(0, 220, 255, 0.35);
  animation: screenScan 8s linear infinite;
}

/* Panel lebih hidup */
section,
.results,
.card {
  position: relative;
  overflow: hidden;
}

section::before,
.results::before,
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 220, 255, 0.045),
    transparent
  );
  transform: skewX(-20deg);
  animation: panelSweep 7s ease-in-out infinite;
}

/* Border energy */
section,
.results,
.url-item {
  animation: borderEnergy 4s ease-in-out infinite;
}

/* URL cards masuk sedikit bergantian */
.url-item:nth-child(1) {
  animation-delay: 0s;
}

.url-item:nth-child(2) {
  animation-delay: 0.12s;
}

.url-item:nth-child(3) {
  animation-delay: 0.24s;
}

.url-item:nth-child(4) {
  animation-delay: 0.36s;
}

.url-item:nth-child(5) {
  animation-delay: 0.48s;
}

.url-item:nth-child(6) {
  animation-delay: 0.60s;
}

/* Nomor URL */
.url-item .number,
.url-item .index,
.url-item .num {
  animation: numberPulse 2.8s ease-in-out infinite;
}

/* Input fokus */
textarea:focus,
input:focus {
  box-shadow:
    0 0 0 1px rgba(0, 220, 255, 0.35),
    0 0 22px rgba(0, 200, 255, 0.12),
    inset 0 0 20px rgba(0, 200, 255, 0.025);
}

/* Tombol buka semua */
#openAllBtn,
.all-button,
.all-btn {
  animation:
    allButtonPulse 2.8s ease-in-out infinite,
    buttonFloat 4s ease-in-out infinite;
}

/* Status */
#status,
.status {
  position: relative;
}

#status::after,
.status::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: statusDot 1.4s ease-in-out infinite;
}

/* Text glitch ringan */
.brand,
.logo,
h1 {
  animation: titlePulse 4s ease-in-out infinite;
}

/* Hover panel */
section:hover,
.results:hover {
  box-shadow:
    0 0 25px rgba(0, 190, 255, 0.08),
    inset 0 0 30px rgba(0, 190, 255, 0.025);
}

/* =========================================
   KEYFRAMES
   ========================================= */

@keyframes gridDrift {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 45px 45px;
  }
}

@keyframes ambientLeft {
  from {
    transform: translate(0, 0) scale(0.9);
  }

  to {
    transform: translate(120px, 70px) scale(1.15);
  }
}

@keyframes ambientRight {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(-100px, -80px) scale(1.2);
  }
}

@keyframes screenScan {
  0% {
    top: -5%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

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

@keyframes panelSweep {
  0%,
  55% {
    left: -120%;
  }

  75% {
    left: 140%;
  }

  100% {
    left: 140%;
  }
}

@keyframes borderEnergy {
  0%,
  100% {
    box-shadow:
      0 0 0 rgba(0, 210, 255, 0);
  }

  50% {
    box-shadow:
      0 0 14px rgba(0, 210, 255, 0.07);
  }
}

@keyframes numberPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes allButtonPulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(0, 255, 180, 0);
  }

  50% {
    box-shadow:
      0 0 20px rgba(0, 255, 180, 0.18);
  }
}

@keyframes buttonFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes statusDot {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.55;
  }

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

@keyframes titlePulse {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.18);
  }
}

/* HP / laptop aman */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
}
/* =========================================
   BASMI PHISING — BINARY RAIN V2
   ========================================= */

#binary-rain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  overflow: hidden;
  pointer-events: none;

  z-index: 0;
}

.binary-stream {
  position: absolute;

  top: -420px;

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

  gap: 2px;

  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 700;

  line-height: 1.25;

  color: rgba(0, 255, 150, 0.38);

  text-shadow:
    0 0 5px rgba(0, 255, 150, 0.35),
    0 0 10px rgba(0, 180, 255, 0.15);

  animation:
    binaryFallV2 linear infinite;
}

/* Biru */
.binary-stream:nth-child(3n) {
  color: rgba(0, 190, 255, 0.36);

  text-shadow:
    0 0 5px rgba(0, 190, 255, 0.4),
    0 0 10px rgba(0, 220, 255, 0.15);
}

/* Hijau */
.binary-stream:nth-child(4n) {
  color: rgba(50, 255, 140, 0.42);
}

/* Sedikit lebih redup */
.binary-stream:nth-child(5n) {
  opacity: 0.18 !important;
}

/* Digit kepala sedikit lebih terang */
.binary-stream span:first-child {
  color: rgba(180, 255, 220, 0.75);
  text-shadow:
    0 0 6px rgba(0, 255, 160, 0.7);
}

@keyframes binaryFallV2 {

  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(calc(100vh + 500px));
  }

}

/* Pastikan dashboard tetap di depan */
body > *:not(#binary-rain) {
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {

  .binary-stream {
    font-size: 9px;
    gap: 1px;
  }

}
/* =========================================
   FIX — DASHBOARD RAPAT KE ATAS
   ========================================= */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

main {
  margin-top: 0 !important;
  padding-top: 0 !important;

  /* cegah layout melakukan vertical centering */
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Elemen dashboard pertama */
main > *:first-child {
  margin-top: 0 !important;
}

/* Hero / header utama */
.hero,
.hero-section,
.dashboard-hero,
header {
  margin-top: 0 !important;
}

/* Jangan biarkan container pertama mendorong dashboard turun */
main > section:first-child {
  margin-top: 0 !important;
}

/* Binary rain tetap menjadi background */
#binary-rain {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
/* =========================================
   FINAL LAYOUT FIX
   Dashboard langsung mulai dari atas
   Binary rain hanya background
   ========================================= */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100% !important;
}

body {
  overflow-x: hidden !important;
}

/* Dashboard utama */
.app-shell {
  width: min(1100px, 94%) !important;
  margin: 8px auto 50px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Hero tidak boleh terdorong ke bawah */
.hero {
  margin-top: 0 !important;
}

/* Background ambience tetap fixed */
.ambient {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Binary rain selalu di belakang dashboard */
#binary-rain {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Isi dashboard di atas binary rain */
.app-shell,
.app-shell * {
  position: relative;
}

.app-shell {
  z-index: 2 !important;
}
/* =========================================================
   BASMI PHISING — REPORT CENTER
   ========================================================= */
.page-nav{display:flex;justify-content:center;align-items:center;gap:8px;margin:0 0 12px;padding:8px;border:1px solid #17334b;border-radius:12px;background:#071321cc;position:relative;z-index:3}
.page-nav a{text-decoration:none;color:#8fa9bd;padding:9px 16px;border-radius:8px;font-size:10px;font-weight:900;letter-spacing:1px;transition:.18s}
.page-nav a:hover,.page-nav a.active{color:#eaffff;background:#0b3850;box-shadow:0 0 16px #00cfff22}
.report-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.report-tab{border:1px solid #174a6b;background:#071321;color:#8fa9bd}
.report-tab.active{background:linear-gradient(90deg,#0aaee8,#26d8ff);color:#02111a}
.report-panel{display:none}.report-panel.active{display:block}
.report-preview{width:100%;min-height:430px;resize:vertical;border:1px solid #174a6b;border-radius:9px;background:#020b15;color:#e7f7ff;padding:14px;font:11px/1.7 Consolas,monospace;outline:none}
.report-preview:focus{border-color:#00bfe8;box-shadow:0 0 0 2px #00bfe822}
.report-info{display:flex;justify-content:space-between;gap:10px;margin:0 2px 8px;color:#70869a;font-size:9px}
.report-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.report-list{display:grid;gap:7px;margin-top:10px}
.report-url-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid #163b57;border-radius:8px;background:#061321}
.report-url-row code{color:#9db2c5;font:10px Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.report-count{color:#63efbd;font-size:9px;font-weight:800;white-space:nowrap}
.report-empty{padding:24px 12px;border:1px dashed #21465f;border-radius:10px;color:#6f879b;text-align:center;font-size:10px}
.notice{margin-top:10px;padding:10px;border-left:3px solid #00cfff;color:#7893a8;background:#08131f;font-size:8px;line-height:1.7}
@media(max-width:700px){.page-nav a{flex:1;text-align:center;padding:9px 8px}.report-tabs,.report-actions{grid-template-columns:1fr}.report-url-row{align-items:flex-start;flex-direction:column}.report-url-row code{white-space:normal;word-break:break-all}}