@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Theme CSS Variables */
:root {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-text: #4338ca;
    --link-color: #4338ca;
    --link-hover: #3730a3;
    --accent: #06b6d4;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* Bootstrap components inherit the same palette as native components. */
    --bs-body-color: var(--text-primary);
    --bs-body-color-rgb: 15, 23, 42;
    --bs-secondary-color: var(--text-secondary);
    --bs-secondary-color-rgb: 71, 85, 105;
    --bs-tertiary-color: var(--text-muted);
    --bs-tertiary-color-rgb: 100, 116, 139;
    --bs-emphasis-color: var(--text-primary);
    --bs-heading-color: var(--text-primary);
    --bs-border-color: var(--border-color);
    --bs-body-bg: var(--bg-primary);
    --bs-link-color: var(--link-color);
    --bs-link-hover-color: var(--link-hover);
    
    --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --card-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(226, 232, 240, 0.8);
}

/* Critical visibility utility retained even when the Bootstrap CDN is unavailable. */
.d-none { display:none!important; }

[data-theme="dark"] {
    --bg-primary: #090d16;
    --bg-secondary: #0f172a;
    --bg-tertiary: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --primary: #818cf8;
    --primary-hover: #6366f1;
    --primary-text: #a5b4fc;
    --link-color: #a5b4fc;
    --link-hover: #c7d2fe;
    --accent: #22d3ee;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;

    --bs-body-color: var(--text-primary);
    --bs-body-color-rgb: 248, 250, 252;
    --bs-secondary-color: var(--text-secondary);
    --bs-secondary-color-rgb: 203, 213, 225;
    --bs-tertiary-color: var(--text-muted);
    --bs-tertiary-color-rgb: 148, 163, 184;
    --bs-emphasis-color: var(--text-primary);
    --bs-heading-color: var(--text-primary);
    --bs-border-color: var(--border-color);
    --bs-body-bg: var(--bg-primary);
    --bs-link-color: var(--link-color);
    --bs-link-hover-color: var(--link-hover);
    
    --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --card-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    
    --glass-bg: rgba(15, 23, 42, 0.7);
    --glass-border: rgba(51, 65, 85, 0.8);
}

/* Global Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow-x: hidden;
}

main {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

/* Keep ordinary links readable even if Bootstrap cannot be loaded. */
a {
    color: var(--link-color);
}

a:hover,
a:focus {
    color: var(--link-hover);
}

/* Navbar */
.navbar {
    background-color: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    transition: background-color 0.3s, border-color 0.3s;
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.4rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbar .nav-link {
    color: var(--text-secondary) !important;
    font-weight: 600;
    transition: color 0.2s;
}

.navbar .nav-link:hover, 
.navbar .nav-link.active {
    color: var(--primary-text) !important;
}

/* Cards & Containers */
.card {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    --bs-card-color: var(--text-primary);
    --bs-card-bg: var(--bg-secondary);
    --bs-card-border-color: var(--border-color);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    border-radius: 1rem;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s, border-color 0.3s;
}

.card:hover {
    box-shadow: var(--card-shadow-lg);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

/* Bootstrap components that otherwise keep a light-theme text colour. */
.accordion {
    --bs-accordion-color: var(--text-primary);
    --bs-accordion-bg: var(--bg-secondary);
    --bs-accordion-border-color: var(--border-color);
    --bs-accordion-btn-color: var(--text-primary);
    --bs-accordion-btn-bg: var(--bg-secondary);
    --bs-accordion-active-color: var(--text-primary);
    --bs-accordion-active-bg: var(--bg-tertiary);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--border-color);
    --bs-nav-tabs-link-active-color: var(--text-primary);
    --bs-nav-tabs-link-active-bg: var(--bg-secondary);
    --bs-nav-tabs-link-active-border-color: var(--border-color);
}

/* Custom Gradients */
.gradient-header {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Forms */
.form-control, .form-select {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 0.5rem;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.2s;
}

.form-control:focus, .form-select:focus {
    background-color: var(--bg-secondary);
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* Keep dependent fields visually consistent before their parent is chosen. */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted);
    opacity: 1;
    cursor: not-allowed;
}

.form-select:disabled option {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
}

/* Lists and Tables */
.table {
    color: var(--text-primary);
}

.table th {
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.table td {
    border-bottom: 1px solid var(--border-color);
}

/* Jitter, Packet Loss, Ping Badging */
.badge-ping {
    padding: 0.35em 0.65em;
    font-weight: 600;
    font-size: 0.85em;
    border-radius: 0.375rem;
}

.badge-low {
    background-color: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.badge-medium {
    background-color: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.badge-high {
    background-color: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

/* Hop List Design */
.hop-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px dashed var(--border-color);
    color: var(--text-primary) !important;
}

.hop-item span:not(.badge) {
    color: var(--text-primary) !important;
}

.hop-number {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--primary);
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease forwards;
}

/* Dark/Light Toggle Button */
.theme-toggle-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
}

.theme-toggle-btn:hover {
    color: var(--primary-text);
}

/* Footer */
footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: 3rem;
    color: var(--text-muted);
}

footer a {
    color: var(--text-secondary);
}

footer a:hover,
footer a:focus {
    color: var(--link-hover);
}

/* ==========================================
   Dark/Light Theme Compatibility Layer
   ========================================== */

/* Override Bootstrap Text Color Utilities in Dark Mode */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black,
[data-theme="dark"] .link-dark {
    color: var(--text-primary) !important;
}

/* Warning controls deliberately use dark ink on a bright warning fill. */
.bg-warning,
.btn-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
}

[data-theme="dark"] .bg-warning.text-dark,
[data-theme="dark"] .btn-warning.text-dark {
    color: #0f172a !important;
}

[data-theme="dark"] .btn-outline-warning.text-dark {
    color: var(--warning) !important;
    background-color: transparent !important;
    border-color: var(--warning) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

.text-primary {
    color: var(--primary-text) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-light {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-light:hover {
    background-color: var(--border-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Card Titles and Inner Components */
.card-title {
    color: var(--text-primary) !important;
}

/* List Groups */
.list-group-item {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Modals */
.modal-content {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.modal-header, 
.modal-footer {
    border-color: var(--border-color) !important;
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dropdown-item {
    color: var(--text-secondary) !important;
}

.dropdown-item:hover, 
.dropdown-item:focus {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Tables and Stripe Layouts */
.table,
.table th,
.table td,
.table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.015) !important;
}

[data-theme="light"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.015) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Bootstrap Borders Overrides in Dark Mode */
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: var(--border-color) !important;
}

/* Input Fields and Selects focus border fix */
.form-control:focus, 
.form-select:focus {
    border-color: var(--primary) !important;
}

/* Explicit Dark Mode Overrides for Headings and Form Labels */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .card-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-label,
[data-theme="dark"] label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .form-text {
    color: var(--text-muted) !important;
}

/* ==========================================
   Premium Buttons & Navbar Elements Design
   ========================================== */

/* Unified styling for buttons */
.btn {
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

/* Primary Button Styling */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #ffffff !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Outline Button Styling */
.btn-outline-primary {
    color: var(--primary-text) !important;
    border-color: var(--primary);
    background-color: transparent;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.btn-outline-primary:active {
    transform: translateY(0);
}

/* Specific Dark Mode overrides for outline button */
[data-theme="dark"] .btn-outline-primary {
    color: var(--primary-text) !important;
    border-color: var(--primary);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #ffffff !important;
}

/* Navbar Buttons, Selects, and Toggles Alignment */
.navbar .btn, 
.navbar .form-select, 
.navbar .theme-toggle-btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.navbar .btn {
    padding: 0 1.25rem;
    line-height: 1;
}

.navbar .form-select {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.75rem;
    padding-right: 2rem; /* Keep space for arrow icon */
    border-color: var(--border-color);
    background-color: var(--bg-secondary);
}

.navbar .theme-toggle-btn {
    width: 38px; /* Square toggle button */
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.navbar .theme-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: var(--bg-tertiary);
}

/* ==========================================
   Live Analytics Module
   ========================================== */
.analytics-page {
    --analytics-map-empty: #64748b;
}

.analytics-kicker {
    display: inline-flex;
    align-items: center;
    padding: .35rem .7rem;
    border-radius: 999px;
    color: var(--success);
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .24);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.analytics-outage {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: 1rem 1.15rem;
    border-radius: .85rem;
    color: #991b1b;
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .3);
}

[data-theme="dark"] .analytics-outage { color: #fecaca; }
.analytics-outage > i { color: var(--danger); font-size: 1.25rem; }

.analytics-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    color: var(--text-secondary);
    font-size: .8rem;
}

.analytics-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.analytics-legend i { width: .75rem; height: .75rem; border-radius: .2rem; background: var(--legend); }

.analytics-map-shell {
    position: relative;
    min-height: 360px;
    border-radius: .9rem;
    overflow: hidden;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.analytics-map-loading { min-height: 360px; display: grid; place-items: center; }

.analytics-tooltip {
    position: absolute;
    z-index: 20;
    min-width: 190px;
    max-width: 280px;
    padding: .75rem .9rem;
    border-radius: .65rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--primary);
    box-shadow: var(--card-shadow-lg);
    pointer-events: none;
    font-size: .8rem;
}
.analytics-tooltip strong { display: block; margin-bottom: .25rem; font-size: .95rem; }

.analytics-chart { position: relative; height: 320px; }

.analytics-feed { display: flex; flex-direction: column; gap: .55rem; }
.analytics-feed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem;
    border-radius: .65rem;
    color: var(--text-primary);
    text-decoration: none;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    transition: border-color .2s ease, transform .2s ease;
}
.analytics-feed-item:hover { border-color: var(--primary); transform: translateX(2px); color: var(--text-primary); }
.analytics-feed-item span { min-width: 0; }
.analytics-feed-item strong, .analytics-feed-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-feed-item small { color: var(--text-muted); margin-top: .1rem; }
.analytics-feed-item b { flex: 0 0 auto; }

.analytics-live-dot {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, .5);
    animation: analyticsPulse 1.8s infinite;
}

.analytics-stat-card { padding: 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.analytics-stat-card i { font-size: 1.25rem; }
.analytics-stat-card small { color: var(--text-secondary); }
.analytics-stat-card strong { font-size: 1.35rem; }

@keyframes analyticsPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
    70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@media (max-width: 768px) {
    .analytics-map-shell, .analytics-map-loading { min-height: 250px; }
    .analytics-chart { height: 260px; }
}
/* Community and competition modules */
.social-page { max-width: 1180px; margin-inline: auto; }
.social-hero { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:2rem; border-radius:1.25rem; color:var(--text-primary); background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--bg-secondary)), color-mix(in srgb, #8b5cf6 12%, var(--bg-secondary))); border:1px solid var(--border-color); }
.social-hero h1 { margin:0 0 .5rem; font-weight:800; letter-spacing:-.035em; }
.social-hero p { margin:0; color:var(--text-secondary); max-width:760px; }
.vote-pill { white-space:nowrap; color:var(--text-secondary); background:var(--bg-primary); border:1px solid var(--border-color); border-radius:999px; padding:.35rem .65rem; }
.forum-content { min-width:0; color:var(--text-primary)!important; white-space:normal; line-height:1.75; overflow-wrap:anywhere; word-break:break-word; }
.forum-thread-card { border-color:color-mix(in srgb,var(--primary) 18%,var(--border-color)); }
.forum-thread-header,.forum-reply-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.forum-thread-header h1 { overflow-wrap:anywhere; }
.forum-thread-header small,.forum-reply-header small span { color:var(--text-secondary); }
.forum-thread-content { padding:1rem; border:1px solid var(--border-color); border-radius:.8rem; background:var(--bg-primary); font-size:1rem; }
.forum-reply-card { background:color-mix(in srgb,var(--bg-secondary) 94%,var(--bg-primary)); }
.forum-vote-action { display:inline-flex; width:auto!important; max-width:max-content; flex:0 0 auto; align-items:center; gap:.28rem; min-height:1.85rem; padding:.28rem .45rem!important; border-radius:.55rem; font-size:.68rem; line-height:1; }
.forum-vote-action i { font-size:.78rem; }
.forum-vote-action b { min-width:.9rem; text-align:center; font-size:.64rem; }
.forum-category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.forum-category-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.9rem; min-width:0; padding:1rem; color:var(--text-primary); text-decoration:none; border:1px solid var(--border-color); border-radius:1rem; background:var(--bg-secondary); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.forum-category-card:hover,.forum-category-card.is-active { color:var(--text-primary); border-color:color-mix(in srgb,var(--primary) 68%,var(--border-color)); transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,23,42,.08); }
.forum-category-card.is-active { background:color-mix(in srgb,var(--primary) 7%,var(--bg-secondary)); }
.forum-category-icon { display:grid; place-items:center; width:2.7rem; height:2.7rem; border-radius:.8rem; color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,var(--bg-tertiary)); font-size:1.2rem; }
.forum-category-copy { min-width:0; }
.forum-category-copy strong,.forum-category-copy small { display:block; }
.forum-category-copy strong { margin-bottom:.22rem; font-size:.9rem; }
.forum-category-copy small { color:var(--text-muted); font-size:.72rem; line-height:1.35; }
.forum-category-count { display:grid; place-items:center; min-width:3.2rem; padding:.45rem .6rem; border-radius:.75rem; background:var(--bg-tertiary); }
.forum-category-count b { font-size:1rem; }
.forum-category-count small { color:var(--text-muted); font-size:.58rem; text-transform:uppercase; letter-spacing:.05em; }
.forum-new-topic summary { display:flex; align-items:center; margin:0; cursor:pointer; list-style:none; color:var(--text-primary); }
.forum-new-topic summary::-webkit-details-marker { display:none; }
.forum-new-topic summary::after { content:'+'; margin-left:auto; color:var(--primary); font-size:1.4rem; }
.forum-new-topic[open] summary::after { content:'−'; }
.forum-topic-category { display:inline-flex; align-items:center; gap:.35rem; margin-bottom:.35rem; color:var(--primary-text); font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.forum-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; font-size:.8rem; }
.forum-breadcrumb a { color:var(--text-secondary); text-decoration:none; }
.forum-breadcrumb a:hover { color:var(--primary); }
.match-score { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; font-size:1.1rem; }
.match-score > div { display:flex; align-items:center; justify-content:flex-end; gap:1rem; }
.match-score > div:last-child { justify-content:flex-start; }
.match-score strong { font-size:2.4rem; line-height:1; color:var(--primary); }
.speed-track { height:5px; margin-top:.35rem; width:170px; max-width:100%; border-radius:99px; background:var(--border-color); overflow:hidden; }
.speed-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0ea5e9,#22c55e); }
.review-score { display:flex; align-items:baseline; gap:.4rem; }
.review-score strong { color:#f59e0b; font-size:2rem; }
.review-score span { color:var(--text-secondary); }
.review-card { border:1px solid var(--border-color); border-radius:.85rem; padding:1rem; background:var(--bg-primary); }
.route-hops { overflow:auto; }
.dashboard-main-column,.dashboard-main-column > .card { min-width:0; }
.api-usage-card { position:relative; width:100%; max-width:100%; min-width:0; overflow:hidden; }
.api-usage-chart { position:relative; width:100%; max-width:100%; min-width:0; height:260px; overflow:hidden; }
.api-usage-chart canvas { display:block; width:100%!important; max-width:100%!important; height:100%!important; }
@media (max-width: 767px) { .social-hero { padding:1.35rem; } .forum-category-grid { grid-template-columns:1fr; } .forum-category-card { gap:.65rem; padding:.85rem; } .match-score { grid-template-columns:1fr; text-align:center; } .match-score > div, .match-score > div:last-child { justify-content:center; } .match-score > span { display:none; } .forum-thread-header { align-items:stretch; flex-direction:column; } .forum-thread-header form { align-self:flex-start; } }

/* 2026 navigation refresh */
.site-navbar {
    padding: .65rem 0;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    box-shadow: 0 8px 30px rgba(15, 23, 42, .055);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    z-index:1060;
}
.site-navbar .navbar-collapse { min-width: 0; }
.site-brand { display:inline-flex; align-items:center; gap:.7rem; margin-right:.5rem; background:none; -webkit-background-clip:initial; -webkit-text-fill-color:initial; color:var(--text-primary); text-decoration:none; }
.site-brand-mark { display:grid; place-items:center; width:2.45rem; height:2.45rem; flex:0 0 auto; border-radius:.8rem; color:#fff; background:linear-gradient(135deg,var(--primary),var(--accent)); box-shadow:0 8px 20px rgba(99,102,241,.24); }
.site-brand-mark i { font-size:1.25rem; }
.site-brand-copy { display:flex; flex-direction:column; line-height:1.08; }
.site-brand-copy strong { font-size:1rem; letter-spacing:-.02em; color:var(--text-primary); }
.site-brand-copy small { margin-top:.28rem; font-size:.64rem; font-weight:600; letter-spacing:.02em; color:var(--text-muted); }
.site-nav-links { align-items:center; gap:.15rem; }
.site-navbar .site-nav-links > .nav-item > .nav-link { display:flex; align-items:center; gap:.42rem; padding:.62rem .72rem; border-radius:.7rem; font-size:.82rem; line-height:1; white-space:nowrap; color:var(--text-secondary)!important; }
.site-navbar .site-nav-links > .nav-item > .nav-link:hover { color:var(--text-primary)!important; background:var(--bg-tertiary); }
.site-navbar .site-nav-links > .nav-item > .nav-link.active { color:var(--primary-text)!important; background:color-mix(in srgb,var(--primary) 11%,transparent); }
.nav-live-dot { width:.4rem; height:.4rem; margin-left:.08rem; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 16%,transparent); }
.site-navbar .nav-panel { min-width:20rem; padding:.55rem; margin-top:.65rem!important; border:1px solid var(--border-color)!important; border-radius:1rem; box-shadow:0 20px 45px rgba(15,23,42,.14); }
.site-navbar .nav-panel-wide { min-width:22rem; }
.site-navbar .nav-panel-item { display:grid; grid-template-columns:2.35rem minmax(0,1fr); align-items:center; gap:.72rem; padding:.7rem; border-radius:.7rem; white-space:normal; }
.site-navbar .nav-panel-item + .nav-panel-item { margin-top:.12rem; }
.site-navbar .nav-item-icon { display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:.65rem; background:var(--bg-tertiary); font-size:1rem; }
.site-navbar .nav-panel-item strong,.site-navbar .nav-panel-item small { display:block; }
.site-navbar .nav-panel-item strong { font-size:.82rem; line-height:1.2; color:var(--text-primary); }
.site-navbar .nav-panel-item small { margin-top:.2rem; font-size:.68rem; line-height:1.3; color:var(--text-muted); }
.site-navbar .dropdown-divider { border-color:var(--border-color); }
.navbar-actions { display:flex; align-items:center; gap:.65rem; margin-left:.6rem; }
.navbar-tools { display:flex; align-items:center; gap:.4rem; padding:.25rem; border:1px solid var(--border-color); border-radius:.75rem; background:var(--bg-primary); }
.site-navbar .navbar-tools .theme-toggle-btn { width:2rem; height:2rem; border:0; border-radius:.55rem; background:transparent; }
.site-navbar .navbar-tools .theme-toggle-btn:hover { background:var(--bg-tertiary); }
.language-picker { display:flex; align-items:center; gap:.25rem; height:2rem; padding-left:.45rem; margin:0; color:var(--text-muted); border-left:1px solid var(--border-color); }
.site-navbar .language-picker .form-select {
    width:3.35rem; height:2rem; padding:0 1.2rem 0 .35rem; border:0;
    color:var(--text-primary)!important; background-color:var(--bg-primary)!important; font-size:.72rem;
    box-shadow:none!important; color-scheme:light; appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
    background-repeat:no-repeat; background-position:right .3rem center; background-size:.65rem .5rem;
}
.site-navbar .language-picker .form-select option {
    color:var(--text-primary)!important; background-color:var(--bg-secondary)!important;
}
[data-theme="dark"] .site-navbar .language-picker .form-select {
    color-scheme:dark; color:#f8fafc!important; background-color:#090d16!important;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
}
.auth-buttons { display:flex; align-items:center; gap:.4rem; }
.site-navbar .auth-buttons .btn { height:2.55rem; padding-inline:.9rem; border-radius:.7rem; }
.btn-ghost-auth { color:var(--text-secondary); background:transparent; border-color:transparent; }
.btn-ghost-auth:hover { color:var(--primary); background:var(--bg-tertiary); }
.site-navbar .user-menu-button { display:flex; align-items:center; gap:.55rem; height:2.65rem; padding:.3rem .65rem .3rem .35rem; color:var(--text-primary); background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:.8rem; }
.site-navbar .user-menu-button:hover { border-color:color-mix(in srgb,var(--primary) 55%,var(--border-color)); background:var(--bg-tertiary); transform:none; box-shadow:none; }
.user-avatar { display:grid; place-items:center; width:1.95rem; height:1.95rem; border-radius:.58rem; color:#fff; font-size:.78rem; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--accent)); }
.user-menu-copy { display:flex; flex-direction:column; min-width:4rem; text-align:left; line-height:1.05; }
.user-menu-copy small { color:var(--text-muted); font-size:.58rem; }
.user-menu-copy strong { margin-top:.2rem; max-width:6rem; overflow:hidden; text-overflow:ellipsis; font-size:.75rem; }
.site-navbar .user-dropdown { min-width:21rem; }
.site-navbar .user-menu { position:relative; z-index:1070; }
.site-navbar .user-dropdown { z-index:1080; }
.site-navbar .nav-logout { display:flex; align-items:center; gap:.6rem; padding:.72rem .8rem; border-radius:.7rem; color:var(--danger)!important; font-weight:700; font-size:.8rem; }
.site-menu-toggle { width:2.65rem; height:2.65rem; padding:0; border:1px solid var(--border-color); border-radius:.75rem; color:var(--text-primary); background:var(--bg-secondary); }
.site-menu-toggle i { font-size:1.45rem; }

/* Resilient world map */
.analytics-chart-fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; min-height:260px; color:var(--text-muted); text-align:center; }
.analytics-chart-fallback i { font-size:2rem; color:var(--warning); }
#map-status { min-height:1.25rem; text-align:right; }

.analytics-map-filters {
    display:grid; grid-template-columns:minmax(180px,1fr) minmax(240px,1.25fr); gap:.65rem;
    width:min(100%,560px);
}
.analytics-map-filters label { display:grid; gap:.3rem; color:var(--text-muted); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.analytics-map-filters .form-select { min-height:2.7rem; color:var(--text-primary); background-color:var(--bg-secondary); border-color:var(--border-color); font-size:.82rem; font-weight:650; text-transform:none; letter-spacing:0; }
.analytics-world-map { position:relative; display:grid; place-items:center; min-height:360px; padding:.55rem; background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--primary) 8%,transparent),transparent 58%); }
.analytics-world-map svg { display:block; width:100%; height:auto; max-height:610px; overflow:visible; }
.analytics-country-shape { fill:color-mix(in srgb,var(--primary) 12%,var(--bg-secondary)); stroke:color-mix(in srgb,var(--primary) 56%,var(--border-color)); stroke-width:1.6; vector-effect:non-scaling-stroke; filter:drop-shadow(0 12px 20px rgba(15,23,42,.08)); }
.analytics-country-fallback { stroke-dasharray:8 8; }
.analytics-city-point { cursor:pointer; outline:none; }
.analytics-city-point:focus-visible .analytics-city-dot { stroke:var(--text-primary); stroke-width:4; }
.analytics-city-halo { fill:rgba(99,102,241,.13); transform-box:fill-box; transform-origin:center; animation:analytics-pulse 2.2s ease-out infinite; }
.analytics-city-dot { stroke:var(--bg-secondary); stroke-width:3; filter:drop-shadow(0 3px 5px rgba(15,23,42,.25)); transition:r .18s ease,stroke-width .18s ease; }
.analytics-city-point:hover .analytics-city-dot { r:11; stroke-width:4; }
.analytics-city-label { fill:var(--text-primary); paint-order:stroke; stroke:var(--bg-secondary); stroke-width:4px; stroke-linejoin:round; font-size:13px; font-weight:800; pointer-events:none; }
.analytics-world-map.analytics-map-loading { opacity:.72; }
@keyframes analytics-pulse { 0% { transform:scale(.45); opacity:.8; } 75%,100% { transform:scale(1.25); opacity:0; } }
[data-theme="dark"] .analytics-country-shape { fill:color-mix(in srgb,var(--primary) 18%,#111827); filter:drop-shadow(0 14px 22px rgba(0,0,0,.28)); }

@media (max-width: 1199.98px) {
    .site-navbar { padding:.55rem 0; }
    .site-navbar .navbar-collapse { position:relative; z-index:1065; max-height:calc(100vh - 5rem); margin-top:.65rem; padding:.7rem 0 .2rem; overflow-y:auto; border-top:1px solid var(--border-color); }
    .site-nav-links { align-items:stretch; gap:.15rem; }
    .site-navbar .site-nav-links > .nav-item > .nav-link { padding:.78rem .7rem; font-size:.88rem; }
    .site-navbar .nav-panel { position:static!important; min-width:0; width:100%; margin:.15rem 0 .5rem!important; padding:.35rem; border-radius:.8rem; box-shadow:none; background:var(--bg-primary)!important; }
    .site-navbar .nav-panel-item { padding:.62rem; }
    .navbar-actions { justify-content:space-between; flex-wrap:wrap; margin:.65rem 0 0; padding-top:.7rem; border-top:1px solid var(--border-color); }
    .site-navbar .user-menu { width:100%; margin-left:0; }
    .site-navbar .user-menu-button { width:100%; justify-content:flex-start; }
    .site-navbar .user-dropdown { position:static!important; z-index:auto; width:100%; min-width:0; margin-top:.4rem!important; background:var(--bg-secondary)!important; box-shadow:none; }
}
@media (max-width: 575.98px) {
    .site-brand-copy small { display:none; }
    .site-brand-copy strong { font-size:.94rem; }
    .navbar-actions,.auth-buttons { width:100%; }
    .auth-buttons .btn { flex:1; }
    .site-navbar .user-menu { margin-left:0; }
    .site-navbar .nav-panel-item small { font-size:.66rem; }
    .analytics-map-shell,.analytics-world-map { min-height:225px; }
    .analytics-map-filters { grid-template-columns:1fr; width:100%; }
    .analytics-city-label { display:none; }
}

/* Clear homepage information hierarchy */
.home-hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,.8fr); gap:2rem; align-items:center; padding:clamp(1.6rem,4vw,3.2rem); border:1px solid var(--border-color); border-radius:1.4rem; background:radial-gradient(circle at 90% 5%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 38%),linear-gradient(135deg,color-mix(in srgb,var(--primary) 9%,var(--bg-secondary)),var(--bg-secondary)); overflow:hidden; }
.home-kicker,.section-label { display:inline-flex; align-items:center; gap:.4rem; color:var(--primary-text); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.home-hero h1 { max-width:760px; margin:.75rem 0; font-size:clamp(2rem,4.6vw,4rem); font-weight:800; line-height:1.03; letter-spacing:-.055em; }
.home-hero-copy > p { max-width:720px; margin:0; color:var(--text-secondary); font-size:1rem; line-height:1.7; }
.home-data-source { display:flex; max-width:45rem; align-items:flex-start; gap:.55rem; padding:.65rem .75rem; margin-top:.9rem; color:var(--text-secondary); border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border-color)); border-radius:.75rem; background:color-mix(in srgb,var(--primary) 5%,transparent); font-size:.68rem; line-height:1.5; }
.home-data-source i { flex:0 0 auto; margin-top:.05rem; color:var(--primary); }
.home-hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.35rem; }
.home-stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.home-stat-grid > div { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:.65rem; padding:1rem; border:1px solid var(--border-color); border-radius:.9rem; background:color-mix(in srgb,var(--bg-secondary) 86%,transparent); }
.home-stat-grid i { grid-row:1/3; align-self:center; color:var(--primary); font-size:1.15rem; }
.home-stat-grid strong { color:var(--text-primary); font-size:1.05rem; }
.home-stat-grid span { color:var(--text-muted); font-size:.68rem; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1rem; }
.section-heading span { color:var(--primary-text); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.section-heading h2 { margin:.18rem 0 0; font-size:1.35rem; font-weight:800; }
/* Unified administration shell */
.admin-shell-nav {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--card-shadow);
    padding: .8rem;
}
.admin-nav-head { display:flex; align-items:center; gap:1rem; min-width:0; }
.admin-nav-brand {
    display:flex; align-items:center; gap:.7rem; flex:0 0 auto; color:var(--text-primary);
    text-decoration:none; padding:.25rem .45rem .25rem .2rem;
}
.admin-nav-brand:hover { color:var(--primary); }
.admin-nav-brand-icon {
    display:grid; place-items:center; width:2.55rem; height:2.55rem; border-radius:.8rem;
    color:#fff; background:linear-gradient(135deg,var(--primary),var(--accent));
    box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 25%,transparent);
}
.admin-nav-brand strong,.admin-nav-brand small { display:block; white-space:nowrap; }
.admin-nav-brand strong { font-size:.92rem; }
.admin-nav-brand small { margin-top:.1rem; color:var(--text-muted); font-size:.65rem; font-weight:500; }
.admin-nav-scroll { flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--border-color) transparent; }
.admin-nav-list { display:flex; flex-wrap:nowrap; gap:.35rem; min-width:max-content; padding:.15rem; }
.admin-nav-list .nav-link {
    display:flex; align-items:center; gap:.4rem; white-space:nowrap; padding:.58rem .72rem;
    border:1px solid transparent; border-radius:.65rem; color:var(--text-secondary); font-size:.75rem; font-weight:700;
}
.admin-nav-list .nav-link:hover { color:var(--primary); border-color:var(--border-color); background:var(--bg-tertiary); }
.admin-nav-list .nav-link.active {
    color:#fff; border-color:var(--primary); background:linear-gradient(135deg,var(--primary),var(--primary-hover));
    box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 25%,transparent);
}
.admin-health-btn { min-height:2.4rem; padding:.5rem .9rem; white-space:nowrap; }
.admin-site-return { display:flex; align-items:center; }

/* Theme-safe full content administration */
.admin-page-heading { background:linear-gradient(145deg,var(--bg-secondary),color-mix(in srgb,var(--primary) 4%,var(--bg-secondary))); }
.admin-page-kicker { display:block; margin-bottom:.4rem; color:var(--primary-text); font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.admin-content-accordion { --bs-accordion-bg:transparent; --bs-accordion-border-color:var(--border-color); }
.admin-content-accordion .admin-accordion-item {
    overflow:hidden; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:1rem;
    box-shadow:var(--card-shadow);
}
.admin-content-accordion .accordion-button {
    gap:.65rem; padding:1rem 1.15rem; color:var(--text-primary); background:var(--bg-secondary);
    font-weight:750; box-shadow:none;
}
.admin-content-accordion .accordion-button:not(.collapsed) {
    color:var(--primary-text); background:color-mix(in srgb,var(--primary) 8%,var(--bg-secondary));
    border-bottom:1px solid var(--border-color);
}
.admin-content-accordion .accordion-button:focus { border-color:var(--primary); box-shadow:0 0 0 .2rem color-mix(in srgb,var(--primary) 18%,transparent); }
.admin-content-accordion .accordion-button::after { margin-left:auto; }
[data-theme="dark"] .admin-content-accordion .accordion-button::after { filter:invert(1) grayscale(1); }
.admin-accordion-count {
    display:inline-flex; align-items:center; justify-content:center; min-width:1.8rem; height:1.5rem; padding:0 .45rem;
    border-radius:999px; color:var(--primary-text); background:color-mix(in srgb,var(--primary) 12%,var(--bg-tertiary)); font-size:.7rem;
}
.admin-content-accordion .accordion-body { padding:1rem; color:var(--text-primary); background:var(--bg-primary); }
.admin-content-accordion .accordion-body > .card { box-shadow:none; }
.admin-content-accordion .table-responsive { border:1px solid var(--border-color); border-radius:.75rem; background:var(--bg-secondary); }
.confidence-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .5rem; border:1px solid; border-radius:999px; font-size:.66rem; font-weight:800; white-space:nowrap; }
.confidence-low { color:#ef4444; border-color:color-mix(in srgb,#ef4444 40%,transparent); background:color-mix(in srgb,#ef4444 10%,transparent); }
.confidence-medium { color:#d97706; border-color:color-mix(in srgb,#f59e0b 45%,transparent); background:color-mix(in srgb,#f59e0b 12%,transparent); }
.confidence-high { color:#059669; border-color:color-mix(in srgb,#10b981 45%,transparent); background:color-mix(in srgb,#10b981 12%,transparent); }

@media (max-width: 1199.98px) {
    .admin-nav-head { align-items:flex-start; flex-direction:column; }
    .admin-nav-scroll { width:100%; padding-bottom:.2rem; }
}
@media (max-width: 575.98px) {
    .admin-shell-nav { padding:.65rem; }
    .admin-nav-brand small { display:none; }
    .admin-nav-list .nav-link { padding:.52rem .65rem; }
    .admin-content-accordion .accordion-body { padding:.7rem; }
}
.home-recent-list { display:grid; }
.home-recent-list a { display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:.72rem 0; color:var(--text-primary); text-decoration:none; border-bottom:1px solid var(--border-color); }
.home-recent-list a:last-child { border-bottom:0; }
.home-recent-list strong,.home-recent-list small { display:block; }
.home-recent-list strong { font-size:.8rem; }
.home-recent-list small { margin-top:.15rem; color:var(--text-muted); font-size:.65rem; }
.home-recent-list b { color:var(--success); font-size:.78rem; white-space:nowrap; }
.compact-ranking { overflow:hidden; }
.compact-ranking-head { display:flex; align-items:center; gap:.6rem; padding:1rem 1.1rem; border-bottom:1px solid var(--border-color); }
.compact-ranking-head i { color:var(--primary); }
.compact-ranking-head h3 { margin:0; font-size:.95rem; font-weight:800; }
.compact-rank-row { display:grid; grid-template-columns:1.7rem minmax(0,1fr) auto; align-items:center; gap:.65rem; padding:.75rem 1rem; color:var(--text-primary); text-decoration:none; border-bottom:1px solid var(--border-color); }
.compact-rank-row:last-child { border-bottom:0; }
.compact-rank-row:hover { color:var(--text-primary); background:var(--bg-tertiary); }
.rank-no { display:grid; place-items:center; width:1.6rem; height:1.6rem; color:var(--text-muted); font-size:.65rem; font-weight:800; border-radius:.5rem; background:var(--bg-tertiary); }
.compact-rank-row strong,.compact-rank-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compact-rank-row strong { font-size:.78rem; }
.compact-rank-row small { color:var(--text-muted); font-size:.62rem; }
.compact-rank-row b { color:var(--success); font-size:.75rem; white-space:nowrap; }
.empty-compact { padding:2rem 1rem; color:var(--text-muted); text-align:center; font-size:.78rem; }
/* Homepage answer-first layout */
.home-question-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.home-hero > *,.home-question-grid > *,.home-answer-grid > *,.home-question-card > span:nth-child(2),.home-answer-card > span:nth-child(2),.home-recent-list a > span { min-width:0; }
.home-question-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; min-height:8.5rem; padding:1.25rem; color:var(--text-primary); text-decoration:none; border:1px solid var(--border-color); border-radius:1rem; background:var(--bg-secondary); box-shadow:var(--shadow-sm); transition:transform .2s,border-color .2s,box-shadow .2s; }
.home-question-card:hover { color:var(--text-primary); border-color:color-mix(in srgb,var(--primary) 40%,var(--border-color)); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.home-question-card > i { color:var(--text-muted); }
.home-question-card strong,.home-question-card small { display:block; }
.home-question-card strong { margin-bottom:.35rem; font-size:.92rem; line-height:1.35; }
.home-question-card small { color:var(--text-secondary); font-size:.7rem; line-height:1.55; }
.home-question-icon { display:grid; width:2.8rem; height:2.8rem; place-items:center; color:var(--primary); border-radius:.85rem; background:color-mix(in srgb,var(--primary) 11%,var(--bg-tertiary)); }
.home-question-icon.city { color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,var(--bg-tertiary)); }
.home-question-icon.target { color:var(--success); background:color-mix(in srgb,var(--success) 10%,var(--bg-tertiary)); }
.home-question-icon.route { color:var(--warning); background:color-mix(in srgb,var(--warning) 12%,var(--bg-tertiary)); }
.home-answer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.home-answer-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.85rem; padding:1rem 1.1rem; color:var(--text-primary); text-decoration:none; border:1px solid var(--border-color); border-radius:1rem; background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 5%,var(--bg-secondary)),var(--bg-secondary)); }
.home-answer-card:hover { color:var(--text-primary); border-color:color-mix(in srgb,var(--primary) 40%,var(--border-color)); }
.home-answer-icon { display:grid; width:2.5rem; height:2.5rem; place-items:center; color:var(--primary); border-radius:.75rem; background:color-mix(in srgb,var(--primary) 11%,var(--bg-tertiary)); }
.home-answer-card.danger .home-answer-icon { color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,var(--bg-tertiary)); }
.home-answer-card.success .home-answer-icon { color:var(--success); background:color-mix(in srgb,var(--success) 10%,var(--bg-tertiary)); }
.home-answer-card small,.home-answer-card strong,.home-answer-card em { display:block; }
.home-answer-card small { margin-bottom:.12rem; color:var(--text-muted); font-size:.6rem; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
.home-answer-card strong { overflow:hidden; font-size:.88rem; text-overflow:ellipsis; white-space:nowrap; }
.home-answer-card em { margin-top:.18rem; color:var(--text-secondary); font-size:.64rem; font-style:normal; }
.home-answer-card > i { color:var(--text-muted); }
.iss-tools-card { position:relative; display:grid; min-height:23rem; overflow:hidden; grid-template-columns:minmax(0,1.35fr) minmax(13rem,.65fr); color:#fff; border-radius:1.2rem; background:linear-gradient(135deg,#111827 0%,#312e81 58%,#0e7490 100%); box-shadow:0 1.2rem 3rem rgba(49,46,129,.22); }
.iss-tools-card::before { position:absolute; inset:0; background:radial-gradient(circle at 90% 10%,rgba(103,232,249,.22),transparent 31%); content:""; }
.iss-tools-copy { position:relative; z-index:2; padding:2rem; }
.iss-tools-copy .section-label { color:#a5f3fc; }
.iss-tools-copy h2 { max-width:35rem; margin:.65rem 0; color:#fff!important; font-size:1.6rem; font-weight:850; letter-spacing:-.035em; }
.iss-tools-copy p { max-width:40rem; margin:0; color:rgba(255,255,255,.76); font-size:.8rem; line-height:1.65; }
.iss-tools-features { display:flex; flex-wrap:wrap; gap:.55rem; margin:1.25rem 0; }
.iss-tools-features span { display:inline-flex; align-items:center; gap:.42rem; padding:.52rem .68rem; border:1px solid rgba(255,255,255,.14); border-radius:.7rem; color:rgba(255,255,255,.88); font-size:.66rem; font-weight:700; background:rgba(255,255,255,.07); backdrop-filter:blur(8px); }
.iss-tools-features i { color:#67e8f9; }
.iss-tools-actions { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.iss-tools-actions small { color:rgba(255,255,255,.55); font-size:.6rem; }
.iss-tools-visual { position:relative; z-index:1; min-height:19rem; }
.iss-tools-visual > span { position:absolute; display:grid; width:4rem; height:4rem; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:1.2rem; color:#cffafe; font-size:1.45rem; background:rgba(255,255,255,.09); box-shadow:0 1rem 2rem rgba(0,0,0,.16); backdrop-filter:blur(10px); }
.iss-tools-visual > span:nth-child(1) { top:18%; left:8%; }.iss-tools-visual > span:nth-child(2) { top:42%; right:7%; }.iss-tools-visual > span:nth-child(3) { bottom:12%; left:18%; }
.iss-tools-pulse { position:absolute; top:45%; left:40%; width:7rem; height:7rem; border:1px solid rgba(103,232,249,.28); border-radius:50%; box-shadow:0 0 0 2rem rgba(103,232,249,.05),0 0 0 4rem rgba(103,232,249,.025); }

/* Decision center */
.decision-center { scroll-behavior:smooth; }
.decision-hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr); align-items:center; gap:2rem; padding:2rem; margin-bottom:1rem; overflow:hidden; border:1px solid var(--border-color); border-radius:1.25rem; background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--primary) 15%,transparent),transparent 36%),var(--bg-secondary); }
.decision-hero h1 { margin:.65rem 0 .5rem; font-size:clamp(1.85rem,3vw,2.65rem); font-weight:900; letter-spacing:-.05em; }
.decision-hero p { max-width:52rem; margin:0; color:var(--text-secondary); font-size:.85rem; line-height:1.65; }
.decision-method { display:flex; align-items:flex-start; gap:.8rem; padding:1rem; color:var(--text-secondary); border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border-color)); border-radius:1rem; background:color-mix(in srgb,var(--primary) 6%,var(--bg-primary)); font-size:.69rem; line-height:1.55; }
.decision-method i { flex:0 0 auto; color:var(--success); font-size:1.25rem; }
.decision-winners { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-bottom:1rem; }
.decision-winner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.7rem; min-height:6.4rem; padding:.9rem; color:var(--text-primary); text-decoration:none; border:1px solid var(--border-color); border-radius:1rem; background:var(--bg-secondary); }
.decision-winner:hover { color:var(--text-primary); border-color:color-mix(in srgb,var(--primary) 40%,var(--border-color)); }
.decision-winner-icon { display:grid; width:2.35rem; height:2.35rem; place-items:center; color:var(--primary); border-radius:.7rem; background:color-mix(in srgb,var(--primary) 11%,var(--bg-tertiary)); }
.decision-winner.danger .decision-winner-icon { color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,var(--bg-tertiary)); }.decision-winner.success .decision-winner-icon { color:var(--success); background:color-mix(in srgb,var(--success) 10%,var(--bg-tertiary)); }.decision-winner.warning .decision-winner-icon { color:var(--warning); background:color-mix(in srgb,var(--warning) 12%,var(--bg-tertiary)); }
.decision-winner small,.decision-winner strong,.decision-winner em { display:block; }.decision-winner small { color:var(--text-muted); font-size:.55rem; font-weight:800; text-transform:uppercase; }.decision-winner strong { margin:.12rem 0; overflow:hidden; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }.decision-winner em { color:var(--text-secondary); font-size:.58rem; font-style:normal; }.decision-winner > i { color:var(--text-muted); }
.decision-nav { position:sticky; z-index:10; top:4.5rem; display:flex; gap:.45rem; padding:.55rem; margin:1rem 0; overflow-x:auto; border:1px solid var(--border-color); border-radius:.9rem; background:color-mix(in srgb,var(--bg-primary) 90%,transparent); box-shadow:var(--shadow-sm); backdrop-filter:blur(15px); }
.decision-nav a { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .75rem; color:var(--text-secondary); text-decoration:none; border-radius:.65rem; font-size:.7rem; font-weight:750; white-space:nowrap; }.decision-nav a:hover { color:var(--primary); background:var(--bg-tertiary); }
.decision-section { scroll-margin-top:8.5rem; padding:1.25rem; margin-bottom:1rem; border:1px solid var(--border-color); border-radius:1.1rem; background:var(--bg-secondary); box-shadow:var(--shadow-sm); }
.decision-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }.decision-section-head > div { position:relative; }.decision-section-head > div > span { position:absolute; top:-.55rem; left:0; color:color-mix(in srgb,var(--primary) 15%,transparent); font-size:3.5rem; font-weight:900; line-height:1; }.decision-section-head h2 { position:relative; z-index:1; margin:0 0 .35rem; font-size:1.2rem; font-weight:850; }.decision-section-head p { position:relative; z-index:1; max-width:55rem; margin:0; color:var(--text-secondary); font-size:.7rem; line-height:1.5; }
.decision-search { display:flex; min-width:15rem; align-items:center; gap:.5rem; padding:.55rem .75rem; border:1px solid var(--border-color); border-radius:.7rem; background:var(--bg-primary); }.decision-search i { color:var(--text-muted); }.decision-search input { width:100%; color:var(--text-primary); border:0; outline:0; background:transparent; font-size:.7rem; }
.decision-table { min-width:74rem; margin:0; }.decision-table th { color:var(--text-muted); font-size:.6rem; letter-spacing:.035em; text-transform:uppercase; white-space:nowrap; }.decision-table td { font-size:.69rem; }.decision-table a:not(.btn) { color:var(--text-primary); font-weight:750; text-decoration:none; }.decision-table a:not(.btn):hover { color:var(--primary); }
.decision-rank { display:grid; width:2rem; height:2rem; place-items:center; color:var(--text-muted); border-radius:.6rem; background:var(--bg-tertiary); font-size:.62rem; font-weight:850; }
.decision-entity { display:flex; min-width:10rem; align-items:center; gap:.65rem; }.decision-entity strong,.decision-entity small { display:block; }.decision-entity small { margin-top:.12rem; color:var(--text-muted); font-size:.58rem; }.entity-icon { display:grid; width:2rem; height:2rem; flex:0 0 auto; place-items:center; color:var(--primary); border-radius:.58rem; background:color-mix(in srgb,var(--primary) 10%,var(--bg-tertiary)); }.entity-icon.city { color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,var(--bg-tertiary)); }.entity-icon.target { color:var(--success); background:color-mix(in srgb,var(--success) 10%,var(--bg-tertiary)); }
.decision-subvalue { display:block; margin-top:.2rem; color:var(--text-muted); font-size:.58rem; white-space:nowrap; }.decision-subvalue .confidence-badge { font-size:.55rem; }
.service-type-badge { display:inline-flex; padding:.28rem .48rem; color:var(--primary-text); border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border-color)); border-radius:999px; background:color-mix(in srgb,var(--primary) 8%,var(--bg-tertiary)); font-size:.58rem; font-weight:850; text-transform:uppercase; }.service-type-badge.type-dns { color:var(--success); border-color:color-mix(in srgb,var(--success) 30%,var(--border-color)); background:color-mix(in srgb,var(--success) 8%,var(--bg-tertiary)); }.service-type-badge.type-game { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 30%,var(--border-color)); background:color-mix(in srgb,var(--danger) 8%,var(--bg-tertiary)); }
.target-quick-wrap { padding:1rem; margin-bottom:1rem; border:1px solid color-mix(in srgb,var(--success) 24%,var(--border-color)); border-radius:.9rem; background:color-mix(in srgb,var(--success) 4%,var(--bg-primary)); }.target-quick-wrap h3 { display:flex; align-items:center; gap:.5rem; margin:0 0 .75rem; font-size:.85rem; }.target-quick-wrap h3 i { color:var(--success); }.target-quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }.target-quick-grid a { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.12rem .6rem; padding:.8rem; color:var(--text-primary); text-decoration:none; border:1px solid var(--border-color); border-radius:.75rem; background:var(--bg-secondary); }.target-quick-grid a:hover { border-color:color-mix(in srgb,var(--success) 40%,var(--border-color)); }.target-quick-grid strong,.target-quick-grid small { display:block; }.target-quick-grid strong { font-size:.72rem; }.target-quick-grid small { margin-top:.2rem; color:var(--text-muted); font-size:.56rem; }.target-quick-grid small .service-type-badge { margin-right:.3rem; font-size:.48rem; }.target-quick-grid b { color:var(--success); font-size:.7rem; }.target-quick-grid em { grid-column:1/-1; color:var(--text-secondary); font-size:.56rem; font-style:normal; }.target-quick-grid > a > i { position:absolute; right:.65rem; bottom:.55rem; color:var(--text-muted); }
.decision-reading { scroll-margin-top:8.5rem; padding:1.4rem; margin-bottom:2rem; border-radius:1.1rem; color:#fff; background:linear-gradient(135deg,#111827,#312e81); }.decision-reading .home-kicker { color:#a5f3fc; }.decision-reading h2 { margin:.55rem 0 1rem; color:#fff!important; font-size:1.25rem; }.decision-reading-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; }.decision-reading article { padding:1rem; border:1px solid rgba(255,255,255,.1); border-radius:.8rem; background:rgba(255,255,255,.06); }.decision-reading article > i { color:#67e8f9; font-size:1.2rem; }.decision-reading h3 { margin:.5rem 0 .3rem; color:#fff!important; font-size:.8rem; }.decision-reading p { margin:0; color:rgba(255,255,255,.67); font-size:.64rem; line-height:1.55; }

/* Individual server IP / test target report */
.target-back { display:inline-flex; align-items:center; gap:.45rem; margin-bottom:1rem; text-decoration:none; font-size:.7rem; font-weight:750; }
.target-detail-hero { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1.2rem; padding:1.5rem; margin-bottom:1rem; border:1px solid var(--border-color); border-radius:1.1rem; background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--success) 11%,transparent),transparent 36%),var(--bg-secondary); }
.target-detail-icon { display:grid; width:4.5rem; height:4.5rem; place-items:center; color:var(--success); border-radius:1.15rem; background:color-mix(in srgb,var(--success) 10%,var(--bg-tertiary)); font-size:1.7rem; }.target-detail-title h1 { margin:.45rem 0 .25rem; font-size:1.65rem; font-weight:900; letter-spacing:-.04em; }.target-detail-title p { margin:0; color:var(--text-secondary); font-size:.72rem; }.target-detail-title code { color:var(--text-primary); }.target-detail-title > small { display:block; margin-top:.5rem; color:var(--text-muted); font-size:.65rem; }.target-status { display:inline-flex; padding:.24rem .45rem; margin-left:.35rem; color:var(--text-muted); border-radius:999px; background:var(--bg-tertiary); font-size:.55rem; font-weight:800; text-transform:uppercase; }.target-status.active { color:var(--success); background:color-mix(in srgb,var(--success) 10%,var(--bg-tertiary)); }
.target-confidence { display:flex; min-width:10rem; align-items:flex-end; flex-direction:column; gap:.35rem; }.target-confidence > small,.target-confidence > span { color:var(--text-muted); font-size:.58rem; }
.target-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-bottom:1rem; }.target-stat { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.15rem .7rem; padding:1rem; border:1px solid var(--border-color); border-radius:.9rem; background:var(--bg-secondary); }.target-stat > span { display:grid; width:2.25rem; height:2.25rem; grid-row:span 2; place-items:center; border-radius:.65rem; background:var(--bg-tertiary); }.target-stat > span.success { color:var(--success); }.target-stat > span.primary { color:var(--primary); }.target-stat > span.warning { color:var(--warning); }.target-stat > span.info { color:var(--info); }.target-stat small { color:var(--text-muted); font-size:.6rem; font-weight:750; }.target-stat strong { font-size:1rem; }
.target-answer-wrap { padding:1.2rem; margin-bottom:1rem; border:1px solid var(--border-color); border-radius:1rem; background:var(--bg-secondary); }.target-answer-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }.target-answer-head p { max-width:48rem; margin:0; color:var(--text-secondary); font-size:.65rem; line-height:1.5; }.target-answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }.target-answer-grid a { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.8rem; padding:1rem; color:var(--text-primary); text-decoration:none; border:1px solid var(--border-color); border-radius:.85rem; background:var(--bg-primary); }.target-answer-grid a:hover { color:var(--text-primary); border-color:color-mix(in srgb,var(--primary) 35%,var(--border-color)); }.target-answer-icon { display:grid; width:2.5rem; height:2.5rem; place-items:center; color:var(--primary); border-radius:.72rem; background:color-mix(in srgb,var(--primary) 10%,var(--bg-tertiary)); }.target-answer-icon.city { color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,var(--bg-tertiary)); }.target-answer-grid small,.target-answer-grid strong,.target-answer-grid em { display:block; }.target-answer-grid small { color:var(--text-muted); font-size:.58rem; font-weight:800; text-transform:uppercase; }.target-answer-grid strong { margin:.14rem 0; font-size:.85rem; }.target-answer-grid em { color:var(--text-secondary); font-size:.6rem; font-style:normal; }.target-answer-grid > a > i { color:var(--text-muted); }
.target-table-head h2 { margin:0 0 .25rem; font-size:1rem; font-weight:850; }.target-table-head h2 i { margin-right:.45rem; color:var(--primary); }.target-table-head p { margin:0 0 1rem; color:var(--text-secondary); font-size:.65rem; }

/* Authentication and account recovery */
.auth-recovery-card { position:relative; overflow:hidden; }
.auth-recovery-card::before { position:absolute; top:-6rem; right:-6rem; width:13rem; height:13rem; border-radius:50%; background:color-mix(in srgb,var(--primary) 8%,transparent); content:""; pointer-events:none; }
.auth-recovery-icon { position:relative; z-index:1; display:grid; width:4rem; height:4rem; margin:0 auto; place-items:center; color:var(--primary); border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border-color)); border-radius:1.15rem; background:color-mix(in srgb,var(--primary) 9%,var(--bg-tertiary)); font-size:1.55rem; box-shadow:0 .8rem 1.8rem color-mix(in srgb,var(--primary) 12%,transparent); }
.auth-recovery-card form,.auth-recovery-card .alert,.auth-recovery-card > a { position:relative; z-index:1; }

/* Text-only traceroute view */
.route-text-header,.route-text-row { display:grid; grid-template-columns:3.2rem minmax(0,1fr) 8rem; align-items:center; gap:1rem; }
.route-text-header { padding:.65rem .85rem; color:var(--text-muted); font-size:.68rem; font-weight:800; text-transform:uppercase; border-bottom:1px solid var(--border-color); }
.route-text-row { padding:.8rem .85rem; border-bottom:1px solid var(--border-color); }
.route-text-row:last-child { border-bottom:0; }
.route-text-row:hover { background:var(--bg-tertiary); }
.route-hop-number { display:grid; place-items:center; width:1.8rem; height:1.8rem; color:#fff; font-size:.7rem; font-weight:800; border-radius:.55rem; background:var(--primary); }
.route-text-row code { color:var(--text-primary); font-size:.82rem; overflow-wrap:anywhere; }
.route-hop-address { min-width:0; overflow:hidden; overflow-wrap:anywhere; word-break:break-word; }
.route-text-row strong { color:var(--success); font-size:.78rem; text-align:right; }
.route-hops-full { max-height:560px; }

@media (max-width: 1199.98px) { .decision-winners { grid-template-columns:repeat(2,minmax(0,1fr)); } .decision-reading-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 991.98px) { .home-hero { grid-template-columns:1fr; } .home-stat-grid { max-width:620px; } .home-question-grid,.home-answer-grid { grid-template-columns:1fr; } .iss-tools-card { grid-template-columns:1fr; }.iss-tools-visual { display:none; } .decision-hero { grid-template-columns:1fr; } .target-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 767.98px) { .decision-section-head,.target-answer-head { align-items:stretch; flex-direction:column; }.decision-search { min-width:0; width:100%; }.target-detail-hero { grid-template-columns:auto minmax(0,1fr); }.target-confidence { grid-column:1/-1; align-items:flex-start; }.target-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.target-answer-grid { grid-template-columns:1fr; } }
@media (max-width: 575.98px) { .home-hero { padding:1.25rem; } .home-hero h1 { font-size:clamp(1.75rem,9vw,2.2rem); overflow-wrap:anywhere; }.home-hero-copy > p { font-size:.86rem; }.home-stat-grid { width:100%; grid-template-columns:1fr; }.home-stat-grid > div { min-width:0; }.home-hero-actions .btn { width:100%; }.home-question-card { grid-template-columns:auto minmax(0,1fr); align-items:flex-start; min-height:0; }.home-question-card > i { display:none; }.home-question-card strong,.home-question-card small { overflow-wrap:anywhere; }.home-answer-card { grid-template-columns:auto minmax(0,1fr); }.home-answer-card > i { display:none; }.iss-tools-copy { padding:1.25rem; }.iss-tools-actions { align-items:stretch; flex-direction:column; }.iss-tools-actions .btn { width:100%; }.decision-hero { padding:1.25rem; }.decision-winners,.decision-reading-grid,.target-quick-grid { grid-template-columns:1fr; }.decision-section { padding:.9rem; }.target-detail-hero { align-items:flex-start; }.target-detail-icon { width:3.4rem; height:3.4rem; }.target-detail-title h1 { font-size:1.3rem; }.target-stats { grid-template-columns:1fr; }.route-text-header { display:none; }.route-text-row { grid-template-columns:2.25rem minmax(0,1fr); gap:.55rem; padding:.72rem .25rem; }.route-text-row strong { grid-column:2; justify-self:start; text-align:left; }.route-hops-full { max-height:none; }.forum-vote-action span { display:none; }.api-usage-chart { height:220px; } }
@media (prefers-reduced-motion: reduce) { .home-question-card { transition:none; } }

/* Classic forum layout */
.forum-page { max-width:1180px; margin-inline:auto; }
.forum-page-header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.7rem; border:1px solid var(--border-color); border-radius:1rem; background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 7%,var(--bg-secondary)),var(--bg-secondary)); }
.forum-page-header h1 { margin:.35rem 0; font-size:1.8rem; font-weight:850; letter-spacing:-.035em; }
.forum-page-header p { max-width:48rem; margin:0; color:var(--text-secondary); }
.forum-board,.forum-topic-panel { overflow:hidden; border:1px solid var(--border-color); border-radius:1rem; background:var(--bg-secondary); box-shadow:var(--card-shadow); }
.forum-board-title,.forum-topic-panel-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; border-bottom:1px solid var(--border-color); background:var(--bg-tertiary); }
.forum-board-title h2,.forum-topic-panel-head h2 { margin:0; font-size:1rem; font-weight:800; }
.forum-board-title > span,.forum-topic-actions > span { color:var(--text-muted); font-size:.7rem; font-weight:700; }
.forum-board-columns,.forum-topic-columns { display:grid; padding:.55rem 1.15rem; color:var(--text-muted); border-bottom:1px solid var(--border-color); font-size:.62rem; font-weight:800; letter-spacing:.045em; text-transform:uppercase; }
.forum-board-columns { grid-template-columns:minmax(0,1fr) 5rem minmax(14rem,.42fr); }
.forum-board-columns span:nth-child(2) { text-align:center; }
.forum-board-row { display:grid; grid-template-columns:auto minmax(0,1fr) 5rem minmax(14rem,.42fr) auto; align-items:center; gap:.85rem; min-width:0; padding:1rem 1.15rem; color:var(--text-primary); text-decoration:none; border-bottom:1px solid var(--border-color); transition:background .18s ease,border-color .18s ease; }
.forum-board-row:last-child { border-bottom:0; }
.forum-board-row:hover,.forum-board-row.is-active { color:var(--text-primary); background:color-mix(in srgb,var(--primary) 6%,var(--bg-secondary)); }
.forum-board-row.is-active { box-shadow:inset 3px 0 var(--primary); }
.forum-board-icon,.forum-topic-icon { display:grid; place-items:center; width:2.65rem; height:2.65rem; flex:0 0 auto; color:var(--primary-text); border-radius:.75rem; background:color-mix(in srgb,var(--primary) 10%,var(--bg-tertiary)); font-size:1.1rem; }
.forum-board-copy,.forum-board-copy strong,.forum-board-copy small,.forum-board-last,.forum-board-last strong,.forum-board-last small,.forum-topic-copy,.forum-topic-copy strong,.forum-topic-copy small { display:block; min-width:0; }
.forum-board-copy strong,.forum-topic-copy strong { overflow:hidden; color:var(--text-primary); font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.forum-board-copy small,.forum-topic-copy small,.forum-board-last small { margin-top:.2rem; color:var(--text-muted); font-size:.66rem; line-height:1.4; }
.forum-board-count,.forum-topic-stat { text-align:center; }
.forum-board-count b,.forum-board-count small,.forum-topic-stat b,.forum-topic-stat small { display:block; }
.forum-board-count b,.forum-topic-stat b { font-size:.82rem; }
.forum-board-count small,.forum-topic-stat small { color:var(--text-muted); font-size:.56rem; text-transform:uppercase; }
.forum-board-last strong { overflow:hidden; color:var(--text-secondary); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.forum-board-arrow,.forum-topic-arrow { color:var(--text-muted); }
.forum-compose { overflow:hidden; scroll-margin-top:7rem; }
.forum-compose summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; cursor:pointer; list-style:none; color:var(--text-primary); background:var(--bg-secondary); }
.forum-compose summary::-webkit-details-marker { display:none; }
.forum-compose summary > span { display:flex; align-items:center; gap:.6rem; font-weight:800; }
.forum-compose summary > span i { color:var(--primary-text); }
.forum-compose summary > small { color:var(--text-muted); }
.forum-compose summary::after { content:'+'; color:var(--primary-text); font-size:1.35rem; font-weight:700; }
.forum-compose[open] summary::after { content:'−'; }
.forum-compose-form { display:grid; gap:1rem; padding:1.15rem; border-top:1px solid var(--border-color); background:var(--bg-primary); }
.forum-topic-panel-head { background:var(--bg-secondary); }
.leaderboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start; }
.leaderboard-grid .leaderboard-section { min-width:0; }
.forum-topic-actions { display:flex; align-items:center; gap:.75rem; }
.forum-topic-columns { grid-template-columns:minmax(0,1fr) 6rem 6rem 10rem; }
.forum-topic-columns span:not(:first-child) { text-align:center; }
.forum-topic-row { display:grid; grid-template-columns:auto minmax(0,1fr) 6rem 6rem 10rem auto; align-items:center; gap:.75rem; min-width:0; padding:.9rem 1.15rem; color:var(--text-primary); text-decoration:none; border-top:1px solid var(--border-color); }
.forum-topic-list .forum-topic-row:first-child { border-top:0; }
.forum-topic-row:hover { color:var(--text-primary); background:var(--bg-tertiary); }
.forum-topic-date { display:flex; align-items:center; justify-content:center; gap:.5rem; color:var(--text-secondary); font-size:.66rem; }
.forum-topic-date > span,.forum-topic-date small { display:block; }
.forum-topic-date small { margin-top:.12rem; color:var(--text-muted); }
.forum-empty { display:grid; place-items:center; gap:.35rem; padding:3rem 1rem; color:var(--text-secondary); text-align:center; }
.forum-empty > i { color:var(--primary-text); font-size:2rem; }
.forum-empty small { color:var(--text-muted); }
.forum-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; margin-bottom:1rem; color:var(--text-muted); font-size:.72rem; }
.forum-breadcrumb a { color:var(--text-secondary); text-decoration:none; }
.forum-breadcrumb a:hover { color:var(--primary-text); }
.forum-breadcrumb span { max-width:24rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.forum-thread-title { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; padding:1.2rem 1.3rem; margin-bottom:1rem; border:1px solid var(--border-color); border-radius:1rem; background:var(--bg-secondary); }
.forum-thread-title h1 { margin:.35rem 0; overflow-wrap:anywhere; font-size:1.45rem; font-weight:850; }
.forum-thread-title p { margin:0; color:var(--text-muted); font-size:.7rem; }
.forum-message { display:grid; grid-template-columns:11.5rem minmax(0,1fr); overflow:hidden; margin-bottom:1rem; border:1px solid var(--border-color); border-radius:1rem; background:var(--bg-secondary); box-shadow:var(--card-shadow); }
.forum-message-original { border-color:color-mix(in srgb,var(--primary) 30%,var(--border-color)); }
.forum-message-author { display:flex; min-width:0; align-items:center; flex-direction:column; gap:.4rem; padding:1.25rem .9rem; border-right:1px solid var(--border-color); background:var(--bg-tertiary); text-align:center; }
.forum-avatar { display:grid; width:3rem; height:3rem; place-items:center; color:#fff; border-radius:.85rem; background:linear-gradient(135deg,var(--primary),var(--accent)); font-size:1.15rem; font-weight:850; }
.forum-avatar.is-reply { background:linear-gradient(135deg,#0f766e,#22c55e); }
.forum-message-author a { max-width:100%; overflow:hidden; color:var(--text-primary); font-size:.75rem; font-weight:800; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.forum-message-author small { color:var(--text-muted); font-size:.6rem; }
.forum-message-body { display:flex; min-width:0; min-height:12rem; flex-direction:column; padding:1rem 1.15rem; }
.forum-message-meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.7rem; margin-bottom:1rem; color:var(--text-muted); border-bottom:1px solid var(--border-color); font-size:.64rem; }
.forum-message-meta span { color:var(--primary-text); font-weight:800; }
.forum-message-actions { display:flex; justify-content:flex-end; padding-top:1rem; margin-top:auto; border-top:1px solid var(--border-color); }
.forum-reply-composer { display:grid; grid-template-columns:15rem minmax(0,1fr); gap:1.2rem; padding:1.2rem; scroll-margin-top:7rem; }
.forum-reply-composer > div { display:flex; align-items:flex-start; gap:.7rem; }
.forum-reply-composer > div > i { color:var(--primary-text); font-size:1.25rem; }
.forum-reply-composer strong,.forum-reply-composer small { display:block; }
.forum-reply-composer small { margin-top:.25rem; color:var(--text-muted); font-size:.65rem; line-height:1.4; }
.forum-reply-composer form { display:grid; gap:.8rem; }
.forum-reply-composer button { justify-self:start; }
.profile-form-section { display:flex; align-items:center; gap:.75rem; padding-top:.5rem; border-top:1px solid var(--border-color); }
.profile-form-section > i { color:var(--primary-text); font-size:1.4rem; }
.profile-form-section h2 { margin:0 0 .2rem; font-size:.95rem; }
.profile-form-section p { margin:0; color:var(--text-muted); font-size:.68rem; }
.leaderboard-section-head { display:flex; align-items:flex-start; gap:.9rem; margin-bottom:1rem; }
.leaderboard-section-head h2 { margin:.2rem 0; font-size:1.15rem; font-weight:850; }
.leaderboard-section-head p { margin:0; color:var(--text-secondary); font-size:.7rem; }
@media (max-width:991.98px) { .leaderboard-grid { grid-template-columns:1fr; } }
.leaderboard-rank-icon { display:grid; width:2.7rem; height:2.7rem; flex:0 0 auto; place-items:center; color:var(--primary-text); border-radius:.8rem; background:color-mix(in srgb,var(--primary) 11%,var(--bg-tertiary)); }
.leaderboard-rank-icon.is-ping { color:var(--success); background:color-mix(in srgb,var(--success) 10%,var(--bg-tertiary)); }

@media (max-width: 767.98px) {
    .forum-page-header { align-items:flex-start; padding:1.25rem; flex-direction:column; }
    .forum-board-columns,.forum-topic-columns { display:none; }
    .forum-board-row { grid-template-columns:auto minmax(0,1fr) auto auto; gap:.65rem; padding:.85rem; }
    .forum-board-last { display:none; }
    .forum-board-count { min-width:2.5rem; }
    .forum-board-copy small { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
    .forum-topic-panel-head { align-items:flex-start; flex-direction:column; }
    .forum-topic-row { grid-template-columns:auto minmax(0,1fr) auto; gap:.65rem; padding:.85rem; }
    .forum-topic-stat,.forum-topic-date { display:none; }
    .forum-thread-title { align-items:flex-start; flex-direction:column; }
    .forum-message { grid-template-columns:1fr; }
    .forum-message-author { align-items:center; flex-direction:row; padding:.75rem; border-right:0; border-bottom:1px solid var(--border-color); text-align:left; }
    .forum-message-author small { margin-left:auto; }
    .forum-avatar { width:2.3rem; height:2.3rem; border-radius:.65rem; font-size:.85rem; }
    .forum-message-body { min-height:10rem; padding:.9rem; }
    .forum-reply-composer { grid-template-columns:1fr; }
}