* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background: #fff;
    color: #333;
    line-height: 1.5;
}
a { color: #000066; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

header {
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    padding: 15px 20px;
}
header h1 { font-size: 18px; color: #000066; font-weight: normal; }
header p { color: #666; font-size: 12px; margin-top: 4px; }

nav {
    background: #f3f3f3;
    padding: 8px 20px;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
}
nav a { margin-right: 15px; color: #000066; }
nav a.active { font-weight: bold; }

.search-bar {
    background: #eee;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
}
.search-bar form {
    display: flex;
    gap: 8px;
    max-width: 500px;
}
.search-bar input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
.search-bar input:focus {
    outline: none;
    border-color: #000066;
}
.search-bar button {
    padding: 8px 16px;
    background: #000066;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.search-bar button:hover { background: #0000aa; }

.stats {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}
.stat {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 12px 20px;
    flex: 1;
    min-width: 120px;
    text-align: center;
}
.stat-num { font-size: 24px; font-weight: bold; color: #000066; }
.stat-label { font-size: 11px; color: #666; text-transform: uppercase; }
.stat-link { text-decoration: none; flex: 1; min-width: 120px; }
.stat-link:hover .stat { background: #f0f0f0; border-color: #000066; }
.stat-link .stat { margin: 0; }

.search-form {
    margin: 20px 0;
    display: flex;
    gap: 10px;
}
.search-form input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #666;
    font-size: 13px;
    font-family: inherit;
}
.search-form button {
    padding: 8px 20px;
    background: #f0f0f0;
    border: 1px solid #666;
    cursor: pointer;
    font-size: 13px;
}
.search-form button:hover { background: #e0e0e0; }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.gallery-item {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    transition: all 0.15s;
}
.gallery-item:hover {
    background: #f0f0f0;
    border-color: #000066;
}
.gallery-item a { display: block; color: inherit; text-decoration: none; }
.gallery-item .thumb {
    width: 100%;
    height: 140px;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    overflow: hidden;
}
.gallery-item .thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.gallery-item .id {
    font-family: monospace;
    font-size: 10px;
    color: #000066;
    word-break: break-all;
}
.gallery-item .dataset {
    font-size: 9px;
    color: #888;
    margin-top: 2px;
}
.gallery-item .pages {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,102,0.85);
    color: #fff;
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 3px;
}
.gallery-item .pages.multi { background: #c00; }
.gallery-item .thumb { position: relative; }
.badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 3px;
    margin-left: 5px;
}
.badge-video { background: #9c27b0; color: #fff; }
.badge-native { background: #ff9800; color: #fff; }

.metadata {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 15px;
    margin: 15px 0;
    font-size: 12px;
}
.metadata h3 {
    font-size: 13px;
    color: #000066;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}
.metadata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.metadata-item {
    display: flex;
    gap: 8px;
}
.metadata-label {
    color: #666;
    min-width: 90px;
}
.metadata-value {
    color: #000;
    font-family: monospace;
}

.filters {
    display: flex;
    gap: 8px;
    margin: 15px 0;
    flex-wrap: wrap;
}
.filter-btn {
    padding: 6px 14px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 12px;
    text-decoration: none;
    color: #333;
}
.filter-btn:hover { background: #f0f0f0; text-decoration: none; }
.filter-btn.active { background: #000066; color: #fff; border-color: #000066; }

.loading {
    text-align: center;
    padding: 30px;
    color: #666;
}
.loading.hidden { display: none; }

.viewer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #1a1a1a;
    display: flex;
    flex-direction: column;
}
.viewer-header {
    background: #333;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.viewer-header .info { font-size: 14px; }
.viewer-header .info .id { color: #6cf; font-family: monospace; }
.viewer-header .info .pos { color: #888; margin-left: 10px; font-size: 12px; }
.viewer-nav { display: flex; gap: 8px; }
.viewer-nav a {
    padding: 6px 14px;
    background: #555;
    color: #fff;
    border-radius: 3px;
    font-size: 12px;
    text-decoration: none;
}
.viewer-nav a:hover { background: #666; }
.viewer-nav a.home { background: #000066; }

.viewer-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pdf-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

.keyboard-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 11px;
}
.keyboard-hint kbd {
    background: #555;
    padding: 2px 6px;
    border-radius: 3px;
    margin: 0 3px;
}

footer {
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: 11px;
    border-top: 1px solid #eee;
    margin-top: 30px;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 30px 0;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 13px;
    min-width: 40px;
    text-align: center;
}
.pagination a:hover { background: #f0f0f0; text-decoration: none; }
.pagination .current { background: #000066; color: #fff; border-color: #000066; }

h2 { font-size: 14px; color: #000066; margin: 20px 0 10px; font-weight: normal; }

.social-section {
    background: #222;
    padding: 20px;
    color: #fff;
    max-height: 40vh;
    overflow-y: auto;
}
.social-section h3 {
    color: #6cf;
    font-size: 14px;
    margin: 0 0 15px 0;
    border-bottom: 1px solid #444;
    padding-bottom: 8px;
}
.tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.tag {
    background: #333;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tag-name { color: #6cf; }
.tag.downvoted { opacity: 0.5; }
.tag.downvoted .tag-name { color: #888; }
.tag-votes { display: flex; gap: 4px; }
.tag-votes button {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 12px;
}
.tag-votes button:hover { color: #fff; }
.tag-votes .upvote:hover { color: #0c0; }
.tag-votes .downvote:hover { color: #c00; }
.tag-score { color: #888; font-size: 11px; }
.tag-score.positive { color: #0c0; }
.tag-score.negative { color: #c00; }

.add-tag-form, .add-comment-form {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}
.add-tag-form input, .add-comment-form textarea {
    flex: 1;
    padding: 8px;
    border: 1px solid #444;
    background: #333;
    color: #fff;
    font-size: 12px;
    font-family: inherit;
}
.add-tag-form button, .add-comment-form button {
    padding: 8px 16px;
    background: #000066;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 12px;
}
.add-tag-form button:hover, .add-comment-form button:hover { background: #0000aa; }

.comments-list { margin-top: 10px; }
.comment {
    background: #333;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 3px;
    display: flex;
    gap: 10px;
}
.comment-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 30px;
}
.comment-votes .vote-btn {
    background: transparent;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
}
.comment-votes .vote-btn:hover { color: #ff6600; }
.comment-votes .vote-btn.upvote:hover { color: #ff6600; }
.comment-votes .vote-btn.downvote:hover { color: #0066ff; }
.comment-votes .vote-score { color: #888; font-size: 12px; font-weight: bold; }
.comment-body { flex: 1; }
.comment-content { color: #ddd; font-size: 13px; margin-bottom: 5px; }
.comment-time { color: #666; font-size: 11px; }

.trending { margin: 20px 0; }
.trending h2 { margin-bottom: 10px; }
.trending-list { display: flex; gap: 10px; flex-wrap: wrap; }
.trending-item {
    background: #f5f5f5;
    padding: 8px 12px;
    border: 1px solid #ddd;
    font-size: 12px;
}
.trending-item:hover { background: #eee; border-color: #000066; }
.trending-item .views { color: #888; font-size: 10px; margin-left: 5px; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin: 15px 0; }
.tag-cloud a, .tag-cloud .tag-link {
    text-decoration: none;
}
.tag-cloud .tag {
    background: #e8e8e8;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 11px;
    color: #000066;
    display: inline-block;
}
.tag-cloud .tag:hover { background: #ddd; }

/* Document voting */
.doc-votes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 8px 12px;
    background: #333;
    border-radius: 4px;
    color: #ccc;
}
.doc-votes .vote-btn {
    background: #ddd;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
}
.doc-votes .vote-btn:hover { background: #ccc; }
.doc-votes .vote-btn.upvote:hover { background: #c8e6c9; color: #2e7d32; }
.doc-votes .vote-btn.downvote:hover { background: #ffcdd2; color: #c62828; }
.doc-votes .doc-score { font-size: 16px; font-weight: bold; min-width: 30px; text-align: center; }

/* Homepage sections */
.latest-comments, .top-comments, .top-rated, .most-discussed { margin: 25px 0; padding: 15px; background: #f5f5f5; border-radius: 8px; }
.latest-comments h2, .top-comments h2, .top-rated h2, .most-discussed h2 { margin-top: 0; font-size: 18px; color: #333; }
.home-comments .comment-score { background: #28a745; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 10px; margin-left: 8px; }
.home-comments .comment { background: #fff; padding: 10px; margin: 8px 0; border-radius: 4px; border: 1px solid #ddd; }
.home-comments .comment-meta { font-size: 11px; color: #666; margin-bottom: 4px; }
.home-comments .comment-doc { font-weight: bold; color: #000066; }
.home-comments .comment-content { font-size: 13px; line-height: 1.4; }

/* Badge styles */
.rating-badge { position: absolute; top: 4px; left: 4px; background: #28a745; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: bold; }
.comment-badge { position: absolute; bottom: 4px; left: 4px; background: #6c757d; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 10px; }
.view-count { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.7); color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 10px; }

/* Tag categories */
.tag-category { display: inline-block; margin-right: 3px; padding: 1px 4px; border-radius: 2px; font-size: 9px; font-weight: bold; text-transform: uppercase; }
.tag-category.person { background: #dc3545; color: #fff; }
.tag-category.location { background: #007bff; color: #fff; }
.tag-category.org { background: #28a745; color: #fff; }
.tag-category.event { background: #ffc107; color: #000; }
.tag-category.other { background: #6c757d; color: #fff; }

/* Tag with category */
.tag.person { border-left: 3px solid #dc3545; }
.tag.location { border-left: 3px solid #007bff; }
.tag.org { border-left: 3px solid #28a745; }
.tag.event { border-left: 3px solid #ffc107; }

/* Add tag form with category select */
.add-tag-form select { padding: 6px; margin-right: 5px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; }

/* Tag help */
.tag-help { font-size: 11px; color: #666; margin-top: 8px; font-style: italic; }
.tag-help code { background: #e8e8e8; padding: 1px 4px; border-radius: 2px; }

/* Dark mode toggle button */
.theme-toggle { background: transparent; border: 1px solid #ddd; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; margin-left: 10px; }
.theme-toggle:hover { background: #eee; }

/* Dark mode styles - applies to both system preference AND manual toggle */
@media (prefers-color-scheme: dark) {
    body:not(.light-mode) { background: #1a1a1a; color: #e0e0e0; }
    body:not(.light-mode) header { background: #0a0a2a; }
    body:not(.light-mode) header h1 { color: #7777ff; }
    body:not(.light-mode) nav a { color: #aaa; }
    body:not(.light-mode) nav a:hover { color: #fff; }
    body:not(.light-mode) .theme-toggle { border-color: #555; color: #ddd; }
    body:not(.light-mode) .theme-toggle:hover { background: #333; }
    body:not(.light-mode) .search-bar input { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
    body:not(.light-mode) .search-bar input::placeholder { color: #666; }
    body:not(.light-mode) .search-bar input:focus { border-color: #5555cc; }
    body:not(.light-mode) .search-bar button { background: #3333aa; }
    body:not(.light-mode) .search-bar button:hover { background: #4444cc; }
    body:not(.light-mode) .stat { background: #252525; }
    body:not(.light-mode) .stat-num { color: #7777ff; }
    body:not(.light-mode) .stat-label { color: #999; }
    body:not(.light-mode) .gallery-item { background: #252525; border-color: #333; }
    body:not(.light-mode) .gallery-item:hover { border-color: #5555cc; }
    body:not(.light-mode) .gallery-title { color: #ddd; }
    body:not(.light-mode) .gallery-meta { color: #888; }
    body:not(.light-mode) #loading { color: #888; }
    body:not(.light-mode) .viewer-nav { background: #252525; border-color: #333; }
    body:not(.light-mode) .viewer-nav a { color: #7777ff; }
    body:not(.light-mode) .viewer-title { color: #e0e0e0; }
    body:not(.light-mode) .viewer-meta { color: #888; }
    body:not(.light-mode) .pos { color: #888; }
    body:not(.light-mode) .keyboard-hint { color: #666; background: #252525; }
    body:not(.light-mode) .keyboard-hint kbd { background: #333; color: #ddd; border-color: #444; }
    body:not(.light-mode) .pdf-container { border-color: #333; }
    body:not(.light-mode) .trending-item { background: #2a2a2a; border-color: #444; color: #ddd; }
    body:not(.light-mode) .trending-item:hover { background: #333; border-color: #5555cc; }
    body:not(.light-mode) .tag-cloud .tag { background: #333; color: #7777ff; }
    body:not(.light-mode) .tag-cloud .tag:hover { background: #444; }
    body:not(.light-mode) .latest-comments, body:not(.light-mode) .top-comments, body:not(.light-mode) .top-rated, body:not(.light-mode) .most-discussed { background: #252525; }
    body:not(.light-mode) .latest-comments h2, body:not(.light-mode) .top-comments h2, body:not(.light-mode) .top-rated h2, body:not(.light-mode) .most-discussed h2 { color: #ddd; }
    body:not(.light-mode) .home-comments .comment { background: #2a2a2a; border-color: #444; }
    body:not(.light-mode) .home-comments .comment-meta { color: #888; }
    body:not(.light-mode) .home-comments .comment-doc { color: #7777ff; }
    body:not(.light-mode) input, body:not(.light-mode) select, body:not(.light-mode) textarea { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
    body:not(.light-mode) .tag-help { color: #888; }
    body:not(.light-mode) .tag-help code { background: #333; color: #ddd; }
}

/* Manual dark mode toggle (overrides system light preference) */
body.dark-mode { background: #1a1a1a; color: #e0e0e0; }
body.dark-mode header { background: #0a0a2a; }
body.dark-mode header h1 { color: #7777ff; }
body.dark-mode nav a { color: #aaa; }
body.dark-mode nav a:hover { color: #fff; }
body.dark-mode .theme-toggle { border-color: #555; color: #ddd; }
body.dark-mode .theme-toggle:hover { background: #333; }
body.dark-mode .search-bar input { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.dark-mode .search-bar input::placeholder { color: #666; }
body.dark-mode .search-bar input:focus { border-color: #5555cc; }
body.dark-mode .search-bar button { background: #3333aa; }
body.dark-mode .search-bar button:hover { background: #4444cc; }
body.dark-mode .stat { background: #252525; }
body.dark-mode .stat-num { color: #7777ff; }
body.dark-mode .stat-label { color: #999; }
body.dark-mode .gallery-item { background: #252525; border-color: #333; }
body.dark-mode .gallery-item:hover { border-color: #5555cc; }
body.dark-mode .gallery-title { color: #ddd; }
body.dark-mode .gallery-meta { color: #888; }
body.dark-mode #loading { color: #888; }
body.dark-mode .viewer-nav { background: #252525; border-color: #333; }
body.dark-mode .viewer-nav a { color: #7777ff; }
body.dark-mode .viewer-title { color: #e0e0e0; }
body.dark-mode .viewer-meta { color: #888; }
body.dark-mode .pos { color: #888; }
body.dark-mode .keyboard-hint { color: #666; background: #252525; }
body.dark-mode .keyboard-hint kbd { background: #333; color: #ddd; border-color: #444; }
body.dark-mode .pdf-container { border-color: #333; }
body.dark-mode .trending-item { background: #2a2a2a; border-color: #444; color: #ddd; }
body.dark-mode .trending-item:hover { background: #333; border-color: #5555cc; }
body.dark-mode .tag-cloud .tag { background: #333; color: #7777ff; }
body.dark-mode .tag-cloud .tag:hover { background: #444; }
body.dark-mode .latest-comments, body.dark-mode .top-comments, body.dark-mode .top-rated, body.dark-mode .most-discussed { background: #252525; }
body.dark-mode .latest-comments h2, body.dark-mode .top-comments h2, body.dark-mode .top-rated h2, body.dark-mode .most-discussed h2 { color: #ddd; }
body.dark-mode .home-comments .comment { background: #2a2a2a; border-color: #444; }
body.dark-mode .home-comments .comment-meta { color: #888; }
body.dark-mode .home-comments .comment-doc { color: #7777ff; }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.dark-mode .tag-help { color: #888; }
body.dark-mode .tag-help code { background: #333; color: #ddd; }