/* ============================================================
   SCRYON — ENTROPA EXPLORER  ·  8-BIT ARCADE STYLESHEET
   Theme lifted from learn/ (green-screen / CRT terminal).
   ============================================================ */

:root {
    --green:      #00ff41;
    --green-dim:  #005514;
    --green-glow: #00ff4133;
    --cyan:       #00ffff;
    --magenta:    #ff00ff;
    --yellow:     #ffff00;
    --red:        #ff4444;
    --white:      #ffffff;
    --bg:         #000000;
    --panel:      #050505;
    --panel-2:    #0a0a0a;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

body {
    min-height: 100%;
    background: var(--bg);
    color: var(--green);
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    line-height: 1.9;
    overflow-x: hidden;
    padding: 16px;
}

/* ── CRT SCANLINES ───────────────────────────────────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px);
    pointer-events: none;
    z-index: 9998;
}

/* ── CRT VIGNETTE (edge darkening) ───────────────────────── */
.crt-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    background: radial-gradient(ellipse at center,
        transparent 55%, rgba(0,0,0,0.55) 100%);
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--white); text-shadow: 0 0 6px var(--cyan); }

/* ── LAYOUT ──────────────────────────────────────────────── */
.wrap { max-width: 980px; margin: 0 auto; }

.title {
    color: var(--green);
    text-shadow: 0 0 8px var(--green), 0 0 16px var(--green-glow);
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 4px;
}
.subtitle { color: var(--green-dim); font-size: 9px; margin-bottom: 18px; }

.rule {
    height: 0; border: 0;
    border-top: 2px solid var(--green-dim);
    box-shadow: 0 0 8px var(--green-glow);
    margin: 14px 0;
}

/* ── STATUS BAR ──────────────────────────────────────────── */
.statusbar {
    display: flex; flex-wrap: wrap; gap: 18px;
    font-size: 9px; color: var(--cyan);
    margin-bottom: 14px;
}
.statusbar b { color: var(--green); }
.statusbar .dot { color: var(--green); animation: blink 1.1s steps(2) infinite; }
.statusbar .connecting { color: var(--cyan); animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

/* ── TABS ────────────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; margin: 14px 0 6px; }
.tabs .tab {
    border: 2px solid var(--green-dim);
    color: var(--green-dim);
    background: var(--panel);
}
.tabs .tab:hover { color: var(--green); border-color: var(--green); background: var(--panel); box-shadow: none; }
.tabs .tab.on {
    color: var(--bg);
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 10px var(--green-glow);
}

/* ── TX FEED ROWS ────────────────────────────────────────── */
.tx-row {
    display: grid;
    grid-template-columns: 56px 1fr 18px 1fr 110px 70px;
    gap: 10px;
    align-items: center;
    padding: 9px 8px;
    border-bottom: 1px solid var(--green-dim);
    cursor: pointer;
    font-size: 9px;
}
.tx-row:last-child { border-bottom: 0; }
.tx-row:hover { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--green); }
.tx-row .h { color: var(--magenta); }
.tx-row .addr { color: var(--cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-row .arrow { color: var(--green); text-align: center; }
.tx-row .amt { color: var(--yellow); text-align: right; }
.tx-row .view { color: var(--green); text-align: right; }

/* ── SEARCH ──────────────────────────────────────────────── */
.search { display: flex; gap: 8px; margin: 8px 0 18px; }
.search input {
    flex: 1;
    background: var(--panel);
    color: var(--green);
    border: 2px solid var(--green-dim);
    font-family: inherit; font-size: 10px;
    padding: 10px;
    outline: none;
}
.search input:focus { border-color: var(--green); box-shadow: 0 0 8px var(--green-glow); }

button, .btn {
    background: var(--panel);
    color: var(--green);
    border: 2px solid var(--green);
    font-family: inherit; font-size: 9px;
    padding: 8px 12px;
    cursor: pointer;
    text-transform: uppercase;
}
button:hover, .btn:hover {
    background: var(--green);
    color: var(--bg);
    box-shadow: 0 0 10px var(--green-glow);
}

/* ── PANELS ──────────────────────────────────────────────── */
.section-label {
    color: var(--yellow);
    font-size: 10px;
    margin: 18px 0 10px;
}
.section-label::before { content: '> '; color: var(--green); }

.panel {
    background: var(--panel);
    border: 2px solid var(--green-dim);
    padding: 12px;
    margin-bottom: 12px;
}

/* ── SPACE ROWS (list) ───────────────────────────────────── */
.space-row {
    display: grid;
    grid-template-columns: 64px 1fr 90px 80px;
    gap: 10px;
    align-items: center;
    padding: 9px 8px;
    border-bottom: 1px solid var(--green-dim);
    cursor: pointer;
    font-size: 9px;
}
.space-row:last-child { border-bottom: 0; }
.space-row:hover { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--green); }
.space-row .h { color: var(--magenta); }
.space-row .id { color: var(--cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-row .txc { color: var(--yellow); text-align: right; }
.space-row .txc.zero { color: var(--green-dim); }
.space-row .view { color: var(--green); text-align: right; }

/* ── KEY/VALUE DETAIL ────────────────────────────────────── */
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 9px; }
.kv .k { color: var(--green-dim); }
.kv .v { color: var(--green); word-break: break-all; }
.kv .v.hash { color: var(--cyan); }

/* ── TX TABLE ────────────────────────────────────────────── */
.tx {
    border: 1px solid var(--green-dim);
    padding: 8px;
    margin-top: 8px;
    font-size: 9px;
}
.tx .line { display: grid; grid-template-columns: 70px 1fr; gap: 8px; }
.tx .k { color: var(--green-dim); }
.tx .amt { color: var(--yellow); }
.tx .addr { color: var(--cyan); word-break: break-all; }

.muted { color: var(--green-dim); font-size: 9px; }
.error { color: var(--red); }
.back { margin-bottom: 12px; }

footer { margin-top: 24px; color: var(--green-dim); font-size: 8px; text-align: center; }