:root{--bg:#050706;--bg2:#09100c;--panel:#0a0f0d;--panel2:#111715;--green:#7bffbf;--green-soft:#bfffd9;--green-dim:#3dbb74;--red:#ff5e74;--amber:#ffd28c;--text:#e9fff1;--muted:#9dd1af;--shadow:0 26px 80px rgba(0,0,0,.48);--radius:28px;--mono:'Share Tech Mono', monospace;--terminal:'VT323', monospace}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#030504;color:var(--text);font-family:Inter,system-ui,sans-serif}button{font:inherit}.screen-noise,.scanlines,.matrix-grid{position:fixed;inset:0;pointer-events:none}.screen-noise{opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.scanlines{opacity:.12;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 4px)}.matrix-grid{opacity:.18;background-image:linear-gradient(rgba(123,255,191,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(123,255,191,.05) 1px,transparent 1px);background-size:40px 40px;animation:gridMove 18s linear infinite}@keyframes gridMove{to{background-position:80px 80px}}
.hacker-part{position:relative;width:100%;height:100%;overflow:hidden}.desktop-shell{position:absolute;inset:0;padding:28px 24px 72px;z-index:1}.desktop-wallpaper{position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(123,255,191,.08),transparent 30%),radial-gradient(circle at 80% 16%,rgba(255,94,116,.06),transparent 26%),linear-gradient(135deg,#0a0f0d,#141d19 58%,#0a0f0d)}.desktop-shell::after{content:"";position:absolute;inset:24px;border:1px solid rgba(255,255,255,.04);border-radius:22px}.desktop-icons{position:relative;z-index:2;display:grid;gap:18px;align-content:start;width:140px}.desktop-icon{display:grid;justify-items:center;gap:8px;color:#dffbe7;text-align:center;font-size:.85rem}.desktop-icon span{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:1.45rem}.desktop-icon.warning span{background:rgba(255,94,116,.1);border-color:rgba(255,94,116,.2)}.desktop-taskbar{position:absolute;left:18px;right:18px;bottom:18px;height:46px;border-radius:14px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;padding:0 16px;backdrop-filter:blur(8px);z-index:2}.taskbar-left,.taskbar-right{display:flex;align-items:center;gap:14px;font:700 .75rem var(--mono);color:#c9eed7;text-transform:uppercase;letter-spacing:.08em}.start-dot{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.breach-overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:radial-gradient(circle at center,rgba(3,10,7,.58),rgba(1,4,3,.92))}.boot-panel,.terminal-window,.normal-card{border:1px solid rgba(123,255,191,.18);background:rgba(4,10,7,.92);box-shadow:var(--shadow);backdrop-filter:blur(20px)}.boot-panel{width:min(900px,90vw);border-radius:20px;overflow:hidden;transition:opacity .5s ease,transform .5s ease}.boot-panel.hide{opacity:0;transform:translateY(-20px) scale(.98);pointer-events:none}.boot-header,.terminal-header{height:42px;display:flex;align-items:center;gap:9px;padding:0 16px;background:linear-gradient(180deg,#1f2622,#070b09);border-bottom:1px solid rgba(123,255,191,.15);font:700 .78rem var(--mono);color:#d8ffea;letter-spacing:.04em}.boot-header span,.terminal-header span{width:11px;height:11px;border-radius:50%}.red{background:var(--red);box-shadow:0 0 10px var(--red)}.amber{background:var(--amber);box-shadow:0 0 10px var(--amber)}.green{background:var(--green);box-shadow:0 0 10px var(--green)}.boot-body{padding:28px 28px 34px}.boot-title{font:900 .92rem var(--mono);color:#ffb7c1;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}.boot-lines{display:grid;gap:10px}.boot-line{font:1.55rem var(--terminal);color:#bfffd9;letter-spacing:.03em;opacity:0;transform:translateY(8px);text-shadow:0 0 12px rgba(123,255,191,.18)}.boot-line.show{opacity:1;transform:translateY(0);transition:.28s ease}
.terminal-wrapper{position:absolute;inset:0;display:grid;place-items:center;padding:28px;opacity:0;pointer-events:none;transform:scale(.98);transition:opacity .5s ease,transform .5s ease}.terminal-wrapper.show{opacity:1;pointer-events:auto;transform:scale(1)}.terminal-window{width:min(1420px,96vw);border-radius:26px;overflow:hidden}.terminal-layout{display:grid;grid-template-columns:320px 1fr;min-height:760px}.intel-sidebar{padding:20px;border-right:1px solid rgba(123,255,191,.12);background:linear-gradient(180deg,rgba(13,20,17,.95),rgba(7,11,9,.95));display:grid;gap:16px;align-content:start}.side-card{padding:16px;border-radius:18px;background:rgba(123,255,191,.05);border:1px solid rgba(123,255,191,.12)}.side-card small,.terminal-main-top small,.evidence-label{display:block;font:800 .7rem var(--mono);text-transform:uppercase;letter-spacing:.18em;color:#88c7a0;margin-bottom:8px}.side-card strong{display:block;font-size:1rem;color:#fff;margin-bottom:6px}.side-card em{font-style:normal;color:#bde8c9;font-size:.92rem;line-height:1.4}.danger-card{background:rgba(255,94,116,.06);border-color:rgba(255,94,116,.16)}.evidence-box{padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}.danger-evidence{background:rgba(255,94,116,.05);border-color:rgba(255,94,116,.12)}.image-placeholder{min-height:140px;border-radius:16px;border:1px dashed rgba(123,255,191,.28);display:grid;place-items:center;text-align:center;color:#bfffd9;font:700 .88rem var(--mono);line-height:1.5;background:linear-gradient(90deg,rgba(123,255,191,.04) 1px,transparent 1px),linear-gradient(rgba(123,255,191,.04) 1px,transparent 1px),rgba(0,0,0,.18);background-size:24px 24px}.danger-evidence .image-placeholder{border-color:rgba(255,94,116,.28);color:#ffcad3}
.image-placeholder.image-real{position:relative;overflow:hidden;min-height:180px}.image-placeholder.image-real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.03) saturate(.9) brightness(.86)}.image-placeholder.image-real::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.58)),repeating-linear-gradient(0deg,rgba(123,255,191,.05) 0 1px,transparent 1px 4px);pointer-events:none}.image-placeholder.image-real span{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:block;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.5);color:#dffff0;font-size:.7rem;opacity:.78}.danger-evidence .image-placeholder.image-real::after{background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.62)),repeating-linear-gradient(0deg,rgba(255,94,116,.06) 0 1px,transparent 1px 4px)}
.terminal-main{display:grid;grid-template-rows:auto 1fr auto;background:linear-gradient(180deg,rgba(7,12,10,.98),rgba(4,8,6,.98))}.terminal-main-top{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:18px 22px;border-bottom:1px solid rgba(123,255,191,.1)}.terminal-main-top div{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}.terminal-main-top strong{font-size:.94rem;color:#eefef3;letter-spacing:.04em}.terminal-stream{padding:26px 24px;overflow:auto;font-family:var(--terminal);font-size:2rem;line-height:1.35;color:#dffff0}.terminal-line{display:flex;gap:12px;align-items:flex-start;padding:5px 0;opacity:0;transform:translateY(10px)}.terminal-line.show{opacity:1;transform:translateY(0);transition:.28s ease}.prompt{color:var(--green);text-shadow:0 0 10px rgba(123,255,191,.25)}.line-text{flex:1;color:#d8ffea;text-shadow:0 0 14px rgba(123,255,191,.14);white-space:pre-wrap}.line-text.system{color:#a3f0c4}.line-text.alert,.line-text.warning{color:#ffb7c1}.line-text.hacker{color:#f1fff6}.line-text.hacker.darija{color:#f6fff9}.line-text.instruction{color:#ffe4b0}.cursor{display:inline-block;width:10px;height:22px;background:var(--green);margin-left:8px;box-shadow:0 0 10px var(--green);animation:blink .7s steps(1,end) infinite}@keyframes blink{50%{opacity:0}}.terminal-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 22px;border-top:1px solid rgba(123,255,191,.1);background:rgba(255,255,255,.02)}.footer-status{font:700 .78rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:#a7d4b6}.terminal-action{padding:12px 18px;border-radius:999px;border:1px solid rgba(123,255,191,.2);background:rgba(123,255,191,.08);color:#ecfff4;font-weight:800;cursor:pointer;transition:.2s ease}.terminal-action:hover{transform:translateY(-2px);background:rgba(123,255,191,.12)}.hidden{display:none !important}
.normal-state{position:absolute;inset:0;display:grid;place-items:center;padding:26px;z-index:8}.normal-card{width:min(760px,92vw);padding:46px;border-radius:28px;text-align:center;background:rgba(240,247,243,.94);color:#17251c;border-color:rgba(23,37,28,.08)}.normal-pill{display:inline-flex;padding:10px 14px;border-radius:999px;background:#15211a;color:#cbffdf;font:800 .72rem var(--mono);text-transform:uppercase;letter-spacing:.16em}.normal-card h1{margin:18px 0 14px;font-size:clamp(2.2rem,4vw,4rem)}.normal-card p{font-size:1.04rem;line-height:1.7;color:#385244}.normal-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}.normal-meta span{padding:10px 14px;border-radius:999px;background:#edf6ef;border:1px solid rgba(23,37,28,.08);font-weight:700;color:#23372b}
@media (max-width:1100px){.terminal-layout{grid-template-columns:1fr}.intel-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}}@media (max-width:760px){.desktop-taskbar{height:auto;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 14px}.taskbar-left,.taskbar-right{flex-wrap:wrap}.boot-body{padding:22px}.terminal-wrapper{padding:10px}.terminal-main-top,.intel-sidebar{grid-template-columns:1fr}.terminal-stream{font-size:1.55rem;padding:18px 16px}.terminal-footer{flex-direction:column;align-items:flex-start}}


/* V2 comfort update: scrollable terminal + lighter background */
html,
body{
  overflow:auto;
  min-height:100%;
}

.hacker-part{
  min-height:100vh;
  overflow:auto;
}

.breach-overlay{
  position:relative;
  min-height:100vh;
  overflow:auto;
  padding:28px;
  background:
    radial-gradient(circle at center,rgba(5,18,12,.42),rgba(1,4,3,.78)),
    rgba(0,0,0,.18);
}

.terminal-wrapper{
  position:relative;
  inset:auto;
  min-height:auto;
  padding:0;
  margin:auto;
  width:100%;
}

.terminal-wrapper.show{
  display:grid;
  place-items:center;
}

.terminal-window{
  max-height:none;
  margin:0 auto;
}

.terminal-layout{
  min-height:auto;
  height:auto;
}

.terminal-main{
  min-height:min(760px, calc(100vh - 120px));
}

.terminal-stream{
  max-height:calc(100vh - 285px);
  min-height:420px;
  overflow-y:auto;
  padding-right:18px;
  scrollbar-width:thin;
  scrollbar-color:rgba(123,255,191,.45) rgba(255,255,255,.05);
}

.terminal-stream::-webkit-scrollbar{
  width:10px;
}

.terminal-stream::-webkit-scrollbar-track{
  background:rgba(255,255,255,.045);
  border-radius:999px;
}

.terminal-stream::-webkit-scrollbar-thumb{
  background:rgba(123,255,191,.38);
  border-radius:999px;
  border:2px solid rgba(0,0,0,.25);
}

.boot-panel,
.terminal-window{
  box-shadow:0 22px 64px rgba(0,0,0,.34);
}

.desktop-wallpaper{
  background:
    radial-gradient(circle at 20% 20%,rgba(123,255,191,.12),transparent 32%),
    radial-gradient(circle at 80% 16%,rgba(255,94,116,.08),transparent 28%),
    linear-gradient(135deg,#0d1511,#18231e 58%,#0b120f);
}

.matrix-grid{
  opacity:.14;
}

.scanlines{
  opacity:.09;
}

.screen-noise{
  opacity:.045;
}

@media (max-width:1100px){
  .terminal-main{
    min-height:auto;
  }

  .terminal-stream{
    max-height:none;
    min-height:360px;
  }
}

@media (max-width:760px){
  .breach-overlay{
    padding:10px;
  }

  .terminal-stream{
    max-height:none;
    min-height:360px;
  }
}


/* V3: centered CMD + internal scroll + 5s image popups */
html,
body{
  overflow:hidden;
}

.hacker-part{
  height:100vh;
  overflow:hidden;
}

.breach-overlay{
  position:absolute;
  inset:0;
  min-height:100vh;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:28px;
}

.terminal-wrapper{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:28px;
  width:100%;
  min-height:100vh;
}

.terminal-wrapper.show{
  display:grid;
  place-items:center;
}

.terminal-window{
  width:min(1420px,96vw);
  max-height:calc(100vh - 56px);
  margin:auto;
  display:grid;
  grid-template-rows:auto 1fr;
}

.terminal-layout{
  min-height:0;
  height:calc(100vh - 112px);
  max-height:820px;
}

.terminal-main{
  min-height:0;
  height:100%;
  overflow:hidden;
}

.terminal-stream{
  min-height:0;
  height:100%;
  max-height:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-bottom:34px;
}

.intel-sidebar{
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(123,255,191,.35) rgba(255,255,255,.04);
}

.intel-sidebar::-webkit-scrollbar,
.terminal-stream::-webkit-scrollbar{
  width:9px;
}

.intel-sidebar::-webkit-scrollbar-track,
.terminal-stream::-webkit-scrollbar-track{
  background:rgba(255,255,255,.045);
  border-radius:999px;
}

.intel-sidebar::-webkit-scrollbar-thumb,
.terminal-stream::-webkit-scrollbar-thumb{
  background:rgba(123,255,191,.34);
  border-radius:999px;
  border:2px solid rgba(0,0,0,.25);
}

.image-popup-layer{
  position:fixed;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease, visibility .28s ease;
}

.image-popup-layer.show{
  opacity:1;
  visibility:visible;
}

.image-popup-layer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center,rgba(123,255,191,.12),transparent 34%),
    rgba(0,0,0,.34);
  backdrop-filter:blur(3px);
}

.image-popup-card{
  position:relative;
  z-index:2;
  width:min(620px,86vw);
  border-radius:22px;
  overflow:hidden;
  background:rgba(4,10,7,.96);
  border:1px solid rgba(123,255,191,.24);
  box-shadow:0 28px 90px rgba(0,0,0,.52),0 0 38px rgba(123,255,191,.1);
  transform:translateY(18px) scale(.96);
  transition:transform .28s ease;
}

.image-popup-layer.show .image-popup-card{
  transform:translateY(0) scale(1);
}

.popup-header{
  height:40px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  background:linear-gradient(180deg,#1f2622,#070b09);
  border-bottom:1px solid rgba(123,255,191,.15);
  font:700 .76rem var(--mono);
  color:#d8ffea;
  letter-spacing:.04em;
}

.popup-header span{
  width:10px;
  height:10px;
  border-radius:50%;
}

.popup-header span:nth-child(1){background:var(--red);box-shadow:0 0 10px var(--red)}
.popup-header span:nth-child(2){background:var(--amber);box-shadow:0 0 10px var(--amber)}
.popup-header span:nth-child(3){background:var(--green);box-shadow:0 0 10px var(--green)}

.popup-header b{
  margin-left:8px;
}

.popup-image-frame{
  height:min(520px,58vh);
  display:grid;
  place-items:center;
  background:
    linear-gradient(90deg,rgba(123,255,191,.035) 1px,transparent 1px),
    linear-gradient(rgba(123,255,191,.035) 1px,transparent 1px),
    #050806;
  background-size:28px 28px;
}

.popup-image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:contrast(1.03) saturate(.95) brightness(.9);
}

.popup-caption{
  padding:14px 16px;
  color:#bfffd9;
  font:700 .78rem var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  border-top:1px solid rgba(123,255,191,.12);
  background:rgba(255,255,255,.025);
}

@media (max-width:1100px){
  .terminal-layout{
    grid-template-columns:1fr;
    height:calc(100vh - 112px);
    overflow:hidden;
  }

  .intel-sidebar{
    max-height:235px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .terminal-main{
    min-height:0;
  }
}

@media (max-width:760px){
  .breach-overlay,
  .terminal-wrapper{
    padding:10px;
  }

  .terminal-window{
    max-height:calc(100vh - 20px);
  }

  .terminal-layout{
    height:calc(100vh - 74px);
  }

  .intel-sidebar{
    max-height:220px;
    grid-template-columns:1fr;
  }

  .terminal-stream{
    font-size:1.48rem;
  }

  .image-popup-card{
    width:92vw;
  }

  .popup-image-frame{
    height:48vh;
  }
}


/* V4: popup supports one or two images */
.popup-image-frame{
  padding:16px;
}
.popup-image-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  min-height:min(520px,58vh);
}
.popup-image-grid.two-up{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.popup-image-item{
  min-height:240px;
  height:min(480px,54vh);
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(123,255,191,.16);
  background:
    linear-gradient(90deg,rgba(123,255,191,.035) 1px,transparent 1px),
    linear-gradient(rgba(123,255,191,.035) 1px,transparent 1px),
    #050806;
  background-size:28px 28px;
}
.popup-image-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:contrast(1.03) saturate(.95) brightness(.9);
}
.popup-image-item::after{
  content:attr(data-label);
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(0,0,0,.55);
  color:#dffff0;
  font:700 .72rem var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media (max-width:760px){
  .popup-image-grid.two-up{grid-template-columns:1fr}
  .popup-image-item{height:36vh; min-height:190px}
}



/* FINAL RESPONSIVE FIX */
html,
body{
  height:100%;
  overflow:hidden;
}

.breach-overlay,
.terminal-wrapper{
  padding:clamp(8px,1.8vw,22px);
}

.terminal-window{
  width:min(1420px,98vw);
  max-height:calc(100dvh - clamp(16px,3vh,44px));
}

.terminal-header{
  height:36px;
}

.terminal-layout{
  height:calc(100dvh - clamp(70px,10vh,96px));
  max-height:none;
}

.terminal-main-top{
  padding:10px 14px;
  gap:10px;
}

.terminal-main-top div{
  padding:9px 11px;
}

.terminal-stream{
  font-size:clamp(1.28rem,2vw,1.8rem);
  padding:clamp(14px,2vw,22px);
}

.terminal-footer{
  padding:10px 14px;
}

.intel-sidebar{
  padding:12px;
  gap:10px;
}

.side-card,
.evidence-box{
  padding:12px;
}

.image-placeholder.image-real{
  min-height:clamp(120px,20vh,180px);
}

@media (max-height:820px) and (min-width:900px){
  .terminal-layout{
    height:calc(100dvh - 58px);
  }

  .terminal-main-top{
    display:none;
  }

  .terminal-stream{
    font-size:1.45rem;
  }

  .terminal-footer{
    padding:9px 12px;
  }
}

@media (max-width:760px){
  .terminal-layout{
    height:calc(100dvh - 62px);
  }

  .terminal-main-top{
    display:none;
  }

  .terminal-stream{
    font-size:1.35rem;
  }
}