.afexkidz-defacer-v1162{
  --g:#33ff88; --g2:#00ff66; --bg:#000; --line:rgba(51,255,136,.35); --muted:rgba(51,255,136,.78);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  background: var(--bg); color: var(--g); border:2px solid var(--line);
  border-radius:14px; overflow:hidden;
}
.afexkidz-defacer-v1162 *{box-sizing:border-box}
.df-toolbar{
  position:sticky; top:0; z-index:5;
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  padding:8px 10px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(51,255,136,.10), rgba(0,0,0,0));
  flex-wrap:wrap;
}
.df-banner{
  flex:1 1 260px;
  font-weight:900; letter-spacing:.6px;
  font-size:12px; color:var(--g2);
  padding:4px 10px; border:1px solid rgba(51,255,136,.25);
  border-radius:999px; background:rgba(51,255,136,.06);
}
.df-left,.df-right{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.df-btn{
  background:#000; color:var(--g); border:1px solid var(--line);
  border-radius:10px; padding:6px 10px; cursor:pointer; font-size:12px;
}
.df-btn:hover{border-color:rgba(51,255,136,.65)}
.df-btn--primary{background:rgba(51,255,136,.10)}
.df-btn--danger{color:#ff6b6b; border-color:rgba(255,107,107,.55)}

.df-main{display:grid; grid-template-columns: 1fr 1fr; min-height:590px}

/* Browser */
.df-browser{background:#d0d0d0; color:#000; font-family: Arial, Helvetica, sans-serif; border-right:1px solid rgba(0,0,0,.25)}
.df-browserbar{display:flex; gap:8px; align-items:center; padding:6px; background:linear-gradient(180deg,#f5f5f5,#dcdcdc); border-bottom:1px solid rgba(0,0,0,.25)}
.df-browserbtns{display:flex; gap:6px}
.df-icbtn{
  width:26px; height:22px; line-height:20px;
  font-size:12px; border:1px solid rgba(0,0,0,.28); background:#fafafa;
  border-radius:6px; cursor:pointer;
}
.df-icbtn:active{transform:translateY(1px)}
.df-address{display:flex; align-items:center; gap:4px; flex:1; background:#fff; border:1px solid rgba(0,0,0,.35); padding:3px 6px; border-radius:8px}
.df-proto,.df-suffix{color:#333; font-size:12px}
.df-addrselect{
  border:none; outline:none; flex:1; font-size:12px; background:transparent;
  appearance:auto;
}
.df-go{padding:5px 10px; border:1px solid rgba(0,0,0,.35); background:#f6f6f6; border-radius:8px; cursor:pointer; font-size:12px}
.df-page{padding:0}

/* Site mock shells */
.df-site{
  min-height:540px;
  padding:12px;
}
.df-sitehead{
  display:flex; gap:10px; align-items:flex-start; justify-content:space-between;
  padding:12px; border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
}
.df-sitebrand{
  font-size:20px; font-weight:900; margin:0;
}
.df-sitetag{font-size:12px; margin-top:4px; opacity:.9}
.df-sitenav{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
}
.df-navchip{
  font-size:12px; padding:4px 10px; border-radius:999px;
  border:1px solid rgba(0,0,0,.22); background:rgba(255,255,255,.65);
}
.df-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:12px;
}
.df-card{
  border-radius:12px; padding:10px; border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.80);
}
.df-card h3{margin:0 0 6px 0; font-size:14px}
.df-card p{margin:0; font-size:12px; line-height:1.35; opacity:.9}
.df-heroimg{
  width:120px; height:70px; border-radius:10px;
  border:1px solid rgba(0,0,0,.25);
  background:rgba(255,255,255,.55);
}
.df-deface{
  background:#fff; border:2px solid rgba(0,0,0,.35); border-radius:12px; padding:12px;
}
.df-deface h1{margin:0; font-size:22px}
.df-deface p{margin:6px 0 0 0; font-size:12px; color:#333}

/* Terminal */
.df-terminal{position:relative; background:
  radial-gradient(circle at 50% 0%, rgba(51,255,136,.18), rgba(0,0,0,0) 60%),
  radial-gradient(circle at 50% 100%, rgba(51,255,136,.10), rgba(0,0,0,0) 55%), #000;
}
.df-termhead{padding:10px 12px; border-bottom:1px solid var(--line); background:rgba(51,255,136,.05)}
.df-termtitle{font-weight:900; letter-spacing:.6px; font-size:12px}
.df-termmeta{font-size:12px; color:var(--muted); margin-top:4px}
.df-log{height:220px; overflow:auto; padding:10px 12px; font-size:12px; line-height:1.35}
.df-log::-webkit-scrollbar{width:8px}
.df-log::-webkit-scrollbar-track{background:rgba(0,0,0,.35)}
.df-log::-webkit-scrollbar-thumb{background:rgba(51,255,136,.55); border-radius:10px}
.df-line{margin:0 0 6px 0; color:var(--muted); white-space:pre-wrap}
.df-line.ok{color:var(--g)}
.df-line.bad{color:#ff6b6b}
.df-line.warn{color:#ffd166}

.df-tags{display:flex; gap:6px; padding:8px 10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); flex-wrap:wrap; background:rgba(51,255,136,.03)}
.df-tag{background:rgba(51,255,136,.06); border:1px solid rgba(51,255,136,.25); color:var(--g); border-radius:999px; padding:4px 10px; font-size:12px; cursor:pointer}
.df-tag:hover{border-color:rgba(51,255,136,.55)}

.df-editorwrap{padding:10px 12px}
.df-editor{
  width:100%; min-height:170px; resize:vertical;
  background:#000; color:var(--g2);
  border:1px solid var(--line); border-radius:12px;
  padding:10px; outline:none; font-size:12px;
}

.df-exploitrow{padding:0 12px 12px 12px}
.df-exploitbtn{
  width:100%;
  background:rgba(255,107,107,.12);
  color:#ff6b6b;
  border:1px solid rgba(255,107,107,.55);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.6px;
  cursor:pointer;
}
.df-exploitbtn:hover{border-color:rgba(255,107,107,.85)}
.df-exploitbtn:active{transform:translateY(1px)}

/* CRT scanlines */
.df-terminal::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: overlay; opacity:.12;
}
.df-terminal::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 75%);
  opacity:.55;
}

.df-footer{padding:8px 10px; border-top:1px solid var(--line); color:var(--muted); font-size:12px}

/* Overlay (dynamic) */
.df-overlay{position:fixed; inset:0; background:rgba(0,0,0,.86); display:flex; align-items:center; justify-content:center; z-index:99999}
.df-obox{width:min(920px, 94vw); max-height:84vh; overflow:auto; background:#000; border:1px solid rgba(51,255,136,.55); border-radius:14px; padding:14px; color:var(--g)}
.df-otop{display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:10px}
.df-obox h2{margin:0 0 8px 0; font-size:14px}
.df-obox h3{margin:16px 0 8px 0; font-size:13px}
.df-obox p{margin:8px 0; font-size:12px; color:var(--muted); line-height:1.45}
.df-obox pre{white-space:pre-wrap; background:rgba(51,255,136,.06); border:1px solid rgba(51,255,136,.25); border-radius:12px; padding:10px; color:var(--g2); font-size:12px}
.df-chip{background:rgba(51,255,136,.06); border:1px solid rgba(51,255,136,.25); border-radius:999px; padding:4px 10px; font-size:12px; color:var(--g)}
.df-copybtn{background:#000; color:var(--g); border:1px solid rgba(51,255,136,.45); border-radius:10px; padding:6px 10px; cursor:pointer; font-size:12px}
.df-copybtn:hover{border-color:rgba(51,255,136,.75)}
.df-copyrow{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

@media (max-width: 900px){
  .df-main{grid-template-columns:1fr}
  .df-browser{border-right:none; border-bottom:1px solid rgba(0,0,0,.25)}
  .df-log{height:200px}
  .df-site{min-height:420px}
}

/* Browser controls: classic IE-ish (scoped) */
.df-browser .df-icbtn{
  width:26px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px;
  border:1px solid rgba(0,0,0,.45);
  background:linear-gradient(180deg,#ffffff,#e1e1e1);
  color:#111;
  border-radius:4px;
  cursor:pointer;
  padding:0;
}
.df-browser .df-icbtn:hover{background:linear-gradient(180deg,#ffffff,#d6d6d6); color:#111}
.df-browser .df-icbtn:active{background:linear-gradient(180deg,#d6d6d6,#ffffff); transform:translateY(1px); color:#111}

/* Go button like IE */
.df-browser .df-go{
  padding:5px 10px;
  border:1px solid rgba(0,0,0,.45);
  background:linear-gradient(180deg,#ffffff,#e7e7e7);
  color:#111;
  border-radius:6px;
  cursor:pointer;
  font-size:12px;
}
.df-browser .df-go:hover{background:linear-gradient(180deg,#ffffff,#dcdcdc); color:#111}