:root{
  --bg: #f6f8f6;
  --surface: #ffffff;
  --text: #122214;
  --muted: #6b7a6b;
  --accent: #1f8f4a;
  --footer-color: hsl(120, 18%, 96%);
  --footer-bg: #041b44;
  --footer-text: #ddd;
}
[data-theme="dark"]{
  --bg: #07120d;
  --surface: #0b1a14;
  --text: #e6f0e8;
  --muted: #9fbda9;
  --accent: #2fd36a;
  --footer-color: #cfe6d6;
  --footer-bg: #041b44;
  --footer-text: #cfe6d6;
}

html,body{background:var(--bg);color:var(--text);transition:background .18s ease,color .18s ease}
a{color:var(--accent)}

/* Professional page loader */
#page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(245, 249, 246, 0.98), rgba(255,255,255,0.98));
  z-index: 99999;
  transition: opacity 0.75s ease, visibility 0.75s ease;
}

html[data-theme="dark"] #page-loader {
  background: linear-gradient(135deg, rgba(7,18,13,0.98), rgba(11,26,20,0.98));
}

#page-loader.hide {
  opacity: 0;
  visibility: hidden;
}

.loader-logo {
  position: absolute;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: logoPulse 1.8s ease-in-out infinite;
}

.loader-logo img {
  width: 78px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 26px rgba(31, 143, 74, 0.22));
}

.loader-ring {
  width: 134px;
  height: 134px;
  border-radius: 50%;
  border: 3px solid rgba(19, 61, 28, 0.12);
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  animation: rotateRing 1s linear infinite;
  box-shadow: 0 0 0 10px rgba(31, 143, 74, 0.04);
}

html[data-theme="dark"] .loader-ring {
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: #2fd36a;
  border-right-color: #2fd36a;
}

@keyframes rotateRing {
  to { transform: rotate(360deg); }
}

@keyframes logoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.82; }
}

body {
  opacity: 1;
  transition: opacity 0.7s ease;
}

body.page-content-loaded {
  opacity: 1;
}

/* Footer consistency */
footer, .footer-bottom, .footer p, .footer-bottom p{margin: 6px 0;font-family:Inter, system-ui, -apple-system, Arial, sans-serif; font-size:13px; color:var(--footer-color);}

/* Floating theme toggle */
.theme-toggle{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border:none;cursor:grab;font-size:18px;box-shadow:0 10px 24px rgba(0,0,0,0.18);position:fixed;right:20px;left:auto;top:92px;bottom:auto;z-index:1000;touch-action:none;transition:left .14s linear, top .14s linear}
.theme-toggle.secondary{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.terms-theme-toggle{right:20px;top:92px;bottom:auto;z-index:1000}

/* Keep all support/floating action icons visible over the full page above the footer */
.floating-icons, .floating, .floating-support{
  position: fixed;
  right:20px;
  bottom:120px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  z-index:9999;
}

.floating-icons a, .floating a, .floating-support a,
.floating-icons button, .floating button, .floating-support button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.floating-icons a:hover, .floating a:hover, .floating-support a:hover,
.floating-icons button:hover, .floating button:hover, .floating-support button:hover {
  transform:translateY(-1px);
}

/* Footer social icons — make images fill their containers and be clearly visible */
.footer-social-links{display:flex;gap:10px;align-items:center}
.footer-social-links a{display:inline-flex;width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center;background:transparent;text-decoration:none;overflow:hidden;padding:0}
.footer-social-links a img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px;max-width:none;max-height:none}

.footer-social-links a svg{width:100%;height:100%;fill:currentColor}
/* Fallback: ensure any image inside footers scales to its container */
footer a img, .footer a img, .support a img, .footer-bottom img {max-width:100%;height:auto;display:block}

/* Ensure footer links remain visible in both themes */
/* Footer links: enforce readable color in both light and dark themes */
footer, .footer-bottom, footer p, .footer-bottom p, footer a, .footer-bottom a { color: var(--footer-color) !important; text-decoration: underline; }
footer a:hover, .footer a:hover, .footer-bottom a:hover { color: var(--accent) !important; }

/* High-specificity footer override to keep page footers consistent with the shared theme */
html body footer,
html body footer p,
html body footer a,
html body footer li,
html body footer ul,
html body footer h3,
html body .footer-bottom,
html body .footer-bottom p,
html body .footer-bottom a {
  background: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  text-decoration: none !important;
}

html body footer {
  text-align: center !important;
  padding: 40px 18px !important;
  margin-top: 30px !important;
}

html body footer p {
  margin: 8px 0 !important;
  font-size: 0.95rem !important;
}

/* Dashboard dark theme support */
html[data-theme="dark"] body {
  background: #07120d !important;
  color: #e6f0e8 !important;
}

html[data-theme="dark"] .sidebar {
  background: linear-gradient(135deg, #0d2c1e 0%, #143b2a 100%) !important;
  box-shadow: 2px 0 10px rgba(0,0,0,0.32) !important;
}

html[data-theme="dark"] header,
html[data-theme="dark"] .section,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .table-block,
html[data-theme="dark"] .card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .gallery-panel,
html[data-theme="dark"] .gallery-card,
html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .admin-info,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .thread-bubble,
html[data-theme="dark"] .notification-panel,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .section-body,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  background: #0b1a14 !important;
  color: #e6f0e8 !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
}

html[data-theme="dark"] .sidebar-nav a,
html[data-theme="dark"] .header-btn,
html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .admin-info,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-tertiary,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .section-header-actions .btn {
  color: #e6f0e8 !important;
}

html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select {
  background: #0d1f18 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

html[data-theme="dark"] .page-title p,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat-change,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .modal-header h2,
html[data-theme="dark"] .table th,
html[data-theme="dark"] td,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .thread-bubble-meta {
  color: #cfe6d6 !important;
}

html[data-theme="dark"] th {
  background: rgba(255,255,255,0.04) !important;
  color: #dfeee3 !important;
}

html[data-theme="dark"] .sidebar-nav a:hover,
html[data-theme="dark"] .sidebar-nav a.active,
html[data-theme="dark"] .header-btn:hover,
html[data-theme="dark"] .btn-primary:hover {
  filter: brightness(1.08);
}

html[data-theme="dark"] .thread-bubble.self {
  background: rgba(34, 197, 94, 0.18) !important;
  border-color: rgba(34,197,94,0.35) !important;
}

html[data-theme="dark"] .thread-bubble.admin {
  background: rgba(59, 130, 246, 0.14) !important;
  border-color: rgba(96,165,250,0.28) !important;
}

html[data-theme="dark"] .thread-bubble.system {
  background: rgba(245, 158, 11, 0.13) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: #f8dca2 !important;
}

/* Site footer layout (copied from about.html) */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:40px 0;font-family:Poppins,Arial,Helvetica,sans-serif}
.site-footer .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;max-width:1100px;margin:0 auto;padding:0 18px}
.site-footer .footer-grid > div{display:flex;flex-direction:column;align-items:center;text-align:center}
.site-footer h3{color:var(--footer-text);margin-bottom:12px;font-size:16px;text-align:center}
.site-footer p{text-align:center}
.site-footer ul{list-style:none;padding:0;margin:0;display:inline-block;text-align:center}
.site-footer ul li{margin-bottom:10px;display:flex;justify-content:center;align-items:center}
.site-footer a{display:block;text-align:center}
.site-footer a:hover{color:var(--accent)}
.footer-social{margin-top:20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.footer-social-title{display:block;font-size:13px;font-weight:700;color:var(--footer-text);margin:0 0 12px;text-transform:uppercase;letter-spacing:0.12em}
.footer-social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;justify-content:center}
.footer-social-links a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));color:var(--footer-text);border:1px solid rgba(255,255,255,0.08);font-weight:700;font-size:14px;transition:all 0.18s ease;box-shadow:0 6px 14px rgba(0,0,0,0.10);padding:0;overflow:hidden}
.footer-social-links a img{width:100%;height:100%;display:block;object-fit:cover;margin:0;border-radius:6px;max-width:none;max-height:none}
.site-footer .footer-bottom{margin-top:26px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.08);text-align:center;font-size:13px}
:root{
  --bg: #f6f8f6;
  --surface: #ffffff;
  --text: #122214;
  --muted: #6b7a6b;
  --accent: #1f8f4a;
  --footer-color: hsl(120, 18%, 96%);
  --footer-bg: #041b44;
  --footer-text: #ddd;
}
[data-theme="dark"]{
  --bg: #07120d;
  --surface: #0b1a14;
  --text: #e6f0e8;
  --muted: #9fbda9;
  --accent: #2fd36a;
  --footer-color: #cfe6d6;
  --footer-bg: #041b44;
  --footer-text: #cfe6d6;
}

html,body{background:var(--bg);color:var(--text);transition:background .18s ease,color .18s ease}
a{color:var(--accent)}

/* Professional page loader */
#page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(245, 249, 246, 0.98), rgba(255,255,255,0.98));
  z-index: 99999;
  transition: opacity 0.75s ease, visibility 0.75s ease;
}

html[data-theme="dark"] #page-loader {
  background: linear-gradient(135deg, rgba(7,18,13,0.98), rgba(11,26,20,0.98));
}

#page-loader.hide {
  opacity: 0;
  visibility: hidden;
}

.loader-logo {
  position: absolute;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: logoPulse 1.8s ease-in-out infinite;
}

.loader-logo img {
  width: 78px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 26px rgba(31, 143, 74, 0.22));
}

.loader-ring {
  width: 134px;
  height: 134px;
  border-radius: 50%;
  border: 3px solid rgba(19, 61, 28, 0.12);
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  animation: rotateRing 1s linear infinite;
  box-shadow: 0 0 0 10px rgba(31, 143, 74, 0.04);
}

html[data-theme="dark"] .loader-ring {
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: #2fd36a;
  border-right-color: #2fd36a;
}

@keyframes rotateRing {
  to { transform: rotate(360deg); }
}

@keyframes logoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.82; }
}

body {
  opacity: 1;
  transition: opacity 0.7s ease;
}

body.page-content-loaded {
  opacity: 1;
}

/* Footer consistency */
footer, .footer-bottom, .footer p, .footer-bottom p{font-family:Inter, system-ui, -apple-system, Arial, sans-serif; font-size:14px; color:var(--footer-color);}

/* Floating theme toggle */
.theme-toggle{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border:none;cursor:pointer;font-size:18px;box-shadow:0 10px 24px rgba(0,0,0,0.18);position:fixed;right:20px;top:92px;bottom:auto;z-index:1000}
.theme-toggle.secondary{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.terms-theme-toggle{right:20px;top:92px;bottom:auto;z-index:1000}

/* Keep all support/floating action icons visible over the full page above the footer */
.floating-icons, .floating, .floating-support{
  position: fixed;
  right:20px;
  bottom:120px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  z-index:9999;
}

.floating-icons a, .floating a, .floating-support a,
.floating-icons button, .floating button, .floating-support button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.floating-icons a:hover, .floating a:hover, .floating-support a:hover,
.floating-icons button:hover, .floating button:hover, .floating-support button:hover {
  transform:translateY(-1px);
}

/* Footer social icons — make images fill their containers and be clearly visible */
.footer-social-links{display:flex;gap:10px;align-items:center}
.footer-social-links a{display:inline-flex;width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center;background:transparent;text-decoration:none;overflow:hidden;padding:0}
.footer-social-links a img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px;max-width:none;max-height:none}

.footer-social-links a svg{width:100%;height:100%;fill:currentColor}
/* Fallback: ensure any image inside footers scales to its container */
footer a img, .footer a img, .support a img, .footer-bottom img {max-width:100%;height:auto;display:block}

/* Ensure footer links remain visible in both themes */
/* Footer links: enforce readable color in both light and dark themes */
footer, .footer-bottom, footer p, .footer-bottom p, footer a, .footer-bottom a { color: var(--footer-color) !important; text-decoration: underline; }
footer a:hover, .footer a:hover, .footer-bottom a:hover { color: var(--accent) !important; }

/* High-specificity footer override to keep page footers consistent with the shared theme */
html body footer,
html body footer p,
html body footer a,
html body footer li,
html body footer ul,
html body footer h3,
html body .footer-bottom,
html body .footer-bottom p,
html body .footer-bottom a {
  background: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  text-decoration: none !important;
}

html body footer {
  text-align: center !important;
  padding: 40px 18px !important;
  margin-top: 30px !important;
}

html body footer p {
  margin: 8px 0 !important;
  font-size: 0.95rem !important;
}

/* Dashboard dark theme support */
html[data-theme="dark"] body {
  background: #07120d !important;
  color: #e6f0e8 !important;
}

html[data-theme="dark"] .sidebar {
  background: linear-gradient(135deg, #0d2c1e 0%, #143b2a 100%) !important;
  box-shadow: 2px 0 10px rgba(0,0,0,0.32) !important;
}

html[data-theme="dark"] header,
html[data-theme="dark"] .section,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .table-block,
html[data-theme="dark"] .card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .gallery-panel,
html[data-theme="dark"] .gallery-card,
html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .admin-info,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .thread-bubble,
html[data-theme="dark"] .notification-panel,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .section-body,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  background: #0b1a14 !important;
  color: #e6f0e8 !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
}

html[data-theme="dark"] .sidebar-nav a,
html[data-theme="dark"] .header-btn,
html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .admin-info,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-tertiary,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .section-header-actions .btn {
  color: #e6f0e8 !important;
}

html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select {
  background: #0d1f18 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

html[data-theme="dark"] .page-title p,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat-change,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .modal-header h2,
html[data-theme="dark"] .table th,
html[data-theme="dark"] td,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .thread-bubble-meta {
  color: #cfe6d6 !important;
}

html[data-theme="dark"] th {
  background: rgba(255,255,255,0.04) !important;
  color: #dfeee3 !important;
}

html[data-theme="dark"] .sidebar-nav a:hover,
html[data-theme="dark"] .sidebar-nav a.active,
html[data-theme="dark"] .header-btn:hover,
html[data-theme="dark"] .btn-primary:hover {
  filter: brightness(1.08);
}

html[data-theme="dark"] .thread-bubble.self {
  background: rgba(34, 197, 94, 0.18) !important;
  border-color: rgba(34,197,94,0.35) !important;
}

html[data-theme="dark"] .thread-bubble.admin {
  background: rgba(59, 130, 246, 0.14) !important;
  border-color: rgba(96,165,250,0.28) !important;
}

html[data-theme="dark"] .thread-bubble.system {
  background: rgba(245, 158, 11, 0.13) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: #f8dca2 !important;
}

/* Site footer layout (copied from about.html) */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:40px 0;font-family:Poppins,Arial,Helvetica,sans-serif}
.site-footer .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;max-width:1100px;margin:0 auto;padding:0 18px}
.site-footer .footer-grid > div{display:flex;flex-direction:column;align-items:center;text-align:center}
.site-footer h3{color:var(--footer-text);margin-bottom:12px;font-size:16px;text-align:center}
.site-footer p{text-align:center}
.site-footer ul{list-style:none;padding:0;margin:0;display:inline-block;text-align:center}
.site-footer ul li{margin-bottom:10px;display:flex;justify-content:center;align-items:center}
.site-footer a{display:block;text-align:center}
.site-footer a:hover{color:var(--accent)}
.footer-social{margin-top:20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.footer-social-title{display:block;font-size:13px;font-weight:700;color:var(--footer-text);margin:0 0 12px;text-transform:uppercase;letter-spacing:0.12em}
.footer-social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;justify-content:center}
.footer-social-links a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));color:var(--footer-text);border:1px solid rgba(255,255,255,0.08);font-weight:700;font-size:14px;transition:all 0.18s ease;box-shadow:0 6px 14px rgba(0,0,0,0.10);padding:0;overflow:hidden}
.footer-social-links a img{width:100%;height:100%;display:block;object-fit:cover;margin:0;border-radius:6px;max-width:none;max-height:none}
.site-footer .footer-bottom{margin-top:26px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.08);text-align:center;font-size:13px}
:root{
  --bg: #f6f8f6;
  --surface: #ffffff;
  --text: #122214;
  --muted: #6b7a6b;
  --accent: #1f8f4a;
  --footer-color: hsl(120, 18%, 96%);
  --footer-bg: #041b44;
  --footer-text: #ddd;
}
[data-theme="dark"]{
  --bg: #07120d;
  --surface: #0b1a14;
  --text: #e6f0e8;
  --muted: #9fbda9;
  --accent: #2fd36a;
  --footer-color: #cfe6d6;
  --footer-bg: #041b44;
  --footer-text: #cfe6d6;
}

html,body{background:var(--bg);color:var(--text);transition:background .18s ease,color .18s ease}
a{color:var(--accent)}

/* Professional page loader */
#page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(245, 249, 246, 0.98), rgba(255,255,255,0.98));
  z-index: 99999;
  transition: opacity 0.75s ease, visibility 0.75s ease;
}

html[data-theme="dark"] #page-loader {
  background: linear-gradient(135deg, rgba(7,18,13,0.98), rgba(11,26,20,0.98));
}

#page-loader.hide {
  opacity: 0;
  visibility: hidden;
}

.loader-logo {
  position: absolute;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: logoPulse 1.8s ease-in-out infinite;
}

.loader-logo img {
  width: 78px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 26px rgba(31, 143, 74, 0.22));
}

.loader-ring {
  width: 134px;
  height: 134px;
  border-radius: 50%;
  border: 3px solid rgba(19, 61, 28, 0.12);
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  animation: rotateRing 1s linear infinite;
  box-shadow: 0 0 0 10px rgba(31, 143, 74, 0.04);
}

html[data-theme="dark"] .loader-ring {
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: #2fd36a;
  border-right-color: #2fd36a;
}

@keyframes rotateRing {
  to { transform: rotate(360deg); }
}

@keyframes logoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.82; }
}

body {
  opacity: 1;
  transition: opacity 0.7s ease;
}

body.page-content-loaded {
  opacity: 1;
}

/* Footer consistency */
footer, .footer-bottom, .footer p, .footer-bottom p{font-family:Inter, system-ui, -apple-system, Arial, sans-serif; font-size:12px; color:var(--footer-color);}

/* Floating theme toggle */
.theme-toggle{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border:none;cursor:pointer;font-size:18px;box-shadow:0 10px 24px rgba(0,0,0,0.18);position:fixed;right:20px;top:92px;bottom:auto;z-index:1000}
.theme-toggle.secondary{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.terms-theme-toggle{right:20px;top:92px;bottom:auto;z-index:1000}

/* Keep all support/floating action icons visible over the full page above the footer */
.floating-icons, .floating, .floating-support{
  position: fixed;
  right:20px;
  bottom:120px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  z-index:9999;
}

.floating-icons a, .floating a, .floating-support a,
.floating-icons button, .floating button, .floating-support button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.floating-icons a:hover, .floating a:hover, .floating-support a:hover,
.floating-icons button:hover, .floating button:hover, .floating-support button:hover {
  transform:translateY(-1px);
}

/* Footer social icons — make images fill their containers and be clearly visible */
.footer-social-links{display:flex;gap:10px;align-items:center}
.footer-social-links a{display:inline-flex;width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center;background:transparent;text-decoration:none;overflow:hidden;padding:0}
.footer-social-links a img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px;max-width:none;max-height:none}

.footer-social-links a svg{width:100%;height:100%;fill:currentColor}
/* Fallback: ensure any image inside footers scales to its container */
footer a img, .footer a img, .support a img, .footer-bottom img {max-width:100%;height:auto;display:block}

/* Ensure footer links remain visible in both themes */
/* Footer links: enforce readable color in both light and dark themes */
footer, .footer-bottom, footer p, .footer-bottom p, footer a, .footer-bottom a { color: var(--footer-color) !important; text-decoration: underline; }
footer a:hover, .footer a:hover, .footer-bottom a:hover { color: var(--accent) !important; }

/* High-specificity footer override to keep page footers consistent with the shared theme */
html body footer,
html body footer p,
html body footer a,
html body footer li,
html body footer ul,
html body footer h3,
html body .footer-bottom,
html body .footer-bottom p,
html body .footer-bottom a {
  background: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  text-decoration: none !important;
}

html body footer {
  text-align: center !important;
  padding: 40px 18px !important;
  margin-top: 30px !important;
}

html body footer p {
  margin: 8px 0 !important;
  font-size: 0.95rem !important;
}

/* Dashboard dark theme support */
html[data-theme="dark"] body {
  background: #07120d !important;
  color: #e6f0e8 !important;
}

html[data-theme="dark"] .sidebar {
  background: linear-gradient(135deg, #0d2c1e 0%, #143b2a 100%) !important;
  box-shadow: 2px 0 10px rgba(0,0,0,0.32) !important;
}

html[data-theme="dark"] header,
html[data-theme="dark"] .section,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .table-block,
html[data-theme="dark"] .card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .gallery-panel,
html[data-theme="dark"] .gallery-card,
html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .admin-info,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .thread-bubble,
html[data-theme="dark"] .notification-panel,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .section-body,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  background: #0b1a14 !important;
  color: #e6f0e8 !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
}

html[data-theme="dark"] .sidebar-nav a,
html[data-theme="dark"] .header-btn,
html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .admin-info,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-tertiary,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .section-header-actions .btn {
  color: #e6f0e8 !important;
}

html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select {
  background: #0d1f18 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

html[data-theme="dark"] .page-title p,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat-change,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .modal-header h2,
html[data-theme="dark"] .table th,
html[data-theme="dark"] td,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .thread-bubble-meta {
  color: #cfe6d6 !important;
}

html[data-theme="dark"] th {
  background: rgba(255,255,255,0.04) !important;
  color: #dfeee3 !important;
}

html[data-theme="dark"] .sidebar-nav a:hover,
html[data-theme="dark"] .sidebar-nav a.active,
html[data-theme="dark"] .header-btn:hover,
html[data-theme="dark"] .btn-primary:hover {
  filter: brightness(1.08);
}

html[data-theme="dark"] .thread-bubble.self {
  background: rgba(34, 197, 94, 0.18) !important;
  border-color: rgba(34,197,94,0.35) !important;
}

html[data-theme="dark"] .thread-bubble.admin {
  background: rgba(59, 130, 246, 0.14) !important;
  border-color: rgba(96,165,250,0.28) !important;
}

html[data-theme="dark"] .thread-bubble.system {
  background: rgba(245, 158, 11, 0.13) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: #f8dca2 !important;
}

/* Site footer layout (copied from about.html) */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:40px 0;font-family:Poppins,Arial,Helvetica,sans-serif}
.site-footer .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;max-width:1100px;margin:0 auto;padding:0 18px}
.site-footer .footer-grid > div{display:flex;flex-direction:column;align-items:center;text-align:center}
.site-footer h3{color:var(--footer-text);margin-bottom:12px;font-size:16px;text-align:center}
.site-footer p{text-align:center}
.site-footer ul{list-style:none;padding:0;margin:0;display:inline-block;text-align:center}
.site-footer ul li{margin-bottom:10px;display:flex;justify-content:center;align-items:center}
.site-footer a{display:block;text-align:center}
.site-footer a:hover{color:var(--accent)}
.footer-social{margin-top:20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.footer-social-title{display:block;font-size:13px;font-weight:700;color:var(--footer-text);margin:0 0 12px;text-transform:uppercase;letter-spacing:0.12em}
.footer-social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;justify-content:center}
.footer-social-links a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));color:var(--footer-text);border:1px solid rgba(255,255,255,0.08);font-weight:700;font-size:14px;transition:all 0.18s ease;box-shadow:0 6px 14px rgba(0,0,0,0.10);padding:0;overflow:hidden}
.footer-social-links a img{width:100%;height:100%;display:block;object-fit:cover;margin:0;border-radius:6px;max-width:none;max-height:none}
.site-footer .footer-bottom{margin-top:26px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.08);text-align:center;font-size:13px}
:root{
  --bg: #f6f8f6;
  --surface: #ffffff;
  --text: #122214;
  --muted: #6b7a6b;
  --accent: #1f8f4a;
  --footer-color: hsl(120, 18%, 96%);
  --footer-bg: #041b44;
  --footer-text: #ddd;
}
[data-theme="dark"]{
  --bg: #07120d;
  --surface: #0b1a14;
  --text: #e6f0e8;
  --muted: #9fbda9;
  --accent: #2fd36a;
  --footer-color: #cfe6d6;
  --footer-bg: #041b44;
  --footer-text: #cfe6d6;
}

html,body{background:var(--bg);color:var(--text);transition:background .18s ease,color .18s ease}
a{color:var(--accent)}

/* Professional page loader */
#page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(245, 249, 246, 0.98), rgba(255,255,255,0.98));
  z-index: 99999;
  transition: opacity 0.75s ease, visibility 0.75s ease;
}

html[data-theme="dark"] #page-loader {
  background: linear-gradient(135deg, rgba(7,18,13,0.98), rgba(11,26,20,0.98));
}

#page-loader.hide {
  opacity: 0;
  visibility: hidden;
}

.loader-logo {
  position: absolute;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: logoPulse 1.8s ease-in-out infinite;
}

.loader-logo img {
  width: 78px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 26px rgba(31, 143, 74, 0.22));
}

.loader-ring {
  width: 134px;
  height: 134px;
  border-radius: 50%;
  border: 3px solid rgba(19, 61, 28, 0.12);
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  animation: rotateRing 1s linear infinite;
  box-shadow: 0 0 0 10px rgba(31, 143, 74, 0.04);
}

html[data-theme="dark"] .loader-ring {
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: #2fd36a;
  border-right-color: #2fd36a;
}

@keyframes rotateRing {
  to { transform: rotate(360deg); }
}

@keyframes logoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.82; }
}

body {
  opacity: 1;
  transition: opacity 0.7s ease;
}

body.page-content-loaded {
  opacity: 1;
}

/* Footer consistency */
footer, .footer-bottom, .footer p, .footer-bottom p{font-family:Inter, system-ui, -apple-system, Arial, sans-serif; font-size:14px; color:var(--footer-color);}

/* Floating theme toggle */
.theme-toggle{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border:none;cursor:pointer;font-size:18px;box-shadow:0 10px 24px rgba(0,0,0,0.18);position:fixed;right:20px;top:92px;bottom:auto;z-index:1000}
.theme-toggle.secondary{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.terms-theme-toggle{right:20px;top:92px;bottom:auto;z-index:1000}

/* Keep all support/floating action icons visible over the full page above the footer */
.floating-icons, .floating, .floating-support{
  position: fixed;
  right:20px;
  bottom:120px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  z-index:9999;
}

.floating-icons a, .floating a, .floating-support a,
.floating-icons button, .floating button, .floating-support button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.floating-icons a:hover, .floating a:hover, .floating-support a:hover,
.floating-icons button:hover, .floating button:hover, .floating-support button:hover {
  transform:translateY(-1px);
}

/* Footer social icons — make images fill their containers and be clearly visible */
.footer-social-links{display:flex;gap:10px;align-items:center}
.footer-social-links a{display:inline-flex;width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center;background:transparent;text-decoration:none;overflow:hidden;padding:0}
.footer-social-links a img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px;max-width:none;max-height:none}

.footer-social-links a svg{width:100%;height:100%;fill:currentColor}
/* Fallback: ensure any image inside footers scales to its container */
footer a img, .footer a img, .support a img, .footer-bottom img {max-width:100%;height:auto;display:block}

/* Ensure footer links remain visible in both themes */
/* Footer links: enforce readable color in both light and dark themes */
footer, .footer-bottom, footer p, .footer-bottom p, footer a, .footer-bottom a { color: var(--footer-color) !important; text-decoration: underline; }
footer a:hover, .footer a:hover, .footer-bottom a:hover { color: var(--accent) !important; }

/* High-specificity footer override to keep page footers consistent with the shared theme */
html body footer,
html body footer p,
html body footer a,
html body footer li,
html body footer ul,
html body footer h3,
html body .footer-bottom,
html body .footer-bottom p,
html body .footer-bottom a {
  background: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  text-decoration: none !important;
}

html body footer {
  text-align: center !important;
  padding: 40px 18px !important;
  margin-top: 30px !important;
}

html body footer p {
  margin: 8px 0 !important;
  font-size: 0.95rem !important;
}

/* Dashboard dark theme support */
html[data-theme="dark"] body {
  background: #07120d !important;
  color: #e6f0e8 !important;
}

html[data-theme="dark"] .sidebar {
  background: linear-gradient(135deg, #0d2c1e 0%, #143b2a 100%) !important;
  box-shadow: 2px 0 10px rgba(0,0,0,0.32) !important;
}

html[data-theme="dark"] header,
html[data-theme="dark"] .section,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .table-block,
html[data-theme="dark"] .card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .gallery-panel,
html[data-theme="dark"] .gallery-card,
html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .admin-info,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .thread-bubble,
html[data-theme="dark"] .notification-panel,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .section-body,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  background: #0b1a14 !important;
  color: #e6f0e8 !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
}

html[data-theme="dark"] .sidebar-nav a,
html[data-theme="dark"] .header-btn,
html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .admin-info,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-tertiary,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .section-header-actions .btn {
  color: #e6f0e8 !important;
}

html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select {
  background: #0d1f18 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

html[data-theme="dark"] .page-title p,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat-change,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .modal-header h2,
html[data-theme="dark"] .table th,
html[data-theme="dark"] td,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .thread-bubble-meta {
  color: #cfe6d6 !important;
}

html[data-theme="dark"] th {
  background: rgba(255,255,255,0.04) !important;
  color: #dfeee3 !important;
}

html[data-theme="dark"] .sidebar-nav a:hover,
html[data-theme="dark"] .sidebar-nav a.active,
html[data-theme="dark"] .header-btn:hover,
html[data-theme="dark"] .btn-primary:hover {
  filter: brightness(1.08);
}

html[data-theme="dark"] .thread-bubble.self {
  background: rgba(34, 197, 94, 0.18) !important;
  border-color: rgba(34,197,94,0.35) !important;
}

html[data-theme="dark"] .thread-bubble.admin {
  background: rgba(59, 130, 246, 0.14) !important;
  border-color: rgba(96,165,250,0.28) !important;
}

html[data-theme="dark"] .thread-bubble.system {
  background: rgba(245, 158, 11, 0.13) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: #f8dca2 !important;
}

/* Site footer layout (copied from about.html) */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:40px 0;font-family:Poppins,Arial,Helvetica,sans-serif}
.site-footer .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;max-width:1100px;margin:0 auto;padding:0 18px}
.site-footer .footer-grid > div{display:flex;flex-direction:column;align-items:center;text-align:center}
.site-footer h3{color:var(--footer-text);margin-bottom:12px;font-size:16px;text-align:center}
.site-footer p{text-align:center}
.site-footer ul{list-style:none;padding:0;margin:0;display:inline-block;text-align:center}
.site-footer ul li{margin-bottom:10px;display:flex;justify-content:center;align-items:center}
.site-footer a{display:block;text-align:center}
.site-footer a:hover{color:var(--accent)}
.footer-social{margin-top:20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.footer-social-title{display:block;font-size:13px;font-weight:700;color:var(--footer-text);margin:0 0 12px;text-transform:uppercase;letter-spacing:0.12em}
.footer-social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;justify-content:center}
.footer-social-links a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));color:var(--footer-text);border:1px solid rgba(255,255,255,0.08);font-weight:700;font-size:14px;transition:all 0.18s ease;box-shadow:0 6px 14px rgba(0,0,0,0.10);padding:0;overflow:hidden}
.footer-social-links a img{width:100%;height:100%;display:block;object-fit:cover;margin:0;border-radius:6px;max-width:none;max-height:none}
.site-footer .footer-bottom{margin-top:26px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.08);text-align:center;font-size:13px}