body { font-family: Arial, sans-serif; margin: 20px; background: #f7f7f7; }
h1 { text-align: center; margin-bottom: 5px; }
/* Full-screen Loading Overlay */
#loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(3px);
    z-index: 99999; display: flex; flex-direction: column;
    justify-content: center; align-items: center; color: white;
}
.gear-icon { width: 80px; height: 80px; animation: spin 2s linear infinite; margin-bottom: 20px; fill: white; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.loading-text { font-size: 24px; font-weight: bold; text-align: center; }
.loading-subtext { font-size: 16px; color: #ddd; margin-top: 10px; text-align: center; }
/* Table Core Styles */
table.dataTable { background: white; border-collapse: separate !important; border-spacing: 0; }
.thumb { max-width: 101px; max-height: 88px; display: block; margin: 0 auto; }
td, th { vertical-align: middle; }
td.center-col { text-align: center; }
td.bold-col { font-weight: bold; }
/* The Sticky Layer Cake */
.tab-bar { 
    position: sticky; top: 0; z-index: 1000; background: #f7f7f7; 
    padding: 10px 0; text-align: center; margin-bottom: 0px; 
}
.legend-panel { 
    position: sticky; z-index: 990; background: #f7f7f7; 
    width: 100%; box-sizing: border-box; padding: 10px 0; margin: 0; 
}
div.dataTables_filter { 
    position: sticky; z-index: 980; background: #f7f7f7; 
    padding: 10px 0; margin-bottom: 0px; display: block; 
    width: 100%; float: none; text-align: center; 
    box-shadow: 0 2px 0 0 #f7f7f7; /* The Light Mode Caulk */
}
table.dataTable thead th, table.dataTable thead td { 
    position: sticky !important; z-index: 970 !important; 
    background-color: #ffffff !important; background-clip: padding-box !important;
    text-align: center; box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2); border-bottom: 1px solid #ddd;
}
/* UI Elements */
.reset-sort-btn { margin-left: 10px; padding: 4px 10px; border: 1px solid #bbb; border-radius: 4px; background: white; cursor: pointer; font-size: 12px; }
.reset-sort-btn:hover { background: #eee; }
.tab-button { padding: 10px 20px; margin: 0 5px; border: none; border-radius: 6px 6px 0 0; background: #ddd; cursor: pointer; font-size: 15px; }
.tab-button.active { background: white; font-weight: bold; box-shadow: 0 -2px 4px rgba(0,0,0,0.1); }
.legend-panel-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; width: fit-content; max-width: 95%; margin: 0 auto; background: white; border: 1px solid #ddd; border-radius: 6px; padding: 8px 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); font-size: 12px; }
.legend-entry { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.2); flex-shrink: 0; }
.legend-label { line-height: 1.3; }
#back-to-top { position: fixed; bottom: 30px; right: 30px; z-index: 9999; background-color: #7f8ec9; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 24px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.3); display: flex; justify-content: center; align-items: center; transition: background-color 0.2s; }
#back-to-top:hover { background-color: #5a6ab0; }
/* --- Loading Screen Pulse Animation --- */
.dreamlight-logo {
    width: 100px; /* Adjust size to fit your image */
    height: auto;
    animation: pulse 1.5s infinite ease-in-out;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); /* Adds a little magical glow */
}
@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}
/* --- Footer Styles --- */
.site-footer {
    text-align: center;
    padding: 30px 20px;
    margin-top: 50px;
    font-size: 13px;
    color: #666;
    border-top: 1px solid #ddd;
    background: #f7f7f7;
}
.site-footer p { margin: 5px 0; line-height: 1.5; }
/* =========================================
   DARK MODE OVERRIDES
========================================= */
/* Core Page */
body.dark-mode { background: #1a1a1a; color: #e0e0e0; }
body.dark-mode h1 { color: #fff; }
body.dark-mode .loading-info { color: #aaa; }
body.dark-mode .site-footer { background: #1a1a1a; color: #888; border-top: 1px solid #333; }

/* The Sticky Layer Cake Backgrounds */
body.dark-mode .tab-bar, 
body.dark-mode .legend-panel, 
body.dark-mode div.dataTables_filter { background: #1a1a1a; }
/* Theme Toggle Button */
#theme-toggle {
    margin-left: 15px; padding: 10px 15px; border: 1px solid #ccc; 
    border-radius: 6px; background: white; cursor: pointer; font-size: 14px;
}
body.dark-mode #theme-toggle { background: #333; color: #fff; border-color: #555; }
/* Tab Buttons */
body.dark-mode .tab-button { background: #333; color: #aaa; }
body.dark-mode .tab-button.active { background: #2d2d2d; color: #fff; box-shadow: 0 -2px 4px rgba(0,0,0,0.5); }
/* Legend & Search Elements */
body.dark-mode .legend-panel-inner { background: #2d2d2d; border-color: #444; color: #e0e0e0; }
body.dark-mode .legend-swatch { border-color: rgba(255,255,255,0.3); }
body.dark-mode div.dataTables_filter label { color: #e0e0e0; }
body.dark-mode input[type="search"] { background: #333; color: #fff; border: 1px solid #555; padding: 3px; }
body.dark-mode .reset-sort-btn { background: #333; color: #fff; border-color: #555; }
body.dark-mode .reset-sort-btn:hover { background: #444; }

/* The Table Itself */
body.dark-mode table.dataTable { background: #2d2d2d; border-color: #444; }
body.dark-mode table.dataTable thead th, 
body.dark-mode table.dataTable thead td { 
    background-color: #222 !important; 
    color: #fff !important;
    border-bottom: 1px solid #444 !important;
}
body.dark-mode table.dataTable tbody { color: #000; }
/* The Dark Mode Caulk */
body.dark-mode div.dataTables_filter { 
    box-shadow: 0 2px 0 0 #1a1a1a; 
}
/* Specifically target the DataTables sorting arrows in Dark Mode */
/* Replace default dark DataTables PNGs with custom white SVGs in Dark Mode */
body.dark-mode table.dataTable thead th.sorting {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M 2 5 L 6 1 L 10 5 Z M 2 7 L 6 11 L 10 7 Z' fill='%23ffffff' opacity='0.3'/%3E%3C/svg%3E") !important;
}
body.dark-mode table.dataTable thead th.sorting_asc {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M 2 5 L 6 1 L 10 5 Z' fill='%23ffffff'/%3E%3Cpath d='M 2 7 L 6 11 L 10 7 Z' fill='%23ffffff' opacity='0.3'/%3E%3C/svg%3E") !important;
}
body.dark-mode table.dataTable thead th.sorting_desc {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M 2 5 L 6 1 L 10 5 Z' fill='%23ffffff' opacity='0.3'/%3E%3Cpath d='M 2 7 L 6 11 L 10 7 Z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}
/* Position the Dark Mode SVG icons correctly and stop them from tiling */
body.dark-mode table.dataTable thead th.sorting,
body.dark-mode table.dataTable thead th.sorting_asc,
body.dark-mode table.dataTable thead th.sorting_desc {
    background-repeat: no-repeat !important; /* CRUCIAL: Stops the tiling seen in image_2.png */
    background-position: center right 10px !important; /* Position it like a normal column header */
}
/* --- Clickable ID Column --- */
table.dataTable tbody td:first-child {
    cursor: pointer;
    position: relative;
}
/* Light mode hover effect */
table.dataTable tbody td:first-child:hover {
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.3);
}
/* Dark mode hover effect */
body.dark-mode table.dataTable tbody td:first-child:hover {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.3);
}
/* --- Copy Toast Notification --- */
#copy-toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: #333; color: #fff; padding: 10px 20px; border-radius: 5px;
    opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none;
    z-index: 9999; font-weight: bold;
}
#copy-toast.show { opacity: 1; }
/* Footer link styling */
.footer-link {
    /* Bright color that pops on dark, legible on light */
    color: #e67e22; 
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    transition: color 0.2s ease;
}

/* Force it to stay the same color even after being clicked */
.footer-link:visited {
    color: #e67e22;
}

/* Hover effect */
.footer-link:hover {
    color: #ff9f43;
    text-decoration: none;
}

/* Dark mode adjustment if you want it even brighter */
body.dark-mode .footer-link {
    color: #f1c40f; /* A brighter yellow for dark mode contrast */
}

body.dark-mode .footer-link:visited {
    color: #f1c40f;
}

body.dark-mode .footer-link:hover {
    color: #fceea7;
}