/* ----------------------------------------- */
     /* MODERN GLASSMORPHISM DESIGN SYSTEM        */
     /* ----------------------------------------- */
        :root {
            --bg-body: #f8fafc;
            --bg-gradient: radial-gradient(circle at 50% -20%, #d1fae5 0%, #f8fafc 60%);
            --bg-card: rgba(255, 255, 255, 0.7);
            --dropdown-bg: rgba(255, 255, 255, 0.95);
            --option-bg: #ffffff;
            --border-color: rgba(0, 0, 0, 0.08);
            --text-main: #0f172a;
            --text-muted: #64748b;
            --text-label: #475569;
            --primary: #10b981; 
            --primary-hover: #059669;
            --primary-ring: rgba(16, 185, 129, 0.15);
            --input-bg: rgba(255, 255, 255, 0.9);
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
            --fav-bg: rgba(241, 245, 249, 0.8);
            --fav-hover: rgba(226, 232, 240, 0.9);
            --protocol-bg: rgba(139, 92, 246, 0.1);
            --card-blur: blur(24px);
            --transition-speed: 0.3s;
            --anti-warning: #ea580c;
        }

        @media (prefers-color-scheme: dark) {
            html:not([data-theme="light"]) {
                --bg-body: #020617; 
                --bg-gradient: radial-gradient(circle at 50% -20%, #064e3b 0%, #020617 80%); 
                --bg-card: rgba(30, 41, 59, 0.4); 
                --dropdown-bg: rgba(15, 23, 42, 0.95); 
                --option-bg: #0f172a; 
                --border-color: rgba(255, 255, 255, 0.1); 
                --text-main: #f8fafc;
                --text-muted: #94a3b8;
                --text-label: #cbd5e1;
                --primary: #10b981; 
                --primary-hover: #34d399;
                --primary-ring: rgba(16, 185, 129, 0.25);
                --input-bg: rgba(15, 23, 42, 0.5); 
                --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.5);
                --shadow-md: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
                --fav-bg: rgba(255, 255, 255, 0.04);
                --fav-hover: rgba(255, 255, 255, 0.08);
                --protocol-bg: rgba(139, 92, 246, 0.15);
                --anti-warning: #f97316;
            }
        }

        html[data-theme="dark"] {
            --bg-body: #020617; 
            --bg-gradient: radial-gradient(circle at 50% -20%, #064e3b 0%, #020617 80%); 
            --bg-card: rgba(30, 41, 59, 0.4); 
            --dropdown-bg: rgba(15, 23, 42, 0.95); 
            --option-bg: #0f172a; 
            --border-color: rgba(255, 255, 255, 0.1); 
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --text-label: #cbd5e1;
            --primary: #10b981; 
            --primary-hover: #34d399;
            --primary-ring: rgba(16, 185, 129, 0.25);
            --input-bg: rgba(15, 23, 42, 0.5); 
            --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.5);
            --shadow-md: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
            --fav-bg: rgba(255, 255, 255, 0.04);
            --fav-hover: rgba(255, 255, 255, 0.08);
            --protocol-bg: rgba(139, 92, 246, 0.15);
            --anti-warning: #f97316;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background-color: var(--bg-body); background-image: var(--bg-gradient); background-attachment: fixed; color: var(--text-main); padding: 16px 0px; transition: background var(--transition-speed) ease, color var(--transition-speed) ease; min-height: 100vh; }
        .app-container { max-width: 1100px; margin: 0 auto; padding: 0 25px; }
.app-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: nowrap; 
    gap: 12px; 
    margin-bottom: 24px; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 16px; 
    width: 100%; 
    
    /* FIX: Allow the dropdown to escape the header and float above cards */
    overflow: visible; 
    position: relative;
    z-index: 100;
}.header-title-group { display: flex; align-items: center; gap: 14px; min-width: 0; flex-shrink: 1; overflow: hidden; }
.header-title-group div { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-logo { height: 42px; width: auto; border-radius: 8px; flex-shrink: 0; }
.app-header h2 { color: var(--text-main); font-size: 24px; font-weight: 800; margin: 0; line-height: 1.1; }
.app-header p { color: var(--text-muted); font-size: 13px; font-weight: 500; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; flex-wrap: nowrap; }
.menu-wrapper { position: relative; flex-shrink: 0; }     
        .theme-toggle-btn { background: var(--bg-card); color: var(--text-main); font-size: 12.5px; padding: 8px 14px; border-radius: 20px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-color); backdrop-filter: var(--card-blur); box-shadow: var(--shadow-sm); transition: all 0.3s ease; }
        .theme-toggle-btn:hover { border-color: var(--primary); background: var(--fav-bg); }

        .btn-feedback-top { 
    background: var(--bg-card); 
    color: var(--text-main); 
    font-size: 12.5px; 
    padding: 8px 14px; 
    border-radius: 20px; 
    text-decoration: none; 
    font-weight: 600; 
    border: 1px solid var(--border-color); 
    backdrop-filter: var(--card-blur); 
    box-shadow: var(--shadow-sm); 
    display: inline-flex; 
    align-items: center; 
    gap: 5px; 
    white-space: nowrap; 
    transition: all 0.3s ease; 
}

.btn-feedback-top:hover { 
    border-color: var(--primary); 
    background: var(--fav-bg); 
}

        .dashboard-layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
        @media (min-width: 900px) { .dashboard-layout { grid-template-columns: 1.15fr 0.85fr; } }
        
        .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-md); backdrop-filter: var(--card-blur); margin-bottom: 16px; transition: border-color var(--transition-speed) ease, background var(--transition-speed) ease; position: relative; z-index: 1; }
        .card:focus-within { z-index: 50; }
        
        .card-title { font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
        .card-title::before { content: ''; display: inline-block; width: 4px; height: 14px; background: var(--primary); border-radius: 4px; transition: background var(--transition-speed) ease; } 
        
        .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .input-group { margin-bottom: 16px; position: relative; display: flex; flex-direction: column; transition: all var(--transition-speed) ease; }
        .input-group label { font-weight: 500; font-size: 12.5px; color: var(--text-label); margin-bottom: 6px; display: flex; align-items: center; transition: color 0.3s ease;}
        
        /* Adaugă asta pentru ecrane de telefon */
/* ─── RESPONSIVE ─── */
        @media (max-width: 600px) {
            /* 1. Header Fixes (forțat să rămână în ecran) */
            nav { 
                padding: 0 16px; 
                height: 52px;
                width: 100%;
                max-width: 100vw;
            }
            .nav-logo img { height: 24px; }
            .nav-logo span { font-size: 15px; }
            .nav-cta { padding: 6px 12px; font-size: 12px; }

            /* 2. Eliminarea elementelor invizibile care lățeau pagina */
            .hero-glow, .cta-glow {
                max-width: 100vw; /* Împiedică luminile din fundal să iasă din ecran */
            }
            
            .features-grid {
                grid-template-columns: 1fr; /* Forțează o singură coloană pe telefoanele înguste */
            }

            /* 3. Ajustări existente */
            .hero { padding: 100px 20px 40px; min-height: auto; }
            .hero h1 { font-size: 32px; letter-spacing: -1px; margin-bottom: 16px;}
            .hero-sub { font-size: 15px; margin-bottom: 32px; }
            .stats-bar { gap: 24px; padding: 20px 0; }
            footer { flex-direction: column; align-items: flex-start; }
        } 

/* --- MODERN INPUTS & SELECTS --- */
input, textarea, select { 
    width: 100%; 
    padding: 14px 16px; /* Spațiu mai generos pentru un aspect aerisit și modern */
    border: 1px solid var(--border-color); 
    border-radius: 12px; 
    font-size: 14.5px; 
    font-weight: 500;
    color: var(--text-main); 
    background-color: var(--input-bg); 
    font-family: inherit; 
    transition: all 0.3s ease; 
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); /* Umbră interioară subtilă */
}

input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

input:focus, select:focus { 
    border-color: var(--primary); 
    outline: none; 
    background-color: var(--option-bg); /* Fundal solid la focus pentru claritate maximă */
    box-shadow: 0 0 0 4px var(--primary-ring), inset 0 2px 4px rgba(0, 0, 0, 0.02); 
}

/* Stiluri specifice pentru Dropdown (Select) */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    /* Săgeată customizată pentru tema luminoasă (gri închis) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 44px;
}

/* Corecția supremă pentru Dark Mode la Dropdown-uri */
html[data-theme="dark"] select {
    color: #f8fafc; /* Forțează textul pe alb strălucitor */
    /* Săgeată customizată pentru tema întunecată (albă) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8fafc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Cum arată opțiunile când se deschide lista pe telefoane/desktop */
html[data-theme="dark"] select option {
    background-color: #0f172a; 
    color: #f8fafc;
    font-weight: 500;
}

        button { border: none; padding: 12px 16px; cursor: pointer; border-radius: 12px; font-weight: 700; width: 100%; font-size: 14px; font-family: inherit; transition: all 0.3s ease; }
        
        /* --- VISUAL CUES (SEMNALIZATOARE) --- */
        .req-indicator {
            display: none;
            color: var(--anti-warning);
            font-size: 13px;
            margin-right: 6px;
            opacity: 0;
            transform: scale(0.5);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .theme-antibiotic .anti-req-group .req-indicator {
            display: inline-flex;
            opacity: 1;
            transform: scale(1);
        }

        .theme-antibiotic .anti-req-group label {
            color: var(--anti-warning);
            font-weight: 600;
        }
        
        .theme-antibiotic .anti-req-group input {
            border-color: rgba(234, 88, 12, 0.4); 
            background-color: rgba(234, 88, 12, 0.02);
        }
        html[data-theme="dark"] .theme-antibiotic .anti-req-group input {
             background-color: rgba(249, 115, 22, 0.05);
        }
        
        .theme-antibiotic .anti-req-group input:focus {
            border-color: var(--anti-warning);
            box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.15);
        }

        .btn-add { background: var(--primary); color: #ffffff; box-shadow: 0 4px 15px var(--primary-ring); margin-top: 8px; }
        .btn-add:hover { background: var(--primary-hover); transform: translateY(-1px); }
        
        .btn-print { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #ffffff; flex: 1; }
        .btn-pdf { background: linear-gradient(135deg, #ef4444, #dc2626); color: #ffffff; flex: 1; }
        
        .btn-reset { background: transparent; border: 1px solid var(--border-color); color: var(--text-label); margin-top: 12px; }
        .btn-reset:hover { background: var(--fav-bg); color: var(--text-main); }
        
        .btn-save-protocol { background: var(--protocol-bg); color: #8b5cf6; border: 1px dashed rgba(139, 92, 246, 0.4); margin-bottom: 16px; font-size: 12.5px; padding: 8px 12px; }
        .btn-save-protocol:hover { background: rgba(139, 92, 246, 0.2); }

        /* --- STYLING PENTRU DROPDOWN-URI (ACCORDION) --- */
        details.saved-items-dropdown {
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            margin-bottom: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        details.saved-items-dropdown[open] {
            box-shadow: var(--shadow-sm);
        }
        details.saved-items-dropdown summary {
            padding: 12px 16px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-main);
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
            user-select: none;
        }
        details.saved-items-dropdown summary::-webkit-details-marker {
            display: none;
        }
        details.saved-items-dropdown summary::before {
            content: '▶';
            font-size: 10px;
            margin-right: 8px;
            color: var(--text-muted);
            transition: transform 0.3s ease;
        }
        details.saved-items-dropdown[open] summary::before {
            transform: rotate(90deg);
        }
        .dropdown-content {
            padding: 0 12px 12px 12px;
        }

        .rect-list-container { display: flex; flex-direction: column; gap: 8px; max-height: 185px; overflow-y: auto; padding-right: 4px; }
        
        .btn-fav { position: relative; padding: 10px 36px 10px 12px; font-size: 12.5px; border-radius: 8px; background: var(--fav-bg); color: var(--text-main); border: 1px solid var(--border-color); text-align: left; transition: all 0.2s ease; cursor: pointer; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; width: 100%; box-sizing: border-box; overflow: hidden;}
        .btn-fav:hover { background: var(--fav-hover); border-color: var(--primary); }
        
        .btn-protocol { background: var(--protocol-bg); border-color: rgba(139, 92, 246, 0.2); }
        .btn-protocol:hover { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.6); }

        .fav-content-group { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
        .fav-title { font-weight: 600; color: var(--text-main); font-size: 13px;}
        .btn-protocol .fav-title { color: #7c3aed; }
        .fav-desc { font-size: 11px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis; white-space: normal; }
        .fav-delete { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text-muted); font-size: 16px; cursor: pointer; transition: background 0.2s; }
        .fav-delete:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

        .search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 220px; overflow-y: auto; background: var(--dropdown-bg); border: 1px solid var(--border-color); display: none; z-index: 1000; border-radius: 12px; padding: 6px; backdrop-filter: blur(16px); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
        .search-item { padding: 10px 12px; cursor: pointer; border-radius: 8px; font-size: 13px; color: var(--text-main); line-height: 1.4; }
        .search-item:hover { background: var(--primary-ring); color: var(--primary); }

        #lista-ui { padding: 0; list-style: none; margin-bottom: 12px; display: flex; flex-direction: column; gap: 12px; }
        #lista-ui li { background: var(--input-bg); padding: 16px; border-radius: 12px; border: 1px solid var(--border-color); border-left: 5px solid var(--primary); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); transition: border-left-color 0.4s ease; overflow: hidden; }
        
        .list-item-content { width: 100%; min-width: 0;}
        .list-item-title { font-weight: 700; font-size: 14px; color: var(--text-main); margin-bottom: 4px; }
        .list-item-subtitle { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
        
        .list-actions-row { display: flex; width: 100%; gap: 8px; border-top: 1px solid var(--border-color); padding-top: 12px; }
        
        .action-btn-pill { flex: 1; background: transparent; border: none; padding: 8px 4px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 6px; transition: all 0.2s ease; }
        .action-edit { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
        .action-edit:hover { background: rgba(59, 130, 246, 0.2); }
        .action-fav { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
        .action-fav:hover { background: rgba(245, 158, 11, 0.2); }
        .action-del { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
        .action-del:hover { background: rgba(239, 68, 68, 0.2); }
        
        /* ----------------------------------------- */
        /* HIGH-FIDELITY DOCUMENT CANVAS A4          */
        /* ----------------------------------------- */
        #print-only-blueprint { 
            display: none; /* Ascuns pe ecran normal, controlat perfect curat din JS */
            width: 210mm;
            margin: 0 auto;
            background: white;
        }
        #print-only-blueprint * { color: #000 !important; }
        
        .a5-document-sheet { 
            width: 210mm; 
            min-height: 275mm; 
            box-sizing: border-box; 
            padding: 20mm 15mm 20mm 15mm; 
            background: white !important; 
            position: relative; 
            display: flex;
            flex-direction: column;
            page-break-inside: avoid;
        }
        
        .document-body { 
            flex-grow: 1; 
            margin-top: 35mm; /* Spatiu mare sub Watermark */
        }
        
        .print-row { display: flex; align-items: flex-end; margin-bottom: 5px; }
        .print-label { white-space: nowrap; font-family: Arial, sans-serif; font-size: 10pt; }
        .print-val { flex-grow: 1; border-bottom: 1px dotted #666 !important; margin-left: 6px; padding-bottom: 2px; font-family: Arial, sans-serif; font-size: 11.5pt; font-weight: 800; min-height: 1.1em; line-height: 1; }
        
        .doc-watermark { position: absolute; top: 15mm; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 8pt; font-family: 'Inter', Arial, sans-serif; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; z-index: 10; }
        .doc-watermark img { height: 13px; width: auto; border-radius: 3px; }
        
        #blueprint-simple .document-body { font-family: 'Times New Roman', Times, serif; font-size: 11pt; }
        #blueprint-simple .print-label { font-family: 'Times New Roman', Times, serif; font-size: 11pt; }
        #blueprint-simple .print-val { font-size: 12pt; border-bottom: 1px dotted #666 !important; }
        #blueprint-simple .doc-watermark, #blueprint-simple .doc-watermark span { color: #64748b !important; }
        #blueprint-simple .doc-watermark img { filter: grayscale(100%); opacity: 0.8; }
        
        #blueprint-anti .document-body { font-family: Arial, sans-serif; font-size: 10pt; }
        #blueprint-anti .doc-watermark, #blueprint-anti .doc-watermark span { color: #ea580c !important; }
        #blueprint-anti .doc-watermark img { filter: grayscale(100%) sepia(100%) hue-rotate(5deg) saturate(300%); opacity: 0.6; }
        
        .print-footer { 
            display: flex; justify-content: space-between; align-items: flex-end; width: 100%; 
            margin-top: auto; padding-top: 20px; 
        }

        @media print {
    /* 1. Reset margins and force a white background */
    html, body { 
        margin: 0 !important; 
        padding: 0 !important; 
        height: 100% !important; 
        overflow: visible !important; 
        background: white !important; 
    }
    
    /* 2. Hide all web interface elements and modals */
    .app-container, #whats-new-modal, #auth-modal { 
        display: none !important; 
    }
    
    /* 3. Explicitly show the print container */
    #print-only-blueprint { 
        display: block !important; 
        width: 100% !important; 
        height: auto !important;
    }
    
    /* 4. THE MAGIC FROM YOUR OLD CODE: Exact A4 physical dimensions. 
       CRITICAL: Notice there is NO 'display: flex' here. app.js controls that! */
    .a5-document-sheet { 
        margin: 0 !important; 
        padding: 20mm 15mm 30mm 15mm !important; 
        width: 210mm !important; 
        height: 297mm !important; 
        max-height: 297mm !important; 
        box-shadow: none !important; 
        border: none !important; 
        page-break-inside: avoid !important; 
        overflow: hidden !important;
    }
    
    /* 5. FORCES THE BROWSER TO A4
       This is why your old code looked the exact same whether A4 or Letter was selected! */
    @page { 
        size: A4 portrait; 
        margin: 0mm; 
    }

    .print-parafa-img {
        display: block !important;
        visibility: visible !important;
        max-height: 80px !important;
        width: auto !important;
    }
}

        /* --- GDPR CONSENT TOGGLE --- */
        .consent-wrapper { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-card); padding: 16px; border-radius: 16px; border: 1px solid var(--border-color); margin-top: 16px; text-align: left; }
        .consent-text { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
        .consent-text a { color: var(--primary); font-weight: 600; text-decoration: none; }
        .toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; margin-top: 2px; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(100, 116, 139, 0.3); transition: .3s; border-radius: 22px; border: 1px solid var(--border-color); }
        .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        input:checked + .slider { background-color: var(--primary); border-color: var(--primary); }
        input:checked + .slider:before { transform: translateX(18px); }
        
/* --- MODAL WHAT'S NEW --- */
.modal-overlay { 
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0, 0, 0, 0.5); 
    backdrop-filter: blur(5px); 
    z-index: 99999; 
    display: flex; align-items: center; justify-content: center; 
    padding: 20px; 
    animation: fadeIn 0.3s ease; 
}

.modal-card { 
    background: var(--bg-body); 
    border: 1px solid var(--border-color); 
    border-radius: 24px; 
    padding: 24px; 
    max-width: 400px; 
    width: 100%; 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header h3 { 
    font-size: 22px; margin-bottom: 24px; color: var(--text-main); font-weight: 800; 
}

.whats-new-list { 
    list-style: none; padding: 0; margin: 0 0 24px 0; 
    display: flex; flex-direction: column; gap: 16px; 
}

.whats-new-list li { 
    display: flex; gap: 16px; align-items: flex-start; 
    background: var(--input-bg); 
    padding: 18px; 
    border-radius: 16px; 
    border: 1px solid var(--border-color); 
}

.wn-icon { font-size: 26px; line-height: 1; margin-top: 2px; }

.whats-new-list strong { 
    font-size: 14.5px; color: var(--text-main); display: block; margin-bottom: 4px; 
}

.whats-new-list p { 
    font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; 
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(15px) scale(0.95); } 
    to { opacity: 1; transform: translateY(0) scale(1); } 
}

/* Stil rafinat pentru butonul de cont */
#btn-auth-modal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    backdrop-filter: var(--card-blur);
    transition: all 0.3s ease;
}

#btn-auth-modal:hover {
    background: var(--fav-bg);
    border-color: var(--primary);
}

/* Stil pentru butonul de file upload custom */
label[for="parafa-upload"] {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

label[for="parafa-upload"]:hover {
    background: var(--fav-bg);
}

.menu-wrapper {
    position: relative;
}

.btn-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12.5px;
    backdrop-filter: var(--card-blur);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    width: auto;
    white-space: nowrap;
}

.btn-menu:hover {
    border-color: var(--primary);
    background: var(--fav-bg);
}

.menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 8px;
    min-width: 200px;
    box-shadow: var(--shadow-md);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 4px;
    backdrop-filter: blur(16px);
}

.menu-dropdown button,
.menu-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}

.menu-dropdown button:hover,
.menu-dropdown a:hover {
    background: var(--primary-ring);
    color: var(--primary);
}

/* Ensure the digital stamp scales cleanly inside print templates */
.print-parafa-img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
    display: none; /* Controlled dynamically by app.js visibility states */
    margin-top: 5px;
}

/* Specific view adjustments for rendering inside modal cards */
#parafa-preview {
    max-height: 100px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 8px;
    background: #fff;
    margin-top: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Fix mobile orientation shifting bugs on small viewports */
@media (max-width: 600px) {
    .header-actions {
        flex-wrap: nowrap;
    }
    .btn-menu {
        padding: 8px 12px;
    }
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background: #ffffff;      /* Fundal alb */
    color: #374151;           /* Text gri închis (nu negru pur) */
    border: 1px solid #d1d5db; /* Bordură gri deschis */
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-google:hover {
    background: #f9fafb;      /* Gri foarte deschis la hover */
    border-color: #9ca3af;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#confirm-modal {
    z-index: 999999;
}

/* --- STILURI PENTRU BUTONUL DE DONAȚIE DIN HEADER --- */
.btn-donate-header {
    background: linear-gradient(135deg, #f59e0b, #ea580c); /* Gradient cald și vibrant */
    color: #ffffff !important; /* Text alb vizibil clar */
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
    border: none; /* Am eliminat bordura pentru un aspect modern */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35); /* Glow subtil portocaliu */
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Efectul la hover */
.btn-donate-header:hover {
    background: linear-gradient(135deg, #ea580c, #c2410c); /* Se închide ușor la trecerea mouse-ului */
    transform: translateY(-2px); /* Se ridică puțin pentru senzația de click */
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45); /* Glow-ul devine mai intens */
}

/* Adaptare pentru telefoane mobile (ascundem textul pentru a nu aglomera ecranul) */
@media (max-width: 600px) {
    .btn-donate-header {
        padding: 8px 12px;
    }
    .btn-donate-text {
        display: none;
    }
}