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

html{
    background:#010301;
}

body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(0,255,90,.10),
            transparent 42%
        ),
        #010301;
    color:#d9ffe3;
    font-family:
        "Courier New",
        monospace;
    overflow-x:hidden;
}

button,
input{
    font:inherit;
}

button{
    cursor:pointer;
}

.scanlines{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:50;
    opacity:.13;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(60,255,110,.035) 4px
        );
}


/* TOP BAR */

.topbar{
    height:60px;
    padding:0 25px;

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

    border-bottom:1px solid #123b20;
    background:rgba(1,5,3,.96);

    position:sticky;
    top:0;
    z-index:20;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
}

.wolf{
    color:#39ff73;
    font-size:21px;
}

.brand-main{
    color:#eaffef;
    font-weight:bold;
    letter-spacing:2px;
}

.brand-sub{
    color:#3d8755;
    font-size:10px;
    letter-spacing:1px;
}

#status{
    color:#39ff73;
    font-size:10px;
}


/* MAIN */

main{
    width:min(1180px,100%);
    margin:auto;
    padding:30px 18px 70px;
}


/* HERO */

.hero{
    padding:35px 5px 25px;
}

.eyebrow{
    color:#39ff73;
    font-size:10px;
    letter-spacing:2px;
    margin-bottom:15px;
}

h1{
    margin:0;
    max-width:800px;
    font-size:clamp(32px,7vw,68px);
    line-height:.95;
    letter-spacing:-3px;
    color:#eaffef;
}

h1 span{
    color:#39ff73;
}

.hero p{
    max-width:700px;
    color:#73917c;
    line-height:1.7;
    font-size:13px;
}


/* TERMINAL */

.terminal{
    border:1px solid #1b6732;
    background:#020603;
    box-shadow:
        0 0 35px rgba(0,255,80,.07);
}

.terminal-head{
    height:36px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 12px;

    background:#07100a;
    border-bottom:1px solid #123c20;

    color:#537760;
    font-size:10px;
}

.lights{
    display:flex;
    gap:5px;
}

.lights i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#31533a;
}

.command-box{
    padding:24px;
}

.command-label{
    color:#497157;
    font-size:9px;
    letter-spacing:2px;
    margin-bottom:12px;
}

.command-row{
    display:flex;
    align-items:center;
    gap:10px;
}

.prompt{
    color:#39ff73;
    font-size:20px;
}

.command-row input{
    flex:1;
    min-width:0;

    border:0;
    border-bottom:1px solid #285c37;
    outline:0;

    background:transparent;
    color:#f0fff4;

    padding:12px 5px;
    font-size:15px;
}

.command-row input:focus{
    border-color:#39ff73;
}

#execute,
#clear{
    border:1px solid #1c7437;
    background:#06120a;
    color:#39ff73;
    padding:11px 17px;
    font-size:10px;
    letter-spacing:1px;
}

#execute:hover,
#clear:hover{
    background:#0a2111;
    box-shadow:0 0 15px rgba(57,255,115,.12);
}

.command-hint{
    margin-top:10px;
    color:#3e664b;
    font-size:9px;
}


/* SECTIONS */

.section-title{
    color:#39ff73;
    font-size:10px;
    letter-spacing:2px;
}

.quick,
.modules,
.tools{
    margin-top:38px;
}


/* QUICK TARGETS */

.quick-grid{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);
    gap:9px;
    margin-top:13px;
}

.quick-grid button{
    min-height:100px;
    padding:16px;

    border:1px solid #153f23;
    background:#030805;

    text-align:left;
    color:#d5ffe0;
}

.quick-grid button:hover,
.quick-grid button.active{
    border-color:#39ff73;
    background:#07150b;
}

.quick-grid strong{
    display:block;
    color:#39ff73;
    font-size:9px;
    margin-bottom:16px;
}

.quick-grid span{
    display:block;
    font-size:11px;
    font-weight:bold;
}

.quick-grid small{
    display:block;
    margin-top:6px;
    color:#52745c;
    font-size:9px;
}


/* MODULES */

.module-grid{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);
    gap:9px;
    margin-top:13px;
}

.module-grid article{
    min-height:170px;
    padding:18px;

    background:#030805;
    border:1px solid #102f1b;
}

.module-grid article:hover{
    border-color:#286c3b;
}

.module-icon{
    color:#39ff73;
    font-size:20px;
}

.module-grid h3{
    margin:13px 0 7px;
    color:#dffff0;
    font-size:11px;
    letter-spacing:1px;
}

.module-grid p{
    margin:0;
    color:#587460;
    font-size:10px;
    line-height:1.7;
}


/* OUTPUT */

.result-section{
    margin-top:40px;
}

.result-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.result-sub{
    color:#45624d;
    font-size:9px;
    margin-top:5px;
}

.output{
    min-height:280px;
    padding:18px;

    background:#010301;
    border:1px solid #12381f;

    overflow:auto;
}

.idle{
    min-height:240px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:8px;

    text-align:center;
}

.idle-symbol{
    color:#39ff73;
    font-size:30px;
    margin-bottom:5px;
}

.idle strong{
    color:#cffff0;
    font-size:12px;
}

.idle span{
    color:#42604b;
    font-size:10px;
}


/* RESULT */

.result-banner{
    color:#39ff73;
    padding-bottom:12px;
    border-bottom:1px solid #12381f;
    margin-bottom:13px;
}

.result-banner strong{
    color:#e8fff0;
}

.grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(200px,1fr));
    gap:8px;
}

.card{
    padding:12px;
    background:#040a06;
    border:1px solid #102e1a;
}

.card b{
    display:block;
    color:#42634d;
    font-size:8px;
    text-transform:uppercase;
    margin-bottom:7px;
}

.card span{
    color:#d6ffe2;
    font-size:11px;
    word-break:break-word;
}

.card.note{
    grid-column:1/-1;
    border-color:#3b522f;
}

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

    padding:11px 8px;
    border-bottom:1px solid #102719;
}

.site span:first-child{
    color:#d6ffe2;
}

.found{
    color:#39ff73;
}

.not-found{
    color:#725454;
}

.site a{
    color:#39ff73;
    text-decoration:none;
}

.site a:hover{
    text-decoration:underline;
}


/* UTILITIES */

.utility-grid{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);
    gap:8px;
    margin-top:12px;
}

.utility-grid button{
    padding:14px;
    background:#030805;
    border:1px solid #143b21;
    color:#7fbd90;
    font-size:10px;
}

.utility-grid button:hover{
    color:#39ff73;
    border-color:#39ff73;
}


/* NOTICE */

.notice{
    margin-top:38px;
    padding:17px;

    border-left:2px solid #39ff73;
    background:#030805;
}

.notice strong{
    color:#39ff73;
    font-size:9px;
    letter-spacing:1px;
}

.notice p{
    margin:9px 0 0;
    color:#57735f;
    font-size:9px;
    line-height:1.7;
}


/* FOOTER */

footer{
    margin-top:50px;
    padding-top:20px;

    display:flex;
    flex-wrap:wrap;
    gap:15px;

    border-top:1px solid #102d19;

    color:#31523a;
    font-size:9px;
}

footer div{
    color:#39ff73;
}


/* RESPONSIVE */

@media(max-width:760px){

    main{
        padding:20px 12px 50px;
    }

    .topbar{
        padding:0 12px;
    }

    .brand-sub{
        display:none;
    }

    .hero{
        padding-top:22px;
    }

    .quick-grid,
    .module-grid{
        grid-template-columns:1fr 1fr;
    }

    .utility-grid{
        grid-template-columns:1fr;
    }

    .command-row{
        flex-wrap:wrap;
    }

    .command-row input{
        width:calc(100% - 40px);
    }

    #execute{
        width:100%;
    }
}

@media(max-width:480px){

    h1{
        font-size:38px;
    }

    .quick-grid,
    .module-grid{
        grid-template-columns:1fr;
    }

    .command-box{
        padding:16px;
    }

    .quick-grid button{
        min-height:85px;
    }
}


/* =========================================================
   ZΞN X DOMAIN INTELLIGENCE PANEL
   ========================================================= */

.domain-console {
    width: 100%;
    border: 1px solid rgba(57, 255, 115, 0.22);
    background:
        linear-gradient(
            180deg,
            rgba(8, 15, 12, 0.98),
            rgba(3, 7, 5, 0.98)
        );
    box-shadow:
        0 0 35px rgba(57, 255, 115, 0.04),
        inset 0 0 30px rgba(57, 255, 115, 0.025);
    overflow: hidden;
}


.domain-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    border-bottom: 1px solid rgba(57, 255, 115, 0.14);
}


.domain-kicker {
    font-size: 10px;
    letter-spacing: 2px;
    color: #39ff73;
    margin-bottom: 8px;
    font-weight: 700;
}


.domain-name {
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 800;
    color: #f2fff5;
    letter-spacing: -1px;
    word-break: break-all;
}


.domain-subtitle {
    margin-top: 7px;
    color: rgba(220, 255, 230, 0.52);
    font-size: 12px;
}


.domain-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(57, 255, 115, 0.2);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}


.domain-online {
    color: #39ff73;
    background: rgba(57, 255, 115, 0.06);
}


.domain-offline {
    color: #ff6464;
    border-color: rgba(255, 80, 80, 0.2);
    background: rgba(255, 80, 80, 0.05);
}


.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 9px currentColor;
}


.domain-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid rgba(57, 255, 115, 0.14);
}


.domain-stat {
    padding: 18px 20px;
    border-right: 1px solid rgba(57, 255, 115, 0.12);
}


.domain-stat:last-child {
    border-right: 0;
}


.stat-label {
    display: block;
    color: rgba(220, 255, 230, 0.42);
    font-size: 9px;
    letter-spacing: 1.5px;
    margin-bottom: 7px;
}


.domain-stat strong {
    color: #eaffef;
    font-size: 18px;
}


.intel-section {
    padding: 23px;
    border-bottom: 1px solid rgba(57, 255, 115, 0.1);
}


.section-heading {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 17px;
}


.section-index {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 29px;
    height: 29px;
    border: 1px solid rgba(57, 255, 115, 0.28);
    color: #39ff73;
    font-size: 10px;
    font-weight: 800;
}


.section-heading h3 {
    margin: 0;
    color: #f0fff4;
    font-size: 12px;
    letter-spacing: 1.2px;
}


.section-heading p {
    margin: 5px 0 0;
    color: rgba(220, 255, 230, 0.43);
    font-size: 11px;
}


.address-list,
.reverse-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.address-row {
    display: grid;
    grid-template-columns: 35px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(57, 255, 115, 0.1);
    background: rgba(57, 255, 115, 0.025);
}


.row-index {
    color: rgba(57, 255, 115, 0.45);
    font-size: 10px;
}


.address-row code,
.dns-value code {
    color: #bfffcf;
    font-family: "Share Tech Mono", monospace;
    font-size: 12px;
    word-break: break-all;
}


.address-type {
    color: rgba(220, 255, 230, 0.42);
    font-size: 9px;
    letter-spacing: 1px;
}


.dns-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}


.dns-card {
    border: 1px solid rgba(57, 255, 115, 0.11);
    background: rgba(57, 255, 115, 0.025);
    min-width: 0;
}


.dns-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(57, 255, 115, 0.09);
}


.dns-type {
    color: #39ff73;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 1px;
}


.dns-count {
    color: rgba(220, 255, 230, 0.4);
    font-size: 9px;
    letter-spacing: 0.8px;
}


.dns-values {
    padding: 7px;
    max-height: 180px;
    overflow-y: auto;
}


.dns-value {
    padding: 9px;
    border-bottom: 1px solid rgba(57, 255, 115, 0.06);
}


.dns-value:last-child {
    border-bottom: 0;
}


.dns-empty {
    padding: 15px;
    color: rgba(220, 255, 230, 0.28);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}


.reverse-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.7fr) 30px minmax(160px, 1.3fr);
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(57, 255, 115, 0.1);
    background: rgba(57, 255, 115, 0.025);
}


.reverse-ip {
    color: #caffd6;
    font-family: "Share Tech Mono", monospace;
    font-size: 11px;
    word-break: break-all;
}


.reverse-arrow {
    color: #39ff73;
    text-align: center;
}


.reverse-host {
    color: rgba(235, 255, 240, 0.7);
    font-family: "Share Tech Mono", monospace;
    font-size: 11px;
    word-break: break-all;
}


.empty-state {
    padding: 18px;
    border: 1px dashed rgba(57, 255, 115, 0.13);
    color: rgba(220, 255, 230, 0.3);
    text-align: center;
    font-size: 10px;
    letter-spacing: 1px;
}


.domain-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: rgba(57, 255, 115, 0.08);
}


.domain-footer > div {
    padding: 15px 18px;
    background: #050a07;
}


.footer-label {
    display: block;
    color: rgba(220, 255, 230, 0.35);
    font-size: 8px;
    letter-spacing: 1.4px;
    margin-bottom: 5px;
}


.domain-footer strong {
    color: #bfffcf;
    font-size: 10px;
    letter-spacing: 0.5px;
    word-break: break-all;
}


.zenx-error {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255, 80, 80, 0.25);
    background: rgba(255, 50, 50, 0.04);
    color: #ff6464;
}


.zenx-error span {
    color: rgba(255, 190, 190, 0.7);
    font-size: 12px;
}


@media (max-width: 700px) {

    .domain-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .domain-status {
        width: fit-content;
    }

    .domain-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .domain-stat:nth-child(2) {
        border-right: 0;
    }

    .domain-stat:nth-child(1),
    .domain-stat:nth-child(2) {
        border-bottom: 1px solid rgba(57, 255, 115, 0.12);
    }

    .dns-grid {
        grid-template-columns: 1fr;
    }

    .reverse-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .reverse-arrow {
        display: none;
    }

    .domain-footer {
        grid-template-columns: 1fr;
    }
}