/* This file is part of BBClone (A PHP based Web Counter on Steroids)
 * 
 * SVN FILE $Id: index-neon.css 696 2026-09-29 11:09:04Z joku $
 * 
 * Copyright (C) 2001-2026 BBClone Team (doc/authors.txt)
 * Licensed under GNU GPL v3 or later (doc/copying.txt)
 */
:root { --bg-light: #dff1ff; --bg-dark: #031026; --card-light: #ffffff; --card-dark: #071a33; --border-light: #6ec6ff; --border-dark: #1e4d99; --text-light: #031026; --text-dark: #dff1ff; --accent: #00aaff; --accent-soft: #33cfff; --font: system-ui, "Segoe UI", sans-serif; }
body { margin: 0; padding: 40px 0; font-family: var(--font); background: var(--bg-light); color: var(--text-light); }
body[data-theme="dark"], body[data-theme="auto"].dark-active { background: var(--bg-dark); color: var(--text-dark); }
.header-controls { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin: 0 40px 20px 0; }
.language-dropdown { position: relative; }
.language-button { cursor: pointer; height: 30px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; box-sizing: border-box; background: var(--card-light); border: 1px solid var(--border-light); border-radius: 8px; transition: 0.25s ease; }
.language-list { display: none; position: absolute; right: 0; top: 34px; background: var(--card-light); border: 1px solid var(--border-light); border-radius: 8px; width: 160px; z-index: 50; }
.language-list.open { display: block; }
.language-list .lang-item { padding: 8px 12px; cursor: pointer; }
.language-list .lang-item:hover { background: rgba(255,255,255,0.1); }
body[data-theme="dark"] .language-button, body[data-theme="auto"].dark-active .language-button, body[data-theme="dark"] .language-list, body[data-theme="auto"].dark-active .language-list { background: var(--card-dark); border-color: var(--border-dark); color: var(--text-dark); }
.theme-switch-buttons { display: flex; border: 2px solid var(--accent); border-radius: 20px; overflow: hidden; }
.theme-switch-buttons button { height: 26px; min-width: 60px; padding: 0 10px; border: 0; cursor: pointer; background: var(--card-light); color: var(--text-light); }
.theme-switch-buttons button.active { background: var(--accent); color: #fff; }
body[data-theme="dark"] .theme-switch-buttons button, body[data-theme="auto"].dark-active .theme-switch-buttons button { background: var(--card-dark); color: var(--text-dark); }
body[data-theme="dark"] .theme-switch-buttons button.active, body[data-theme="auto"].dark-active .theme-switch-buttons button.active { background: var(--accent-soft); color: #fff; }
.hub-container { width: 90%; max-width: 1100px; margin: auto; display: grid; gap: 25px; grid-template-columns: repeat(2, 1fr); }
.hub-card:hover { transform: translateY(-4px); transition: 0.25s ease; box-shadow: 0 0 18px rgba(0,170,255,0.55), 0 0 36px rgba(0,170,255,0.45), 0 0 64px rgba(0,170,255,0.35); }
body[data-theme="dark"] .hub-card:hover, body[data-theme="auto"].dark-active .hub-card:hover { box-shadow: 0 0 22px rgba(0,170,255,0.75), 0 0 44px rgba(0,170,255,0.55), 0 0 80px rgba(0,170,255,0.45); }
@media(max-width:900px){ .hub-container { grid-template-columns: 1fr; } }
.hub-card { background: var(--card-light); border: 1px solid var(--border-light); border-radius: 12px; padding: 40px 20px; text-align: center; text-decoration: none; color: inherit; box-shadow: 0 8px 22px rgba(0,0,0,0.15); }
body[data-theme="dark"] .hub-card, body[data-theme="auto"].dark-active .hub-card { background: var(--card-dark); border-color: var(--border-dark); color: var(--text-dark); box-shadow: 0 0 12px rgba(0,170,255,0.45), 0 0 24px rgba(0,170,255,0.35), 0 0 48px rgba(0,170,255,0.25); }
body[data-theme="dark"] .hub-card .stat-label, body[data-theme="auto"].dark-active .hub-card .stat-label, body[data-theme="dark"] .hub-card .title, body[data-theme="auto"].dark-active .hub-card .title { color: var(--text-dark); }
.bbclone-footer { margin-top: 20px; text-align: center; opacity: 0.7; font-size: 12px; }
body[data-theme="dark"] .bbclone-footer, body[data-theme="auto"].dark-active .bbclone-footer { color: var(--text-dark); }
.icon { font-size: 64px; line-height: 1; }
.language-button { transition: 0.25s ease; }
.language-button:hover { box-shadow: 0 0 12px rgba(0,170,255,0.45), 0 0 24px rgba(0,170,255,0.35), 0 0 48px rgba(0,170,255,0.25); }
body[data-theme="dark"] .language-button:hover, body[data-theme="auto"].dark-active .language-button:hover { box-shadow: 0 0 22px rgba(0,170,255,0.75), 0 0 44px rgba(0,170,255,0.55), 0 0 80px rgba(0,170,255,0.45); }
.theme-switch-buttons button:hover { box-shadow: 0 0 12px rgba(0,170,255,0.45), 0 0 24px rgba(0,170,255,0.35), 0 0 48px rgba(0,170,255,0.25); }
body[data-theme="dark"] .theme-switch-buttons button:hover, body[data-theme="auto"].dark-active .theme-switch-buttons button:hover { box-shadow: 0 0 22px rgba(0,170,255,0.75), 0 0 44px rgba(0,170,255,0.55), 0 0 80px rgba(0,170,255,0.45); }
.privacy-overlay { position: fixed; inset: 0; background: rgba(0, 20, 40, 0.55); display: none; z-index: 9999; overflow-y: auto; }
.privacy-box { background: var(--card-dark); border: 2px solid var(--accent); color: var(--text-dark); width: 80%; max-width: 700px; margin: 60px auto; padding: 25px; border-radius: 14px; position: relative; z-index: 10000; box-shadow: 0 0 22px rgba(0,170,255,0.55), 0 0 44px rgba(0,170,255,0.35); }
.privacy-close { margin-top: 20px; padding: 10px 20px; border-radius: 8px; background: var(--accent); color: #fff; border: 0; cursor: pointer; }
.privacy-button { cursor: pointer; height: 30px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; box-sizing: border-box; padding: 0 16px; border-radius: 8px; background: var(--card-dark); border: 2px solid var(--accent); color: var(--text-dark); transition: 0.25s ease; }
body[data-theme="light"] .privacy-button { background: var(--card-light); color: var(--text-light); }
.privacy-button:hover { box-shadow: 0 0 12px rgba(0,170,255,0.45), 0 0 24px rgba(0,170,255,0.35), 0 0 48px rgba(0,170,255,0.25); }
body[data-theme="auto"]:not(.dark-active) .privacy-button { background: var(--card-light); color: var(--text-light); border-color: var(--accent); }
.logout-button { cursor: pointer; height: 30px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; box-sizing: border-box; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: bold; text-decoration: none; background: var(--card-light); color: #d63638; border: 1px solid var(--border-light); transition: 0.25s ease; }
body[data-theme="dark"] .logout-button, body[data-theme="auto"].dark-active .logout-button { background: var(--card-dark); border-color: var(--border-dark); color: #ff4d4f; }
.logout-button:hover { background: rgba(214, 54, 56, 0.08); border-color: #d63638; box-shadow: 0 0 12px rgba(214, 54, 56, 0.35); }
@media (max-width: 650px) { .header-controls { justify-content: center; margin: 0 15px 20px 15px; gap: 8px; } .privacy-button, .language-button, .logout-button { font-size: 11px; padding: 0 8px; } .theme-switch-buttons button { min-width: 45px; font-size: 11px; } }