/* ========================================
   INLINE CODE
======================================== */

code:not(pre code) {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

/* =========================================
   LIGHT MODE CODE ELEVATION
========================================= */

pre {
    background: #f8fafc; /* keep your existing code color if already set */
    border: 1px solid #e2e8f0;
    border-radius: 10px;

    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* ========================================
   TERMINAL BLOCK
======================================== */

pre {
    position: relative;
    background: var(--code-bg);
    border: 1px solid #111;
    color: #e5e5eb;
    padding: 38px 16px 16px 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: Consolas, Monaco, monospace;
    margin: 16px 0;
}

pre::before {
    content: attr(data-title);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    line-height: 28px;
    padding-left: 60px;
    font-size: 13px;
    color: #cbd5e1;
    background: #1e293b;
    border-radius: 8px 8px 0 0;
}

pre::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 12px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow:
        16px 0 0 #f59e0b,
        32px 0 0 #22c55e;
}

/* Copy button */

.copy-button {
    position: absolute;
    top: 4px;
    right: 8px;
    background: #334155;
    color: #e5e7eb;
    border: none;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
}

pre:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.1),
        0 4px 6px rgba(0, 0, 0, 0.08);
}