/* Fatality Hot base site styles */
:root { --bg:#0f0f13;--panel:#1b1e27;--accent:var(--color-accent, #ff3e3e);--accent-alt:var(--color-accent-alt,#ff7e3e);--text:var(--color-text-primary,#e6e6e9);--border:var(--color-border,#2d3039);--radius:10px; }
body { margin:0; font-family:Inter,Arial,sans-serif; background:linear-gradient(135deg,var(--bg,#101017),#181b23 60%,var(--bg,#101017)); color:var(--text); transition:background .3s,color .3s; }
/* Legacy background image layer (added below gradient). Replace file with real legacy background.jpg */
body::before { content:''; position:fixed; inset:0; background:url('/assets/img/legacy/background.jpg') center/cover no-repeat fixed; opacity:.18; pointer-events:none; z-index:-1; }
html[data-theme='light'] body { background:var(--color-background); color:var(--color-text-primary); }
a.modal-open { overflow:hidden; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width:1100px; margin:0 auto; padding:2rem 1.5rem; }
header.site { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
/* Legacy style adaptation for top navigation bar */
header.site { background: var(--navbar-color); padding:.55rem 1rem; border-bottom:2px solid #00000033; box-shadow:0 2px 6px -2px #000; }
html[data-theme='light'] header.site { background:#fff; border-bottom:1px solid #d7dae2; box-shadow:0 2px 6px -2px rgba(0,0,0,.12); }
header.site .logo-wrap { display:flex; align-items:center; gap:.85rem; }
img.logo-svg { width:160px; height:auto; display:block; }
/* Swap logo to legacy if available */
.logo-wrap img.logo-svg { content:url('/assets/img/legacy/logo.png'); }
header.site h1 { margin:0; font-size:2rem; background:linear-gradient(90deg,var(--accent),var(--accent-alt)); -webkit-background-clip:text; background-clip:text; color:transparent; }
html[data-theme='light'] .card { background:var(--color-surface); border:1px solid var(--color-border); box-shadow:0 4px 14px -4px rgba(0,0,0,.08); }
.card { background:var(--panel, var(--color-surface)); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.4rem; box-shadow:0 4px 14px -4px #000; transition:background .3s,border-color .3s,box-shadow .3s; }
form.login { max-width:360px; display:flex; flex-direction:column; gap:.9rem; }
input[type=text],input[type=password] { background:#12151c; border:1px solid var(--border); color:var(--text); padding:.65rem .8rem; border-radius:6px; font-size:.95rem; }
input:focus { outline:1px solid var(--accent); }
button.primary { background:var(--color-button-bg,var(--accent)); border:none; color:var(--color-button-text,#fff); font-weight:600; padding:.7rem 1.2rem; border-radius:6px; cursor:pointer; transition:.2s; box-shadow:0 2px 6px -1px rgba(0,0,0,.4); }
button.primary:hover { filter:brightness(1.1); }
.footer { margin-top:3rem; font-size:.75rem; opacity:.55; text-align:center; }
.panel-table { width:100%; border-collapse:collapse; }
.panel-table th,.panel-table td { border:1px solid var(--border); padding:.55rem .6rem; font-size:.85rem; }
.panel-table th { background:#161921; }
.status-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; background:#666; }
.status-running { background:#2ecc71; }
.status-stopped { background:#e74c3c; }
.status-unknown { background:#666; }
@media (max-width:680px){ header.site h1{font-size:1.6rem;} }
/* Modal specifics (light additions) */
#loginModal .card h3 { margin:.3rem 0 .6rem; }
/* New layout elements */
.page { max-width:1100px; margin:0 auto; padding:2rem 1.5rem; }
.servers-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.server-card { background:#12151c; border:1px solid var(--border); border-radius:8px; padding:.8rem .9rem; display:flex; flex-direction:column; gap:.4rem; cursor:pointer; text-align:left; }
html[data-theme='light'] .server-card { background:#f0f2f7; border-color:#d7dae2; }
.server-name { font-weight:600; font-size:.95rem; }
.server-address { font-size:.7rem; opacity:.65; }
.server-status { font-size:.75rem; font-weight:600; text-transform:uppercase; }
.status-running { color:#2ecc71; }
.status-stopped { color:#e74c3c; }
.status-unknown { color:#666; }
.main-nav { display:flex; align-items:center; gap:.35rem; }
.nav-link { position:relative; font-size:.8rem; padding:.55rem 1rem .5rem; border-radius:4px 4px 0 0; background:var(--navbar-color); color:var(--top-text-color); text-decoration:none; transition:.25s; border:1px solid transparent; }
.nav-link:hover { background:var(--hover); color:#fff; }
.nav-link.active, .nav-link:focus { background:var(--navbar-color); color:#fff; }
/* underline только для активного */
.nav-link.active::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--span-color); border-radius:2px; }
/* плавная анимация появления/скрытия */
.nav-link::after { opacity:0; transform:scaleX(.3); transition:.25s; }
.nav-link.active::after { opacity:1; transform:scaleX(1); }
html[data-theme='light'] .nav-link { background:#f3f5f7; color:#333; }
html[data-theme='light'] .nav-link:hover { background:#e7eaee; color:#111; }
html[data-theme='light'] .nav-link.active { background:#f3f5f7; color:#111; }
html[data-theme='light'] .nav-link.active::after { background:#3666a9; }
.theme-btn, .auth-link, .logout-btn, #notifBell { background:var(--navbar-color); color:var(--top-text-color); border:1px solid #ffffff12; border-radius:5px; cursor:pointer; padding:.5rem .75rem; font-size:.7rem; transition:.25s; }
.theme-btn:hover, .auth-link:hover, .logout-btn:hover, #notifBell:hover { background:var(--hover); color:#fff; border-color:var(--span-color); }
html[data-theme='light'] .theme-btn, html[data-theme='light'] .auth-link, html[data-theme='light'] .logout-btn, html[data-theme='light'] #notifBell { background:#fff; border-color:#d7dae2; color:#333; }
html[data-theme='light'] .theme-btn:hover, html[data-theme='light'] .auth-link:hover, html[data-theme='light'] .logout-btn:hover, html[data-theme='light'] #notifBell:hover { background:#e7eaee; color:#111; border-color:#3666a9; }
/* Mobile navigation */
.mobile-toggle { display:none; background:var(--panel); color:var(--text); border:1px solid var(--border); padding:.5rem .7rem; border-radius:6px; cursor:pointer; }
.mobile-nav { position:fixed; top:0; left:0; right:0; background:var(--panel); padding:3.5rem 1rem 1rem; transform:translateY(-100%); transition:.35s; box-shadow:0 6px 18px -6px rgba(0,0,0,.5); z-index:200; }
.mobile-nav nav { display:flex; flex-direction:column; gap:.6rem; }
.mobile-nav[data-open='true'] { transform:translateY(0); }
.mnav-link { padding:.55rem .8rem; background:var(--panel); border:1px solid var(--border); border-radius:6px; font-size:.9rem; text-decoration:none; color:var(--text); }
.mnav-link.active { background:var(--accent); color:#fff; }
body.nav-open { overflow:hidden; }
.locale-switch { display:flex; gap:.5rem; margin-top:.8rem; }
.locale-link { font-size:.7rem; padding:.3rem .55rem; border:1px solid var(--border); border-radius:6px; text-decoration:none; color:var(--text); background:#12151c; }
html[data-theme='light'] .locale-link { background:#fff; }
.locale-link.active { background:var(--accent); color:#fff; border-color:var(--accent); }
@media (max-width:840px){
	.main-nav { display:none; }
	.mobile-toggle { display:inline-block; }
}
@media (max-width:1200px){
	.servers-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
}
@media (max-width:992px){
	.container,.page { padding:1.6rem 1rem; }
	header.site { gap:.6rem; }
}
@media (max-width:768px){
	.servers-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
	.server-card { padding:.7rem .75rem; }
}
@media (max-width:600px){
	.servers-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
	h2 { font-size:1.15rem; }
	.card { padding:1rem 1.1rem; }
}
.alert { position:relative; padding:.7rem 1rem; border-radius:6px; margin:.4rem 0; font-size:.8rem; display:flex; align-items:center; gap:.6rem; background:#12151c; border:1px solid var(--border); }
.alert-info { border-color:var(--accent); }
.alert-warn { border-color:#e67e22; }
.alert-error { border-color:#e74c3c; }
.alert-success { border-color:#2ecc71; }
.alert-text { flex:1; }
.alert-close { background:transparent; border:none; color:var(--text); font-size:1rem; cursor:pointer; }
.alert.closing { opacity:0; transform:translateY(-4px); transition:.3s; }
#alertsWrap { position:fixed; top:1rem; right:1rem; width:300px; z-index:500; }
/* Content */
.content-list { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); margin-top:1rem; }
.content-item { display:block; background:#12151c; border:1px solid var(--border); padding:.9rem 1rem; border-radius:8px; color:inherit; text-decoration:none; }
.content-item h3 { margin:.2rem 0 .4rem; font-size:1.05rem; }
html[data-theme='light'] .content-item { background:#fff; border-color:#d7dae2; }
.content-item:hover { border-color:var(--accent); }
.loader { font-size:.8rem; opacity:.7; }
.error { color:#e74c3c; font-size:.85rem; }
.empty { opacity:.6; font-size:.8rem; }
.server-detail-panel { margin-top:1.2rem; }
.server-detail-panel .kv { font-size:.8rem; margin:.35rem 0; }
.metrics-list { list-style:none; padding:0; margin:.4rem 0; font-size:.75rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.3rem; }
.badge { display:inline-block; background:#2d3039; padding:.2rem .5rem; border-radius:6px; font-size:.65rem; margin:.15rem .25rem .15rem 0; }
html[data-theme='light'] .badge { background:#e8eaef; }
.avatar { width:96px; height:96px; border-radius:50%; object-fit:cover; border:2px solid var(--border); }
.stats-list { list-style:none; padding:0; margin:.5rem 0; font-size:.75rem; }
.save-result { background:#12151c; border:1px solid var(--border); padding:.4rem .6rem; border-radius:6px; font-size:.65rem; max-height:160px; overflow:auto; }
html[data-theme='light'] .save-result { background:#fff; border-color:#d7dae2; }

/* Profile layout */
.profile-grid { display:grid; grid-template-columns:300px 1fr; gap:1.2rem; align-items:start; }
@media (max-width:900px){ .profile-grid { grid-template-columns:1fr; } .profile-side { order:2; } }
.profile-side-inner { display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.avatar.large { width:140px; height:140px; border-radius:50%; object-fit:cover; border:3px solid var(--color-accent); box-shadow:0 0 0 3px rgba(0,0,0,.4); }
.avatar.placeholder { width:140px; height:140px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#12151c; border:3px dashed var(--border); font-size:2.4rem; color:#555; }
.username { font-size:1.3rem; margin:.2rem 0 .4rem; font-weight:600; }
.profile-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.tab-btn { background:#12151c; border:1px solid var(--border); color:var(--text); padding:.45rem .8rem; border-radius:6px; cursor:pointer; font-size:.75rem; }
.tab-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
html[data-theme='light'] .tab-btn { background:#fff; }
.tab-panel { animation:fadeIn .25s; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }
.social-list { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 1rem; }
.stats-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.4rem; }
.stats-list li { background:#12151c; border:1px solid var(--border); padding:.35rem .5rem; border-radius:6px; font-size:.65rem; display:flex; flex-direction:column; gap:.2rem; }
html[data-theme='light'] .stats-list li { background:#fff; }
.stat-name { font-weight:600; opacity:.85; }
.stat-value { font-size:.75rem; }
.identities-badges { display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; }
.identities-list { display:flex; flex-direction:column; gap:.5rem; }
.identity-row { display:grid; grid-template-columns:120px 1fr 80px; gap:.5rem; background:#12151c; border:1px solid var(--border); padding:.5rem .7rem; border-radius:6px; font-size:.65rem; }
html[data-theme='light'] .identity-row { background:#fff; }
.profile-edit-form { display:flex; flex-direction:column; gap:.8rem; }
.profile-edit-form label { display:flex; flex-direction:column; font-size:.65rem; gap:.25rem; }
.form-group-inline { display:flex; gap:.6rem; flex-wrap:wrap; }
.form-group-inline label { flex:1 1 160px; }
.edit-trigger { margin-top:.6rem; }
.badge-discord { background:#6e8ba9; }
.badge-vk { background:#6a88a4; }
.badge-steam { background:#2d3039; }
html[data-theme='light'] .badge-steam { background:#dfe2e7; }


/* --- Component parity extensions (tables, pagination, badges, modals) --- */
/* Portable table variants */
.table { width:100%; border-collapse:collapse; font-size:.8rem; }
.table th,.table td { padding:.55rem .65rem; border:1px solid var(--border); text-align:left; }
.table thead th { background:#161921; font-weight:600; }
html[data-theme='light'] .table thead th { background:var(--color-surface-alt); }
.table-striped tbody tr:nth-child(odd) { background:#12151c; }
html[data-theme='light'] .table-striped tbody tr:nth-child(odd) { background:#f5f7fa; }
.table-hover tbody tr { transition:background .15s; }
.table-hover tbody tr:hover { background:var(--color-surface-alt); }
/* Sort indicator hooks */
th.sortable { cursor:pointer; position:relative; }
th.sortable:after { content:'↕'; position:absolute; right:.4rem; top:50%; transform:translateY(-50%); opacity:.35; font-size:.7rem; }
th.sortable[data-dir='asc']:after { content:'↑'; opacity:.9; }
th.sortable[data-dir='desc']:after { content:'↓'; opacity:.9; }

/* Pagination */
.pagination { display:flex; gap:.4rem; flex-wrap:wrap; margin:1rem 0; }
.page-link { display:inline-block; padding:.45rem .7rem; border:1px solid var(--border); background:#12151c; color:var(--text); font-size:.7rem; border-radius:6px; text-decoration:none; cursor:pointer; }
html[data-theme='light'] .page-link { background:#fff; }
.page-link:hover { border-color:var(--accent); }
.page-link.active { background:var(--accent); color:#fff; border-color:var(--accent); cursor:default; }
.page-link.disabled { opacity:.45; pointer-events:none; }

/* Badge variants */
.badge { position:relative; }
.badge-info { background:#2d5b89; }
.badge-success { background:#1e7d45; }
.badge-error { background:#823030; }
.badge-warn { background:#8a5d1f; }
html[data-theme='light'] .badge-info { background:#d2e7ff; color:#183d60; }
html[data-theme='light'] .badge-success { background:#d5f5e3; color:#145230; }
html[data-theme='light'] .badge-error { background:#f8d7da; color:#7d1f26; }
html[data-theme='light'] .badge-warn { background:#ffe6c7; color:#7a4a12; }

/* Modal (generic) */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:600; opacity:0; pointer-events:none; transition:.25s; }
.modal-backdrop[data-open='true'] { opacity:1; pointer-events:auto; }
.modal { width:clamp(300px,60%,680px); background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.4rem; box-shadow:0 10px 30px -8px rgba(0,0,0,.6); position:relative; }
html[data-theme='light'] .modal { background:var(--color-surface); }
.modal-close { position:absolute; top:.6rem; right:.6rem; background:transparent; border:none; color:var(--text); font-size:1.1rem; cursor:pointer; }
.modal header { margin:0 0 .8rem; }
.modal header h3 { margin:0; font-size:1.2rem; }
.modal footer { margin-top:1.2rem; text-align:right; }
.modal[aria-busy='true'] { opacity:.6; }
.auth-modal { display:flex; flex-direction:column; gap:1rem; }
.auth-modal .tabs { display:flex; gap:.5rem; }
.auth-modal .tab-btn { flex:0 0 auto; background:#12151c; border:1px solid var(--border); padding:.45rem .9rem; font-size:.75rem; border-radius:6px; cursor:pointer; transition:.18s; }
.auth-modal .tab-btn:hover { border-color:var(--accent); }
.auth-modal .tab-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
html[data-theme='light'] .auth-modal .tab-btn { background:#fff; }
.auth-modal .auth-form { display:flex; flex-direction:column; gap:.75rem; }
.auth-modal .auth-form label { display:flex; flex-direction:column; font-size:.65rem; gap:.25rem; }
.auth-modal input[type=text], .auth-modal input[type=password] { background:#181b23; }
html[data-theme='light'] .auth-modal input[type=text], html[data-theme='light'] .auth-modal input[type=password] { background:#fff; }
.auth-result { background:#12151c; border:1px solid var(--border); padding:.4rem .6rem; border-radius:6px; font-size:.65rem; min-height:18px; max-height:120px; overflow:auto; }
html[data-theme='light'] .auth-result { background:#fff; }
.oauth-block-inline { background:#12151c; border:1px solid var(--border); padding:.7rem .9rem; border-radius:8px; font-size:.7rem; display:flex; flex-direction:column; gap:.5rem; }
html[data-theme='light'] .oauth-block-inline { background:#fff; }
.oauth-buttons { display:flex; flex-wrap:wrap; gap:.5rem; }
.oauth-btn { background:#232730; border:1px solid var(--border); color:var(--text); font-size:.65rem; padding:.4rem .65rem; cursor:pointer; border-radius:6px; }
.oauth-btn:hover { border-color:var(--accent); }
html[data-theme='light'] .oauth-btn { background:#fff; }
.auth-spinner { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .9s linear infinite; display:inline-block; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
.logout-btn { background:#2d3039; border:1px solid var(--border); color:var(--text); font-size:.65rem; padding:.35rem .55rem; border-radius:6px; cursor:pointer; }
html[data-theme='light'] .logout-btn { background:#fff; }
.auth-link { font-weight:600; }
.nav-user { font-size:.75rem; font-weight:600; margin-right:.4rem; background:var(--navbar-color); padding:.5rem .6rem; border-radius:5px; border:1px solid #ffffff12; }
.nav-user:hover { background:var(--hover); }
.ajax-progress { position:fixed; top:0; left:0; height:3px; width:100%; background:rgba(255,255,255,.1); z-index:700; }
.ajax-progress .bar { height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-alt)); animation:progressBar 2s infinite; }
@keyframes progressBar { 0% { width:0; } 50% { width:70%; } 100% { width:100%; } }
.tab-content[hidden] { display:none !important; }
.modal-backdrop[data-open='true'] .modal { animation:popIn .25s; }
@keyframes popIn { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
.modal footer .primary { min-width:120px; }

/* Utility */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }