/* ============================================================                                                           
   Document Study App - Modern Design                                                                                     
   ============================================================ */                                                        
                                                                                                                          
/* ── CSS Variables ── */                                                                                                 
:root {                                                                                                                   
    --primary: #2c3e50;                                                                                                   
    --primary-light: #34495e;                                                                                             
    --accent: #3498db;                                                                                                    
    --accent-hover: #2980b9;                                                                                              
    --danger: #e74c3c;                                                                                                    
    --danger-hover: #c0392b;                                                                                              
    --success: #27ae60;                                                                                                   
    --warning: #f39c12;                                                                                                   
    --bg: #ecf0f1;                                                                                                        
    --card-bg: #ffffff;                                                                                                   
    --text: #2c3e50;                                                                                                      
    --text-light: #7f8c8d;                                                                                                
    --border: #bdc3c7;                                                                                                    
    --shadow: 0 2px 10px rgba(0,0,0,0.08);                                                                                
    --shadow-hover: 0 4px 20px rgba(0,0,0,0.12);                                                                          
    --radius: 12px;                                                                                                       
    --radius-sm: 8px;                                                                                                     
    --transition: all 0.3s ease;                                                                                          
}                                                                                                                         
                                                                                                                          
/* ── Reset & Base ── */                                                                                                  
*, *::before, *::after {                                                                                                  
    box-sizing: border-box;                                                                                               
    margin: 0;                                                                                                            
    padding: 0;                                                                                                           
}                                                                                                                         
                                                                                                                          
html {                                                                                                                    
    scroll-behavior: smooth;                                                                                              
}                                                                                                                         
                                                                                                                          
body {                                                                                                                    
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;                                                        
    background: var(--bg);                                                                                                
    color: var(--text);                                                                                                   
    line-height: 1.6;                                                                                                     
    min-height: 100vh;                                                                                                    
    padding: 0;                                                                                                           
}                                                                                                                         
                                                                                                                          
/* ── Header ── */                                                                                                        
header {                                                                                                                  
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);                                    
    color: #fff;                                                                                                          
    padding: 2.5rem 1.5rem;                                                                                               
    text-align: center;                                                                                                   
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);                                                                              
    position: relative;                                                                                                   
    overflow: hidden;                                                                                                     
}                                                                                                                         
                                                                                                                          
header::before {                                                                                                          
    content: '';                                                                                                          
    position: absolute;                                                                                                   
    top: -50%;                                                                                                            
    left: -50%;                                                                                                           
    width: 200%;                                                                                                          
    height: 200%;                                                                                                         
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);                                      
    animation: headerGlow 8s ease-in-out infinite;                                                                        
}                                                                                                                         
                                                                                                                          
@keyframes headerGlow {                                                                                                   
    0%, 100% { transform: translate(0, 0); }                                                                              
    50% { transform: translate(10%, 10%); }                                                                               
}                                                                                                                         
                                                                                                                          
header h1 {                                                                                                               
    font-size: 2.5rem;                                                                                                    
    font-weight: 700;                                                                                                     
    margin-bottom: 0.5rem;                                                                                                
    position: relative;                                                                                                   
    z-index: 1;                                                                                                           
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);                                                                               
}                                                                                                                         
                                                                                                                          
header p {                                                                                                                
    font-size: 1.1rem;                                                                                                    
    opacity: 0.9;                                                                                                         
    position: relative;                                                                                                   
    z-index: 1;                                                                                                           
}                                                                                                                         
                                                                                                                          
header code {                                                                                                             
    background: rgba(255,255,255,0.15);                                                                                   
    padding: 0.2rem 0.6rem;                                                                                               
    border-radius: 4px;                                                                                                   
    font-size: 0.9rem;                                                                                                    
}                                                                                                                         
                                                                                                                          
/* ── Main Container ── */                                                                                                
main {                                                                                                                    
    max-width: 1100px;                                                                                                    
    margin: 0 auto;                                                                                                       
    padding: 2rem 1.5rem;                                                                                                 
}                                                                                                                         
                                                                                                                          
/* ── Controls ── */                                                                                                      
.controls {                                                                                                               
    display: flex;                                                                                                        
    flex-wrap: wrap;                                                                                                      
    gap: 1rem;                                                                                                            
    align-items: center;                                                                                                  
    margin-bottom: 2rem;                                                                                                  
    background: var(--card-bg);                                                                                           
    padding: 1.25rem;                                                                                                     
    border-radius: var(--radius);                                                                                         
    box-shadow: var(--shadow);                                                                                            
    transition: var(--transition);                                                                                        
}                                                                                                                         
                                                                                                                          
.controls:hover {                                                                                                         
    box-shadow: var(--shadow-hover);                                                                                      
}                                                                                                                         
                                                                                                                          
.controls input,                                                                                                          
.controls select,                                                                                                         
.controls button {                                                                                                        
    padding: 0.65rem 1rem;                                                                                                
    font-size: 0.95rem;                                                                                                   
    border: 2px solid var(--border);                                                                                      
    border-radius: var(--radius-sm);                                                                                      
    background: var(--card-bg);                                                                                           
    transition: var(--transition);                                                                                        
    outline: none;                                                                                                        
}                                                                                                                         
                                                                                                                          
.controls input:focus,                                                                                                    
.controls select:focus {                                                                                                  
    border-color: var(--accent);                                                                                          
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);                                                                       
}                                                                                                                         
                                                                                                                          
.controls input {                                                                                                         
    flex: 1 1 250px;                                                                                                      
    min-width: 180px;                                                                                                     
}                                                                                                                         
                                                                                                                          
.controls input::placeholder {                                                                                            
    color: var(--text-light);                                                                                             
    opacity: 0.7;                                                                                                         
}                                                                                                                         
                                                                                                                          
.controls select {                                                                                                        
    flex: 0 1 auto;                                                                                                       
    cursor: pointer;                                                                                                      
    appearance: none;                                                                                                     
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237f8c8d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");                                                     
    background-repeat: no-repeat;                                                                                         
    background-position: right 0.75rem center;                                                                            
    padding-right: 2rem;                                                                                                  
}                                                                                                                         
                                                                                                                          
.controls button {                                                                                                        
    background: var(--danger);                                                                                            
    color: #fff;                                                                                                          
    border: none;                                                                                                         
    cursor: pointer;                                                                                                      
    font-weight: 600;                                                                                                     
    letter-spacing: 0.5px;                                                                                                
    text-transform: uppercase;                                                                                            
    font-size: 0.85rem;                                                                                                   
    padding: 0.65rem 1.25rem;                                                                                             
}                                                                                                                         
                                                                                                                          
.controls button:hover {                                                                                                  
    background: var(--danger-hover);                                                                                      
    transform: translateY(-1px);                                                                                          
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);                                                                         
}                                                                                                                         
                                                                                                                          
.controls button:active {                                                                                                 
    transform: translateY(0);                                                                                             
}                                                                                                                         
                                                                                                                          
/* ── Results Grid ── */                                                                                                  
#results {                                                                                                                
    display: grid;                                                                                                        
    gap: 1rem;                                                                                                            
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));                                                         
}                                                                                                                         
                                                                                                                          
/* ── Document Card ── */                                                                                                 
.doc-card {                                                                                                               
    background: var(--card-bg);                                                                                           
    padding: 1.25rem;                                                                                                     
    border-radius: var(--radius);                                                                                         
    box-shadow: var(--shadow);                                                                                            
    transition: var(--transition);                                                                                        
    cursor: pointer;                                                                                                      
    border-left: 4px solid var(--accent);                                                                                 
    position: relative;                                                                                                   
    overflow: hidden;                                                                                                     
}                                                                                                                         
                                                                                                                          
.doc-card::after {                                                                                                        
    content: '';                                                                                                          
    position: absolute;                                                                                                   
    top: 0;                                                                                                               
    right: 0;                                                                                                             
    width: 60px;                                                                                                          
    height: 60px;                                                                                                         
    background: linear-gradient(135deg, transparent 50%, rgba(52, 152, 219, 0.05) 50%);                                   
    border-radius: 0 var(--radius) 0 0;                                                                                   
}                                                                                                                         
                                                                                                                          
.doc-card:hover {                                                                                                         
    transform: translateY(-3px);                                                                                          
    box-shadow: var(--shadow-hover);                                                                                      
    border-left-color: var(--accent-hover);                                                                               
}                                                                                                                         
                                                                                                                          
.doc-card:active {                                                                                                        
    transform: translateY(-1px);                                                                                          
}                                                                                                                         
                                                                                                                          
.doc-card .title {                                                                                                        
    font-size: 1.15rem;                                                                                                   
    font-weight: 600;                                                                                                     
    margin-bottom: 0.5rem;                                                                                                
    color: var(--primary);                                                                                                
    line-height: 1.4;                                                                                                     
}                                                                                                                         
                                                                                                                          
.doc-card .meta {                                                                                                         
    font-size: 0.9rem;                                                                                                    
    color: var(--text-light);                                                                                             
    display: flex;                                                                                                        
    flex-wrap: wrap;                                                                                                      
    gap: 0.75rem;                                                                                                         
    align-items: center;                                                                                                  
}                                                                                                                         
                                                                                                                          
.doc-card .meta span {                                                                                                    
    display: inline-flex;                                                                                                 
    align-items: center;                                                                                                  
    gap: 0.3rem;                                                                                                          
}                                                                                                                         
                                                                                                                          
.doc-card .meta .century {                                                                                                
    background: #eef2f7;                                                                                                  
    padding: 0.15rem 0.6rem;                                                                                              
    border-radius: 20px;                                                                                                  
    font-size: 0.8rem;                                                                                                    
    font-weight: 500;                                                                                                     
    color: var(--primary-light);                                                                                          
}                                                                                                                         
                                                                                                                          
/* ── No Results ── */                                                                                                    
.no-results {                                                                                                             
    text-align: center;                                                                                                   
    color: var(--text-light);                                                                                             
    padding: 3rem 2rem;                                                                                                   
    font-style: italic;                                                                                                   
    font-size: 1.1rem;                                                                                                    
    grid-column: 1 / -1;                                                                                                  
    background: var(--card-bg);                                                                                           
    border-radius: var(--radius);                                                                                         
    box-shadow: var(--shadow);                                                                                            
}                                                                                                                         
                                                                                                                          
/* ── Content Viewer ── */                                                                                                
#contentContainer {                                                                                                       
    margin-top: 2rem;                                                                                                     
    background: var(--card-bg);                                                                                           
    border-radius: var(--radius);                                                                                         
    box-shadow: var(--shadow);                                                                                            
    overflow: hidden;                                                                                                     
    animation: slideIn 0.3s ease;                                                                                         
}                                                                                                                         
                                                                                                                          
@keyframes slideIn {                                                                                                      
    from {                                                                                                                
        opacity: 0;                                                                                                       
        transform: translateY(20px);                                                                                      
    }                                                                                                                     
    to {                                                                                                                  
        opacity: 1;                                                                                                       
        transform: translateY(0);                                                                                         
    }                                                                                                                     
}                                                                                                                         
                                                                                                                          
.content-header {                                                                                                         
    display: flex;                                                                                                        
    justify-content: space-between;                                                                                       
    align-items: flex-start;                                                                                              
    padding: 1.25rem 1.5rem;                                                                                              
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);                                                        
    border-bottom: 1px solid var(--border);                                                                               
    flex-wrap: wrap;                                                                                                      
    gap: 0.5rem;                                                                                                          
}                                                                                                                         
                                                                                                                          
.content-header h2 {                                                                                                      
    font-size: 1.3rem;                                                                                                    
    font-weight: 700;                                                                                                     
    color: var(--primary);                                                                                                
    margin: 0;                                                                                                            
    flex: 1;                                                                                                              
}                                                                                                                         
                                                                                                                          
.content-meta {                                                                                                           
    color: var(--text-light);                                                                                             
    font-size: 0.9rem;                                                                                                    
    margin: 0.25rem 0 0 0;                                                                                                
    width: 100%;                                                                                                          
}                                                                                                                         
                                                                                                                          
.close-btn {                                                                                                              
    background: var(--danger);                                                                                            
    color: #fff;                                                                                                          
    border: none;                                                                                                         
    padding: 0.5rem 1rem;                                                                                                 
    border-radius: var(--radius-sm);                                                                                      
    cursor: pointer;                                                                                                      
    font-size: 0.9rem;                                                                                                    
    font-weight: 600;                                                                                                     
    transition: var(--transition);                                                                                        
    display: inline-flex;                                                                                                 
    align-items: center;                                                                                                  
    gap: 0.3rem;                                                                                                          
    white-space: nowrap;                                                                                                  
}                                                                                                                         
                                                                                                                          
.close-btn:hover {                                                                                                        
    background: var(--danger-hover);                                                                                      
    transform: translateY(-1px);                                                                                          
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);                                                                         
}                                                                                                                         
                                                                                                                          
.close-btn:active {                                                                                                       
    transform: translateY(0);                                                                                             
}                                                                                                                         
                                                                                                                          
.content-body {                                                                                                           
    padding: 1.5rem;                                                                                                      
    max-height: 75vh;                                                                                                     
    overflow-y: auto;                                                                                                     
    background: #fafbfc;                                                                                                  
}                                                                                                                         
                                                                                                                          
.content-body pre {                                                                                                       
    white-space: pre-wrap;                                                                                                
    word-wrap: break-word;                                                                                                
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;                                                     
    font-size: 0.9rem;                                                                                                    
    line-height: 1.7;                                                                                                     
    margin: 0;                                                                                                            
    color: var(--text);                                                                                                   
    background: var(--card-bg);                                                                                           
    padding: 1rem;                                                                                                        
    border-radius: var(--radius-sm);                                                                                      
    border: 1px solid var(--border);                                                                                      
}                                                                                                                         
                                                                                                                          
.error-message {                                                                                                          
    color: var(--danger);                                                                                                 
    font-style: italic;                                                                                                   
    padding: 1rem;                                                                                                        
    background: #fdf0ef;                                                                                                  
    border-radius: var(--radius-sm);                                                                                      
    border: 1px solid #f5c6cb;                                                                                            
}                                                                                                                         
                                                                                                                          
/* ── Scrollbar Styling ── */                                                                                             
.content-body::-webkit-scrollbar {                                                                                        
    width: 8px;                                                                                                           
}                                                                                                                         
                                                                                                                          
.content-body::-webkit-scrollbar-track {                                                                                  
    background: #f1f1f1;                                                                                                  
    border-radius: 4px;                                                                                                   
}                                                                                                                         
                                                                                                                          
.content-body::-webkit-scrollbar-thumb {                                                                                  
    background: var(--border);                                                                                            
    border-radius: 4px;                                                                                                   
}                                                                                                                         
                                                                                                                          
.content-body::-webkit-scrollbar-thumb:hover {                                                                            
    background: var(--text-light);                                                                                        
}                                                                                                                         
                                                                                                                          
/* ── Responsive Design ── */                                                                                             
@media (max-width: 768px) {                                                                                               
    header {                                                                                                              
        padding: 2rem 1rem;                                                                                               
    }                                                                                                                     
                                                                                                                          
    header h1 {                                                                                                           
        font-size: 1.8rem;                                                                                                
    }                                                                                                                     
                                                                                                                          
    main {                                                                                                                
        padding: 1.5rem 1rem;                                                                                             
    }                                                                                                                     
                                                                                                                          
    .controls {                                                                                                           
        flex-direction: column;                                                                                           
        align-items: stretch;                                                                                             
        padding: 1rem;                                                                                                    
    }                                                                                                                     
                                                                                                                          
    .controls input,                                                                                                      
    .controls select,                                                                                                     
    .controls button {                                                                                                    
        width: 100%;                                                                                                      
    }                                                                                                                     
                                                                                                                          
    #results {                                                                                                            
        grid-template-columns: 1fr;                                                                                       
    }                                                                                                                     
                                                                                                                          
    .content-header {                                                                                                     
        flex-direction: column;                                                                                           
        align-items: stretch;                                                                                             
    }                                                                                                                     
                                                                                                                          
    .close-btn {                                                                                                          
        align-self: flex-end;                                                                                             
    }                                                                                                                     
}                                                                                                                         
                                                                                                                          
@media (max-width: 480px) {                                                                                               
    header h1 {                                                                                                           
        font-size: 1.5rem;                                                                                                
    }                                                                                                                     
                                                                                                                          
    header p {                                                                                                            
        font-size: 0.95rem;                                                                                               
    }                                                                                                                     
                                                                                                                          
    .doc-card {                                                                                                           
        padding: 1rem;                                                                                                    
    }                                                                                                                     
                                                                                                                          
    .doc-card .title {                                                                                                    
        font-size: 1rem;                                                                                                  
    }                                                                                                                     
                                                                                                                          
    .content-body {                                                                                                       
        padding: 1rem;                                                                                                    
    }                                                                                                                     
                                                                                                                          
    .content-body pre {                                                                                                   
        font-size: 0.8rem;                                                                                                
        padding: 0.75rem;                                                                                                 
    }                                                                                                                     
}                                                                                                                         
                                                                                                                          
/* ── Loading State ── */                                                                                                 
.loading {                                                                                                                
    text-align: center;                                                                                                   
    padding: 2rem;                                                                                                        
    color: var(--text-light);                                                                                             
}                                                                                                                         
                                                                                                                          
.loading::after {                                                                                                         
    content: '';                                                                                                          
    display: inline-block;                                                                                                
    width: 20px;                                                                                                          
    height: 20px;                                                                                                         
    border: 3px solid var(--border);                                                                                      
    border-top-color: var(--accent);                                                                                      
    border-radius: 50%;                                                                                                   
    animation: spin 0.8s linear infinite;                                                                                 
    margin-left: 0.5rem;                                                                                                  
    vertical-align: middle;                                                                                               
}                                                                                                                         
                                                                                                                          
@keyframes spin {                                                                                                         
    to { transform: rotate(360deg); }                                                                                     
}                                                                                                                         
                                                                                                                          
/* ── Focus Styles for Accessibility ── */                                                                                
:focus-visible {                                                                                                          
    outline: 3px solid var(--accent);                                                                                     
    outline-offset: 2px;                                                                                                  
}                                                                                                                         
                                                                                                                          
/* ── Print Styles ── */                                                                                                  
@media print {                                                                                                            
    header {                                                                                                              
        background: #fff !important;                                                                                      
        color: #000 !important;                                                                                           
        box-shadow: none !important;                                                                                      
    }                                                                                                                     
                                                                                                                          
    .controls {                                                                                                           
        display: none !important;                                                                                         
    }                                                                                                                     
                                                                                                                          
    .doc-card {                                                                                                           
        break-inside: avoid;                                                                                              
        box-shadow: none !important;                                                                                      
        border: 1px solid #ccc !important;                                                                                
    }                                                                                                                     
                                                                                                                          
    .close-btn {                                                                                                          
        display: none !important;                                                                                         
    }                                                                                                                     
}