:root {
    --bs-body-bg: #f0f2f5;         /* Soft "Facebook/LinkedIn" Gray */
    --bs-body-color: #212529;
}
        
.pin-display { font-size: 3rem; font-weight: 800; letter-spacing: 8px; color: var(--wisp-blue); cursor: pointer; }
#qrImage { max-width: 180px; border: 8px solid white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
/* Ensure cards stay crisp white in Light Mode */
.card {
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}
.file-item { border-radius: 8px; margin-bottom: 8px; border: 1px solid #eee !important; }
.copy-badge { cursor: pointer; font-size: 0.7rem; vertical-align: middle; }
#previewTitle {
    text-overflow: ellipsis;
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
}

body { 
    background-color: var(--bs-body-bg); 
    color: var(--bs-body-color);
    font-family: 'Inter', sans-serif; 
}

/* 2. DARK MODE OVERRIDES */
[data-bs-theme="dark"] {
    --bs-body-bg: #121212;         /* Deep Charcoal */
    --bs-body-color: #e0e0e0;
}

[data-bs-theme="dark"] .card {
    background-color: #1e1e1e;     /* Slightly lighter than body */
    border: 1px solid #2d2d2d;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}

/* Helper for file items to maintain contrast */
[data-bs-theme="dark"] .file-item {
    background-color: #252525 !important;
    border-color: #333 !important;
}

/* Ensure filenames are high-contrast in both modes */
.file-item span {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .file-item span {
    color: #ffffff; /* Brighter white for dark mode if desired */
}

#joinPwdInput:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    transition: all 0.2s ease-in-out;
}