:root { 
    --accent: #00ff41; 
    --bg: #080808; 
    --dim: rgba(0, 255, 65, 0.15); 
}

body { 
    background-color: var(--bg); 
    color: #d1d1d1; 
    font-family: 'JetBrains Mono', monospace; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main.flex-fill {
    display: flex;
    flex-direction: column;
}

.terminal-card, .modal-content { 
    border: 1px solid var(--dim); 
    background: rgba(12, 12, 12, 0.95) !important; 
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}

.terminal-card:hover { border-color: var(--accent); }
.text-accent { color: var(--accent); }
.hr-dim { border-color: var(--dim); opacity: 1; }

.skill-tag { 
    font-size: 0.75rem; 
    border: 1px solid var(--dim); 
    padding: 2px 8px; 
    margin-right: 5px; 
    color: #aaa;
    display: inline-block;
}

.infra-text {
    color: var(--accent);
    opacity: 0.8;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.asset-link {
    display: inline-block;
    margin-top: 15px;
    padding: 5px 15px;
    border: 1px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    font-size: 0.8rem;
    transition: 0.3s;
}
.asset-link:hover {
    background: var(--accent);
    color: #000;
}

/* Form controls */
.form-control {
    background-color: #050505;
    border: 1px solid var(--dim);
    color: #fff;
    border-radius: 0;
    font-size: 0.9rem;
}
.form-control:focus {
    background-color: #050505;
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: none;
}
.btn-terminal {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 0;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}
.btn-terminal:hover, .btn-terminal:disabled {
    background: var(--accent);
    color: #000;
}