/* ==============================================================================
   1. RESET, ELEMENTE GENERALE & STRUCTURĂ STRUCTURALĂ DE GRID PE 3 COLOANE
   ============================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #080b11; /* Fundal ultra-mat închis, foarte odihnitor */
    color: #f3f4f6;            /* Text alb-gri curat */
    font-family: 'Inter', sans-serif;
    /* line-height: 1.6; */
    -webkit-font-smoothing: antialiased;
    
}

main {
    min-height: calc(100vh - 140px); /* Menține footer-ul jos pe pagină */
    
}

/* 
   STRUCTURA MODULARĂ PE 3 COLOANE ASIMETRICE:
   Coloana 1 (Stânga): 85px fix - Bara ta verticală stabilă cu social links
   Coloana 2 (Centru): 1fr - Zona principală mare pentru conținutul de bază
   Coloana 3 (Dreapta): 220px - Spațiul „Wildcard” pregătit pentru spargerea tiparului
*/
.layout-wrapper {
    display: grid;
    grid-template-columns: 85px 1fr; 
    width: 100%;
    max-width: 1400px; /* Am mărit limita totală pentru a face loc coloanei a treia */
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    /* gap: 20px; */
    
}

/* Coloana Centrală (Aici stă 90% din site-ul tău în mod normal) */
.main-content {
    min-width: 0; 
    padding: 10px 20px 60px 0;
    box-sizing: border-box;
}

/* Coloana a Treia (Wildcard Space pentru spargerea tiparului) */
.right-wildcard-sidebar {
    position: sticky;
    top: 90px;
    height: calc(100vh - 110px);
    box-sizing: border-box;
    padding: 10px 20px 60px 10px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Containerul intern pentru paginile din interiorul conținutului central */
.projects-container {
    width: 100%;
    margin: 40px auto 80px auto;
}
/* ==============================================================================
   2. NAVBAR 
   ============================================================================== */
.main-navbar {
    width: 100%;
    background-color: #080b11;
    border-bottom: 1px solid #1f2937; /* Linie fină discretă sub meniu */
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px); /* Efect modern de sticlă mată la scroll */
}

.nav-container {
    max-width: 1400px; /* Aliniat cu lățimea maximă a gridului global */
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* CONTAINERUL LOGO-ULUI: Blochează selectarea textului */
.nav-avatar-block {
    display: flex;
    align-items: center;
    /* gap: 12px; */
    user-select: none; 
}

/* CERCUL DIN NAVBAR - FĂRĂ BORDURĂ, CU EFECT 3D ȘI ANIMAT */
.nav-avatar-placeholder {
    width: 64px !important;    /* Dimensiunea generoasă pe care am stabilit-o */
    height: 64px !important;
    border-radius: 50%;
    background-color: #5fd6d6; /* Nuanța ta închisă de fundal */
    border: none !important;   /* Fără bordură portocalie */
    
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    /* Umbra ta 3D profundă de plutire */
    box-shadow: 
        0 6px 10px -2px rgba(0, 0, 0, 0.5), 
        0 14px 24px -4px rgba(0, 0, 0, 0.6) !important;
    
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* CONTAINERUL CENTRAL AL SIGLEI */
.nav-tech-pulse {
    display: flex;
    align-items: flex-end; /* Aliniază liniile la bază, ca un egalizator sau grafic */
    gap: 4px;
    height: 24px;
}

/* LINIILE CARE SIMULEAZĂ UN UPDATE DE DATE SAU LOGICĂ PORTOCALIE */
.pulse-line {
    width: 2px;
    background-color: #3b82f6; /* Portocaliul tău fin de IDE */
    border-radius: 2px;
    display: block;
    transition: background-color 0.3s ease;
}

/* Înălțimi inițiale și animații independente ca să pară random/asincron */
.pulse-line:nth-child(1) {
    height: 60%;
    animation: bounceBar 1.2s ease-in-out infinite alternate;
}
.pulse-line:nth-child(2) {
    height: 100%;
    animation: bounceBar 0.8s ease-in-out infinite alternate 0.2s;
}
.pulse-line:nth-child(3) {
    height: 40%;
    animation: bounceBar 1s ease-in-out infinite alternate 0.4s;
}

/* ==============================================================================
   INTERACȚIUNEA LA HOVER (EFECTUL 3D)
   ============================================================================== */
.nav-avatar-placeholder:hover {
    transform: translateY(-3px); /* Cercul se ridică din navbar */
    box-shadow: 
        0 10px 16px -2px rgba(0, 0, 0, 0.6), 
        0 20px 36px -4px rgba(0, 0, 0, 0.7) !important;
}

/* La hover, liniile din siglă își schimbă culoarea în cyan-ul tău tech */
.nav-avatar-placeholder:hover .pulse-line {
    background-color: #64ffda; 
}

/* DEFINIREA ANIMAȚIEI DE MIȘCARE PENTRU LINII */
@keyframes bounceBar {
    0% { height: 30%; }
    100% { height: 100%; }
}


/* ANIMATIE ADMIN MODE */
/* .admin-blink { animation: terminal-blink 1s step-end infinite; } */


/* Meniul din dreapta */
.nav-links {
    display: flex;
    list-style: none;
    gap: 22px;
    align-items: center;
}

/* Link-ul individual */
.nav-item {
    text-decoration: none;
    color: #ccd6f6; /* Alb-argintiu stins */
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    font-weight: 400;
    transition: color 0.2s ease;
}

/* Culoarea verde-turcoaz fină pentru numere (01., 02.) */
.nav-number {
    color: #64ffda;
    font-size: 0.6rem;
    margin-right: 4px;
}

.nav-item:hover {
    color: #60a5fa;
}


/* ==============================================================================
   2.1 STILIZARE COMPONENTE AVATAR ȘI BURGER (DESKTOP BASE)
   ============================================================================== */
.nav-avatar-placeholder {
    cursor: pointer !important;
}

.nav-avatar-block {
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none; /* Interzice selectarea textului ca să pară element nativ de UI */
}


.hero-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esențial: umple pătratul perfect, fără să lungească sau să strivească fața */
    display: block;
}


/* Cercul pregătit pentru viitoarea ta fotografie de profil */
.nav-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #111a2e; /* Nuanța ta de bleumarin */
    border: 1px solid #fab387; /* Bordură subțire albastră */
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-initial {
    color: #60a5fa;
    font-family: 'Fira Code', monospace;
    font-weight: 700;
    font-size: 0.9rem;
}

.navbar-profile-name {
    color: #64ffda; /* Turcoazul tău iconic pentru text */
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Ascundem butonul mecanic pe ecrane mari */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 120; /* Forțează butonul să stea deasupra panoului glisant */
}

.menu-toggle .bar {
    width: 100%;
    height: 2px;
    background-color: #64ffda;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-clock-block {
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #ccd6f6; /* Alb-argintiu stins, la fel ca link-urile tale */
    user-select: none;
    margin-left: 20px; /* Lasă spațiu față de ultimul buton din meniu */
}

/* Promptul text (status: online) */


/* Cifrele dinamice ale ceasului */
#realtime-clock {
    color: #fab387; /* Portocaliul tău fin de IDE, sare în ochi instant */
    font-weight: 500;
}

/* ==============================================================================
   3. STRUCTURĂ ETICHETE ȘI TITLURI (WORK >>)
   ============================================================================== */
.page-title {
    text-align: left;
    margin-bottom: 0; 
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.03em;
    position: relative;
    display: inline-block;
}

h4.page-title {
    /* font-size: 1.3rem; */
    color: #ffffff;
    font-weight: 500;
    margin: 0px 0px 30px 0px;
    display: flex;
    align-items: center;
}

/* Săgețile portocalii caracteristice stilului tău stabil */
.title-arrows {
    color: #fab387;
    font-family: 'Fira Code', monospace;
    font-size: 0.9em; 
    margin-left: 8px; 
}

#projects-section,
#featured-section {
    /* Oprește scroll-ul cu 100px mai sus de element când dai click pe link-uri în navbar */
    scroll-margin-top: 100px; 
}
/* ==============================================================================
   4. SECTIUNEA HERO INDENTATĂ (RETRO STAGE SYSTEM)
   ============================================================================== */
/* CONTAINERUL MARE: Pune poza în stânga și textul în dreapta */
.portfolio-hero {
    max-width: 900px;          
    /* margin-bottom: 50px;  */
    padding: 50px 0 60px 0;
    text-align: left;
    display: flex;
    flex-direction: row;       
    align-items: center;       
    gap: 50px;                 
}

/* BLOCUL DE TEXT DIN DREAPTA */
.hero-text-block {
    flex: 1;                   /* Ocupă tot spațiul rămas liber în dreapta */
    display: flex;
    flex-direction: column;
    gap: 0;                    /* Resetăm gap-ul global ca să ascultăm de marginile tale de mai jos */
}

/* Salutul "Hi, my name is" */
.hero-overline {
    font-family: 'Fira Code', monospace;
    color: #64ffda;
    font-size: 0.95rem;
    margin-bottom: 8px;        /* Spațiu curat în jos, fără transform */
    display: block;
}

/* Numele tău */
.hero-text-block .page-title {
    font-size: 2.5rem;         /* Îl facem puțin mai impunător */
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Rândul portocaliu sub nume */
.hero-tagline {
    font-family: 'Fira Code', monospace;
    color: #94a3b8; 
    font-size: 0.8rem;         /* Mărit puțin ca să fie lizibil */
    margin: 0 0 24px 0;        /* Spațiu curat până la descriere */
    font-weight: 300;
}

/* Evidențierea valorii Python din tagline */
.hero-tagline .py-highlight {
    color: #fab387;              /* Cyan-ul tău clasic de tech */
    font-weight: 600;            /* Îl face mai boldat/îngroșat ca să sară în ochi */
    text-shadow: 0 0 8px rgba(100, 255, 218, 0.2); /* Un mic efect de strălucire discret (glow) */
}


/* Paragraful lung de descriere */
.hero-subtitle {
    color: #e2e8f0;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 800px; 
    margin: 0;
    margin-left: 100px;
    margin-top: 50px;

    
}

/* Evidențierea nișei din descriere */
.hero-subtitle .subtitle-accent {
    color: #e2e8f0;      /* Textul rămâne alb curat pentru contrast */
    font-weight: 600;    
    position: relative;  /* <--- Ancora obligatorie pentru linia de dedesubt */
    display: inline-block; /* Îi permite liniei să se poziționeze corect sub cuvinte */
}

/* LINIA ROȘIE DETALIATĂ CARE SE PIERDE ÎN DREAPTA */
.hero-subtitle .subtitle-accent::after {
    content: "";
    position: absolute;
    bottom: -1px;          /* O coboară fix sub litere (ajustează dacă o vrei mai jos) */
    left: 0;
    
    /* EFECTUL DE EXTINDERE ȘI FADE: */
    width: 600px;         /* O lungim dincolo de text (ajustează pixelii dacă o vrei și mai lungă la dreapta) */
    height: 2px;          /* Grosimea liniei roșii */
    
    /* GRADIENTUL CARE FACE LINIA SĂ SE PIARDĂ TREPTAT: */
    background: linear-gradient(to right, #4d0101 0%, #280101 60%, transparent 100%);
    
    pointer-events: none; /* Ignoră interacțiunea cu mouse-ul */
}

/* ==============================================================================
   COLOANA DIN STÂNGA: CONSERVAREA EFECTULUI ASIMETRIC PE CARE ÎL AI DEJA
   ============================================================================== */
.hero-square-box {
    width: 210px;              
    height: 210px;
    border: none !important;   
    background-color: transparent; 
    border-radius: 6px;        
    flex-shrink: 0;            
    position: relative;        
    /* Am șters margin-top și margin-right negative ca să nu mai tragă layout-ul în diagonală aiurea */
}

/* CHENARUL GOL DIN SPATE (DASHED) */
.hero-square-box::before {
    content: "";
    position: absolute;
    top: 14px;                 
    left: 18px;                
    width: 100%;
    height: 100%;
    border: 2px dashed #fab387; 
    border-radius: 6px;
    z-index: 1;               
    box-sizing: border-box;
    transform: rotate(3deg);   
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* POZA PROPRIU-ZISĂ */
.hero-square-box .hero-avatar {
    position: relative;
    z-index: 2;               
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 6px;
    background-color: #080b11;
    display: block;
    transform: rotate(-1.5deg);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* EFECTUL LA HOVER */
.hero-square-box:hover .hero-avatar {
    transform: translate(-14px, -20px) rotate(0deg); 
}
.hero-square-box:hover::before {
    transform: translate(6px, 10px) rotate(6deg);
}



/* ==============================================================================
   4.1 CASSETĂ EXTENSIBILĂ BIOGRAFIE HERO (READ MORE ENGINE)
   ============================================================================== */
.hero-bio-container {
    margin-top: 24px;
    /* max-width: 600px;  */
    position: relative;
    /* Împingem box-ul ușor în dreapta pentru a urmări alinierea indentată dacă dorești */
    margin-left: 0px;
    margin-bottom: 400px; 
    
}

/* Stil pentru noul titlu din biografie */
.bio-section-title {
    font-family: 'Fira Code', monospace;
    color: #fab387; /* Portocaliu fin de IDE, identic cu săgețile și tagline-ul */
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px; /* Lasă un spațiu curat până la începerea textului poveștii */
    text-transform: lowercase;
}

.hero-bio-text {
    font-family: 'Fira Code', monospace;
    color: #9ca3af; /* Gri-argintiu discret, în ton cu restul textelor tehnice */
    font-size: 0.8rem;
    line-height: 1.6;
    overflow: hidden;
    
    /* 👈 STAREA INIȚIALĂ: Blocăm înălțimea la fix ~5-6 rânduri de text */
    max-height: 110px; 
    
    position: relative;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efectul de Fade-Out (estompare) la baza textului ascuns */
.hero-bio-text::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #080b11); /* Se pierde în fundalul site-ului tău */
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* CLASA ACTIVĂ (Injectată din JS): Deshide containerul la dimensiunea lui maximă reală */
.hero-bio-text.expanded {
    max-height: 5000px; /* O valoare suficient de mare pentru a cuprinde toată povestea viitoare */
}

/* Când este extins, eliminăm gradientul de estompare de la bază */
.hero-bio-text.expanded::after {
    opacity: 0;
}

/* Link-ul declanșator în stil de cod terminal */
.bio-toggle-btn {
    background: transparent;
    border: none;
    color: #64ffda; /* Turcoazul tău nativ din consolă */
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 8px;
    display: inline-block;
    transition: color 0.2s ease, transform 0.2s ease;
    outline: none;
}

.bio-toggle-btn:hover {
    color: #60a5fa; /* Schimbare fină în albastru tech la hover */
    transform: translateX(2px);
}
/* ==============================================================================
   5. DREPTUNGHIUL STIL CONSOLĂ & STRUCTURĂ CONTAINERE
   ============================================================================== */
.hero-outline-box {
    border: 1px solid #1f2937;
    border-radius: 6px;
    padding: 16px;
    background-color: #0b0f19;
    max-width: 600px;
    margin-top: 15px;
    font-family: 'Fira Code', monospace;
}

.box-inner-prompt {
    color: #4b5563;
    font-size: 0.75rem;
    margin-bottom: 8px;
}

.box-typing-text {
    color: #64ffda;
    font-size: 0.7rem;
}

.hero-layout-container {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr; 
    gap: 40px;
    align-items: center; 
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 0;
}

/* Containerul principal în care stau toate proiectele mari */
.featured-list {
    display: flex;
    flex-direction: column;
    gap: 220px; 
    margin-bottom: 80px;
    width: 100%;
}
/* ==============================================================================
   6. RÂNDUL ASIMETRIC FEATURED (MOTORUL DE GRID DESKTOP)
   ============================================================================== */
.featured-row {
    display: grid;
    /* Împărțim rândul în 12 coloane virtuale complet egale ca proporție */
    grid-template-columns: repeat(12, 1fr);
    align-items: flex-start; /* Aliniere naturală de sus pe verticală */
    position: relative;
    width: 100%;
}
/* ==============================================================================
   ANIMATIE CURATĂ ȘI IZOLATĂ PENTRU PROIECTELE FEATURED (FĂRĂ A AFECTA DEMO-URILE)
   ============================================================================== */

/* 1. Aprindem promptul >_ în turcoaz când punem mouse-ul pe cardul mare Featured */
.featured-card-side:hover .py-execute-icon {
    color: #64ffda; 
}

/* 2. Lansăm animația mecanică de clipire a cursorului pe cardul mare Featured */
.featured-card-side:hover .py-cursor {
    background-color: #64ffda;
    animation: terminal-blink 1s step-end infinite; 
}


/* ==============================================================================
   6.2 SECȚIUNEA DEMO / MINI PROJECTS (GRILA TA ORIGINALĂ REINTRODUSĂ)
   ============================================================================== */
.projects-grid {
    display: grid;
    /* Menține structura ta curată de 3 coloane egale pe desktop */
    grid-template-columns: repeat(4, minmax(0, 1fr)); 
    gap: 16px; 
}

.project-card {
    display: flex;
    flex-direction: column;
    /* background: #111a2e;  */
    border-radius: 6px; 
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 0.25s ease;
    font-family: 'Fira Code', monospace;
}

.project-card:hover {
    transform: translateY(-6px);
    background-color: #17223b; /* Se aprinde fin la hover */
    /* border: 1px solid #64ffda; */
}

.card-content {
    padding: 28px; 
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start; 
    gap: 10px;
}

.card-top-icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; 
}

.icon-folder {
    width: 40px;
    height: 40px;
    stroke: #64ffda; /* Turcoazul tău nativ din meniu */
}

.icon-link {
    width: 20px;
    height: 20px;
    stroke: #a8b2d1; 
    transition: stroke 0.2s ease;
}

.project-card:hover .icon-link {
    stroke: #64ffda;

}

.card-title {
    /* margin: 0 0 10px 0; */
    font-size: 0.9rem; 
    color: #e2e8f0; 
    font-weight: 500;
    /* letter-spacing: -0.01em; */
    transition: color 0.2s ease;
}


.project-card:hover .card-title {
    color: #64ffda;
    
}

.card-description {
    color: #8892b0; /* Gri-albăstrui stins nativ */
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.6;
    margin: 0 0 24px 0; 
}

.card-tags {
    margin-top: auto; 
    display: flex;
    flex-wrap: wrap;
    gap: 14px; /* Distanțare dinamică între cele maxim 3 tag-uri */
}

.tag-badge {
    background: transparent; 
    border: none; 
    color: #64ffda; 
    padding: 0; 
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: lowercase; 
    letter-spacing: 0.5px;
    font-family: 'Fira Code', monospace;
}

.project-card:hover .tag-badge {
    color: #64ffda;
}

.demo-attention-tag {
    font-family: 'Fira Code', monospace;
    color: #fab387; /* Portocaliul tău nativ de IDE */
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    padding: 2px 6px;
    background-color: rgba(250, 179, 135, 0.03);
    border-radius: 4px;
    border: 1px solid rgba(250, 179, 135, 0.12);
}

/* Containerul de control pentru Demos - Aliniat la 900px cu secțiunea de sus */
.demos-centered-wrapper {
    /* max-width: 900px !important; */
    width: 100% !important;
    margin: 0 auto 80px auto !important; /* Resetează marginea de sus, păstrează doar centrarea */
    box-sizing: border-box;
}

/* Grila curată de 3 coloane dinamice în interiorul spațiului de 900px */
.projects-grid.demos-clean-3-columns {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* Forțează 3 coloane egale */
    gap: 16px !important; /* Distanța dintre carduri */
    width: 100% !important;
    box-sizing: border-box;
}

/* RESPONSIVE PENTRU MOBIL: Pe telefoane le punem pe o singură coloană fluidă */
@media (max-width: 768px) {
    .demos-centered-wrapper {
        max-width: 100% !important;
        padding: 0 10px;
    }
    .projects-grid.demos-clean-3-columns {
        grid-template-columns: 1fr !important; /* Trec una sub alta pe telefon */
    }
}

/* ==============================================================================
   ICONIȚĂ CUSTOM PY TERMINAL PENTRU CARDURILE DEMO
   ============================================================================== */
.py-execute-icon {
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #4b5563; /* În repaus este stinsă, un gri-închis industrial */
    display: flex;
    align-items: center;
    transition: color 0.25s ease;
    user-select: none;
}

/* Cursorul de terminal care va clipi doar la hover */
.py-cursor {
    display: inline-block;
    width: 6px;
    height: 12px;
    background-color: transparent;
    margin-left: 2px;
}

/* 👈 EFECTUL PREMIUM LA HOVER PE CARD */
.project-card:hover .py-execute-icon {
    color: #64ffda; /* Simbolul >_ se aprinde spectaculos în turcoazul tău iconic */
}

.project-card:hover .py-cursor {
    background-color: #64ffda;
    /* Lansează animația de clipire nativă stil terminal Linux */
    animation: terminal-blink 1s step-end infinite; 
}

/* Animația mecanică de clipire a cursorului */
@keyframes terminal-blink {
    from, to { background-color: transparent }
    50% { background-color: #64ffda }
}




/* ==============================================================================
   7. PROIECTE FEATURED: CARDUL DE TEXT (PROPRIETĂȚI STRUCTURALE)
   ============================================================================== */

.featured-attention-tag {
    font-family: 'Fira Code', monospace;
    color: #fab387; /* Portocaliu fin de IDE, identic cu tagline-ul din Hero */
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    padding: 2px 6px;
    background-color: rgba(250, 179, 135, 0.05); /* Un fundal portocaliu extrem de subtil și transparent */
    border-radius: 4px;
    border: 1px solid rgba(250, 179, 135, 0.15); 
    align-self: flex-end ! important;
}

.featured-card-side {
    grid-column: 2 / 9; /* Începe de la coloana 2 până la coloana 9 */
    grid-row: 1;        /* Împarte obligatoriu rândul 1 cu imaginea */
    background-color: rgba(250, 179, 135, 0.03); 
    /* border: 1px solid #17223b;   */
    /* padding: 20px; */
    /* border-radius: 8px; */
    z-index: 1;         /* Stratul de jos în adâncime */
    text-decoration: none; 
    color: inherit;
    box-shadow: 0 10px 30px -15px rgba(2, 4, 6, 0.5);
    min-height: 280px;
    display: flex;
    align-items: center;
    transition: background-color 0.25s ease;
}

.featured-card-side:hover {
    background-color: #14203a;
}

/* CONTAINERUL DE TEXT DIN INTERIORUL CARDULUI */
.featured-card-content {
    width: 100%;
    max-width: 60%;    /* Restrânge textul pe prima jumătate, ferit de overlap */
    display: flex;
    flex-direction: column;
    gap: 10px;
}



/* Corectarea containerului principal la fix 900px centrat */
.featured-two-columns-centered {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Fix 2 coloane egale în jos */
    gap: 24px !important;
    /* max-width: 900px !important;  */
    width: 100% !important;
    margin: 0 auto 80px auto !important; /* Forțează centrarea pe mijlocul ecranului */
    box-sizing: border-box !important;
}

/* Caseta wrapper pentru fiecare element din grilă */
.featured-grid-item-wrapper {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Forțăm cardurile tale să ignore regulile rigide de dinainte și să umple noile coloane */
.featured-card-side.featured-clean-card {
    grid-column: auto !important; /* Dezactivează regula '2 / 9' de pe desktop */
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 280px !important;
    box-sizing: border-box !important;
    display: flex !important;
}

/* Extinde textul pe tot cardul, acum că lățimea totală s-a micșorat prin împărțirea la 2 */
.featured-card-side.featured-clean-card .featured-card-content {
    max-width: 100% !important;
    width: 100% !important;
}

/* Reset pe mobil ca să nu se spargă pe ecrane mici */
@media (max-width: 768px) {
    .featured-two-columns-centered {
        grid-template-columns: 1fr !important;
    }
}

/* ==============================================================================
   8. PROIECTE FEATURED: CONȚINUT TEXT INTERN (TITLU, DESCRIERE, BADGES)
   ============================================================================== */
.featured-label {
    font-family: 'Fira Code', monospace;
    color: #64ffda; 
    font-size: 0.8rem;
}

.featured-title {
    font-family: 'Fira Code', monospace;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
}

.featured-card-side:hover .featured-title {
    color: #64ffda; 
}

.featured-description {
    font-family: 'Fira Code', monospace;
    color: #8892b0; 
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.6;
}

/* CONTAINERUL CARE ȚINE TOATE TAG-URILE */
.featured-tags-list {
    display: flex;
    flex-wrap: wrap; /* Le lasă să treacă pe rândul următor dacă sunt prea multe */
    gap: 10px;       /* Spațiul dintre badge-uri */
    margin-top: 12px;
}

/* BADGE-UL INDIVIDUAL (STIL TERMINAL / CODE ACCENT) */
.featured-tag {
    font-family: 'Fira Code', monospace;
    font-size: 0.72rem;
    color: #64ffda;             /* Cyan-ul tău clasic tech */
    background-color: rgba(100, 255, 218, 0.04); /* Un fundal foarte discret */
    
    /* Bordură fină ca un indicator de compilare */
    border: 1px solid rgba(100, 255, 218, 0.2); 
    padding: 4px 10px;
    border-radius: 4px;         /* Colțuri ușor rotunjite în stil UI */
    
    text-transform: lowercase;  /* Forțează scrierea cu litere mici ca în sintaxa Python */
    letter-spacing: 0.5px;
    
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
}

/* EFECT DE TIP TERMINAL LA HOVER PE TAG */
.featured-tag:hover {
    color: #080b11;             /* Textul devine închis la culoare */
    background-color: #64ffda;  /* Fundalul se aprinde complet în cyan */
    border-color: #64ffda;
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.3); /* Un mic glow digital */
    transform: translateY(-1px);
}

/* ==============================================================================
   9. PROIECTE FEATURED: IMAGINEA DIN DREAPTA (ALINIERE ȘI DECALAJ DE 50PX)
   ============================================================================== */
.featured-image-side {
    grid-column: 7 / 13; 
    grid-row: 1;        
    z-index: 2;         
    /* height: 800px;        */
    /* width: 800px; */
    overflow: hidden;
    border-radius: 6px;
    background-color: #080b11;
    border: 1px solid #17223b;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    pointer-events: none; 

    /* Împingem imaginea în jos pe verticală pentru a rupe simetria */
    transform: translateY(-50px); 

    border-radius: 25px;
}

.featured-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;   
    /* opacity: 0.4;         */
    transition: all 0.3s ease;
}

/* Aprinderea luminozității imaginii la hover pe cardul de text */
.featured-card-side:hover + .featured-image-side .featured-cover-img {
    opacity: 0.85;
}

.featured-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111a2e;
    color: #4b5563;
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    border: 1px dashed #17223b;
}
/* ==============================================================================
   10. BUTOANE RETRO & EFECTE DE HOVER REFRACTATE (STIL TERMINAL)
   ============================================================================== */
.btn-retro {
    padding: 10px 20px;
    text-decoration: none;
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    border-radius: 4px;
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 0.2s ease, 
                color 0.2s ease, 
                box-shadow 0.2s ease;
}

.btn-edit {
    /* position: absolute; */
    right: 0;
    top: 0;
    color: #60a5fa;
    border: 1px solid #60a5fa;
}

.btn-edit:hover {
    background: rgba(96, 165, 250, 0.1);
    transform: translateY(-2px);
}

.btn-demo {
    background: #ffffff;
    color: #080b11;
    border: 1px solid #ffffff;
}

.btn-demo:hover {
    background: transparent; 
    color: #ffffff;          
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15); 
}

.btn-source {
    background: transparent;
    color: #ffffff;
    border: 1px solid #374151;
}

.btn-source:hover {
    background: #111827;     
    border-color: #60a5fa;   
    color: #60a5fa;          
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15); 
}
/* ==============================================================================
   11. PAGINA DE DETALII: COMPACT SYSTEM (SINGLE_PROJECT.HTML)
   ============================================================================== */
.case-study-container {
    max-width: 1400px; 
    margin: 10px auto;
    padding: 0 16px; 
    box-sizing: border-box;
    font-family: 'Fira Code', monospace; 
}

.back-btn {
    font-family: 'Fira Code', monospace;
    color: #fab387;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 300;
    position: fixed;
    /* top: 150px;  */
    /* left: 4px;  */
    z-index: 110; 
    background-color: transparent; 
    padding: 6px 12px;
    transition: all 0.2s ease;
}

.back-btn:hover {
    color: #60a5fa;
}

.project-header {
    margin-bottom: 30px;
    position: relative;
}

.project-header .hero-overline {
    font-family: 'Fira Code', monospace;
    font-size: 1.15rem; 
    font-weight: 400; 
    color: #ffffff;
    margin: 0 0 4px 0;
    transform: none; 
    display: inline-block;
}

.project-date {
    color: #444444;
    font-size: 0.75rem;
    margin-bottom: 16px;
}

.project-tags-large {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

.tag-badge-large {
    background: #111827;
    color: #60a5fa;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #1f2937;
}

.project-main-image-wrapper {
    width: 100%;
    max-width: 1000px; 
    margin: 0 auto 40px auto; 
    background-color: #030712;
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 16px; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.project-main-image {
    width: 100%;
    height: auto;
    max-height: 480px; 
    object-fit: contain; 
    border-radius: 6px;
    display: block;
    margin: 0 auto; 
}

.project-intro {
    background: #111827;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid #1f2937;
    margin-bottom: 24px;
}

.project-intro h3, 
.case-study-sections h3 {
    font-family: 'Fira Code', monospace;
    color: #fab387;
    font-size: 0.95rem; 
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 8px;
}

.project-intro p {
    font-family: 'Fira Code', monospace;
    color: #abb1bd;
    font-size: 0.8rem; 
    line-height: 1.5;
}

.project-links {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
}
/* ==============================================================================
   12. CASE STUDY ZIGZAG ENGINE (REPARAT CU FLEXBOX & SCROLL PROVENIRE)
   ============================================================================== */
.case-study-sections {
    border-top: 1px solid #1f2937;
    padding-top: 24px;
}

/* Containerul fiecărui rând */
.case-study-row {
    display: flex;
    flex-direction: row; /* Implicit: text pe stânga, imagine pe dreapta */
    gap: 12px; 
    margin-bottom: 80px;
    align-items: center; /* Aliniază-le frumos pe mijloc vertical */
    width: 100%;
}

/* EFECTUL DE ZIG-ZAG: Inversează ordinea DOAR pentru rândurile pare din buclă */
.case-study-sections .case-study-row:nth-of-type(even) {
    flex-direction: row-reverse;
}

/* Fiecare coloană primește spațiu egal și nu se poate lărgi aiurea */
.section-text-block, 
.section-image-block {
    flex: 1;
    min-width: 0; /* OBLIGATORIU: Permite containerului de cod să facă scroll în loc să spargă design-ul */
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    color: #e2e8f0; 
    line-height: 1.5;
}

.section-number {
    color: #64ffda;
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    margin-bottom: 6px;
    display: block;
}

.case-study-img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border: 1px solid #1f2937;
    border-radius: 6px;
    background: #030712;
    padding: 8px;
    box-sizing: border-box;
    display: block;
}

.code-display-box {
    /* background-color: #0d1527;  */
    /* border: 1px solid #3b82f6;  */
    /* border-radius: 8px;  */
    padding: 12px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Taie marginile ascuțite */
}

.code-display-box pre {
    margin: 0;
    padding: 0;
    overflow-x: auto; 
    display: block;
    width: 100%;
}

/* Scrollbar orizontal ultra-subțire personalizat */
.code-display-box pre::-webkit-scrollbar {
    height: 6px; 
}

.code-display-box pre::-webkit-scrollbar-track {
    background: #0d1527; 
    border-radius: 0 0 8px 8px; 
}

.code-display-box pre::-webkit-scrollbar-thumb {
    background: #1e293b; 
    border-radius: 4px;
}

.code-display-box pre::-webkit-scrollbar-thumb:hover {
    background: #3b82f6; 
    cursor: pointer;
}

.code-display-box code {
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: #e2e8f0; 
    line-height: 1.5;
    display: block;
    white-space: pre; 
}





/* ==============================================================================
   13. PERMANENT LEFT SIDEBAR WIDGET SYSTEM (LINII FADE CORECTATE ȘI FLUIDE)
   ============================================================================== */
.left-sidebar {
    position: sticky;
    top: 90px; 
    height: calc(100vh - 110px); 
    box-sizing: border-box;
    z-index: 10;
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
}

.sidebar-top {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* CONTAINERUL CENTRAL AL LINIILOR - Forțăm comportamentul flexibil */
.sidebar-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    flex-grow: 1; /* Îi dă voie să ocupe tot spațiul disponibil pe verticală */
    justify-content: center; /* Soluționează centrarea liniilor în jurul linkurilor */
}

/* LINIA DE SUS (Cea cu FADE) - Forțăm randarea vizuală stabilă */
.sidebar-bottom::before {
    content: ""; 
    display: block; 
    width: 1px;
    height: 250px; /* Am trecut la o dimensiune fluidă/mai compactă pentru a nu depăși viewport-ul */
    background: linear-gradient(to bottom, transparent, rgb(145, 144, 144)) !important;
    margin-bottom: 24px; 
    flex-shrink: 0 !important; 
}

/* BIFURCAȚIA: Caseta care înconjoară link-urile */
.sidebar-socials {
    display: flex;
    flex-direction: column;
    gap: 32px; 
    align-items: center;
    flex-shrink: 0 !important;
}

/* LINIA DE JOS (Cea cu FADE) - Forțăm randarea vizuală stabilă */
.sidebar-bottom::after {
    content: ""; 
    display: block; 
    width: 1px;
    height: 150px; 
    background: linear-gradient(to bottom, rgb(145, 144, 144), transparent) !important;
    margin-top: 24px; 
    flex-shrink: 0 !important; 
}

.vertical-social {
    text-decoration: none;
    color: rgb(145, 144, 144); 
    transition: all 0.2s ease-in-out;
    display: inline-block; /* Asigură un comportament corect pentru transformări */
}

.vertical-text {
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem; 
    writing-mode: vertical-rl; 
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.vertical-social:hover {
    color: #60a5fa;
    transform: translateY(-4px) !important; /* Mișcare fină în sus la hover */
}

.sidebar-line {
    display: none;
}



/* ==============================================================================
   14. INTERFAȚĂ NEO-CYBERPUNK PENTRU FORMS & SECTIONS - MOD AERISIT
   ============================================================================== */

/* Containerul principal - Îl facem puțin mai îngust pentru focus vizual */
.form-container {
    max-width: 1400px;
    margin: 60px auto;
    padding: 0 24px;
    box-sizing: border-box;
    font-family: 'Fira Code', monospace;
    color: #cbd5e1;
}

/* Titlul principal - Curat, distanțat */
.custom-admin-main-title {
    font-family: 'Fira Code', monospace;
    font-size: 1.4rem;
    color: #64ffda;
    margin-bottom: 44px; /* Lasă spațiu generos sub titlu */
    font-weight: 500;
}

/* Containerele mari (Project Info și Sections) - Scoatere fundal greoi */
.main-project-fields,
.project-sections-fields {
    background: transparent; 
    border-top: 1px solid #1e293b; /* Doar o linie fină de demarcație */
    padding: 32px 0; /* Spațiu generos sus și jos */
    margin-bottom: 40px;
}

.main-project-fields h3,
.project-sections-fields h3 {
    color: #fab387; /* Portocaliu retro */
    font-size: 0.9rem; /* Text mai mic, mai rafinat */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 0;
    margin-bottom: 32px; /* Spațiu masiv sub titlul blocului */
}

/* Blocurile individuale pentru pașii studiului de caz (Formset Blocks) */
.individual-section-block {
    background: #040814; /* Fundal ultra-discret, aproape negru */
    border: 1px solid #1e293b !important;
    padding: 32px !important; /* Margini interioare mari - elementele respiră */
    margin-bottom: 36px !important;
    border-radius: 8px;
}

.individual-section-block h4 {
    color: #a7f3d0;
    font-size: 0.8rem;
    margin-top: 0;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

/* ################################### */
.form-container form p:has(input[type="file"]):has(a) {
    display: flex !important;
    flex-direction: column !important; /* Toate elementele trec pe rânduri separate, de sus în jos */
    align-items: flex-start !important;
    gap: 12px !important; /* Spațiu generos între link, bifa de ștergere și buton */
    width: 100% !important;
    max-width: 100% !important;
    background: #030712 !important; /* Fundal închis asortat cu restul inputurilor */
    border: 1px solid #1e293b !important;
    padding: 16px !important;
    border-radius: 6px;
    box-sizing: border-box !important;
}

/* Forțăm link-ul cu numele pozei să aibă rândul lui întreg, rezolvând cascada verticală */
.form-container form p:has(input[type="file"]) a {
    display: block !important; /* Devine bloc separat ca să nu mai fie strâns în lateral */
    width: 100% !important;
    color: #60a5fa !important; /* Albastru deschis neon */
    font-size: 0.85rem !important;
    text-decoration: none !important;
    word-break: break-all !important; /* Sparge textul lung dacă e nevoie, dar pe orizontală */
    white-space: normal !important;
    line-height: 1.4 !important;
}

/* Stil pentru textele brute din Django (Currently:, Change:) */
.form-container form p:has(input[type="file"]):has(a) {
    color: #64748b !important; /* Gri discret pentru textele de sistem */
    font-size: 0.8rem !important;
}

/* Container pentru bifa de ștergere (Clear:) - Îl izolăm pe rândul lui */
.form-container form p:has(input[type="file"]) input[type="checkbox"] {
    display: inline-block !important;
    margin: 0 8px 0 0 !important; /* Spațiu la dreapta bifei */
    transform: scale(1.1) !important;
    accent-color: #64ffda !important;
    vertical-align: middle !important;
}

/* Forțăm butonul de încărcare fișier (Choose File) să stea curat la final, pe rândul lui */
.form-container form p:has(input[type="file"]) .modern-file-input {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
}

/* ==============================================================================
   SPAȚIEREA FORMATULUI GENERAT DE AS_P
   ============================================================================== */

/* Fiecare rând (Label + Input) devine o entitate aerisită și ordonată */
.form-container form p {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Spațiu între etichetă și casetă */
    margin-bottom: 26px !important; /* Distanță generoasă între câmpuri succesive */
    width: 100%;
}

/* Etichetele (Labels) - Rezolvă problema scrisului prea mare și înghesuit */
.form-container form label {
    color: #64748b; /* Gri cenușiu stins, foarte curat */
    font-size: 0.75rem !important; /* Dimensiune mică, tehnică, specifică IDE-urilor */
    font-weight: 400 !important;
    letter-spacing: 0.5px;
    text-transform: none; /* Păstrează scrierea normală a modelului Django */
}

/* ==============================================================================
   PĂSTRAREA ȘI CORECTAREA WIDGET-URILOR TALE MODERN-*
   ============================================================================== */

.modern-input, 
.modern-textarea, 
.modern-textarea-section, 
.modern-code-area,
.custom-admin-container input[type="number"] {
    background: #020617 !important; 
    border: 1px solid #1e293b !important; 
    color: #e2e8f0 !important;
    font-family: 'Fira Code', monospace !important;
    font-size: 0.85rem !important;
    padding: 12px 14px !important; /* Dimensiuni reduse discret pentru a nu fi uriașe */
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Corecție specială pentru caseta multiplă de Tags */
.modern-select {
    background: #020617 !important; 
    border: 1px solid #1e293b !important; 
    color: #cbd5e1 !important;
    font-family: 'Fira Code', monospace !important;
    font-size: 0.8rem !important; /* Scris discret mai mic în interiorul listei */
    padding: 8px !important; /* Padding compact special pentru liste */
    border-radius: 6px;
    width: 100%;
    min-height: 130px; /* Îi dă înălțime să respire elementele din listă */
    box-sizing: border-box;
}

/* Hover & Focus (Efectele tale cool cu verde de consolă) */
.modern-input:hover, .modern-textarea:hover, .modern-textarea-section:hover, .modern-code-area:hover, .modern-select:hover {
    border-color: #334155 !important;
}

.modern-input:focus, .modern-textarea:focus, .modern-textarea-section:focus, .modern-code-area:focus, .modern-select:focus {
    outline: none;
    border-color: #64ffda !important;
    background: #000000 !important;
    box-shadow: 0 0 12px rgba(100, 255, 218, 0.12); 
}

/* Zona specială pentru cod - Păstrăm stilul tău de editor */
.modern-code-area {
    background: #090d16 !important;
    color: #64ffda !important; 
    border-left: 3px solid #3b82f6 !important; /* Un albastru fin de editor pe stânga */
    line-height: 1.5;
}

/* Opțiunile din interiorul listei de tag-uri */
.modern-select option {
    padding: 6px 10px;
    background: #020617;
    color: #8892b0;
    border-radius: 4px;
    margin-bottom: 2px;
}

/* Scrollbar-ul tău customizat pentru select */
.modern-select::-webkit-scrollbar { width: 6px; }
.modern-select::-webkit-scrollbar-track { background: #020617; }
.modern-select::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 6px; }
.modern-select::-webkit-scrollbar-thumb:hover { background: #64ffda; }

/* Butonul tău excelent de file upload (Choose File) */
.modern-file-input::-webkit-file-upload-button {
    background: #111a2e !important;
    border: 1px solid #1e293b !important;
    color: #a8b2d1 !important;
    font-family: 'Fira Code', monospace !important;
    font-size: 0.75rem !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    margin-right: 12px !important;
}
.modern-file-input::-webkit-file-upload-button:hover {
    background: #17223b !important;
    color: #64ffda !important;
    border-color: #64ffda !important;
}
.modern-file-input {
    font-family: 'Fira Code', monospace !important;
    font-size: 0.8rem !important;
    color: #64748b !important;
}

/* Ajustare specială pentru bifa de ștergere (Delete) și checkbox-uri */
.form-container form p:has(input[type="checkbox"]) {
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 12px !important;
}
.form-container form input[type="checkbox"] {
    accent-color: #64ffda;
    transform: scale(1.1);
    cursor: pointer;
}

/* Forțăm butonul tău retro de salvare să aibă margini aerisite */
.form-container .btn-retro {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 28px;
    cursor: pointer;
}

/* ==============================================================================
   15. CLEAN COMPACT FOOTER
   ============================================================================== */
.modern-footer {
    width: 100%;
    border-top: 1px dashed #1f2937; 
    padding: 30px 0;
    margin-top: 80px; 
}

.footer-container {
    width: 100%;
    display: flex;
    justify-content: flex-start; 
}

.footer-copyright {
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #4b5563; 
}

.footer-number {
    color: #64ffda; 
    margin-right: 6px;
}

/* ==============================================================================
   16. RESPONSIVENESS CORECT (PENTRU TELEFOANE ȘI TABLETE)
   ============================================================================== */
@media (max-width: 1400px) {
    /* Ascundem zona Wildcard din dreapta pe ecrane medii pentru a proteja conținutul */
    .layout-wrapper {
        grid-template-columns: 85px 1fr !important;
    }
   
}

@media (max-width: 1024px) {
    .featured-two-columns-centered {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 95% !important;
    }
}

@media (max-width: 1200px) {
    /* Ascundem zona Wildcard din dreapta pe ecrane medii pentru a proteja conținutul */
    .layout-wrapper {
        grid-template-columns: 85px 1fr !important;
    }
   
}

@media (max-width: 768px) {
    /* Menținem bara stângă activă pe telefon la 85px fix */
    .layout-wrapper {
        grid-template-columns: 85px 1fr !important;
        /* gap: 12px !important; */
    }

    

    .portfolio-hero {
        margin-left: 0; /* Sau 10px / 20px dacă vrei să nu stea lipit de tot */
        padding: 100px 0 30px 0; /* Opțional: scurtezi și padding-ul de sus pe mobil */
    }

    /* SCURTĂM LINIILE PE MOBIL din pseudo-elemente ca să nu iasă din ecran */
    .sidebar-bottom::before {
        content: "" !important;
        height: 120px !important; /* Devine mai scurtă, dar stabilă */
    }
    .sidebar-bottom::after {
        content: "" !important;
        height: 50px !important;
    }
    .sidebar-socials {
        gap: 20px !important;
        padding: 16px 12px !important;
    }

    /* FIX FEATURED ROW PE MOBIL: Trecem pe flex vertical ca să nu se mai încalece */
    .featured-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: auto !important;
        gap: 0 !important;
    }

    .featured-image-side {
        display: block !important;
        position: relative !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        height: 220px !important;
        border-radius: 6px 6px 0 0 !important;
        
        /* ANULĂM COBORÂREA PE MOBIL: Altfel poza strivește textul de dedesubt! */
        transform: translateY(0) !important; 
        z-index: 1 !important;
    }

    .featured-cover-img {
        opacity: 0.85 !important;
    }

    .featured-card-side {
        display: block !important;
        width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
        margin-left: 0 !important;
        border-radius: 0 0 6px 6px !important;
        padding: 24px !important;
        min-height: auto !important;
    }

    .featured-card-content {
        max-width: 100% !important;
    }

    /* Grila de proiecte demo se pune pe o singură coloană fluidă */
    .projects-grid {
        grid-template-columns: 1fr !important;
    }

    /* Titlul de secțiune mănâncă spațiul din stânga pe mobil */
    h4.page-title#featured-section {
        margin-left: 0 !important;
        padding-left: 0 !important;
        font-size: 1.15rem !important;
    }
    
    /* Caseta de admin se mulează pe verticală fluidă */
    .custom-admin-thead, 
    .custom-admin-tr {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Activăm butonul cu 3 linii pe telefon */
    .menu-toggle {
        display: flex;
    }

    /* Strângem numele pe mobil dacă ecranul e extrem de mic */
    .navbar-profile-name {
        font-size: 0.75rem;
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Pune "..." dacă numele riscă să atingă burgerul */
    }

    /* TRANSFORMAREA LISTEI INTR-UN PANOU LATERAL GLISANT (BURGER MENU) */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Ascuns complet în dreapta ecranului */
        width: 260px; /* Lățimea ferestrei de meniu */
        height: 100vh;
        background-color: #0b0f19; /* Fundal ultra-mat închis */
        border-left: 1px solid #1f2937;
        flex-direction: column !important; /* Forțăm așezarea elementelor de sus în jos */
        justify-content: center;
        align-items: flex-start;
        gap: 36px;
        padding-left: 40px;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 115; /* Sub butonul de toggle, dar peste conținutul paginii */
    }

    /* Clasa aplicată din JavaScript: Panoul zboară pe ecran */
    .nav-links.active {
        right: 0;
    }

    /* EFECTUL GRAFIC: Cele 3 linii devin un "X" curat când meniul e deschis */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hero-bio-container {
        margin-left: 0 !important;
        max-width: 100%; /* Îi dăm voie poveștii să ocupe tot ecranul pe telefon */
    }

    .bio-section-title {
        font-size: 0.78rem;
        margin-bottom: 8px;
    }
    html {
        font-size: 85% !important; 
    }

    /* Strângem agresiv titlurile mari ca să încapă curat pe ecranul telefonului */
    .hero-indented-content .page-title {
        font-size: 1.8rem !important; /* Numele tău mare nu se mai rupe urât pe 3 rânduri */
        letter-spacing: -0.01em !important;
        line-height: 1.2 !important;
    }

    .featured-title {
        font-size: 1.25rem !important; /* Titlurile de proiecte Featured devin mai compacte */
    }

    .card-title {
        font-size: 1.05rem !important; /* Titlurile din grila de Demo devin mai fine */
    }

    h4.page-title {
        font-size: 1.1rem !important; /* Titlurile de secțiuni "Some of my work >>" */
    }

    /* Îngustăm padding-ul din carduri ca textul micșorat să aibă loc să respire */
    .featured-card-side {
        padding: 20px !important; 
    }
    
    .card-content {
        padding: 20px !important; 
    }

    .hero-indented-content {
        margin-left: 20px !important; /* Reducem și treapta de la Hero pe telefon ca să câștigăm lățime */
    }

    .project-header {
        display: flex;
        flex-direction: column; /* Pune elementele unul sub altul pe mobil */
        align-items: flex-start; /* Aliniază-le la stânga */
        gap: 12px; /* Lasă spațiu între titlu, buton și dată */
    }

    .project-header .hero-overline {
        font-size: 1.5rem; /* Ajustează dimensiunea titlului pe mobil să nu ocupe tot ecranul */
        margin-bottom: 0;
        line-height: 1.2;
    }

    /* Stilizarea butonului de editare pentru mobil */
    .btn-edit {
        display: inline-block;
        position: static !important; /* Anulează orice poziționare absolută anterioară */
        width: auto; /* Îi permite să se micșoreze după text */
        max-width: 100%; /* Împiedică ieșirea din ecran */
        padding: 6px 12px; /* Dimensiune compactă pentru atingere pe ecran */
        font-size: 0.8rem; /* Text ușor mai mic pe telefon */
        text-align: center;
        box-sizing: border-box;
    }

    .case-study-row,
    .case-study-sections .case-study-row:nth-of-type(even) {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-bottom: 40px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 2. Resetează lățimile blocurilor să nu poată depăși lățimea ecranului */
    .section-text-block, 
    .section-image-block {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        display: block !important;
        box-sizing: border-box;
    }

    /* 3. FIX-UL CRITIC PENTRU COD: Împiedică lărgirea containerului albastru */
    .code-display-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important; /* Spațiu mai mic pe ecran de telefon */
        box-sizing: border-box !important;
        overflow-x: auto !important; /* Activează scroll-ul DOAR în interiorul casetei albastre */
        display: block !important;
    }

    /* 4. Forțează codul brut să accepte scroll-ul orizontal fără să lărgească div-ul părinte */
    .code-display-box pre {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: pre !important; /* Păstrează indentarea Python intactă */
        word-wrap: normal !important;
    }

    .code-display-box code {
        display: block !important;
        width: max-content !important; /* Permite codului să se întindă doar în interiorul scroll-ului său */
        font-size: 0.95rem !important; /* Text ușor mai compact pe telefon pentru lizibilitate */
    }

    

    .case-study-row,
    .case-study-sections .case-study-row:nth-of-type(even) {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 48px;
    }

        /* MODIFICARE: Actualizăm containerul pe mobil */
    .hero-indented-content {
        margin-left: 15px !important; /* Îngustăm treapta și mai mult pe mobil ca să câștigi spațiu */
        flex-direction: row !important; /* Păstrează textul și pătratul pe același rând */
        gap: 16px !important; /* Spațiu optim pe telefon între text și chenar */
        align-items: flex-start !important;
    }

    /* Adaugă asta imediat sub el: Controlul blocurilor pe mobil */
    .hero-text-block {
        flex: 1 !important; /* Forțează textul să "înghită" și să ocupe tot spațiul rămas liber */
    }

    /* CHENARUL DEVINE FLUID (din ce în ce mai mic la restrângere) */
    .hero-square-box {
        width: 22vw !important;  /* Ocupă exact 22% din lățimea dinamică a ecranului */
        height: 22vw !important; /* Își păstrează proporția perfectă de pătrat */
        min-width: 65px !important;  /* Limita minimă sub care nu mai scade, ca să nu devină invizibil */
        min-height: 65px !important;
        flex-shrink: 0 !important;   /* Îl oprește din a se turti/deforma */
        
    }

    /* 1. Reducem distanța dintre poză și text ca să lăsăm scrisul să respire */
    .portfolio-hero {
        margin-left: 20px !important; /* Trage tot layout-ul mai aproape de marginea stângă a ecranului */
        gap: 20px !important;        /* Reducem spațiul gol dintre coloana pozei și text de la 60px la 20px */
        align-items: flex-start !important; /* Aliniază textul sus cu poza pe mobil */
    }

    /* 2. Permitem blocului de text să folosească toată lățimea disponibilă */
    .hero-text-block {
        flex: 1 !important;
        width: 100% !important;
    }

    /* 3. Micșorăm dinamic numele și tagline-ul ca să nu mai ocupe jumatate de ecran vertical */
    .hero-text-block .page-title {
        font-size: 1.6rem !important; /* Strânge numele compact pe maxim două rânduri */
        line-height: 1.2 !important;
    }

    .hero-tagline {
        font-size: 0.7rem !important;
        white-space: normal !important; /* Permite dicționarului Python să treacă pe rândul următor dacă e nevoie */
    }

    /* 4. Facem pătratul asimetric fluid pe telefon, să nu mai împingă textul în decor */
    .hero-square-box {
        width: 110px !important;  /* Dimensiune mai mică și compactă pentru telefoane */
        height: 110px !important;
        margin-top: 10px !important; /* Resetează coborârea masivă de pe desktop */
    }

    /* 5. Ajustăm și salutul asimetric "Hi," să nu iasă din ecran pe telefoane */
    .hero-overline .giant-hi {
        font-size: 3rem !important;  /* Îl micșorăm proporțional cu restul textului */
        margin-left: 0 !important;   /* Anulăm scoaterea forțată în stânga ca să nu fie tăiat de marginea ecranului */
    }
    .hero-square-box {
        width: 20vw !important;    /* Ocupă exact 20% din lățimea curentă a ecranului de telefon */
        height: 20vw !important;   /* Menține raportul perfect de pătrat (1:1) */
        min-width: 80px !important;  /* Limita sub care NU mai scade, ca să nu devină liliputan */
        min-height: 80px !important;
        margin-top: 10px !important; 
        flex-shrink: 0 !important;  /* Împiedică browserul să o deformeze sau să o turtească */
    }

    /* Potrivim și dimensiunea textului din stânga lui "Hi," să nu-l calce pe cap */
    .hero-overline .giant-hi {
        font-size: 2.8rem !important;
        margin-left: 0 !important;
    }

    .footer-terminal-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    @media (max-width: 768px) {
    .featured-two-columns-centered {
        grid-template-columns: 1fr !important; /* Pe telefon trec una sub alta */
        max-width: 100% !important;
    }

    }

    /* Forțează butoanele de ștergere să treacă pe verticală, unul sub altul */
    .delete-actions-responsive-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        margin-top: 35px;
    }

    /* Face ca atât butonul roșu cât și cel de abort să aibă lățime completă pe telefon */
    .delete-actions-responsive-container .btn-retro {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

}



@media (max-width: 480px) {
    .layout-wrapper {
        grid-template-columns: 65px 1fr !important; 
    }
    .vertical-text {
        font-size: 0.68rem !important; 
    }
    .sidebar-bottom::before {
        content: "" !important;
        height: 80px !important; 
    }
    .featured-card-side {
        padding: 16px !important;
    }
    html {
        font-size: 78% !important; /* Mai tăiem o treaptă din font dacă ecranul e minuscul */
    }
    
    .hero-indented-content .page-title {
        font-size: 1.6rem !important;
    }
}

.delete-actions-responsive-container {
    display: flex;
    gap: 16px;
    border-top: 1px dashed #17223b;
    padding-top: 24px;
    margin-top: 35px;
    align-items: center;
}


/* Grila principală compactă limitată exact la cei 900px ai site-ului */
.profile-skills-compact-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* Forțează fix 5 coloane egale */
    gap: 14px !important; /* Spațiu mai strâns și precis între carduri mici */
    max-width: 900px !important;
    width: 100% !important;
    margin: 0 auto 60px auto !important; /* Centrare perfectă pe axă */
    box-sizing: border-box;
}

/* Modificări subtile pentru cardul mai mic de skill */
.project-card.compact-skill-card {
    min-height: auto !important; /* Elimină înălțimea mare de proiect */
    background: #0d111d !important; /* O nuanță discret mai luminoasă decât fundalul profund */
    border: 1px solid #1e293b !important;
}

/* Titlul skill-ului: Schimbare subtilă de culoare în paleta ta tech */
.compact-skill-title {
    color: #f5f3f7 !important; /* Un violet/indigo neon discret (stil IDE) în loc de cyan-ul simplu */
    font-family: 'Fira Code', monospace !important;
}

/* Efect premium la atingere pe noul card mic */
.project-card.compact-skill-card:hover {
    background-color: #141b2d !important;
    border-color: #efedf0 !important; /* Bordura se aprinde în culoarea lui la hover */
}

.project-card.compact-skill-card:hover .compact-skill-title {
    color: #ffffff !important; /* Textul devine alb curat pentru contrast maxim la hover */
}

/* RESPONSIVE PENTRU MOBIL: Pe ecrane mici, formatul de 5 se rupe curat pe 2 coloane */
@media (max-width: 768px) {
    .profile-skills-compact-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 pe linie ca să nu devină ilizibile pe telefon */
        gap: 10px !important;
    }
}



/* ==============================================================================
   INTERFAȚĂ CASUAL-OFFICE PENTRU ECRANUL DE PROFILE (RESET STIL HOME)
   ============================================================================== */

/* Containerul principal de text pentru profil */
.profile-hero-text-block {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Spațiere egală și ordonată între rânduri */
}

/* Salutul de sus: Transformat dintr-un text simplu într-un comentariu curat de cod */
.profile-hero-salutation {
    font-family: 'Fira Code', monospace;
    color: #4b5563; /* Gri cenușiu stins industrial, foarte office */
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* Numele tău: Mare, curat, alb imaculat, fără margini forțate */
.profile-hero-name {
    font-size: 2.8rem !important;
    font-weight: 700;
    color: #ffffff !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 !important;
}

/* Rolul (Scrisul portocaliu de dinainte): Transformat în argintiu-albastru discret */
.profile-hero-role {
    font-family: 'Fira Code', monospace;
    color: #94a3b8; /* Argintiu mat (slate), extrem de odihnitor pentru ochi */
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
}

/* Scurta descriere (Textul turcoaz de dinainte): Transformat în text alb casual */
.profile-hero-summary {
    font-family: 'Fira Code', monospace;
    color: #cbd5e1; /* Alb-gri casual curat, lizibilitate maximă */
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 650px;
    margin: 8px 0 0 0 !important;
    position: relative;
}

/* Asigurăm eliminarea completă a oricărei linii de dedesubt (Reset after) */
.profile-hero-summary::after {
    content: none !important;
    display: none !important;
}

/* CORECTIE MOBIL PENTRU NOUL HERO CASUAL */
@media (max-width: 768px) {
    .profile-hero-name {
        font-size: 1.8rem !important;
    }
    .profile-hero-role, 
    .profile-hero-summary {
        font-size: 0.8rem !important;
    }
}

/* Starea de repaus pentru cardurile compacte */
.project-card.compact-skill-card {
    background: #1e293b !important; /* Un gri-slate metalic, curat și solid */
    border: 1px solid #334155 !important; /* Margine din oțel stins, oferă volum 3D */
    transform-style: preserve-3d !important;
    backface-visibility: hidden;
    transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

/* Hover-ul de CSS se ocupă acum doar de lumini și culori, lăsând fizica rotației în seama JS-ului */
.project-card.compact-skill-card:hover {
    background-color: #273549 !important;
    border-color: #c084fc !important;
}

.project-card.compact-skill-card:hover .compact-skill-title {
    color: #ffffff !important;
}


/* ==============================================================================
   PIPELINE DE CULORI SPECIAL PENTRU FRAMEWORKS (PORTOCALIU RETRO)
   ============================================================================== */

/* Culoarea implicită a textului din cardurile de Frameworks */
.framework-skill-title {
    color: #ffffff !important; /* Portocaliu fin */
    font-family: 'Fira Code', monospace !important;
}

/* Când punem mouse-ul pe un card de tip Framework */
.project-card.compact-skill-card.framework-glow-card:hover {
    border-color: #fab387 !important; /* Bordura devine portocalie la hover */
}

.project-card.compact-skill-card.framework-glow-card:hover .framework-skill-title {
    color: #ffffff !important; /* Textul devine alb pur pentru lizibilitate */
}



/* Forțăm căsuța de text din footer să fie spațioasă și generoasă */
.footer-cta-zone .modern-textarea {
    min-height: 180px !important; /* Îi dă o prezență masivă pe verticală */
    resize: vertical; /* Îi permite utilizatorului să o lungească și mai mult dacă are nevoie */
}

@media (max-width: 768px) {
    /* Forțează coloana de text și formularul de contact să treacă pe verticală fluidă pe mobil */
    .contact-page-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }
}


/* 1. Definim animația mecanică de respirație/pulsare pentru text */
@keyframes transmission-pulse {
    0% {
        opacity: 0.5;
        text-shadow: none;
    }
    50% {
        opacity: 1;
        /* Adăugăm un glow discret asortat cu portocaliul tău retro de IDE */
        text-shadow: 0 0 8px rgba(250, 179, 135, 0.6);
        color: #fab387; /* Forțăm aprinderea pe vârful pulsației */
    }
    100% {
        opacity: 0.5;
        text-shadow: none;
    }
}

/* 2. Legăm animația direct de eticheta din coloana a treia din footer */
.footer-cta-zone .bio-section-title {
    animation: transmission-pulse 3s ease-in-out infinite; /* 3 secunde pentru un ciclu complet, extrem de relaxant */
    will-change: opacity, text-shadow; /* Optimizează randarea în browser */
}


/* CONTACT PAGE */
.contact-page-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.3fr !important;
    gap: 50px !important;
}

/* FIX RESTRÂNGERE PENTRU MOBIL (Telefon) */
@media (max-width: 768px) {
    /* 1. Trecem cele două coloane principale una sub alta */
    .contact-page-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* 2. Forțăm inputurile de Nume și Email (care stăteau paralele) să treacă și ele unul sub altul */
    .contact-form-side form div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* 3. Containerul de acțiuni din subsol devine coloană verticală */
    .contact-form-side .form-actions-wrapper {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* 4. Butoanele ocupă toată lățimea ecranului ca să nu mai fie tăiate */
    .contact-form-side .form-actions-wrapper .btn-retro {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}



/* ==============================================================================
   DYNAMIC THEME ENGINE (VARIABLES)
   ============================================================================== */
:root {
    /* STAREA IMPLICITĂ: DARK MODE (Culorile tale actuale) */
    --bg-deep: #030712;         /* Fundalul general foarte închis */
    --bg-card: #0b0f19;         /* Casetele mari și formularele */
    --bg-skill: #1e293b;        /* Noul tău gri metalizat de la skill-uri */
    --text-main: #ffffff;       /* Textul alb pur */
    --text-muted: #94a3b8;      /* Textul argintiu stins / comentarii */
    --border-color: #17223b;    /* Liniile dashed și bordurile discrete */
}

body.light-mode {
    /* STAREA ALTERNATIVĂ: LIGHT MODE (Stil GitHub Light / Xcode Light) */
    --bg-deep: #f8fafc;         /* Un alb-gri curat, odihnitor (slate-50) */
    --bg-card: #ffffff;         /* Casetele mari devin alb pur imaculat */
    --bg-skill: #e2e8f0;        /* Cardurile mici devin gri metalizat deschis */
    --text-main: #0f172a;       /* Textul principal devine bleumarin foarte închis */
    --text-muted: #64748b;      /* Comentariile devin un gri-slate mediu de IDE */
    --border-color: #cbd5e1;    /* Liniile punctate devin gri deschis vizibil */
}

/* ==============================================================================
   APLICAREA VARIABILELOR PE STRUCTURA EXISTENTĂ
   ============================================================================== */
body {
    background-color: var(--bg-deep) !important;
    color: var(--text-main) !important;
}

/* Modificăm caseta ta mare de tip consolă (folosită la login, contact, profile) */
.hero-outline-box {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Modificăm fundalul blocurilor individuale (mesaje inbox, alerte) */
.individual-section-block {
    background-color: var(--bg-card) !important;
}

/* Modificăm cardurile de proiecte și skill-uri */
.project-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.project-card.compact-skill-card {
    background-color: var(--bg-skill) !important;
    border-color: var(--border-color) !important;
}

/* Corectăm titlurile mari să asculte de temă */
.page-title, .profile-hero-name, .featured-title, .card-title {
    color: var(--text-main) !important;
}

/* Căsuțele de text din formulare (modern-input) */
.modern-input, .modern-textarea {
    background-color: var(--bg-deep) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}


/* TAGS FROM THE CREATE PROJECT form */
/* ==============================================================================
   CYBERPUNK GRID ENGINE PENTRU SELECTARE TAGURI (DIV-URI CU BIFĂ ASCUNSĂ)
   ============================================================================== */

/* Containerul principal generat de CheckboxSelectMultiple în Django */
.modern-checkbox-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important; /* Spațiere strânsă și curată între elemente */
    padding: 0 !important;
    margin: 12px 0 25px 0 !important;
    list-style: none !important;
    width: 100% !important;
}

/* Stilul fiecărui element <li> din listă */
.modern-checkbox-list li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* ASCUNDEM BIZA PĂTRATĂ NATIVĂ A BROWSERULUI (Efect invizibil de coliziune) */
.modern-checkbox-list input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none;
}

/* TRANSFORMĂM ETICHETA DIN JURUL BIFEI ÎNTR-UN DIV PREMIUM RETRO */
.modern-checkbox-list label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    background: #1e293b !important; /* Gri-oțel metalizat (stilul tău nou casual) */
    border: 1px solid #334155 !important;
    color: #94a3b8 !important;
    font-family: 'Fira Code', monospace !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
}

/* EFECTUL LA HOVER: Marginea se aprinde discret înainte să dai click */
.modern-checkbox-list li:has(input[type="checkbox"]:checked) label {
    background: rgba(100, 255, 218, 0.1) !important; /* Fundal turcoaz mat */
    border-color: #64ffda !important; /* Bordura se aprinde neon */
    color: #64ffda !important; /* Textul devine turcoaz activ */
    box-shadow: 0 0 12px rgba(100, 255, 218, 0.2) !important; /* Glow digital discret */
    font-weight: 600 !important;
}

/* OPȚIONAL: Pentru a funcționa și ca un selector retro de siguranță pe browsere mai vechi */
.modern-checkbox-list label:has(input[type="checkbox"]:checked) {
    background: rgba(100, 255, 218, 0.1) !important;
    border-color: #64ffda !important;
    color: #64ffda !important;
}


/* MODIFICARE CARDURI  */
/* ==============================================================================
   UNIFICARE ȘI CENTRARE DINAMICĂ TAGURI (FEATURED + DEMOS)
   ============================================================================== */

/* CONTAINERUL DE TAGURI: Valabil pentru ambele secțiuni din pagină */
.featured-tags-list, 
.card-tags {
    display: flex !important;
    justify-content: center !important; /* Centrează dinamic elementele pe mijlocul axei */
    align-items: center !important;
    gap: 8px !important; /* Spațiu egal și fin între badges */
    width: 100% !important;
    margin-top: auto !important; /* Împinge tot rândul la baza cardului, deasupra marginii */
    padding-top: 15px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important; /* Împiedică tagurile să sară haotic pe rândul următor */
    overflow: hidden; /* Ascunde în siguranță textul dacă denumirea e exagerat de lungă */
}


/* ==============================================================================
   2. ALINIERE ȘI COMPACTARE AUTOMATĂ PENTRU TAGURI (FIX MATPLOTLIB)
   ============================================================================== */

/* Containerul de taguri unificat: Trântit forțat la baza celor 380px */
.featured-tags-list, 
.card-tags {
    display: flex !important;
    justify-content: center !important; /* Centrare dinamică perfectă pe mijloc */
    align-items: center !important;
    gap: 6px !important; /* Spațiu optimizat între elemente */
    width: 100% !important;
    margin-top: auto !important; /* BLOCARE CRITICĂ: Stau lipite la bază indiferent de descriere */
    padding-top: 15px !important;
    border-top: 1px dashed rgba(23, 34, 59, 0.4) !important; /* Linie fină de demarcație stil IDE */
    box-sizing: border-box !important;
    flex-wrap: nowrap !important; /* Interzice cu desăvârșire ruperea rândului */
}

/* Stilul badge-ului de tag: Redus inteligent pentru a înghiți tehnologii lungi */
.featured-tag, 
.tag-badge {
    display: inline-block !important;
    font-family: 'Fira Code', monospace !important;
    font-size: 0.68rem !important; /* Mărime tactică (stil micro-logs) pentru a lăsa 3 taguri mari să încapă paralel */
    font-weight: 500 !important;
    padding: 4px 8px !important; /* Padding strâns, elimină riscul de overflow */
    background: rgba(23, 34, 59, 0.4) !important;
    border: 1px solid rgba(100, 255, 218, 0.15) !important;
    color: #64ffda !important;
    border-radius: 4px !important;
    text-transform: none !important; /* Păstrează JS, Django, Tkinter intacte */
    letter-spacing: -0.3px !important; /* Strânge fin fontul monospace pentru a economisi spațiu pe orizontală */
    flex-shrink: 1 !important; /* Îi permite să se micșoreze foarte puțin dacă ecranul este extrem de îngust */
    white-space: nowrap !important;
}


/* INCLINAARE DIVURI CU JS CU TOT CU PROIECTE NU DOAR SILLs */
/* Pregătim cardurile mari pentru interacțiunea 3D fluidă din JS */
.featured-clean-card,
.project-card {
    transform-style: preserve-3d !important;
    backface-visibility: hidden;
    /* Păstrăm tranzitorul doar pentru culori, cel de mișcare e controlat milimetric din JS */
    transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

/* Efect de hover pe bordură asortat cu glow-ul turcoaz din JavaScript */
.featured-clean-card:hover,
.project-card:hover {
    border-color: rgba(100, 255, 218, 0.4) !important;
    background-color: #0b111e !important; /* O deschidere discretă de nuanță la atingere */
}

/* MODIFICARE CARDURI  */
/* ==============================================================================
   UNIFICARE ȘI CENTRARE DINAMICĂ TAGURI (FEATURED + DEMOS)
   ============================================================================== */

/* CONTAINERUL DE TAGURI: Valabil pentru ambele secțiuni din pagină */
.featured-tags-list, 
.card-tags {
    display: flex !important;
    justify-content: center !important; /* Centrează dinamic elementele pe mijlocul axei */
    align-items: center !important;
    gap: 8px !important; /* Spațiu egal și fin între badges */
    width: 100% !important;
    margin-top: auto !important; /* Împinge tot rândul la baza cardului, deasupra marginii */
    padding-top: 15px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important; /* Împiedică tagurile să sară haotic pe rândul următor */
    overflow: hidden; /* Ascunde în siguranță textul dacă denumirea e exagerat de lungă */
}

/* ==============================================================================
   1. STRUCTURA GRILĂ: ÎNĂLȚIME IDENTICĂ PENTRU TOATE CARDURILE
   ============================================================================== */

/* Forțăm ambele tipuri de carduri mari și mici să aibă o înălțime fixă, egală */
.featured-clean-card,
.project-card {
    display: flex !important;
    flex-direction: column !important;
    height: 380px !important; /* Înălțime fixă stabilă: garantează simetria perfectă pe rând */
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Containerul intern de conținut: preia controlul și forțează cascadele */
.featured-card-content, 
.project-card .card-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Ocupă tot spațiul intern al celor 380px */
    padding: 24px !important;
    box-sizing: border-box !important;
}

/* Descrierile ocupă spațiul flexibil din mijloc, împingând tagurile în jos */
.featured-description,
.card-description {
    flex-grow: 1 !important; /* Absorbe spațiul gol dacă textul e scurt (fix pentru 'uuid') */
    /* margin-bottom: 20px !important; */
    overflow: hidden;
}

/* ==============================================================================
   2. ALINIERE ȘI COMPACTARE AUTOMATĂ PENTRU TAGURI (FIX MATPLOTLIB)
   ============================================================================== */

/* Containerul de taguri unificat: Trântit forțat la baza celor 380px */
.featured-tags-list, 
.card-tags {
    display: flex !important;
    justify-content: center !important; /* Centrare dinamică perfectă pe mijloc */
    align-items: center !important;
    gap: 6px !important; /* Spațiu optimizat între elemente */
    margin-top: auto !important; /* BLOCARE CRITICĂ: Stau lipite la bază indiferent de descriere */
    padding-top: 15px !important;
    border-top: 1px dashed rgba(23, 34, 59, 0.4) !important; /* Linie fină de demarcație stil IDE */
    box-sizing: border-box !important;
    flex-wrap: nowrap !important; /* Interzice cu desăvârșire ruperea rândului */
}

/* Stilul badge-ului de tag: Redus inteligent pentru a înghiți tehnologii lungi */
.featured-tag, 
.tag-badge {
    display: inline-block !important;
    font-family: 'Fira Code', monospace !important;
    font-size: 0.68rem !important; /* Mărime tactică (stil micro-logs) pentru a lăsa 3 taguri mari să încapă paralel */
    font-weight: 500 !important;
    padding: 4px 8px !important; /* Padding strâns, elimină riscul de overflow */
    background: rgba(23, 34, 59, 0.4) !important;
    border: 1px solid rgba(100, 255, 218, 0.15) !important;
    color: #64ffda !important;
    border-radius: 4px !important;
    text-transform: none !important; /* Păstrează JS, Django, Tkinter intacte */
    letter-spacing: -0.3px !important; /* Strânge fin fontul monospace pentru a economisi spațiu pe orizontală */
    flex-shrink: 1 !important; /* Îi permite să se micșoreze foarte puțin dacă ecranul este extrem de îngust */
    white-space: nowrap !important;
}

/* INCLINAARE DIVURI CU JS CU TOT CU PROIECTE NU DOAR SILLs */
/* Pregătim cardurile mari pentru interacțiunea 3D fluidă din JS */
.featured-clean-card,
.project-card {
    transform-style: preserve-3d !important;
    backface-visibility: hidden;
    /* Păstrăm tranzitorul doar pentru culori, cel de mișcare e controlat milimetric din JS */
    transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

/* Efect de hover pe bordură asortat cu glow-ul turcoaz din JavaScript */
.featured-clean-card:hover,
.project-card:hover {
    border-color: rgba(100, 255, 218, 0.4) !important;
    background-color: #0b111e !important; /* O deschidere discretă de nuanță la atingere */
}


/* ==============================================================================
   ZONA ACTUALIZATĂ: REMEDIU ATOMIC PENTRU DEBLOCARE MOTOR 3D SKILLS & FRAMEWORKS
   ============================================================================== */

/* 1. Reset pe Gridul Părinte: Împiedică browserul să mai lungească cardurile în jos */
.profile-skills-compact-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* 5 coloane fise, egale */
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    
    /* REGLAJUL DE AUR: Aliniază elementele la începutul rândului și oprește lărgirea oribilă */
    align-items: start !important; 
}

/* 2. Configurația fixă a cardului mic (Imună la deformări, perfectă pentru JS) */
.project-card.compact-skill-card {
    height: 115px !important; /* Blocăm înălțimea la pixel pe toate axele */
    min-height: 115px !important;
    max-height: 115px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* 3. Gestionarea conținutului intern al cardului de skill */
.project-card.compact-skill-card .card-content {
    height: 100% !important;
    padding: 12px !important; /* Compactăm spațiul intern */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Ține iconița sus și textul jos */
    box-sizing: border-box !important;
}

/* Aliniere curată pe centrul badge-ului */
.compact-skill-title,
.framework-skill-title {
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}


/* Stilizarea link-urilor de tip log de proiect */
.minimal-project-log-link {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover pe link-urile din Core Stack (Glow Turcoaz) */
.query-results-panel[style*="rgba(100, 255, 218"] .minimal-project-log-link:hover,
section:first-of-type .minimal-project-log-link:hover {
    background: rgba(100, 255, 218, 0.1) !important;
    border-color: #64ffda !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.2);
}

/* Hover pe link-urile din Tools (Glow Portocaliu) */
section:last-of-type .minimal-project-log-link:hover {
    background: rgba(250, 179, 135, 0.1) !important;
    border-color: #fab387 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(250, 179, 135, 0.2);
}

@media (max-width: 768px) {
    /* 1. Forțăm gridul să treacă de la 5 coloane la doar 2 pe linie pe ecran mic */
    .profile-skills-compact-grid {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important;
        align-items: start !important;
    }

    /* 2. Resetăm înălțimile forțate ca să respire textul dacă denumirea e lungă */
    .project-card.compact-skill-card {
        height: auto !important;
        min-height: 90px !important;
        max-height: none !important;
    }

    /* 3. Ajustăm și link-urile de loguri din query să nu o ia razna pe ecrane strâmte */
    .minimal-links-container {
        flex-direction: column !important; /* Pe telefon le stivuim linie cu linie */
        gap: 8px !important;
    }

    .dynamic-query-project.minimal-project-log-link {
        width: 100% !important; /* Ocupă toată lățimea utilă a ecranului */
        box-sizing: border-box !important;
        text-align: left !important;
    }
}

@media (max-width: 768px) {
    /* 1. Schimbăm așezarea Hero din rând în coloană pe telefon (Poza sus, textul dedesubt) */
    .profile-hero-flex-layout {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 24px !important;
    }

    /* Aliniem toate textele pe centru doar pe mobil pentru armonie */
    .profile-hero-text-block {
        align-items: center !important;
        text-align: center !important;
    }

    /* 2. Butoanele [edit] și [add_skill] trec curat unul sub altul */
    .admin-profile-inline-controls {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 6px !important;
    }
}

@media (max-width: 768px) {
    /* 1. RESET GRID PENTRU CARDURILE PRINCIPALE (WORKS) */
    /* Forțăm containerul părinte să treacă pe o singură coloană pe telefon */
    .featured-two-columns-centered {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* 2. FLEXIBILITATE PENTRU WRAPPER ȘI CARD */
    /* Eliminăm orice lățime fixă moștenită de pe desktop */
    .featured-grid-item-wrapper,
    .featured-clean-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. CORECTARE ÎNĂLȚIME PE MOBIL */
    /* Dacă descrierea este lungă, lăsăm cardul să respire (auto), în loc să îl blocăm la 380px */
    .featured-clean-card,
    .project-card {
        height: auto !important;
        min-height: 380px !important; /* Rămâne o bază solidă, dar poate crește dacă e text mult */
        max-height: none !important;
    }
}

@media (max-width: 768px) {
    /* 1. TRECEREA ÎN COLOANĂ A ÎNTREGULUI HERO */
    .portfolio-hero {
        display: flex !important;
        flex-direction: column !important; /* Textul coboară automat sub poză */
        align-items: center !important;
        text-align: center !important;
        gap: 30px !important; /* Spațiu optimizat între caseta pozei și text */
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 2. RIDICAREA POZEI CU 20 PIXELI */
    .hero-square-box {
        margin-top: -20px !important; /* Trage caseta în sus pe mobil */
        margin-left: auto !important;  /* Centrare perfectă pe orizontală */
        margin-right: auto !important;
    }

    /* 3. CENTRAREA DISCRETĂ A BLOCULUI DE TEXT SUB POZĂ */
    .profile-hero-text-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Asigurăm că paragrafele nu rămân aliniate la stânga pe telefon */
    .profile-hero-summary, 
    .profile-hero-role, 
    .profile-hero-salutation {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


@media (max-width: 768px) {
    /* 1. REPOZIȚIONARE BUTON TEMĂ ÎN NAVBAR: Îl scoatem din flux și îl trimitem sub ceas */
    #theme-switch-btn {
        margin-left: 0 !important;
        margin-top: 6px !important;
        width: fit-content !important;
        display: block !important;
        /* Eliberează spațiul din dreapta pentru a lăsa meniul burger să respire curat */
    }

    /* Asigurăm că părintele nav-clock-block nu îl blochează aiurea */
    .nav-clock-block {
        align-items: flex-start !important;
    }

    /* 2. REPOZIȚIONARE BUTON CLOSE LOG ÎN SUBSOL */
    /* Modificăm header-ul panoului de query pe mobil să fie coloană pe verticală */
    .query-results-panel div[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* Împingem butonul roșu jos de tot și îi dăm o prezență clară de buton retro pe mobil */
    .clear-query-btn {
        margin-top: 4px !important;
        padding: 6px 12px !important;
        border: 1px dashed rgba(255, 74, 74, 0.3) !important;
        border-radius: 4px !important;
        background: rgba(255, 74, 74, 0.05) !important;
        width: 100% !important; /* Întins pe toată lățimea pentru a fi ușor de apăsat */
        text-align: center !important;
    }
}


@media (max-width: 768px) {
    /* 1. LAYOUT VERTICAL PENTRU HERO DAR LIPIT DE MARGINEA STÂNGĂ */
    .portfolio-hero {
        display: flex !important;
        flex-direction: column !important; /* Textul coboară sub poză */
        align-items: flex-start !important; /* ALINIERE EXCLUSIVĂ LA STÂNGA */
        text-align: left !important;
        gap: 24px !important;
        width: 100% !important;
        padding-left: 10px !important; /* Îi dă un mic spațiu să nu se lipească de marginea ecranului */
        box-sizing: border-box;
    }

    /* 2. RIDICAREA ȘI ALINIEREA POZEI LA STÂNGA */
    .hero-square-box {
        margin-top: -20px !important; /* Trage caseta în sus pe mobil */
        margin-left: 0 !important; /* Resetează centrarea anterioară */
        margin-right: auto !important;
    }

    /* 3. ALINIEREA TEXTULUI SUB POZĂ LA STÂNGA (STIL TERMINAL) */
    .profile-hero-text-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Aliază numele și descrierea la stânga */
        text-align: left !important;
        width: 100% !important;
    }

    /* Resetează orice tentativă de centrare pe paragrafe */
    .profile-hero-summary, 
    .profile-hero-role, 
    .profile-hero-salutation,
    .profile-hero-role-casual {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* ==============================================================================
       4. REPARARE BUTOANE ADMIN CORE STACK (STIVUIRE SUB TITLU)
       ============================================================================== */
    
    /* Containerul mare de header tehnic devine coloană pe mobil */
    .tech-section-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Trage titlul și butoanele în stânga */
        gap: 12px !important;
        width: 100% !important;
    }

    /* Zona butoanelor se transformă în stivă verticală direct sub titlu */
    .admin-profile-inline-controls,
    .tech-section-header div:has(> .btn-retro) {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Aliniază butoanele la stânga */
        gap: 8px !important;
        width: 100% !important;
        margin-top: 4px !important;
    }

    /* Forțăm butoanele retro să nu mai plutească asimetric */
    .tech-section-header .btn-retro {
        width: fit-content !important; /* Își păstrează dimensiunea strânsă pe text */
        margin: 0 !important;
        text-align: left !important;
    }
}



@media (max-width: 768px) {
    /* 1. TRAGEM HERO-UL PERFECT LA STÂNGA (ALINIAT CU STORY ȘI CORE STACK) */
    .portfolio-hero {
        display: flex !important;
        flex-direction: column !important; /* Textul sub poză */
        align-items: flex-start !important; /* Lipit de marginea stângă */
        text-align: left !important;
        gap: 24px !important;
        
        /* REGLAJUL DE AUR: Elimină padding-ul masiv care lăsa spațiul gol în stânga pozei */
        padding-left: 0 !important; 
        margin-left: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Asigurăm că și caseta text a hero-ului este aliniată impecabil cu restul paginii */
    .profile-hero-text-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Resetează marginile pozei pentru a fi aliniată la stânga la milimetru cu textul */
    .hero-square-box {
        margin-top: -20px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* 2. REPOZIȚIONARE BUTOANE ADMIN SUB CORE STACK */
    /* Tintim exact containerul din profile.html care ține titlul și butoanele */
    .tech-section-header {
        display: flex !important;
        flex-direction: column !important; /* Rupe rândul: butoanele coboară sub titlu */
        align-items: flex-start !important; /* Aliniate la stânga */
        gap: 10px !important;
        width: 100% !important;
    }

    /* Intrăm în div-ul de după h4 (cel în care randezi butoanele) și îl stivuim vertical */
    .tech-section-header h4.page-title + div {
        display: flex !important;
        flex-direction: column !important; /* Unul sub altul */
        align-items: flex-start !important; /* Lipite de stânga */
        gap: 8px !important;
        width: 100% !important;
        margin-top: 4px !important;
    }

    /* Forțăm butoanele să își păstreze dimensiunea exact pe text, fără să se lungească */
    .tech-section-header .btn-retro {
        display: inline-block !important;
        width: fit-content !important;
        margin: 0 !important;
    }
}


@media (max-width: 768px) {
    /* FIX DEFINITIV PENTRU COBORTÂREA BUTOANELOR SUB TITLU (CORE STACK & TOOLS) */
    
    /* 1. Țintim div-ul direct părinte care are stilul inline de space-between */
    section[style*="margin-bottom"] > div[style*="display: flex"],
    section > div[style*="justify-content: space-between"] {
        flex-direction: column !important; /* Sparge rândul orizontal pe verticală */
        align-items: flex-start !important; /* Aliază totul lipit în stânga sub titlu */
        gap: 12px !important; /* Spațiu fin între titlu și blocul de butoane */
        width: 100% !important;
    }

    /* 2. Țintim div-ul de admin în care se află fizic cele două butoane link */
    section div[style*="justify-content: space-between"] div,
    section div:has(> [href*="edit-profile"]) {
        display: flex !important;
        flex-direction: column !important; /* Le așază unul sub altul, linie cu linie */
        align-items: flex-start !important; /* Lipite de marginea stângă sub titlu */
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 3. Forțăm butoanele să fie compacte și să nu se lungească pe tot ecranul */
    section div[style*="justify-content: space-between"] .btn-retro {
        display: inline-block !important;
        width: fit-content !important; /* Rămân strânse perfect pe lungimea textului */
        text-align: left !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
}



/* Animație pulsare lentă punct terminal */
.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #64ffda;
    border-radius: 50%;
    animation: slowPulseTerminal 2s infinite ease-in-out;
}

@keyframes slowPulseTerminal {
    0% { transform: scale(1); opacity: 0.4; box-shadow: 0 0 0 0 rgba(100, 255, 218, 0.4); }
    50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 6px 1px rgba(100, 255, 218, 0.3); }
    100% { transform: scale(1); opacity: 0.4; box-shadow: 0 0 0 0 rgba(100, 255, 218, 0); }
}

.terminal-container:hover {
    border-color: rgba(100, 255, 218, 0.5) !important;
}

/* Responsivitate pe mobil: spargem layout-ul pe un singur rând lung */
@media (max-width: 900px) {
    .footer-terminal-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .footer-info-subgrid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}




/* Containerul părinte - nu mai are înălțime fixă, se adaptează după conținut */
.project-main-image-wrapper.container-3d {
  width: 100%;
  min-height: 500px; 
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1500px; 
  /* margin: 50px 0; */
  overflow: visible; 
}

/* Teancul central - NU mai are lățime și înălțime fixe în pixeli! */
.image-stack {
  position: relative;
  width: 100%;
  max-width: 240px; /* Lățimea implicită pentru când sunt mai multe poze (stil telefon) */
  aspect-ratio: 1440 / 3040; /* Raportul de aspect de telefon */
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 
   ==========================================================================
   CAZUL 1: CONTAINERUL CÂND ARE O SINGURĂ POZĂ
   Schimbăm dimensiunile containerului ca să se potrivească cu orice tip de poză
   ==========================================================================
*/
.image-stack:has(.stack-item:only-child) {
  max-width: 800px; /* Permite pozei de desktop să se lărească frumos */
  aspect-ratio: auto; /* Anulează formatul alungit de telefon */
  height: auto;
}

/* Stilul de bază al fiecărui ecran */
.stack-item {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px; 
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), z-index 0.3s, box-shadow 0.6s;
}

/* Comportamentul exact al pozei singure */
.stack-item:only-child {
  position: relative; /* O scoate din suprapunerea absolută */
  width: 100%;
  height: auto;
  max-height: 500px; /* Îi punem o limită de înălțime ca să nu ocupe tot ecranul */
  object-fit: contain; /* Păstrează proporțiile curate (desktop, laptop sau mobil) */
  border-radius: 12px; /* Margini mai discrete pentru poze normale */
  transform: none !important;
  transition: transform 0.3s ease;
}

.stack-item:only-child:hover {
  transform: scale(1.02) !important; /* Zoom discret de interfață */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

/* 
   ==========================================================================
   CAZUL 2: MAI MULTE POZE (:NOT(:ONLY-CHILD))
   Toate regulile de poziționare 3D rămân valabile doar pentru teancuri
   ==========================================================================
*/
/* Stare inițială strânsă (Fără intersecții 3D) */
.stack-item:not(:only-child):nth-child(1) { z-index: 1; transform: translateZ(0px)  translateX(-30px) rotateX(12deg) rotateY(-18deg) rotateZ(-4deg); }
.stack-item:not(:only-child):nth-child(2) { z-index: 2; transform: translateZ(30px) translateX(-15px) rotateX(12deg) rotateY(-14deg) rotateZ(-2deg); }
.stack-item:not(:only-child):nth-child(3) { z-index: 3; transform: translateZ(60px) translateX(0px)   rotateX(12deg) rotateY(-10deg) rotateZ(0deg); }
.stack-item:not(:only-child):nth-child(4) { z-index: 4; transform: translateZ(90px) translateX(15px)  rotateX(12deg) rotateY(-6deg)  rotateZ(2deg); }
.stack-item:not(:only-child):nth-child(5) { z-index: 5; transform: translateZ(120px) translateX(30px) rotateX(12deg) rotateY(-2deg)  rotateZ(4deg); }

/* 
   Hover pe container - Desfacere controlată în evantai larg
   Dacă ai doar 2 imagini, prima va merge la -120px, a doua la -60px, lăsând spațiu curat între ele
*/
.image-stack:hover .stack-item:not(:only-child):nth-child(1) { transform: translateZ(0px)   translateX(-140px) rotateX(6deg) rotateY(-16deg) rotateZ(-4deg); }
.image-stack:hover .stack-item:not(:only-child):nth-child(2) { transform: translateZ(30px)  translateX(-60px)  rotateX(6deg) rotateY(-12deg) rotateZ(-2deg); }
.image-stack:hover .stack-item:not(:only-child):nth-child(3) { transform: translateZ(60px)  translateX(20px)   rotateX(6deg) rotateY(-8deg)  rotateZ(0deg); }
.image-stack:hover .stack-item:not(:only-child):nth-child(4) { transform: translateZ(90px)  translateX(100px)  rotateX(6deg) rotateY(-4deg)  rotateZ(2deg); }
.image-stack:hover .stack-item:not(:only-child):nth-child(5) { transform: translateZ(120px) translateX(180px)  rotateX(6deg) rotateY(0deg)   rotateZ(4deg); }

/* Hover individual pe fiecare piesă din evantai (Rămâne neschimbat și stabil) */
.image-stack .stack-item:not(:only-child):hover { z-index: 100 !important; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7); }
.image-stack:hover .stack-item:not(:only-child):nth-child(1):hover { transform: translateZ(250px) translateX(-140px) translateY(-40px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
.image-stack:hover .stack-item:not(:only-child):nth-child(2):hover { transform: translateZ(250px) translateX(-60px)  translateY(-40px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
.image-stack:hover .stack-item:not(:only-child):nth-child(3):hover { transform: translateZ(250px) translateX(20px)   translateY(-40px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
.image-stack:hover .stack-item:not(:only-child):nth-child(4):hover { transform: translateZ(250px) translateX(100px)  translateY(-40px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
.image-stack:hover .stack-item:not(:only-child):nth-child(5):hover { transform: translateZ(250px) translateX(180px)  translateY(-40px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }




/* ==============================================================================
   120. ADMIN DASHBOARD WORKSPACE (CYBERPUNK CONSOLE)
   ============================================================================== */
.admin-workspace-container {
    max-width: 900px;
    margin: 40px auto 80px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.admin-workspace-header {
    border-bottom: 1px dashed #1f2937;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.admin-root-title {
    font-family: 'Fira Code', monospace;
    font-size: 1.5rem;
    color: #ffffff;
    margin: 0;
}

.admin-prompt-alert {
    color: #ff4a4a;
}

.admin-status-line {
    margin-top: 5px;
    color: #8892b0;
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
}

/* Grila Layout */
.admin-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.admin-panel-box {
    padding: 24px;
    background-color: #0b0f19;
    border-radius: 6px;
    box-sizing: border-box;
}

.admin-panel-box.action-panel {
    border: 1px dashed rgba(100, 255, 218, 0.2);
}

.admin-panel-box.stats-panel,
.admin-panel-box.core-panel {
    border: 1px solid #1f2937;
}

.admin-panel-title {
    font-family: 'Fira Code', monospace;
    font-size: 1rem;
    color: #ffffff;
    margin-bottom: 20px;
}

.action-panel .admin-panel-title {
    color: #64ffda;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Formularul Terminal */
.admin-terminal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-terminal-label {
    display: block;
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #8892b0;
    margin-bottom: 6px;
}

.form-terminal-input,
.form-terminal-textarea {
    width: 100%;
    background: #030712;
    border: 1px solid #1f2937;
    padding: 10px;
    color: #f3f4f6;
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
}

.form-terminal-input.input-highlight {
    color: #64ffda;
}

.form-terminal-textarea {
    resize: vertical;
}

.admin-submit-btn {
    width: 100%;
    text-align: center;
    border-color: #64ffda;
    color: #64ffda;
    padding: 12px;
    cursor: pointer;
    background: transparent;
}

/* Structura din Dreapta a Dashboard-ului */
.admin-sidebar-panels {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-panel-box.core-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.panel-text {
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #8892b0;
    line-height: 1.5;
    margin-bottom: 20px;
}

.admin-gui-btn {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Liste și Utilitare text */
.stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-list li {
    display: flex;
    justify-content: space-between;
}

.stat-label { color: #8892b0; }
.text-cyan { color: #64ffda; }
.text-blue { color: #60a5fa; }
.text-red { color: #ff4a4a; }

/* Buton Exit Workspace */
.admin-exit-zone {
    text-align: center;
}

.admin-exit-btn {
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #fab387;
    text-decoration: none;
}


/* Noua mini-grilă 2x2 din stânga dashboard-ului */
.admin-left-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Forțăm cardurile de admin să se comporte ca niște butoane active */
.admin-action-card {
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Stilizare discretă pentru butoanele neconfigurate încă (...) */
.admin-action-card.card-disabled {
    opacity: 0.5;
    cursor: default;
    border-color: rgba(31, 41, 55, 0.5) !important;
}

/* ==============================================================================
   CORECTARE RESPONSIVE / TELEFON PENTRU COMPRESIE COMPLETĂ
   ============================================================================== */
@media (max-width: 768px) {
    /* Structura mare a dashboard-ului trece de la 2 coloane mari la 1 coloană verticală */
    .admin-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }

    /* Grila de butoane 2x2 trece într-o listă simplă pe verticală, la fel ca pe home */
    .admin-left-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
    }

    /* Forțăm cardurile noi de admin să se adapteze în siguranță pe ecranele mici */
    .admin-action-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 240px !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }
}



/* DUPA MUTARE BUTOANE DIN 
/* .navbar-profile-name.admin-header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
} */

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-header-btn {
    font-size: 0.75rem !important;
    padding: 6px 14px !important;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .admin-header-top-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px;
    }
    .admin-header-actions {
        width: 100% !important;
        justify-content: space-between;
        gap: 10px;
    }
    .admin-header-btn {
        flex: 1;
        text-align: center;
    }
} 

.admin-right-sidebar-block {
    width: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    flex-shrink: 0 !important;
    align-self: stretch !important; /* Întinde coloana la nivelul cardurilor din stânga */
    box-sizing: border-box !important;
}

/* Forțăm ambele panouri din dreapta să aibă înălțimi matematice complet egale (50/50) */
.stats-panel-layout,
.core-panel-layout {
    flex: 1 1 0% !important; /* Împarte spațiul vertical fix pe jumătate */
    height: 50% !important;
    padding: 24px;
    background-color: transparent;
    /* border: 1px solid #1f2937; */
    /* border-radius: 6px; */
    box-sizing: border-box;
    /* display: flex !important; */
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Resetare pe mobil ca să nu se strivească interfața */
@media (max-width: 768px) {
    .admin-right-sidebar-block {
        width: 100% !important;
    }
    .stats-panel-layout,
    .core-panel-layout {
        height: auto !important;
    }
}


@media (max-width: 768px) {
    /* Reduce spațierea exterioară și padding-ul cutiei principale */
    .profile-contact-section {
        margin-top: 40px !important;
        padding: 0 0px;
    }
    
    .footer-terminal-box {
        padding: 0px !important;
    }

    /* Transformă grid-ul principal din 2 coloane în 1 singură coloană fluida */
    .footer-terminal-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Transformă sub-grid-ul de info (metadata și rețele) în format vertical */
    .footer-info-subgrid {
        grid-template-columns: 1fr !important;
        gap: 0px !important;
    }

    /* Ajustări specifice pentru textul din terminal să nu iasă din ecran */
    .terminal-container {
        padding: 0px !important;
    }

    .terminal-welcome {
        font-size: 0.7rem !important;
    }

    #terminalInput {
        font-size: 0.7rem !important;
        width: 100%;
    }

    /* Permite textelor lungi (ex: email sau link-uri) să se spargă frumos pe rândul următor */
    .box-typing-text, 
    .nav-item span {
        word-break: break-all;
        font-size: 0.85rem;
    }
}

@media (max-width: 500px) {
    /* 1. Micșorăm padding-ul cutiei mari ca să câștigi spațiu pe laterale */
    .footer-terminal-box {
        padding: 16px 12px !important;
    }

    /* 2. Transformăm subgridul de text în listă verticală pură (Metadata sus, Social jos) */
    .footer-info-subgrid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* 3. Prevenim ruperea textelor din metadata pe linii noi strâmte */
    .footer-system-meta > div {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }

    /* 4. Forțăm textul dinamic să nu se rupă la mijlocul cuvântului */
    .box-typing-text {
        font-size: 0.8rem !important;
        word-break: break-word !important; /* Rupe doar la final de cuvânt sau @ */
        white-space: normal !important;
    }

    /* 5. Aliniem etichetele fixe (LOC_MATRIX, etc.) pentru lizibilitate */
    .nav-number {
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
    }

    /* 6. Formularul: Numele și Emailul trec obligatoriu unul sub altul */
    .footer-cta-zone div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 7. Inputurile din Django primesc lățime completă și margini sigure */
    .footer-contact-form-wrapper input,
    .footer-contact-form-wrapper textarea {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}


@media (max-width: 500px) {
    /* 1. Spațiere globală container principal */
    .footer-terminal-box {
        padding: 16px 12px !important;
    }

    /* 2. Structura pe o singură coloană (Metadata sus, Social jos) */
    .footer-info-subgrid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* 3. Evitare rupere text Metadata */
    .footer-system-meta > div {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .box-typing-text {
        font-size: 0.8rem !important;
        word-break: break-all !important; /* Forțează email-ul lung să stea pe ecran */
        white-space: normal !important;
    }

    .nav-number {
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
    }

    /* ====================================================
       4. STRÂNGERE FORMULAR (Nume, Email, Subiect, Mesaj)
       ==================================================== */
    
    /* Distruge grid-ul inline din HTML (cel cu name și email) */
    .footer-cta-zone div[style*="grid-template-columns"],
    .footer-contact-form-wrapper > div {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Django randează inputurile în tag-uri <p>. Le facem flexibile block */
    .footer-contact-form-wrapper p {
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important; /* Spațiu egal între rândurile formularului */
    }

    /* Forțează TOATE elementele de input din Django să ocupe lățimea maximă */
    .footer-contact-form-wrapper input,
    .footer-contact-form-wrapper textarea,
    .footer-contact-form-wrapper select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        padding: 12px !important; /* Mai ușor de apăsat pe telefon */
        font-size: 0.9rem !important; /* Previne auto-zoom-ul pe iOS */
    }

    /* Spargerea textului lung din interiorul placeholderelor sau valorilor */
    .footer-contact-form-wrapper ::placeholder {
        font-size: 0.8rem !important;
    }

    /* ====================================================
       5. REPARARE BUTON (Acel bloc alb uriaș de sus)
       ==================================================== */
    .btn-retro.btn-demo,
    .footer-contact-form-wrapper button[type="submit"] {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        padding: 14px 10px !important;
        font-size: 0.85rem !important;
        text-align: center !important;
        white-space: normal !important; /* Permite textului din buton să respire */
    }
}

@media (max-width: 768px) {
    
    /* 1. Resetăm layout-ul general al form-urilor (atât în footer cât și în pagină) */
    form, 
    .footer-contact-form-wrapper,
    form > div,
    .footer-terminal-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px !important;
        position: relative !important;
    }

    /* Reducem padding-ul containerului mare cyberpunk ca să câștigăm spațiu pe laterale */
    .footer-terminal-box {
        padding: 20px 16px !important;
    }

    /* Transformăm și subgridul de info în listă verticală */
    .footer-info-subgrid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* 2. Repararea input-urilor strivite (Nume, Email, Subiect, Mesaj) */
    form input, 
    form textarea, 
    form p input,
    form p textarea,
    form div input,
    .footer-contact-form-wrapper input,
    .footer-contact-form-wrapper textarea {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important; /* Forțează inputurile mici/pătrate să devină lungi */
        max-width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important; /* Anulează înălțimile fixe de pe desktop */
        padding: 12px 16px !important;
        font-size: 1rem !important; /* Recomandat 1rem/16px pe mobil pentru a evita auto-zoom-ul pe iOS */
    }

    /* Anulăm stilurile specifice pe paragrafele din Django */
    form p {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* 3. Rezolvarea definitivă a butonului alb plutitor (Execute Transmission) */
    .btn-retro.btn-demo,
    form button,
    form input[type="submit"],
    .footer-contact-form-wrapper button {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: 16px !important;
        width: 100% !important;
        display: block !important;
        clear: both !important;
        float: none !important;
        box-sizing: border-box !important;
        padding: 14px !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* 4. Repararea textelor de metadate (prevenim ruperea literă cu literă) */
    .footer-system-meta, 
    [class*="meta"] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .footer-system-meta > div, 
    .footer-system-meta p {
        display: block !important;
        white-space: normal !important;
        word-break: break-all !important; /* Taie email-urile foarte lungi strict la marginea ecranului */
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
    }
}


/* CONTACT DETAILS IN CONTACT form */
@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* Mută track-ul exact la jumătatea lungimii lui globale */
        transform: translate3d(-50%, 0, 0);
    }
}

/* Oprește subtil animația când utilizatorul pune mouse-ul pe ea ca să poată citi sau copia datele */
.ticker-wrap:hover .ticker-track {
    animation-play-state: paused;
    cursor: grab;
}


/* FOOTER ANIMATION */
/* Pune acest stil în fișierul tău CSS sau în tag-ul <style> */
.footer-ticker-wrap {
    /* Mască gradient: ascunde marginile stânga/dreapta cu 5% */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

@keyframes footerMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.footer-ticker-wrap:hover .footer-ticker-track {
    animation-play-state: paused;
}


/* THE WHITE RABBIT */
/* Stilul de bază: Buton negru/transparent, înălțat prin umbră solidă 3D */
.btn-rabbit-hole {
    text-decoration: none;
    padding: 20px; /* Padding egal pentru a încadra perfect logo-ul de 64px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #0b0f19; /* Fundal în ton cu caseta ta tip consolă */
    border-radius: 8px;
    
    /* Bordură continuă fină și umbră 3D care oferă efectul înălțat */
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 0px rgba(255, 255, 255, 0.1), 0 12px 20px rgba(0, 0, 0, 0.6);
    
    /* Tranziție lină pentru animațiile de mișcare și strălucire */
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

/* Efectul la HOVER: Butonul se „apasă” în jos și umbra devine o strălucire neon cyan */
.btn-rabbit-hole:hover {
    border-color: rgba(96, 165, 250, 0.6); /* Bordura prinde o nuanță discretă de albastru */
    transform: translateY(3px); /* Se deplasează 3px în jos, simulând o apăsare fizică */
    
    /* Umbra scade (butonul e mai aproape de sol) și explodează un glow fin sub el */
    box-shadow: 0 3px 0px rgba(96, 165, 250, 0.4), 0 4px 20px rgba(96, 165, 250, 0.25);
}

/* Când se dă click efectiv (Active) - se apasă complet până la capăt */
.btn-rabbit-hole:active {
    transform: translateY(6px); /* Coboară complet la nivelul solului */
    box-shadow: 0 0px 0px transparent, 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Efect opțional de puls pentru logo-ul din interior la hover */
.btn-rabbit-hole:hover img {
    transform: scale(1.05);
    transition: transform 0.15s ease;
}

 /* Animație fluidă pentru respirația textului de consolă  */
@keyframes terminalPulse {
    0% {
        opacity: 0.4;
        text-shadow: 0 0 2px rgba(100, 116, 139, 0.2);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 8px rgba(100, 116, 139, 0.5), 0 0 12px rgba(96, 165, 250, 0.2);
    }
    100% {
        opacity: 0.4;
        text-shadow: 0 0 2px rgba(100, 116, 139, 0.2);
    }
}

/* Clasa aplicată paragrafului carismatic */
.pulsing-terminal-text {
    font-family: 'Fira Code', monospace; 
    font-size: 0.9rem; 
    color: #64748b; 
    margin: 0 auto; 
    letter-spacing: 0.5px;
    animation: terminalPulse 3s ease-in-out infinite;
}


pre[class*="language-"], 
code[class*="language-"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

code.language-markdown {
    white-space: pre-line !important; /* Aceasta este proprietatea magică ce permite <br>-ului să rupă rândul */
    word-break: break-word !important;
}


/* Stil pentru titlul pe care se dă click */
summary.section-header-click {
    list-style: none; /* Ascunde săgeata implicită urâtă în Chrome/Firefox */
    cursor: pointer;
    font-family: monospace;
    font-size: 1.1rem;
    padding: 10px;
    border-left: 3px solid #60a5fa; /* O dungă albastră discretă în stânga titlului */
    background: rgba(96, 165, 250, 0.03);
    display: flex;
    align-items: center;
}

/* Pentru Safari care folosește alt prefix pentru săgeată */
summary.section-header-click::-webkit-details-marker {
    display: none;
}

/* Adăugăm o săgeată customizabilă înaintea titlului */
summary.section-header-click::before {
    content: "▶"; /* Săgeata când e închis */
    color: #60a5fa;
    margin-right: 12px;
    font-size: 0.8rem;
    transition: transform 0.2s ease; /* Animație la rotire */
}

/* Când utilizatorul dă click și se deschide (details are atributul [open]), rotim săgeata în jos */
details[open] summary.section-header-click::before {
    transform: rotate(90deg);
    color: #38bdf8; /* Schimbăm culoarea când e deschis */
}

/* Opțional: Adăugăm o bordură fină în jurul conținutului când se deschide ca să pară o capsulă izolată */
details[open] {
    border: 1px solid rgba(96, 165, 250, 0.15);
    padding: 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.1);
}


/* Copiază stilul exact al tagurilor tale retro */
.tag-footer-retro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(100, 255, 218, 0.05) !important;
    border: 1px solid rgba(100, 255, 218, 0.2) !important;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

/* Efectul de aprindere la hover */
.tag-footer-retro:hover {
    background: rgba(100, 255, 218, 0.15) !important;
    border-color: rgba(100, 255, 218, 1) !important;
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
}