:root {
    --bg:#000;
    --bg2:#0c0c0c;
    --text:#00ff9d;
    --dim:#008f63;
    --accent:#00ff9d;
    --error:#ff5c5c;
    --white:#ddd;
    --lineHeight:20px;
}

body {
    background:var(--bg);
    color:var(--text);
    font-family:"JetBrains Mono", monospace;
    margin:0;
    padding:0;
}

.container {
    max-width:1200px;
    margin:0 auto;
    padding:20px;
}

textarea {
    width:100%;
    height:240px;
    background:var(--bg2);
    border:1px solid var(--dim);
    color:var(--text);
    padding:10px;
    border-radius:4px;
    font-size:15px;
    resize:vertical;
    white-space:pre;
}

.btn-row {
    margin:15px 0;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

button {
    border:1px solid var(--accent);
    background:var(--bg2);
    color:var(--accent);
    padding:10px 16px;
    border-radius:4px;
    cursor:pointer;
}

.editor-wrapper {
    border:1px solid var(--dim);
    background:var(--bg2);
    border-radius:4px;
    max-height:70vh;
    overflow-y:auto;
    margin-top:15px;
}

/* =====================================
   ROW-BASED PERFECT ALIGNMENT
   ===================================== */
.row {
    display:flex;
    height:var(--lineHeight);
    line-height:var(--lineHeight);
    font-family:"JetBrains Mono", monospace;
    white-space:pre;
}

.ln {
    width:55px;
    text-align:right;
    padding-right:10px;
    border-right:1px solid #111;
    opacity:0.5;
    user-select:none;
}

.code {
    padding-left:12px;
    flex:1;
    white-space:pre;
}

/* syntax */
.key { color:#00ff9d; }
.string { color:#7dffcb; }
.number { color:#51f7ff; }
.boolean { color:#e9ff7a; }
.null { color:#ffb970; }

.error-block {
    color:var(--error) !important;
    font-weight:bold;
}


footer {
    text-align:center;
    padding:15px;
    color:#00ff9d;
    border-top:1px solid #0f0f0f;
    margin-top:25px;
    font-size:13px;
    opacity:0.8;
}