/* =================================================== */
/* AzubiGames Forum Styles (Structured)                */
/* Sections:                                           */
/*  1. Reset & Variables                               */
/*  2. Base Elements / Typography                      */
/*  3. Layout (Grid, Main, Sidebar)                    */
/*  4. Navigation / Header                             */
/*  5. Components (Cards, Widgets, Badges, Buttons)    */
/*  6. Forum Views (Category, Topic, Posts, Profile)   */
/*  7. Forms / Editor / Attachments                    */
/*  8. Pagination                                      */
/*  9. Legacy Compatibility Layer                      */
/* 10. Enhancements / Animations                       */
/* 11. Responsive Breakpoints                          */
/* 12. Utilities / Overrides                           */
/* NOTE: Deprecated blocks are marked and can be purged */
/* =================================================== */

/* --- Google Font & Globale Variablen --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg-primary: #18191c;
    --bg-secondary: #242528;
    --bg-tertiary: #303136;
    --bg-interactive: #3a3b3f;
    --border-color: #3f4147;
    --accent-primary: #5865F2;
    --accent-hover: #4f5bda;
    --text-primary: #e4e6eb;
    --text-secondary: #b0b3b8;
    --text-muted: #8a8d93;
    --success-color: #43b581;
    --danger-color: #f04747;
    --font-main: 'Inter', sans-serif;
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* --- Basis- & Reset-Styles --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background: radial-gradient(circle at 25% 15%, #1f2024, #18191c 60%);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 16px;
    padding-top: 70px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* extracted from accidental nesting in a:hover */
.strong-divider { background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); height:2px; margin:14px 0 }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* extracted from accidental nesting in img */
.topic-left { position:relative }
.topic-left:before { content:''; position:absolute; left:-12px; top:0; bottom:0; width:1px; background:linear-gradient(var(--bg-secondary), var(--bg-tertiary)); opacity:.15; }

h1, h2, h3, h4 {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

pre {
    background-color: var(--bg-primary);
    color: #fff;
    padding: 1rem;
    border-radius: var(--border-radius-sm);
    overflow-x: auto;
    white-space: pre-wrap;
    font-size: 0.9rem;
    font-family: monospace;
}

/* extracted from accidental nesting in pre */
.profile-top-card, .profile-card { border:1px solid rgba(255,255,255,0.06); backdrop-filter:blur(2px); }
.profile-card h3 { border-bottom:1px solid rgba(255,255,255,0.06); padding-bottom:4px; margin-bottom:10px; }
.replies-count { font-size:0.75rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-muted); }

.last-meta { line-height:1.15; }
code {
    font-family: monospace;
}

.widget h4 { position:relative; padding-bottom:4px; margin-bottom:10px; }
blockquote {
    margin: 1rem 0;
    padding: 1rem;
    background-color: var(--bg-tertiary);
    border-left: 4px solid var(--accent-primary);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

/* extracted from accidental nesting in blockquote */
.reply-card.note { background:#25272a; border:1px dashed var(--border-color); }
.text-muted { color:var(--text-muted) !important; }

/* --- Header --- */
.site-header {
    position: fixed;
    top: 0; left:0; right:0;
    z-index: 1000;
    height: 60px;
    display:flex; align-items:center; justify-content:space-between;
    padding: 0 2rem;
    background: rgba(36,37,40,.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}
/* Modernized header variant */
.site-header { background:linear-gradient(90deg,rgba(30,31,35,.9),rgba(40,42,46,.85)); position:fixed; top:0; left:0; right:0; display:flex; gap:2rem; padding:0 1.75rem; }
.site-header .logo h1 { font-size:1.25rem; letter-spacing:.5px; background:linear-gradient(90deg,#5865F2,#45b7af); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.site-header .logo h1 span { background:linear-gradient(90deg,#45b7af,#7ee3c6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.site-header .menu { position:relative; }
.site-header .menu ul { list-style:none; display:flex; gap:1.1rem; }
.site-header .menu a { position:relative; padding:.55rem .55rem; font-weight:500; color:var(--text-secondary); font-size:.9rem; border-radius:8px; transition:color .2s, background .25s; }
.site-header .menu a.active, .site-header .menu a:hover { color:#fff; background:rgba(255,255,255,0.06); }
.site-header .nav-underline { position:absolute; height:2px; background:linear-gradient(90deg,#5865F2,#45b7af); width:0; bottom:-6px; left:0; border-radius:4px; transition: .35s cubic-bezier(.65,.05,.36,1); }
.site-header .menu a.active { font-weight:600; }

/* user-links im header */
.user-links { display:flex; align-items:center; gap:.5rem; font-size:.85rem; }
.user-links a { color:var(--text-secondary); text-decoration:none; }
.user-links a:hover { text-decoration:underline; }

/* JS enhancement idea: move underline to active link via script (optional) */

.header-actions { display:flex; align-items:center; gap:1rem; margin-left:auto; }
.header-actions .auth-links { display:flex; align-items:center; gap:.35rem; font-size:.85rem; }
.header-actions .sep { opacity:.5; }

.theme-toggle { background:linear-gradient(135deg,#2d2f34,#27292d); border:1px solid rgba(255,255,255,0.1); color:var(--text-primary); width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem; transition:background .25s, transform .2s; }
.theme-toggle:hover { background:#33363b; }
.theme-toggle:active { transform:scale(.9); }

/* Burger for mobile */
.nav-burger { display:none; flex-direction:column; gap:5px; background:transparent; border:none; cursor:pointer; padding:6px; margin-right:.5rem; }
.nav-burger span { width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
.nav-open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2){ opacity:0; }
.nav-open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
    .site-header { padding:0 1rem; }
    .site-header .menu { position:absolute; top:60px; left:0; right:0; background:rgba(34,36,40,.96); backdrop-filter:blur(12px); padding:1rem 1.25rem 1.25rem; border-bottom:1px solid var(--border-color); transform:translateY(-120%); opacity:0; pointer-events:none; transition:.4s cubic-bezier(.65,.05,.36,1); }
    .site-header.nav-open .menu { transform:translateY(0); opacity:1; pointer-events:auto; }
    .site-header .menu ul { flex-direction:column; gap:.25rem; }
    .site-header .menu a { width:100%; border-radius:10px; }
    .nav-burger { display:flex; }
}

/* Light theme draft (toggle placeholder) */
[data-theme='light'] { --bg-primary:#f5f7fa; --bg-secondary:#ffffffd9; --bg-tertiary:#f1f3f7; --bg-interactive:#e7eaf0; --text-primary:#1e2125; --text-secondary:#4a4f57; --text-muted:#6a7079; --border-color:#d4dae2; }
[data-theme='light'] body { background:radial-gradient(circle at 25% 15%, #fff, #e3e7ef 60%); color:var(--text-primary); }
[data-theme='light'] .site-header { background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(230,235,245,.85)); }
[data-theme='light'] .site-header .menu a { color:var(--text-secondary); }
[data-theme='light'] .site-header .menu a.active, [data-theme='light'] .site-header .menu a:hover { background:rgba(0,0,0,0.08); color:#111; }
[data-theme='light'] .theme-toggle { background:#fff; color:#222; border-color:#d0d7e0; }

/* (Re-)moved layout/widget rules that were accidentally inside header */
.category-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.75rem;
    overflow: hidden;
}
.category-card-top { display:flex; justify-content:space-between; align-items:flex-start; padding:1rem 1.25rem; }
.category-title-block strong { font-size:1.1rem }
.category-description { margin-top:4px; color:var(--text-secondary); font-size:0.95rem }
.category-meta-block { display:flex; gap:0.75rem; align-items:center }
.count-block { text-align:right; color:var(--text-secondary); }
.count-number { font-weight:700; font-size:1rem }
.category-topics { padding:0.5rem 0 }
.topic-left { padding-left:1rem }
.topic-main .topic-title { font-size:1.05rem }
.topic-sub { color:var(--text-muted); font-size:0.9rem; margin-top:4px }
.topic-right { text-align:right; padding-right:1rem }
.topic-replies { font-weight:700; color:var(--text-primary) }
.topic-divider { height:1px; background:var(--border-color); margin:0.25rem 0 }
.no-topics { padding:0.85rem 1.25rem; color:var(--text-muted) }

.sidebar { padding-left:1rem }
.widget { background-color: var(--bg-secondary); border-radius:12px; padding:1rem; margin-bottom:1.25rem; border:1px solid var(--border-color); }
.join-box .join-top { background:var(--accent-primary); color:#fff; padding:0.75rem 1rem; border-radius:8px; font-weight:700 }
.join-body { padding:0.75rem 0 }
.btn-join { display:inline-block; background:var(--accent-primary); color:#fff; padding:0.5rem 0.85rem; border-radius:8px; margin-top:0.5rem }
.featured-item { padding:0.6rem 0; border-bottom:1px solid rgba(255,255,255,0.02) }
.featured-item:last-child { border-bottom:none }
.featured-meta { font-size:0.85rem; color:var(--text-muted) }
.members-online p { color:var(--text-secondary) }
.small-muted { font-size:0.85rem; color:var(--text-muted); margin-top:6px }

@media (max-width: 991px) {
    .main-layout { grid-template-columns: 1fr; }
    .sidebar { order: 2 }
    .main-content { order: 1 }
}

nav.menu ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.user-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-section .profile-link img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--accent-primary);
}

/* === Achievements === */
.profile-achievements { margin-bottom:2rem; }
.achievements-list { display:flex; flex-wrap:wrap; gap:1rem; }
.achievement-card { background:linear-gradient(135deg,#23272f,#2d313a); border-radius:12px; padding:1rem; display:flex; align-items:center; box-shadow:0 2px 8px rgba(0,0,0,0.07); min-width:220px; }
.achievement-icon { width:48px; height:48px; margin-right:1rem; border-radius:8px; background:#222; object-fit:cover; }
.achievement-info { flex:1; }
.achievement-desc { font-size:.9rem; color:var(--text-muted); margin-top:.3rem; }

/* === Freunde/Follow === */
.profile-friends { margin-bottom:2rem; }
.friends-list { list-style:none; display:flex; flex-wrap:wrap; gap:1rem; padding:0; }
.friends-list li { background:var(--bg-tertiary); border-radius:10px; padding:.7rem 1.2rem; display:flex; align-items:center; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.friend-avatar { width:36px; height:36px; border-radius:50%; margin-right:.8rem; object-fit:cover; border:2px solid var(--border-color); }

/* === Private Nachrichten === */
.profile-pms { margin-bottom:2rem; }
.pm-list { list-style:none; padding:0; }
.pm-item { background:var(--bg-tertiary); border-radius:10px; margin-bottom:.7rem; padding:1rem 1.2rem; box-shadow:0 1px 4px rgba(0,0,0,0.04); position:relative; }
.pm-item.unread { border-left:4px solid var(--accent-primary); }
.pm-from { font-weight:600; color:var(--accent-primary); margin-right:1.2rem; }
.pm-date { font-size:.85rem; color:var(--text-muted); }
.pm-message { margin-top:.5rem; font-size:1rem; color:var(--text-primary); }
.pm-chat-link { font-size:.85rem; color:var(--text-muted); text-decoration: none; }
.pm-chat-link:hover { text-decoration: underline; }

/* --- Hauptlayout (Grid) --- */
.main-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    /* allow wider layouts by default so content isn't squeezed */
    max-width: none;
    width: auto;
    /* margin set later in strong overrides to keep one source of truth */
    padding: 0;
}

@media (min-width: 992px) {
    .main-layout {
        grid-template-columns: 1fr 360px; /* bigger sidebar but main uses remaining space */
    }
}

.main-content { width: auto; }
.sidebar { width: 320px; }

/* --- Sidebar Widget Styling --- */
.sidebar-widget {
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.sidebar-widget h3 {
    font-size: 1.25rem;
    margin-top: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-widget h3 i {
    color: var(--accent-primary);
}

.sidebar-widget ul {
    list-style: none;
    padding: 0;
}
.sidebar-widget ul li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--text-secondary);
}

.sidebar-widget ul li i {
    color: var(--text-muted);
}

/* --- Recent Posts Widget --- */
.recent-post-item {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.recent-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.recent-post-item a {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
}
.recent-post-item a:hover {
    color: var(--accent-primary);
}
.recent-post-meta {
    font-size: 0.875rem;
    color: var(--text-muted);
}


/* --- Kategorie & Themen Styling (index.php) --- */
.category-group {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 2.25rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* Warning points badges */
.badge-green { background:#1f5135; color:#6bdf9d; border:1px solid #2a7d4d; padding:2px 8px; border-radius:14px; font-size:.75rem; font-weight:600; letter-spacing:.5px; }
.badge-yellow { background:#5a5119; color:#f5dc69; border:1px solid #9d8729; padding:2px 8px; border-radius:14px; font-size:.75rem; font-weight:600; letter-spacing:.5px; }
.badge-red { background:#5a1f1f; color:#ff8a8a; border:1px solid #a23636; padding:2px 8px; border-radius:14px; font-size:.75rem; font-weight:600; letter-spacing:.5px; }

/* Header area inside forum index/category pages */
.forum-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.forum-header .search-input {
    padding: 8px 10px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

.category-header-inner { display:flex;align-items:center;justify-content:space-between;gap:12px }
.category-counts { text-align:right; color:var(--text-secondary); }
.category-counts .count-number { font-weight:700; font-size:1.05rem }
.category-counts .count-label { font-size:0.85rem; color:var(--text-muted) }

/* Topic list and small meta used in category pages */
.topic-list { display:flex;flex-direction:column;gap:0.6rem;padding:0.75rem }
/* removed deprecated early .topic-row duplicate (now unified later) */
.topic-meta { display:flex;flex-direction:column;align-items:center;gap:8px }
.topic-author { font-size:0.9rem;color:var(--text-secondary);text-align:center }
.topic-body { display:flex;flex-direction:column; gap:6px }
.topic-title { font-weight:700;color:var(--text-primary);font-size:1.05rem }
.topic-excerpt { color:var(--text-muted); font-size:0.95rem; }
.topic-stats { text-align:right; color:var(--text-secondary); font-size:0.95rem }
.topic-description { font-size:0.95rem; background-color: var(--bg-tertiary); padding: 12px; border-radius: 8px; }
/* Timeline for topic events */
.topic-events-log.card { max-width:920px; margin:2rem auto; background:var(--bg-secondary); border:1px solid var(--border-color); padding:1rem 1.25rem 1.25rem; border-radius:12px; box-shadow:var(--shadow-sm); }
.topic-events-log.card h3 { font-size:1rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); margin:0 0 0.75rem; font-weight:600; }
.events-timeline { list-style:none; margin:0; padding:0; position:relative; }
.events-timeline:before { content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background:linear-gradient(var(--border-color), transparent); opacity:.5; }
.events-timeline .event-item { position:relative; display:flex; gap:.75rem; padding:.35rem 0 .35rem 0; }
.events-timeline .event-dot { position:relative; z-index:2; width:14px; height:14px; margin-top:.15rem; border-radius:50%; background:linear-gradient(135deg,#5865F2,#45b7af); box-shadow:0 0 0 2px var(--bg-secondary), 0 0 0 3px rgba(88,101,242,.35); }
.events-timeline .event-content { flex:1; }
.events-timeline .event-header { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.7rem; line-height:1.2; }
.events-timeline .ev-type { background:var(--bg-tertiary); padding:2px 6px; border-radius:4px; font-size:.6rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600; color:var(--text-secondary); }
.events-timeline .ev-actor { color:var(--text-primary); font-weight:500; }
.events-timeline .ev-time { color:var(--text-muted); font-size:.6rem; }
.events-timeline .ev-toggle { background:var(--bg-tertiary); border:1px solid var(--border-color); padding:2px 6px; border-radius:4px; font-size:.55rem; cursor:pointer; }
.events-timeline .ev-toggle:hover { background:var(--bg-interactive); }
.events-timeline .ev-label { background:var(--bg-tertiary); padding:2px 6px; border-radius:4px; font-size:.55rem; font-weight:500; }
.events-timeline .ev-label.added { border:1px solid var(--success-color); color:var(--success-color); }
.events-timeline .ev-label.removed { border:1px solid var(--danger-color); color:var(--danger-color); }
.diff-block { margin-top:6px; border:1px solid var(--border-color); background:var(--bg-tertiary); border-radius:6px; padding:6px; max-height:260px; overflow:auto; font-family:var(--mono-font,monospace); font-size:.65rem; line-height:1.15; }
.diff-line { white-space:pre-wrap; border-left:3px solid transparent; padding:1px 4px; margin:0; }
.diff-line.add{ background:rgba(46,160,67,.12); border-left-color:#2ea043; }
.diff-line.del{ background:rgba(248,81,73,.12); border-left-color:#f85149; }
.diff-line.same{ color:var(--text-muted); }
.diff-section { margin:8px 0 14px; padding:6px 8px 8px; background:rgba(255,255,255,0.02); border:1px solid var(--border-color); border-radius:8px; }
.diff-section-title { font-size:.6rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); margin:0 0 4px; opacity:.85; }
/* Reply editor global styles */
.reply-card { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:12px; padding:1rem 1.25rem; margin-top:2rem; }

/* --- Category Hero Redesign --- */
.category-hero { position:relative; border:1px solid rgba(255,255,255,0.06); border-radius:18px; margin:0 0 1.75rem; overflow:hidden; background:linear-gradient(135deg,#1e2024 0%, #22252a 45%, #1c1d21 100%); }
.category-hero-bg { position:absolute; inset:0; background:
        radial-gradient(circle at 18% 30%, rgba(88,101,242,0.25), transparent 60%),
        radial-gradient(circle at 80% 65%, rgba(69,183,175,0.22), transparent 55%),
        linear-gradient(120deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
        opacity:.9; pointer-events:none; }
.category-hero-inner { position:relative; display:flex; gap:2.25rem; padding:1.75rem 2rem 1.9rem; align-items:flex-start; }
.category-hero .hero-left { flex:1 1 auto; min-width:0; }
.category-title-display { font-size:1.9rem; letter-spacing:.5px; margin:0 0 .65rem; background:linear-gradient(90deg,#ffffff,#b9c2ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.category-hero-desc { font-size:0.95rem; line-height:1.5; color:var(--text-secondary); max-width:780px; }
.category-hero-actions { margin-top:1.05rem; display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.category-search-input { background:var(--bg-tertiary); border:1px solid var(--border-color); padding:.65rem .85rem; border-radius:10px; min-width:240px; }
.category-search-input:focus { outline:none; border-color:var(--accent-primary); box-shadow:0 0 0 1px var(--accent-primary); }
.category-hero .btn-primary { padding:.7rem 1.1rem; }
.hero-stats { display:flex; gap:1.25rem; flex-wrap:wrap; }
.hero-stat-block { background:linear-gradient(145deg,#25272b,#202125); border:1px solid rgba(255,255,255,0.06); padding:.85rem 1.05rem; border-radius:14px; min-width:110px; display:flex; flex-direction:column; gap:2px; position:relative; overflow:hidden; }
.hero-stat-block:before { content:""; position:absolute; inset:0; background:
        linear-gradient(120deg,rgba(88,101,242,0.15), rgba(69,183,175,0.15)); opacity:.45; mix-blend-mode:overlay; }
.hs-number { font-size:1.15rem; font-weight:600; letter-spacing:.5px; }
.hs-label { font-size:.65rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); font-weight:600; }

/* --- Modern Topic List --- */
.category-topics-shell { position:relative; }
.topic-list-modern { display:flex; flex-direction:column; gap:.9rem; }
.topic-item { position:relative; display:grid; grid-template-columns: 70px 1fr 170px; gap:1.2rem; padding:1rem 1.15rem 1rem 1.15rem; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,0.05); border-radius:16px; backdrop-filter:blur(3px); transition:background .28s, border-color .28s, transform .18s; }
.topic-item:hover { background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border-color:rgba(255,255,255,0.09); }
.topic-item:active { transform:scale(.985); }
.topic-item .topic-accent { position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#5865F2,#45b7af); border-radius:4px 0 0 4px; opacity:0; transition:.35s; }
.topic-item.is-pinned .topic-accent { opacity:1; }
.topic-item.is-locked { border-style:dashed; }
.topic-avatar { position:relative; width:56px; }
.topic-avatar img.avatar { width:56px; height:56px; border-radius:14px; object-fit:cover; border:2px solid rgba(255,255,255,0.15); }
.topic-avatar .status-dot { position:absolute; width:12px; height:12px; border-radius:50%; bottom:4px; right:4px; border:2px solid #1e1f23; background:var(--bg-tertiary); }
.topic-avatar .status-dot.online { background:linear-gradient(135deg,#3bc977,#2ea65d); }
.topic-avatar .status-dot.offline { background:#555b60; }
.topic-category-dot { bottom: 28px !important; right: -7px !important; }
.topic-content { display:flex; flex-direction:column; gap:.35rem; }
.topic-title-line { font-size:1rem; display:flex; gap:.4rem; align-items:center; margin:0; font-weight:600; }
.topic-link { color:var(--text-primary); }
.topic-link:hover { color:#fff; text-decoration:underline; }
.topic-flag { display:inline-flex; align-items:center; justify-content:center; font-size:.65rem; padding:3px 6px; border-radius:6px; background:linear-gradient(135deg,#2d2f34,#26282c); border:1px solid rgba(255,255,255,0.12); color:var(--text-secondary); }
.topic-flag.pinned { color:#fff; background:linear-gradient(135deg,#5865F2,#45b7af); border:none; }
.topic-flag.locked { background:linear-gradient(135deg,#5c2626,#412020); color:#f2d5d5; border:none; }
.topic-meta-line { font-size:.72rem; color:var(--text-muted); letter-spacing:.3px; display:flex; gap:.5rem; align-items:center; }
.topic-dot { opacity:.5; }
.topic-badges { display:flex; gap:.4rem; flex-wrap:wrap; }
.label-badge { background:linear-gradient(135deg,#2d3034,#232529); padding:4px 8px; font-size:.6rem; letter-spacing:.5px; border-radius:6px; text-transform:uppercase; color:var(--text-secondary); font-weight:600; border:1px solid rgba(255,255,255,0.08); }
.badge-rank { background:linear-gradient(135deg,#24262a,#26282d); padding:4px 8px; font-size:.6rem; border-radius:20px; letter-spacing:.5px; text-transform:uppercase; font-weight:600; border:1px solid rgba(255,255,255,0.08); color:var(--text-secondary); }
.topic-admin-actions { display:flex; gap:.35rem; margin-top:.25rem; }
.btn-icon { background:linear-gradient(135deg,#2a2c31,#222428); border:1px solid rgba(255,255,255,0.12); color:var(--text-secondary); width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px; cursor:pointer; transition:background .25s, color .25s; }
.btn-icon:hover { background:linear-gradient(135deg,#34363c,#292b30); color:#fff; }
.topic-stats-col { display:flex; flex-direction:column; gap:.65rem; align-items:flex-end; justify-content:flex-start; min-width:140px; }
.topic-stats-col .stat { font-size:.7rem; letter-spacing:.5px; background:linear-gradient(135deg,#2b2d31,#24262a); padding:6px 10px; border-radius:10px; display:inline-flex; align-items:center; gap:6px; color:var(--text-secondary); border:1px solid rgba(255,255,255,0.08); font-weight:600; }
.topic-stats-col .stat i { font-size:.75rem; opacity:.85; }
.last-reply-mini { display:flex; gap:.55rem; align-items:center; }
.last-reply-mini .lr-avatar img { width:34px; height:34px; object-fit:cover; border-radius:10px; border:2px solid rgba(255,255,255,0.15); }
.last-reply-mini .lr-meta { display:flex; flex-direction:column; line-height:1.15; }
.last-reply-mini .lr-user { font-size:.7rem; font-weight:600; color:var(--accent-primary); }
.last-reply-mini .lr-user:hover { color:var(--accent-hover); }
.last-reply-mini .lr-time { font-size:.6rem; color:var(--text-muted); }
.no-topics.big-empty { background:linear-gradient(135deg,#25272c,#202226); border:1px dashed rgba(255,255,255,0.15); padding:1.25rem 1.5rem; border-radius:14px; text-align:center; font-size:.9rem; color:var(--text-muted); }
.gradient-widget { background:linear-gradient(135deg,#202226,#23252a); position:relative; overflow:hidden; }
.gradient-widget:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 25%, rgba(88,101,242,0.2), transparent 60%), radial-gradient(circle at 80% 70%, rgba(69,183,175,0.18), transparent 55%); opacity:.55; mix-blend-mode:overlay; pointer-events:none; }

@media (max-width: 900px) {
    .category-hero-inner { flex-direction:column; gap:1.25rem; padding:1.4rem 1.25rem 1.6rem; }
    .hero-stats { order:2; }
    .topic-item { grid-template-columns:60px 1fr; }
    .topic-stats-col { flex-direction:row; align-items:center; justify-content:flex-start; gap:.75rem; margin-top:.5rem; }
}
.reply-form .editor-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.reply-form .editor-toolbar button{background:var(--bg-tertiary);border:1px solid var(--border-color);padding:6px 10px;border-radius:8px;cursor:pointer;font-size:.75rem;color:var(--text-secondary);transition:.2s;background:linear-gradient(var(--bg-tertiary),var(--bg-secondary));}
.reply-form .editor-toolbar button:hover{color:var(--text-primary);background:var(--bg-secondary);} 
.reply-form .editor-toolbar button:active{transform:scale(.95);} 
.reply-form .rich-editor{border:1px solid var(--border-color);background:linear-gradient(145deg,var(--bg-tertiary),var(--bg-secondary));min-height:180px;padding:10px 12px;border-radius:10px;line-height:1.45;margin-bottom:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);} 
.reply-form .rich-editor:focus{outline:2px solid var(--accent-primary); outline-offset:2px;} 
.reply-actions button.btn-primary{padding:.6rem 1.1rem;border-radius:8px;} 
.reply-meta .avatar{width:56px;height:56px;border-radius:12px;object-fit:cover;border:2px solid var(--bg-tertiary);} 
.reply-card .locked-note{margin-bottom:.75rem;} 
.post-wrapper .post-header-actions .btn-icon{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:.65rem;transition:.2s;} 
.post-wrapper .post-header-actions .btn-icon:hover{background:var(--bg-secondary);color:var(--text-primary);} 
.post-wrapper .post-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;font-size:.75rem;color:var(--text-muted);} 
.post-wrapper .post-body-content{word-wrap:break-word;overflow-wrap:anywhere;} 
.post-edit-form textarea{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:8px 10px;color:var(--text-primary);font-family:inherit;font-size:.85rem;} 
.post-edit-form textarea:focus{outline:2px solid var(--accent-primary);}
/* Upload status + drag styles */
.upload-status { margin:6px 0 4px; font-size:.65rem; display:flex; flex-direction:column; gap:4px; }
.upload-status .upload-row { display:flex; align-items:center; gap:.5rem; background:var(--bg-tertiary); border:1px solid var(--border-color); padding:4px 6px; border-radius:6px; }
.upload-status .upload-row .name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-status .upload-row .bar { width:120px; background:var(--bg-secondary); height:6px; border-radius:4px; overflow:hidden; position:relative; }
.upload-status .upload-row .bar .p { position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#5865F2,#45b7af); transition:.25s; }
.upload-status .upload-row .result { font-weight:600; color:var(--text-secondary); min-width:42px; text-align:right; }
#reply-editor.drag { outline:2px dashed var(--accent-primary); outline-offset:2px; }

@media (max-width: 768px) {
    .topic-row { grid-template-columns: 48px 1fr; }
    .topic-stats { display:none }
}

.category-header {
    background-color: var(--bg-tertiary);
    padding: 1.25rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
.category-header::after {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 6px;
    background: var(--accent-primary);
    border-radius: 6px;
}
.category-header a {
    color: var(--text-primary);
}

/* duplicate mid topic-row (deprecated – see unified override section later) */
/* removed deprecated mid .topic-row duplicate (now unified later) */

/* richer main page/topic list visuals */
.category-description {
    padding: 0.75rem 1.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    border-top: 1px dashed rgba(255,255,255,0.02);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.02));
}

.category-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.topic-excerpt {
    color: var(--text-muted);
    font-size: 1rem;
    margin-top: 0.4rem;
    max-width: 80ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-row .topic-author { color: var(--text-secondary); font-size:0.9rem }
.topic-row .topic-tags { display:inline-flex; gap:6px; margin-top:6px }
.topic-row .topic-tags .category-badge { font-size:0.75rem; padding:4px 8px }
.topic-row .online-badge { margin-left:6px; }


.topic-row:last-child {
    border-bottom: none;
}

/* removed generic .topic-row:hover to prevent clashes with unified hover styles */

/* Status Dots (legacy inline variant removed; use .status-dot block later) */

/* Error page */
.error-page { background:
        radial-gradient(circle at 18% 30%, rgba(88,101,242,0.25), transparent 60%),
        radial-gradient(circle at 80% 65%, rgba(69,183,175,0.22), transparent 55%),
        linear-gradient(120deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
        opacity:.9; padding:2rem; border:1px solid var(--border-color); border-radius:12px; text-align:center; }
.error-page h1 { font-size:4rem; margin:0 0 1rem; }
.error-page p { margin:0.5rem 0; }

/* layout widgets consolidated near header section */

.topic-icon i {
    font-size: 2rem;
    color: var(--accent-primary);
}

.topic-details a {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.15rem;
    display: block;
}

.topic-details .meta {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.topic-stats {
    text-align: right;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.topic-stats div {
    display: block;
}

/* --- Topic Ansicht (topic.php) --- */
.topic-header {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.topic-header h1 {
    margin: 0;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---- Heavier, card-like category & topic list look ---- */
.category-group {
    border-radius: 12px;
    padding: 0.5rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
}
.category-header {
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
}
/* heavier card variant (deprecated – unified later) */
/* removed heavier card variant duplicate of .topic-row (now unified later) */
.topic-row:last-child { margin-bottom: 0 }
.topic-icon img, .topic-icon i { width:44px; height:44px; display:inline-block }
.topic-details a { font-size: 1.05rem }
.topic-stats { text-align:right; font-size:0.9rem; color:var(--text-secondary) }

/* Sidebar cards thicker and with rounded small panels */
.sidebar-widget { padding: 1rem; border-radius: 12px; box-shadow: none; border: 1px solid rgba(255,255,255,0.03) }

/* === Topic Page: Legacy post card styles (DEPRECATED, replaced by .post-enhanced) === */
/* Removed old .post-wrapper intensive styling to avoid conflicts. Kept minimal spacing only. */
.post-wrapper { margin-bottom:1rem; }
.post-wrapper .post-header { font-size:0.75rem; color:var(--text-muted); }

@media (min-width: 992px) {
    .topic-page { max-width: 1100px }
    .topic-row { grid-template-columns: 80px 1fr 260px }
}

@media (max-width: 768px) {
    .topic-row { grid-template-columns: 48px 1fr; padding:10px }
    .post-layout { grid-template-columns: 1fr !important }
}

/* small chips used inside topic header */
.topic-header .meta-chips { display:flex; gap:8px; margin-top:10px; align-items:center }
.meta-chip { background: var(--bg-tertiary); padding:6px 10px; border-radius:999px; font-size:0.85rem; color:var(--text-secondary); border:1px solid var(--border-color) }
.meta-chip .fa { margin-right:6px; color:var(--accent-primary) }

/* Topic page wrapper: center & narrow for readable threads */
.topic-page { max-width: 920px; margin: 0 auto; }

/* Old grid/flex post-layout removed (now defined inside .post-enhanced in consolidated section). */

/* make first post stand out with a subtle card */
/* Duplicate variant of .post-wrapper removed (merged). */

.reply-card { background: transparent; border: none; padding: 0; margin-bottom: 0.75rem }
.reply-card .reply-meta { width:160px; background: var(--bg-secondary); padding:0.9rem; border-radius:8px; border:1px solid var(--border-color); text-align:center }
.reply-card .reply-content { background: var(--bg-secondary); padding:0.9rem; border-radius:8px; border:1px solid var(--border-color) }

.reply-form textarea { min-height:140px }


.topic-header h1 .fa-lock {
    font-size: 1.4rem;
    color: var(--text-muted);
}

.topic-meta-info {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Flex variant for post-layout removed (handled by .post-enhanced). */

.post-user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.post-user-profile img.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.user-details .username {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}
.user-details .rank-display {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.post-body {
    flex: 1;
    min-width: 0;
}

.post-body-content {
    line-height: 1.7;
    word-wrap: break-word;
}

.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.signature {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-style: italic;
    opacity: 0.8;
}

.post-actions a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
}
.post-actions a:hover {
    color: var(--accent-primary);
}

/* Removed responsive adjustments for deprecated layout. */


/* --- Formulare & Antwortbox --- */
.reply-box {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}
.reply-box textarea, form input[type="text"], form textarea {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.75rem;
    color: var(--text-primary);
    font-family: var(--font-main);
    min-height: 150px;
    resize: vertical;
}
form input[type="text"]{
    min-height: auto;
}

.reply-box button, .btn-primary, form input[type="submit"] {
    background-color: var(--accent-primary);
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 1rem;
}
.reply-box button:hover, .btn-primary:hover, form input[type="submit"]:hover {
    background-color: var(--accent-hover);
}

/* --- Paginierung (Legacy simple variant; modern variant is .topic-pagination-bar) --- */
main .pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0;
}
main .pagination a, main .pagination .current-page {
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
main .pagination a:hover { background: var(--bg-interactive); }
main .pagination .current-page { background: var(--accent-primary); border-color: var(--accent-primary); font-weight: bold; }

/* --- Status Badges --- */
.online-badge, .offline-badge, .verified-post, .category-badge {
    padding: 3px 8px;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
    display: inline-block;
}
.online-badge { background-color: var(--success-color); }
.offline-badge { background-color: var(--danger-color); }
.verified-post, .category-badge { background-color: var(--accent-primary); }

/* --- Rank Badge Styling (visible in posts & profiles) --- */
.badge-rank {
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    background:linear-gradient(90deg,#5b81ff,#7ee3c6); /* fallback, will be overridden by [data-tier] */
    color:#fff;
    font-weight:600;
    font-size:0.85rem;
}

/* --- Modals (aus altem CSS) --- */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}
.modal.show, .modal[style*='display: flex'] {
    display: flex !important;
}
.modal-content {
    background-color: var(--bg-secondary);
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    width: 90%;
    box-shadow: var(--shadow-md);
    position: relative;
    animation: fadeInModal 0.3s;
}
@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.close-button {
    color: var(--text-muted);
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
}
.close-button:hover {
    color: var(--text-primary);
}


.edit-btn {
    background: var(--accent-primary);
    color: #fff;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 6px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.edit-btn:hover { background: var(--accent-hover); }

.badges-list { display:flex; flex-direction:column; gap:0.5rem }
.badges-list .badge-rank { display:inline-block }

/* Label Auswahl (Chips) */
.labels-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 .8rem}
.labels-chips .chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:.35rem .55rem;border-radius:999px;cursor:pointer;user-select:none;font-size:.8rem}
.labels-chips .chip input{appearance:none;width:14px;height:14px;border-radius:3px;border:1px solid var(--border-color);background:var(--bg-secondary);display:inline-block;position:relative}
.labels-chips .chip input:checked{background:var(--accent-primary);border-color:var(--accent-primary)}
.labels-chips .chip input:checked::after{content:"";position:absolute;inset:3px;background:#fff;border-radius:2px}
.labels-chips .chip:hover{border-color:var(--accent-primary)}


/* --- Mitglieder-Grid --- */
.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}
.member-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    border-radius: var(--border-radius-sm);
}
.member-card img { width:92px; height:92px; border-radius:50%; border:3px solid var(--accent-primary); object-fit:cover }
.member-card .meta { display:flex; flex-direction:column }
.member-card .meta .name { font-weight:700 }

/* Enhanced members listing */
.member-avatar-wrap { position:relative; display:inline-block; }
.member-avatar-img { width:92px; height:92px; border-radius:16px; border:2px solid rgba(255,255,255,0.06); object-fit:cover; }
.member-card { background:linear-gradient(135deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.05); border-radius:14px; padding:1rem 1.15rem; transition:background .25s, transform .18s; }
.member-card:hover { background:linear-gradient(135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015)); transform:translateY(-3px); }
.member-card .badge-row { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.35rem 0 .4rem; }
.member-card .badge-rank { font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; padding:4px 8px; }
.member-card .rank { font-size:.55rem; letter-spacing:.5px; text-transform:uppercase; padding:4px 8px; background:#444; border-radius:999px; }
.member-card .joined { font-size:.6rem; letter-spacing:.3px; margin-top:.15rem; }
.member-card .status-dot { position:absolute; bottom:4px; right:4px; width:12px; height:12px; border:2px solid var(--bg-secondary); }

/* Profile badge / rank alignment */
.profile-badges, .rank-display { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; flex-direction: row; align-content: space-around; justify-content: flex-start; align-items: center; }
.profile-top-card .badge-rank { font-size:.7rem; padding:5px 9px; letter-spacing:.5px; text-transform:uppercase; }
.profile-top-card .profile-badges .rank { font-size:.6rem; }
.profile-top-card { display:flex; flex-direction:row; gap:2rem; padding:1.25rem 1.5rem; background:linear-gradient(135deg,rgba(255,255,255,0.02),rgba(255,255,255,0.005)); border-radius:16px; }
.profile-left { display:flex; flex-direction:column; gap:.5rem; }
.profile-name h2 { margin:.25rem 0 .15rem; font-size:1.5rem; letter-spacing:.5px; }
.profile-avatar-large img { width:160px; height:160px; border-radius:24px; object-fit:cover; border:3px solid rgba(255,255,255,0.08); }
.profile-right .profile-card { background:linear-gradient(135deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01)); }
.profile-card h3 { font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); margin-top:0; }
.profile-card { border-radius:14px; }
.profile-sidebar .profile-card { margin-bottom:1rem; }
.badges-list .badge-rank { font-size:.6rem; padding:4px 8px; text-transform:uppercase; }
.comment-item { position:relative; }
.comment-item .comment-head { font-size:.7rem; }
.comment-item .comment-author { font-weight:600; }
.comment-item .btn-inline { font-size:.6rem; }
.comment-item .comment-textarea-small { font-size:.65rem; }

/* Deprecated .post-card / old .reply-card styles removed (unified under enhanced topic page styles). */

.profile-title {
    padding-left: calc(120px + 3rem);
    padding-top: 1rem;
}
.profile-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    margin-top: 80px; /* Space for avatar */
}
.profile-card {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}


/* --- Shoutbox --- */
.shoutbox {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 400px; /* Or adjust as needed */
}

#shoutbox-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse; /* New messages at the bottom */
    gap: 0.75rem;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) var(--bg-tertiary);
}

#shoutbox-messages::-webkit-scrollbar { width: 8px; }
#shoutbox-messages::-webkit-scrollbar-track { background: var(--bg-tertiary); border-radius: 4px; }
#shoutbox-messages::-webkit-scrollbar-thumb { background: var(--accent-primary); border-radius: 4px; }

.shoutbox-message {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    padding: 0.75rem;
    animation: fadeInMessage 0.3s ease;
}
@keyframes fadeInMessage {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.shoutbox-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.shoutbox-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--accent-primary);
}

.shoutbox-user-info a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
}
.shoutbox-user-info small {
    color: var(--text-muted);
}

.shoutbox-content {
    color: var(--text-primary);
    font-size: 0.95em;
    margin-left: calc(32px + 0.75rem); /* Align with username */
    word-wrap: break-word;
}
.shoutbox-time {
    color: var(--text-muted);
    font-size: 0.8em;
    float: right;
}

#shoutbox-form {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

#shoutbox-input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.5rem;
    color: var(--text-primary);
}
#shoutbox-form button {
    margin-top: 0;
    padding: 0.5rem 1rem;
}


/* --- Notifications --- */
.notify-dropdown-modern {
  position: relative;
  display: inline-block;
}
.notify-toggle-modern {
  background: transparent;
  color: var(--text-primary);
  border: none;
  border-radius: 50%;
  padding: 10px;
  font-size: 1.3em;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.notify-toggle-modern:hover {
  color: var(--accent-primary);
}
.notify-badge-modern {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--danger-color);
  color: #fff;
  border-radius: 50%;
  padding: 1px 6px;
  font-size: 0.75em;
  font-weight: bold;
}
.notify-list-modern {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
    background: var(--bg-secondary);
  min-width: 320px;
  box-shadow: var(--shadow-md);
  border-radius: var(--border-radius-md);
  padding: 0;
  list-style: none;
  overflow: hidden;
  z-index: 1001;
}
/* New structured layout */
.notify-list-modern .notify-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem .75rem; background:linear-gradient(135deg,var(--bg-tertiary) 0%, var(--bg-secondary) 90%); border-bottom:1px solid var(--border-color); }
.notify-head-title { font-size:.8rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--accent-primary); }
.notify-list-modern .notify-controls { background:transparent; border:none; padding:0; display:flex; gap:.4rem; }
.notify-list-modern .notify-controls button { background:var(--bg-tertiary); border:1px solid var(--border-color); color:var(--text-primary); font-size:.65rem; padding:.35rem .55rem; border-radius:6px; cursor:pointer; font-weight:600; }
.notify-list-modern .notify-controls button:hover { background:var(--bg-interactive); border-color:var(--accent-primary); }
.notify-list-modern .notify-items { max-height:340px; overflow:auto; display:block; }
.notify-list-modern .notify-items::-webkit-scrollbar { width:8px; }
.notify-list-modern .notify-items::-webkit-scrollbar-track { background:var(--bg-tertiary); }
.notify-list-modern .notify-items::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:4px; }
.notify-list-modern .notify-items::-webkit-scrollbar-thumb:hover { background:var(--accent-primary); }
.notify-dropdown-modern:hover .notify-list-modern,
.notify-dropdown-modern:focus-within .notify-list-modern {
  display: block;
}
.notify-toggle-modern.notify-open .notify-list-modern { display:block; }
.notify-toggle-modern .notify-list-modern { pointer-events:auto; }
.notification-item-modern {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s;
}
.notification-item-modern:last-child { border-bottom: none; }
.notification-item-modern:hover { background-color: var(--bg-interactive); }
.notification-item-modern.unread-modern { background: var(--bg-tertiary); }
.notify-icon { color: var(--accent-primary); }
.notify-content { flex: 1; }
.notify-reason { font-weight: bold; color: var(--text-primary); font-size: 0.8em; }
.notify-desc { color: var(--text-secondary); font-size: 0.7em; display: block; }
.notify-date { color: var(--text-muted); font-size: 0.8em; display: block; margin-top: 0.25rem; }
/* Controls */
.notify-controls { display:flex; gap:.35rem; padding:.4rem .5rem .3rem; background:var(--bg-secondary); border-bottom:1px solid var(--border-color); }
.notify-controls button { background:var(--bg-tertiary); color:var(--text-primary); border:1px solid var(--border-color); padding:.25rem .55rem; font-size:.8rem; border-radius:6px; cursor:pointer; transition:background .18s,border-color .18s; }
.notify-controls button:hover { background:var(--bg-interactive); border-color:var(--accent-primary); }
.notify-controls .notify-mark-all { font-weight:600; }
.notify-controls .notify-load-more { font-weight:600; }

/* Notification animation states */
.notify-anim-pre { opacity: 0; transform: translateY(-4px); }
.notify-anim-in { animation: notifyFadeIn .38s cubic-bezier(.4,.12,.25,1) forwards; }
@keyframes notifyFadeIn {
    0% { opacity: 0; transform: translateY(-4px) scale(.98); }
    60% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Pulse badge when new unread appears */
.notify-badge-modern.new-pulse { animation: notifyPulse 1.6s ease-in-out 2; }
@keyframes notifyPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,80,80,0.5); }
    70% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(255,80,80,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,80,80,0); }
}

/* --- Notifications (Mobile) --- */
@media (max-width: 768px) {
    .notify-list-modern { position: fixed; top: 0; right: 0; width: 100%; max-height: 100%; overflow-y: auto; z-index: 9999; }
    .notify-toggle-modern { display: block; }
}

/* --- Tickets & Reports --- */
.data-table th, .data-table td { padding:.55rem .6rem; border-bottom:1px solid var(--border-color); text-align:left; }
.data-table thead th { background:var(--bg-tertiary); font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; }
.data-table tbody tr:hover { background:var(--bg-tertiary); }
.badge-status { display:inline-block; padding:.15rem .45rem; border-radius:999px; font-size:.55rem; letter-spacing:.5px; text-transform:uppercase; background:var(--bg-tertiary); }
.status-open { background:#1e5128; color:#d1f7d9; }
.status-in_progress { background:#4b4670; color:#e4ddff; }
.status-closed { background:#5b3d3d; color:#ffe2e2; }
.ticket-activity .ta-item { background:var(--bg-tertiary); padding:.5rem .6rem; border:1px solid var(--border-color); border-radius:6px; display:flex; gap:.35rem; align-items:center; }
.ticket-messages .avatar-col img { box-shadow:0 2px 4px rgba(0,0,0,.3); }
.ticket-messages .msg-author { font-size:.65rem; }
.ticket-messages .msg-body { font-size:.7rem; }
.ticket-activity .ta-item strong { font-size:.65rem; }
.ticket-activity .ta-time { font-family:monospace; font-size:.55rem; color:var(--text-muted); }
.ticket-activity .ev-status_change strong { color:#82d977; }
.ticket-activity .ev-priority_change strong { color:#ffcc66; }
.ticket-activity .ev-merge_report strong { color:#66b5ff; }
.ticket-activity .ev-auto_create_report strong { color:#ff8899; }
.ticket-activity .ev-reply strong { color:var(--accent-primary); }
.report-form textarea { background:var(--bg-tertiary); border:1px solid var(--border-color); color:var(--text-primary); padding:.5rem; border-radius:8px; font-size:.75rem; }
.report-form textarea:focus { outline:2px solid var(--accent-primary); }
.report-form button.btn-primary { font-size:.7rem; }
.ticket-meta select { background:var(--bg-tertiary); border:1px solid var(--border-color); color:var(--text-primary); padding:.2rem .4rem; border-radius:6px; }
.ticket-meta .btn-inline { background:var(--bg-tertiary); border:1px solid var(--border-color); }
/* Ticket / Report messages alignment */
.ticket-messages { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem;}
.ticket-msg { display:flex; gap:.6rem; padding:.4rem .55rem; max-width:760px; position:relative; }
.ticket-msg.other { align-self:flex-start; }
.ticket-msg.mine { align-self:flex-end; flex-direction:row-reverse; }
.ticket-msg .avatar-col img { width:42px; height:42px; border-radius:10px; object-fit:cover; border:1px solid var(--border-color); box-shadow:0 2px 4px rgba(0,0,0,.35); }
.ticket-msg .msg-main { background:var(--bg-tertiary); padding:.55rem .7rem .65rem; border-radius:14px; display:flex; flex-direction:column; gap:.3rem; box-shadow:0 2px 4px rgba(0,0,0,.25); font-size:.7rem; line-height:1.35; min-width:180px; }
.ticket-msg.mine .msg-main { background:linear-gradient(135deg,#5865F2,#4554d6); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.45); }
.ticket-msg.mine .msg-main a { color:#fff; }
.ticket-msg.staff.other .msg-main { border:1px solid rgba(88,101,242,0.45); }
.ticket-msg.staff.mine .msg-main { border:1px solid rgba(255,255,255,0.35); }
.ticket-msg .msg-head { display:flex; justify-content:space-between; align-items:center; gap:.75rem; font-size:.55rem; }
.ticket-msg.mine .msg-head { flex-direction:row-reverse; }
.ticket-msg .msg-author { font-weight:600; display:flex; align-items:center; gap:.3rem; }
.ticket-msg.mine .msg-author { color:#fff; }
.ticket-msg .badge-staff { background:var(--bg-interactive); padding:2px 5px; border-radius:4px; font-size:.5rem; letter-spacing:.5px; text-transform:uppercase; }
.ticket-msg.mine .badge-staff { background:rgba(255,255,255,0.3); }
.ticket-msg .msg-time { font-family:monospace; color:var(--text-muted); }
.ticket-msg.mine .msg-time { color:rgba(255,255,255,0.75); }
.ticket-msg .msg-body { font-size:.7rem; }


/* --- Mobile Anpassungen --- */
@media (max-width: 767px) {
    body { padding-top: 60px; }
    header { padding: 0 1rem; }
    .main-layout { margin-top: 1rem; padding: 0 0.75rem; }
    .topic-row {
        grid-template-columns: 40px 1fr;
        grid-template-areas: "icon details" "icon meta";
        padding: 0.75rem;
        gap: 0.25rem 1rem;
    }
    .topic-icon { grid-area: icon; }
    .topic-details { grid-area: details; }
    .topic-details .meta { grid-area: meta; }
    .topic-stats { display: none; }
    .topic-details a { font-size: 1rem; }
    .user-section .profile-link, .search-form { display: none; }
    .profile-grid { grid-template-columns: 1fr; margin-top: 60px; }
    .profile-title { padding-left: 0; text-align: center; margin-top: -30px; }
    .profile-avatar { left: 50%; transform: translateX(-50%); }
}

/* --------------------------------------------------- */
/* Visual fixes & overrides to match modern forum layout  */
/* - center the main container and keep a consistent grid  */
/* - unify avatars and card paddings, fix reply layout      */
/* --------------------------------------------------- */

/* center the forum content with a comfortable max width */
/* Removed fixed width centering (fluid layout) */
.main-content { width:100%; }
.sidebar { width:auto; }

/* make category groups breathe and use full available width */
.category-group { padding: 0.75rem 1rem; }
.category-header { padding: 1rem 1.25rem; }

/* unify topic row card appearance (single card, no double borders) */
.topic-list .topic-row,
.category-list .topic-row,
.category-group .topic-row {
    background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    padding: 14px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.topic-list .topic-row:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }

/* thin separators between topics for readability */
.category-list .topic-row { border-bottom: 1px solid rgba(255,255,255,0.02); }
.category-list .topic-row + .topic-row { margin-top: 8px; }

/* avatar sizing consistency */
.avatar, .avatar-sm, .post-card .post-meta .avatar, .post-meta-column img.avatar { width:84px; height:84px; border-radius:10px; object-fit:cover; }
.avatar-fallback { box-shadow:0 0 0 2px var(--bg-tertiary); background:#2d2f34; }
.topic-meta .avatar-sm { width:56px; height:56px; border-radius:8px }

/* ensure topic page uses the main-content column width (remove extra internal max-width) */
.main-content .topic-page { max-width: none; padding: 0; }

/* Post card cleanup - single clear card with subtle left accent for OP */
.post-wrapper {
    border: 1px solid rgba(255,255,255,0.04);
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

/* Use a grid for posts on larger screens so left meta column is stable */
@media (min-width: 768px) {
    .post-layout {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 1.25rem;
        align-items: start;
        padding: 0;
        background: transparent;
        border: none;
    }
    .post-user-profile { flex-direction: column; padding-right: 0; border-right: none; }
    .post-meta-column img.avatar { width: 96px; height: 96px; }
}

/* Reply form should align with post cards */
.reply-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    align-items: start;
    background: transparent;
    border: none;
    padding: 1rem 0;
}

/* smaller screens use stacked layout for replies */
@media (max-width: 767px) {
    .reply-card { grid-template-columns: 56px 1fr; }
}

/* tighten up the topic header and tag chips */
.topic-header { padding: 1rem; margin-bottom: 1rem; }
.topic-header .meta-chips { gap: 10px; }
.meta-chip { font-size: 0.85rem; padding: 5px 10px }

/* tweak sidebar widget visual weight to match main cards */
.sidebar-widget { border: 1px solid rgba(255,255,255,0.03); box-shadow: none; }

/* Small polish: ensure footer sits below centered content */
footer { margin-top: 2.5rem; }

/* header notify wrapper and button */
.notify-wrap { margin-right: 8px; position: relative; }
.notify-toggle-btn { background: transparent; border: none; color: var(--text-primary); font-size: 1.35rem; cursor: pointer }
/* header-specific notify badge placement (don't hide globally) */
.notify-wrap .notify-badge-modern { position: absolute; top: -6px; right: -6px }

/* small header helpers */
.forum-header-left { display:flex; gap:12px; align-items:center }
.meta-created { margin-left:8px; color:var(--text-muted) }
.meta-replies { margin-left:8px; color:var(--text-secondary) }

.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem }
.page-header-right { display:flex; gap:8px; align-items:center }

.search-input { padding:8px 10px; border-radius:6px; border:1px solid var(--border-color); background:var(--bg-tertiary); color:var(--text-primary) }

/* Modal (generic) */
.modal-open { overflow:hidden; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); display:flex; align-items:flex-start; justify-content:center; padding:4rem 1rem 2rem; z-index:2000; backdrop-filter: blur(3px); }
.modal-dialog { width:100%; max-width:680px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.4); display:flex; flex-direction:column; animation:modalIn .35s ease; }
@keyframes modalIn { from { opacity:0; transform:translateY(15px) scale(.97);} to { opacity:1; transform:translateY(0) scale(1);} }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; border-bottom:1px solid var(--border-color); }
.modal-header h3 { margin:0; font-size:1.05rem; }
.modal-close { background:transparent; border:none; color:var(--text-primary); font-size:1.25rem; cursor:pointer; padding:.25rem .5rem; border-radius:6px; }
.modal-close:hover { background:var(--bg-tertiary); }
.modal-body { padding:1rem 1.2rem 1.4rem; max-height:60vh; overflow:auto; }
.modal-loading { padding:2rem; text-align:center; font-size:.85rem; color:var(--text-secondary); }
.ach-modal-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; }
.ach-item { display:flex; gap:1rem; padding:.75rem .85rem; background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:10px; position:relative; }
.ach-icon { font-size:1.8rem; line-height:1; width:40px; text-align:center; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.ach-info { flex:1; display:flex; flex-direction:column; gap:2px; }
.ach-title { font-weight:600; color:var(--text-primary); }
.ach-desc { font-size:.75rem; color:var(--text-secondary); }
.ach-date { font-size:.65rem; color:var(--text-muted); margin-top:.25rem; }

.label-inline { margin-right:8px }

.profile-comment-form { margin-top:0.75rem }
.profile-comment-form .comment-textarea { min-height:80px }
.profile-comment-form .form-actions { margin-top:0.5rem }

/* admin users */
.admin-user-row { border-top:1px solid rgba(255,255,255,0.03) }
.admin-user-avatar { width:34px; height:34px; border-radius:6px; margin-right:8px; vertical-align:middle }

/* topic meta small helpers */
.user-rank { font-size:0.9rem; color:var(--text-secondary) }
.online-indicator { margin-top:6px }

/* Reputation & rank stat blocks */
.stat-block { display:flex; flex-direction:column; align-items:flex-end; gap:6px }
.stat-rep { text-align:right }
.stat-rep .rep-title { font-size:0.75rem; color:var(--text-muted); margin-top:2px }
.stat-rank .rank { display:inline-block; padding:4px 8px; border-radius:999px; font-size:0.85rem }
.meta-rep { background:var(--bg-tertiary); padding:6px 10px; border-radius:8px; text-align:center; font-size:0.9rem; color:var(--text-primary); border:1px solid var(--border-color) }
.meta-index { margin-top:8px; color:var(--text-muted); font-size:0.9rem }

/* small adjustments for topic stats column */
.topic-stats { display:flex; flex-direction:column; align-items:flex-end; gap:8px }

/* === Strong overrides to match provided attachment design (BEGIN) === */
/* Use higher specificity and selective !important to take precedence over custom.css */

/* Center main content and constrain width similar to reference */
body > .main-layout, .main-layout { margin:2rem 2.5rem !important; gap:2rem !important; padding:0 !important; }
.main-layout .sidebar { width:auto; }

/* Card surfaces: darker, inset look with subtle border and inner padding */
.category-group, .profile-card, .post-wrapper, .post-card, .reply-card, .topic-row {
    background: #25272a !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

/* Left meta column prominent panel */
.post-meta-column, .post-meta, .profile-left, .post-meta-column--topic {
    background: #222329 !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    padding: 12px !important;
    border-radius: 8px !important;
}

/* Avatar sizes aligned with attachments */
.post-meta-column img.avatar, .post-meta .avatar, .profile-avatar-large img, .avatar { border-radius:8px !important; object-fit:cover }
.post-meta .avatar, .reply-meta .avatar { width:64px !important; height:64px !important }

/* Topic rows: compact but distinct blocks */
/* consolidated override (ACTIVE definition) */
.topic-row { padding: 14px !important; margin-bottom: 12px !important; border-radius: 8px !important }
.topic-row .topic-title { font-weight:700; font-size:1.05rem }

/* Badges: Ruf and Rang prominent and colored */
.badge-rank { background: linear-gradient(90deg,#5b81ff,#7ee3c6); color:#fff !important; padding:6px 10px !important; border-radius:999px !important; font-weight:700 !important }
/* Remove heavy generic .rank override; use data-rank attribute mapping for clarity */
.rank { padding:5px 10px; border-radius:999px; font-size:.65rem; letter-spacing:.5px; font-weight:600; text-transform:uppercase; background:#444; color:#fff; display:inline-block; line-height:1; }
.rank[data-rank*="Inhaber"], .rank-inhaber{ background:linear-gradient(135deg,#ff512f,#dd2476); }
.rank[data-rank*="Admin"], .rank-admin{ background:linear-gradient(135deg,#6100ff,#a345ff); }
.rank[data-rank*="Moderator"], .rank-moderator{ background:linear-gradient(135deg,#1d976c,#93f9b9); }
.rank[data-rank*="Support"], .rank-support{ background:linear-gradient(135deg,#4776e6,#8e54e9); }
.rank[data-rank*="Dev"], .rank-dev{ background:linear-gradient(135deg,#00c6ff,#0072ff); }
.rank[data-rank*="Team"], .rank-team{ background:linear-gradient(135deg,#614385,#516395); }
.rank[data-rank*="Banned"], .rank-banned{ background:#555; text-decoration:line-through; }
.rank[data-rank*="KI"], .rank-ki{ background:linear-gradient(135deg,#141e30,#243b55); }
.rank[data-rank*="Builder"], .rank-builder{ background:linear-gradient(135deg,#05c70f,#dd4924); }

/* ============================================= */
/* Dynamische Farbzuordnung für Ruf (data-tier)  */
/* und Spieler / Staff Rang (data-rank)          */
/* ============================================= */
.badge-rank[data-tier] { position:relative; isolation:isolate; }
.badge-rank[data-tier="Neu"] { background:linear-gradient(90deg,#3a3d44,#454a52)!important; }
.badge-rank[data-tier="Neuling"], .badge-rank[data-tier="Bekannt"] { background:linear-gradient(90deg,#3b82f6,#6366f1)!important; }
.badge-rank[data-tier="Erfahrener"] { background:linear-gradient(90deg,#6366f1,#8b5cf6)!important; }
.badge-rank[data-tier="Experte"] { background:linear-gradient(90deg,#8b5cf6,#d946ef)!important; }
.badge-rank[data-tier="Veteran"] { background:linear-gradient(90deg,#f59e0b,#ef4444)!important; }
.badge-rank[data-tier="Legende"] { background:linear-gradient(90deg,#ff512f,#dd2476,#1d976c,#4776e6,#ff512f); background-size:400% 400%; animation: rank-rainbow 10s linear infinite; }
@keyframes rank-rainbow { 0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;} }

/* Topic list stats column alignment */
.topic-stats { align-items:flex-end !important; justify-content:center }

/* Topic header and chips */
.topic-header { padding: 12px 0 18px 0 !important; }
.meta-chip, .category-badge { padding:6px 10px !important; border-radius:6px }

/* Profile layout: left column narrow, main info stacked */
.profile-grid { grid-template-columns: 200px 1fr !important; gap: 1.25rem }
.profile-left .profile-avatar-large img { width:180px !important; height:180px !important }

/* Reply box alignment like attachments */
.reply-card { padding: 14px !important; border-radius:8px !important }
.reply-card .reply-meta { width: 96px; }

/* Footer spacing */
footer.site-footer { padding: 2.25rem 0 !important }

/* smaller screens: keep readable */
@media (max-width: 900px) {
    body > .main-layout, .main-layout { grid-template-columns: 1fr !important; padding: 0 12px !important }
    .main-layout .sidebar { order: 2 }
    .main-layout .main-content { order: 1 }
    .post-meta-column img.avatar, .profile-avatar-large img { width:120px !important; height:120px !important }
}

/* Category view specific layout (left meta, middle content, right stats) */
.category-list { display: flex; flex-direction: column; gap: 12px }
.topic-row { display: grid !important; grid-template-columns: 84px 1fr 220px; align-items: center; gap: 12px; }
.topic-left { display: flex; flex-direction: column; align-items: center; gap: 8px }
.topic-left .avatar-sm { width:56px; height:56px; border-radius:50%; border:2px solid rgba(255,255,255,0.03); object-fit:cover }
.topic-main { display: flex; flex-direction: column; gap:6px }
.topic-main .topic-title { font-size:1.05rem; color: var(--text-primary) }
.topic-main .topic-excerpt { color: var(--text-muted); font-size:0.95rem }
.topic-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; border: 5px solid rgba(255,255,255,0.1); padding: 4px; border-radius: 8px; }
.replies-count { font-weight:700; color:var(--text-secondary) }
.last-reply { display:flex; gap:8px; align-items:center; }
.avatar-xs { width:44px; height:44px; border-radius:50%; object-fit:cover }
.last-meta .last-user { color:var(--text-primary) }
.last-meta .last-time { font-size:0.85rem; color:var(--text-muted) }
.topic-category-information { border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: var(--bg-tertiary); margin-top: 12px; }

/* Header pills on top of category list */
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem }
.header-pill { background:var(--accent-primary); color:#fff; padding:8px 12px; border-radius:6px; font-weight:700; margin-left:8px }

@media (max-width: 900px) {
    .topic-row { grid-template-columns: 56px 1fr; }
    .topic-right { display:none }
}

/* === Strong overrides (END) === */

/* Topic page specific layout tweaks */
.topic-page { max-width: 1080px; margin: 2rem auto; }
.topic-header-grid { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: start; margin-bottom: 1.25rem; background-color: var(--bg-secondary); padding: 1.25rem; border-radius: 12px; border:1px solid rgba(255,255,255,0.05) }
.topic-profile { background: var(--bg-secondary); padding: 12px; border-radius: 8px; border:1px solid rgba(255,255,255,0.03) }
.topic-profile .avatar { width: 120px; height:120px; border-radius:8px; display:block; margin: 0 auto }
.topic-profile{position:relative;}
.topic-profile .status-dot{position:absolute;right:14px;top:14px;width:16px;height:16px;border:2px solid var(--bg-secondary);margin:0;}
.topic-info { background: transparent }

.post-wrapper { background: #222328; border:1px solid rgba(255,255,255,0.03); border-radius:8px; padding: 0.75rem; margin-bottom: 1rem }
.post-wrapper.main-post { border-left: 4px solid var(--accent-primary) }
.post-layout { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; align-items: start }
.post-meta-column { text-align: center; padding: 0.6rem }
.post-meta-column .avatar { width: 84px; height:84px; border-radius:8px }
.post-body { padding: 0.6rem }
.reply-card { background: transparent; border: none; padding: 0.5rem; margin-top: 0.5rem }
.reply-card .reply-meta .avatar { width:64px; height:64px }
.reply-form textarea { min-height: 100px }

/* ======================================== */
/* Responsive Adjustments for Topic & Profile Pages */
/* ======================================== */

/* General Responsive Adjustments */
@media (max-width: 768px) {
    .topic-header-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1rem;
        max-width: 100%;
    }
    .post-layout {
        grid-template-columns: 80px 1fr;
    }
}

@media (min-width: 1400px) {
    .topic-page {
        max-width: 1280px;
    }
    .topic-header-grid {
        grid-template-columns: 300px 1fr;
    }
    .post-layout {
        grid-template-columns: 160px 1fr;
    }
    .post-meta-column .avatar {
        width: 110px;
        height: 110px;
    }
}

/* Extra Refinements for Smaller Screens */
@media (max-width: 640px) {
    .topic-page {
        margin: 1rem auto;
        padding: 0 0.5rem;
    }
    .topic-header-grid {
        padding: 0.85rem;
        gap: 0.9rem;
    }
    .topic-profile .avatar {
        width: 90px;
        height: 90px;
    }
    .post-layout {
        grid-template-columns: 70px 1fr;
        gap: 0.75rem;
    }
    .post-meta-column .avatar {
        width: 64px;
        height: 64px;
    }
    .post-wrapper {
        padding: 0.6rem 0.6rem 0.75rem;
    }
    .reply-card .reply-meta .avatar {
        width: 52px;
        height: 52px;
    }
    .profile-grid {
        grid-template-columns: 1fr !important;
        margin-top: 40px;
    }
    .profile-top-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .profile-avatar-large img {
        width: 140px;
        height: 140px;
    }
    .profile-name h2 {
        font-size: 1.25rem;
    }
    .profile-card {
        padding: 1.1rem 1rem;
    }
    .profile-sidebar .profile-card {
        margin-bottom: 0.85rem;
    }
    .comment-item .comment-head {
        flex-wrap: wrap;
    }
    .main-layout {
        grid-template-columns: 1fr !important;
    }
    .main-layout .sidebar {
        order: 3;
    }
    .main-layout .topic-events-log {
        order: 2;
    }
}

@media (max-width: 480px) {
    .topic-header-grid {
        background: transparent;
        padding: 0;
        border: none;
    }
    .topic-profile {
        background: var(--bg-secondary);
    }
    .post-layout {
        grid-template-columns: 1fr;
    }
    .post-meta-column {
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 0.4rem 0.4rem 0.2rem;
    }
    .post-meta-column .meta-index {
        margin-left: auto;
        font-size: 0.65rem;
        opacity: 0.7;
    }
    .post-meta-column .avatar {
        width: 54px;
        height: 54px;
    }
    .post-divider {
        margin: 10px 0;
    }
    .reply-card {
        flex-direction: column;
    }
    .reply-card .reply-meta {
        width: auto;
    }
    .profile-avatar-large img {
        width: 120px;
        height: 120px;
    }
    .profile-top-card {
        padding: 1rem 0.9rem;
    }
    .profile-card {
        padding: 1rem 0.85rem;
    }
    .profile-actions {
        gap: 0.6rem !important;
    }
    .profile-name h2 {
        font-size: 1.1rem;
    }
    .profile-left,
    .profile-right {
        width: 100%;
    }
    .comment-item .comment-head {
        font-size: 0.65rem;
    }
    .topic-meta-info {
        font-size: 0.7rem;
        line-height: 1.3;
    }
    .meta-chips {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}

@media (max-width: 360px) {
    .post-meta-column .avatar {
        width: 48px;
        height: 48px;
    }
    .topic-page {
        padding: 0 0.35rem;
    }
    .profile-avatar-large img {
        width: 100px;
        height: 100px;
    }
    .profile-name h2 {
        font-size: 1rem;
    }
    .profile-card h3 {
        font-size: 0.7rem;
    }
}

/* ======================================== */
/* Mobile Simplification / Detox Overrides */
/* ======================================== */

@media (max-width: 520px) {
    body {
        font-size: 14px;
    }
    .site-header {
        gap: 1rem;
        padding: 0 0.9rem;
        backdrop-filter: none;
    }
    .site-header .menu ul {
        gap: 0.5rem;
    }
    .site-header .menu a {
        font-size: 0.75rem;
        padding: 0.5rem 0.55rem;
    }
    .category-hero {
        border-radius: 14px;
        padding: 0;
    }
    .category-hero-inner {
        flex-direction: column;
        gap: 1.1rem;
        padding: 1.1rem 1.15rem 1.25rem;
    }
    .hero-stats {
        order: 3;
        gap: 0.65rem;
    }
    .hero-stat-block {
        min-width: 90px;
        padding: 0.6rem 0.7rem;
        border-radius: 10px;
    }
    .category-title-display {
        font-size: 1.45rem;
    }
    .category-hero-desc {
        font-size: 0.8rem;
        max-width: 100%;
    }
    .topic-page {
        margin: 1.25rem auto;
    }
    .topic-header-grid {
        background: transparent;
        border: none;
        padding: 0;
        gap: 0.9rem;
    }
    .topic-profile {
        background: var(--bg-secondary);
        padding: 0.85rem 0.9rem;
        border-radius: 12px;
    }
    .topic-profile .avatar {
        width: 96px;
        height: 96px;
    }
    .topic-description {
        background: var(--bg-tertiary);
        padding: 0.75rem 0.8rem;
        font-size: 0.8rem;
    }
    .post-wrapper {
        padding: 0.7rem 0.7rem 0.8rem;
        border-radius: 12px;
    }
    .post-layout {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }
    .post-meta-column {
        flex-direction: row;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        background: transparent !important;
        padding: 0.2rem 0.2rem 0;
        border: none !important;
    }
    .post-meta-column .avatar {
        width: 54px;
        height: 54px;
        border-radius: 10px;
    }
    .post-meta-column .meta-name {
        font-size: 0.85rem;
        font-weight: 600;
    }
    .post-meta-column .meta-rank {
        font-size: 0.55rem;
    }
    .post-meta-column .meta-rep {
        background: var(--bg-tertiary);
        padding: 4px 8px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .meta-index {
        position: absolute;
        right: 8px;
        bottom: 8px;
        font-size: 0.55rem;
        opacity: 0.6;
    }
    .post-body {
        padding: 0.3rem 0 0;
    }
    .post-body-content {
        font-size: 0.85rem;
    }
    .attachments-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
    .reply-card {
        margin-top: 1.25rem;
        padding: 0.9rem 0.9rem 1rem;
    }
    .reply-meta .avatar {
        width: 52px;
        height: 52px;
    }
    .reply-form .rich-editor {
        min-height: 140px;
    }
    .reply-actions button.btn-primary {
        width: 100%;
    }
    .widget {
        padding: 0.85rem 0.9rem;
        border-radius: 14px;
    }
    .widget h4 {
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }
    .topic-events-log.card {
        margin: 1.5rem auto;
        padding: 0.9rem 0.9rem 1rem;
    }
    .events-timeline .event-header {
        font-size: 0.6rem;
    }
    .events-timeline .ev-type {
        font-size: 0.5rem;
    }
    .post-meta-column .status-dot {
        top: 4px;
        right: 4px;
        width: 12px;
        height: 12px;
    }
    .topic-profile .status-dot {
        top: 10px;
        right: 10px;
        width: 14px;
        height: 14px;
    }
    .topic-item {
        grid-template-columns: 48px 1fr;
        padding: 0.85rem 0.9rem;
        gap: 0.85rem;
    }
    .topic-item .topic-stats-col {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.5rem;
        margin-top: 0.4rem;
    }
    .topic-stats-col .stat {
        font-size: 0.55rem;
        padding: 4px 6px;
    }
    .label-badge {
        font-size: 0.5rem;
        padding: 3px 6px;
    }
    .topic-title-line {
        font-size: 0.85rem;
    }
    .topic-meta-line {
        font-size: 0.55rem;
        gap: 0.35rem;
    }
    .topic-item,
    .topic-profile,
    .post-wrapper,
    .reply-card,
    .widget {
        background: var(--bg-secondary);
        backdrop-filter: none;
    }
    .badge-rank {
        font-size: 0.55rem;
        padding: 4px 7px;
    }
    .rank {
        font-size: 0.55rem;
        padding: 4px 7px;
    }
    body > .main-layout,
    .main-layout {
        margin: 1rem 0.75rem !important;
        gap: 1.25rem !important;
    }
}

@media (max-width: 400px) {
    .hero-stats {
        display: none;
    }
    .topic-item {
        padding: 0.75rem 0.75rem;
    }
    .post-body-content {
        font-size: 0.8rem;
    }
}

/* Meta chips (pinned / locked) responsive refinement */
.meta-chips { display:flex; gap:.5rem; margin:.5rem 0 0; }
.meta-chip { display:inline-flex; align-items:center; gap:4px; background:var(--bg-tertiary); border:1px solid var(--border-color); padding:4px 8px; font-size:.6rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; border-radius:6px; color:var(--text-secondary); }
.meta-chip i { font-size:.65rem; opacity:.85; }
@media (max-width:520px){ .meta-chip { font-size:.55rem; padding:3px 6px; } }

/* Legal pages (Impressum / Datenschutz) extracted from inline styles */
.legal-page .legal-section h3 { position:relative; padding-bottom:.35rem; }
.legal-page .legal-section h3:after { content:""; position:absolute; left:0; bottom:0; width:46px; height:2px; background:linear-gradient(90deg,#5865F2,#45b7af); border-radius:2px; }
.impressum-page .contact-badge { display:inline-block; background:linear-gradient(135deg,#5865F2,#45b7af); color:#fff; font-size:.55rem; text-transform:uppercase; letter-spacing:.5px; padding:2px 6px; border-radius:6px; margin-right:.5rem; vertical-align:middle; }
.legal-page .legal-card { display:flex; flex-direction:column; gap:1.25rem; }
@media (max-width:700px){ .legal-page .legal-card { padding:1.25rem 1.25rem 1.35rem; } }
@media (max-width:480px){ .legal-page .legal-card { padding:1.05rem 1rem 1.1rem; } }

/* Post meta column flex labels improvement */
.post-meta-column .meta-rep { font-size:.55rem; }
.post-meta-column .meta-rep small { font-size:.55rem; letter-spacing:.5px; text-transform:uppercase; opacity:.7; }
.post-meta-column .badge-rank { margin-top:2px; }

/* Attachment card mobile readability */
.attachments-grid .attachment-card { position:relative; }
.attachments-grid .att-thumb img { border-radius:8px; width:100%; height:100%; object-fit:cover; }
.attachments-grid .att-file { display:flex; gap:.5rem; align-items:center; background:var(--bg-tertiary); padding:6px 8px; border-radius:8px; font-size:.65rem; }
@media (hover:hover){ .attachments-grid .att-thumb:hover img { outline:2px solid var(--accent-primary); outline-offset:2px; } }

/* Topic pagination bar (header-like) */
.topic-pagination-bar { margin:1.75rem auto 1.25rem; max-width:1080px; background:var(--bg-secondary); border:1px solid rgba(255,255,255,0.06); padding:.85rem 1rem; border-radius:14px; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.topic-pagination-bar .pag-title { font-size:.8rem; letter-spacing:.75px; text-transform:uppercase; color:var(--text-secondary); display:flex; gap:.5rem; align-items:center; }
.topic-pagination-bar .pag-title i { font-size:.85rem; opacity:.85; }
.topic-pagination-bar .topic-pagination, .topic-pagination-bar .pagination { display:flex; gap:.4rem; flex-wrap:wrap; }
.topic-pagination .page-link, .topic-pagination-bar .pagination .page-link { position:relative; background:var(--bg-tertiary); border:1px solid var(--border-color); padding:.5rem .75rem; border-radius:8px; font-size:.7rem; font-weight:600; color:var(--text-secondary); text-decoration:none; line-height:1; }
.topic-pagination .page-link:hover, .topic-pagination-bar .pagination .page-link:hover { background:var(--accent-primary); border-color:var(--accent-primary); color:#fff; }
.topic-pagination .page-link.active, .topic-pagination-bar .pagination .page-link.active { background:linear-gradient(135deg,var(--accent-primary),var(--accent-hover)); border-color:var(--accent-primary); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,0.05); cursor:default; }
.topic-pagination .page-gap, .topic-pagination-bar .pagination .page-gap { display:inline-flex; align-items:center; justify-content:center; padding:0 .25rem; font-size:.9rem; color:var(--text-muted); }
@media (max-width:640px){
    .topic-pagination-bar { max-width:100%; padding:.75rem .8rem; border-radius:12px; }
    .topic-pagination .page-link, .topic-pagination-bar .pagination .page-link { font-size:.65rem; padding:.45rem .6rem; }
}
@media (max-width:480px){
    .topic-pagination-bar { background:transparent; border:none; padding:0; margin:1.25rem 0 .5rem; }
    .topic-pagination-bar .pag-title { width:100%; margin-bottom:.35rem; }
}

/* Enhanced post card adopting topic-header-grid aesthetics */
.post-enhanced { position:relative; background:var(--bg-secondary); border:1px solid rgba(255,255,255,0.05); border-radius:16px; padding:1rem 1.15rem 1.1rem; box-shadow:0 2px 4px rgba(0,0,0,0.25); overflow:hidden; }
.post-enhanced:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 12% 18%, rgba(88,101,242,0.08), transparent 60%), radial-gradient(circle at 85% 80%, rgba(69,183,175,0.08), transparent 55%); opacity:.6; pointer-events:none; }
.post-enhanced .post-layout { display:grid; grid-template-columns:140px 1fr; gap:1.15rem; align-items:start; }
.post-enhanced .post-meta-column { position:relative; background:linear-gradient(145deg,#23262b,#1f2124); border:1px solid rgba(255,255,255,0.05); padding:1rem .85rem .9rem; border-radius:12px; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.post-enhanced .post-meta-column .meta-name { font-weight:700; font-size:.85rem; color:var(--text-primary); }
.post-enhanced .post-meta-column .meta-rank { font-size:.55rem; letter-spacing:.5px; }
.post-enhanced .post-meta-column .meta-rep { background:var(--bg-tertiary); padding:4px 8px; border-radius:8px; font-size:.55rem; text-align:center; }
.post-enhanced .post-meta-column .meta-index { position:absolute; top:8px; left:8px; font-size:.55rem; padding:4px 7px; background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:6px; color:var(--text-secondary); text-decoration:none; }
.post-enhanced .post-meta-column .meta-index:hover { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); }
.post-enhanced .post-body { background:linear-gradient(135deg,#25282d,#212326); border:1px solid rgba(255,255,255,0.05); border-radius:14px; padding:1rem 1.05rem 1.05rem; position:relative; }
.post-enhanced .post-body:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,rgba(255,255,255,0.05),transparent 60%); opacity:.35; pointer-events:none; }
.post-enhanced .post-header { font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin:0 0 .55rem; }
.post-enhanced .post-body-content { font-size:.9rem; line-height:1.55; }
.post-enhanced .post-edit-actions { margin-top:.65rem; }
.post-enhanced .attachments-grid { margin-top:.75rem; }
@media (max-width:900px){ .post-enhanced .post-layout { grid-template-columns:120px 1fr; } }
@media (max-width:680px){ .post-enhanced .post-layout { grid-template-columns:90px 1fr; } .post-enhanced .post-meta-column .avatar{ width:72px; height:72px; } }
@media (max-width:520px){
    .post-enhanced { padding:.85rem .85rem .95rem; border-radius:14px; }
    .post-enhanced .post-layout { grid-template-columns:1fr; gap:.75rem; }
    .post-enhanced .post-meta-column { flex-direction:row; background:transparent; border:none; padding:0 .25rem 0 0; gap:.6rem; align-items:center; }
    .post-enhanced .post-meta-column .avatar { width:60px; height:60px; border-radius:12px; }
    .post-enhanced .post-meta-column .meta-index { position:static; order:3; background:var(--bg-tertiary); }
    .post-enhanced .post-body { padding:.75rem .8rem .85rem; border-radius:12px; }
    .post-enhanced .post-body-content { font-size:.85rem; }
}
@media (max-width:400px){
    .post-enhanced .post-meta-column .avatar { width:54px; height:54px; }
    .post-enhanced .post-body { padding:.65rem .7rem .75rem; }
    .post-enhanced .post-body-content { font-size:.8rem; }
}

/* profile-stats inside topic header */
.profile-stats { display:flex; flex-direction:column; gap:8px; align-items:center }
.profile-name { font-weight:800; color:var(--text-primary) }
.profile-role { color:var(--text-secondary); font-size:0.9rem }
.profile-row { display:flex; gap:10px; margin-top:6px }
.profile-row .stat { background:var(--bg-tertiary); padding:6px 10px; border-radius:8px; text-align:center }
.profile-row .stat-value { margin-top:4px; font-weight:700 }
.profile-meta { margin-top:8px; text-align:center; color:var(--text-muted) }

/* --- Post divider between posts inside a topic --- */
.post-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    margin: 12px 0;
    border-radius: 2px;
}

/* =================================================== */
/* Legacy Markup Kompatibilitäts-Layer                 */
/* Erlaubt alten Seiten (index.php, topic.php etc.)    */
/* das moderne Design zu nutzen ohne kompletten HTML   */
/* Refactor. Kann später entfernt werden.             */
/* =================================================== */
.topic, .post, .recent-post, .member-item, .rank-group, .profile-card, .sidebar-box, .sidebar-box.stats-dropdown, .sidebar-box.shoutbox {
    background: #25272a;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.topic h3, .post h3, .member-item a { color: var(--text-primary); }
.topic .date, .post .date, .member-item .rank-description { color: var(--text-muted); font-size:0.85rem }
.member-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px }
.member-item { display:flex; align-items:center; gap:12px; flex: 1 1 300px; transition: background .15s }
.member-item:hover { background:#2d2f33 }
.member-item img.profile-picture-page { width:56px; height:56px; border-radius:10px; object-fit:cover; border:2px solid var(--border-color) }

/* Legacy labels -> modern badge look */
.labels .category-badge, .label, .category-badge { background: var(--accent-primary); color:#fff; padding:4px 8px; border-radius:6px; font-size:0.7rem; letter-spacing:.5px; text-transform:uppercase }

/* Shoutbox popup mapping */
.sidebar-box.shoutbox.popup { position:relative; max-height:480px; overflow:hidden }
.sidebar-box.shoutbox.popup #shoutbox-messages { background: var(--bg-tertiary); border:1px solid var(--border-color); padding:0.75rem; border-radius:8px }

/* Old .online-badge/.offline-badge harmonisieren */
.online-badge { background: var(--success-color) !important; }
.offline-badge { background: #555 !important; }

/* Alte Tabellen anpassen */
table.custom-table { width:100%; border-collapse:collapse; background:#25272a; border:1px solid rgba(255,255,255,0.05); border-radius:10px; overflow:hidden }
table.custom-table th, table.custom-table td { padding:0.75rem 1rem; border-bottom:1px solid rgba(255,255,255,0.05); }
table.custom-table tr:last-child td { border-bottom:none }
table.custom-table th { background:#2d2f33; text-align:left }

/* Formular Vereinheitlichung für alte Seiten */
form input[type=text], form textarea, form select { background: var(--bg-tertiary); border:1px solid var(--border-color); color:var(--text-primary); border-radius:8px; padding:0.65rem 0.75rem; font-family:var(--font-main); }
form input[type=text]:focus, form textarea:focus, form select:focus { outline:none; box-shadow:0 0 0 2px var(--accent-primary) }
form input[type=submit], button[type=submit] { background:var(--accent-primary); color:#fff; border:none; padding:0.65rem 1.25rem; border-radius:8px; cursor:pointer; font-weight:600; }
form input[type=submit]:hover, button[type=submit]:hover { background:var(--accent-hover) }

/* BBCode Editor Buttons (legacy) */
.editor-toolbar button { background: var(--bg-tertiary); border:1px solid var(--border-color); color:var(--text-primary); border-radius:8px; padding:6px 10px; cursor:pointer; }
.editor-toolbar button:hover { background: var(--accent-primary); color:#fff; border-color: var(--accent-primary) }

/* Legacy pagination mapping */
.pagination a, .pagination .current-page { background: var(--bg-secondary); border:1px solid var(--border-color); color:var(--text-primary); border-radius:8px; padding:6px 12px; }
.pagination .current-page { background: var(--accent-primary); border-color: var(--accent-primary); font-weight:700 }

/* Legacy profile picture size normalisieren */
img.profile-picture-page { width:120px; height:120px; border-radius:12px; object-fit:cover; border:3px solid var(--border-color) }

/* Fallback container wenn alte Seiten kein .main-layout nutzen */
main.container { max-width: 1200px; margin: 1.5rem auto; padding: 0 1rem; }

/* Ende Legacy Layer */

/* ============================================= */
/* Optionale Verbesserungen / Fine Tuning Layer  */
/* ============================================= */
.glass-card, .widget, .profile-card, .category-card, .post-wrapper, .topic-row, .reply-card, .sidebar-widget {
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)) !important;
    backdrop-filter: blur(6px);
}

.accent-bar {
    position:relative;
}
.accent-bar:before {
    content:""; position:absolute; left:0; top:0; height:3px; width:100px; background:linear-gradient(90deg,var(--accent-primary), transparent); border-radius:3px;
}

/* Floating subtle animation */
.hover-lift { transition:transform .18s ease, box-shadow .18s ease; }
.hover-lift:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.35); }

/* Scrollbar (Webkit) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background: #1d1e21; }
::-webkit-scrollbar-thumb { background:#34363b; border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:#44474d; }

/* Animated focus ring */
input:focus, textarea:focus, select:focus { outline:none; box-shadow:0 0 0 2px var(--accent-primary), 0 0 0 6px rgba(88,101,242,0.25); transition: box-shadow .25s ease; }

/* Utility spacing */
.mt-2{margin-top:0.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}

/* Fade-in */
.fade-in { animation:fadeIn .4s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }

/* Fallback selector :contains() is non-standard; JS enhancement could replace if needed */

/* ============================================= */
/* Modern Auth Pages (Login / Register)          */
/* ============================================= */
.auth-wrapper { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 60px); padding:2rem 1rem; }
.auth-card { width:100%; max-width:440px; background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.015)); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(14px); padding:2.25rem 2rem 2.5rem; border-radius:18px; position:relative; overflow:hidden; }
.auth-card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,rgba(88,101,242,0.15),transparent 60%); pointer-events:none; }
.auth-card h2 { margin:0 0 1.25rem; font-size:1.6rem; letter-spacing:.5px; }
.auth-desc { font-size:0.9rem; color:var(--text-muted); margin:-.5rem 0 1.5rem; }
.auth-form-group { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.auth-form-group label { font-size:.8rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); }
.auth-form-group input { background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:10px; padding:.85rem .9rem; color:var(--text-primary); font-size:0.95rem; transition:border-color .2s, background .2s; }
.auth-form-group input:focus { background:#2b2d32; }
.auth-actions { display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; }
.auth-actions a { font-size:0.85rem; color:var(--text-secondary); }
.btn-gradient { background:linear-gradient(90deg,#5865F2,#45b7af); border:none; padding:.85rem 1.4rem; font-weight:600; color:#fff; border-radius:10px; cursor:pointer; box-shadow:0 4px 18px -4px rgba(0,0,0,.4); transition:transform .18s, box-shadow .18s, filter .25s; }
.btn-gradient:hover { transform:translateY(-2px); box-shadow:0 6px 22px -4px rgba(0,0,0,.55); filter:brightness(1.05); }
.btn-gradient:active { transform:translateY(0); box-shadow:0 3px 12px -2px rgba(0,0,0,.6); }
.auth-sep { height:1px; background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,0)); margin:1.5rem 0; }
.auth-small { font-size:0.7rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:.75rem; }
.social-buttons { display:flex; gap:.75rem; }
.social-btn { flex:1; text-align:center; background:#1f2023; border:1px solid var(--border-color); padding:.65rem .75rem; border-radius:10px; font-size:.75rem; font-weight:600; letter-spacing:.5px; color:var(--text-secondary); cursor:pointer; transition:background .2s,border-color .2s; }
.social-btn:hover { background:#26272b; border-color:#555; }
.auth-footer-note { margin-top:1.75rem; font-size:.75rem; color:var(--text-muted); text-align:center; line-height:1.4; }
@media (max-width:600px){ .auth-card { padding:1.75rem 1.25rem 2rem; border-radius:14px; } }


/* Responsive tighten for large screens */
@media (min-width:1400px){ .main-layout { max-width:none; } }
/* Mitglieder Sortierleiste */
.sort-bar { display:flex; align-items:center; gap:12px; margin:0 0 1rem 0; font-size:0.9rem; }
.sort-bar a { background:var(--bg-tertiary); padding:6px 10px; border-radius:6px; border:1px solid var(--border-color); color:var(--text-secondary); }
.sort-bar a.active, .sort-bar a:hover { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); }

/* ============================================================= */
/* Forum Landing Page (extracted from inline index.php styles)    */
/* ============================================================= */
.forum-landing{--panel-bg:var(--bg-secondary);--panel-border:var(--border-color);max-width:1250px;margin:0 auto;padding:0 1rem 2rem;}
.forum-hero{background:linear-gradient(90deg,#0f172a,#1e293b 40%,#334155);border:1px solid #1e293b;margin:1rem 0 2rem;border-radius:10px;position:relative;overflow:hidden;}
.forum-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.08),transparent 60%);pointer-events:none;}
.forum-hero-inner{display:flex;flex-wrap:wrap;gap:2rem;padding:2rem 2.2rem;align-items:flex-start;}
.forum-hero-left{flex:1 1 340px;min-width:280px;color:#f1f5f9;}
.forum-site-title{margin:0 0 .4rem;font-size:2rem;letter-spacing:.5px;}
.forum-tagline{margin:.2rem 0 1rem;font-size:.95rem;opacity:.9;max-width:620px;}
.hero-actions a{margin-right:.6rem;}
.forum-hero-stats{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:stretch;}
.hero-stat{display:flex;flex-direction:column;min-width:90px;padding:.75rem .9rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;backdrop-filter:blur(4px);}
.hero-stat .stat-number{font-size:1.25rem;font-weight:600;color:#fff;}
.hero-stat .stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.8px;margin-top:2px;color:#d1d5db;}
.forum-body-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1.5rem;}
@media (max-width:1100px){.forum-body-grid{grid-template-columns:1fr;}}

/* Panels */
.panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:10px;margin-bottom:1.5rem;overflow:hidden;}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1rem;background:var(--bg-tertiary);border-bottom:1px solid var(--panel-border);}
.panel-header h2,.panel-header h3{margin:0;font-size:.95rem;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary); position: relative;}
.panel-body{padding:1rem 1rem 1rem;}

/* Category table */
.category-table{width:100%;}
.category-table .row{display:grid;grid-template-columns:minmax(0,3fr) 90px 90px minmax(0,2fr);gap:1rem;align-items:flex-start;padding:.75rem 1rem;border-bottom:1px solid var(--panel-border);}
.category-table .row:last-child{border-bottom:none;}
.category-table .cat-head{background:var(--bg-tertiary);font-size:.65rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);}
.cat-row:hover{background:var(--bg-tertiary);}
.col-title .cat-title{font-weight:600;color:var(--text-primary);}
.col-title .cat-title:hover{text-decoration:underline;}
.cat-desc{font-size:.7rem;color:var(--text-muted);margin-top:2px;line-height:1.2;}
.badge-neutral{display:inline-block;min-width:34px;text-align:center;background:var(--bg-tertiary);border:1px solid var(--panel-border);padding:2px 6px;border-radius:4px;font-size:.65rem;font-weight:500;}
.col-last{font-size:.7rem;line-height:1.15;}
.col-last .last-topic{font-weight:500;color:var(--text-secondary);} .col-last .last-topic:hover{text-decoration:underline;}
.last-meta{margin-top:2px;color:var(--text-muted);}

/* Latest */
.latest-list{list-style:none;margin:0;padding:0;}
.latest-item{padding:.55rem 1rem;border-bottom:1px solid var(--panel-border);font-size:.7rem;display:flex;flex-direction:column;gap:2px;}
.latest-item:last-child{border-bottom:none;}
.latest-title{font-weight:500;color:var(--text-primary);} .latest-title:hover{text-decoration:underline;}
.latest-meta{color:var(--text-muted);font-size:.6rem;}

/* Recent posts */
.recent-posts-list{list-style:none;margin:0;padding:0;}
.recent-post-item{padding:.65rem 1rem;border-bottom:1px solid var(--panel-border);font-size:.65rem;display:flex;flex-direction:column;gap:2px;}
.recent-post-item:last-child{border-bottom:none;}
.rp-title{font-weight:500;color:var(--text-primary);} .rp-title:hover{text-decoration:underline;}
.rp-excerpt{color:var(--text-secondary);font-size:.6rem;line-height:1.25;}

/* Members */
.members-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.6rem;}
.members-list li{background:var(--bg-tertiary);padding:3px 6px;border:1px solid var(--panel-border);border-radius:4px;}
.members-list a{color:var(--text-primary);}
.members-list a:hover{text-decoration:underline;}

/* Side */
.btn-block{display:block;width:100%;text-align:center;}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem .75rem;font-size:.65rem;}
.stats-grid .s-label{display:block;color:var(--text-muted);}
.stats-grid .s-val{font-weight:600;color:var(--text-secondary);font-size:.8rem;margin-top:1px;}

/* Search filter */
#topic-search{max-width:200px;}
#topic-search:not(:focus){opacity:.9;}

/* Utility */
.small{font-size:.6rem;}

/* Inline user meta (avatar + name + status) */
.user-inline-meta{display:inline-flex;align-items:center;gap:.4rem;line-height:1;}
.user-inline-meta .avatar-sm{width:26px;height:26px;border-radius:6px;object-fit:cover;}
.user-inline-meta .name{font-weight:500;color:var(--text-secondary);font-size:.75rem;}
.user-inline-meta .name:hover{color:var(--text-primary);text-decoration:underline;}

/* Online status dot for lists */
.status-dot{display:inline-block;position:relative;width:10px;height:10px;border-radius:50%;background:#4b4f55;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 1px rgba(255,255,255,0.06),0 0 0 3px var(--bg-primary);transition:background .25s, box-shadow .35s, transform .35s;}
.post-meta-column{position:relative;}
.post-meta-column .status-dot{position:absolute;right:8px;top:8px;margin:0;width:14px;height:14px;border:2px solid var(--bg-secondary);box-shadow:0 0 0 1px rgba(0,0,0,.4);}
.post-meta-column .avatar{position:relative;}
.status-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:.6;animation:none;}
.status-dot.online{background:linear-gradient(135deg,#32d676,#16a34a);box-shadow:0 0 0 1px rgba(255,255,255,0.08),0 0 6px 2px rgba(50,214,118,.35);} 
.status-dot.online:after{animation:pulse-online 2.4s ease-in-out infinite;}
.status-dot.offline{background:#4b4f55;opacity:.55;}
.status-dot.away{background:linear-gradient(135deg,#facc15,#eab308);box-shadow:0 0 0 1px rgba(255,255,255,0.08),0 0 6px 2px rgba(234,179,8,.25);} 
.status-dot.dnd{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 0 0 1px rgba(255,255,255,0.08),0 0 6px 2px rgba(239,68,68,.3);} 
@keyframes pulse-online{0%{transform:scale(1);opacity:.85;}50%{transform:scale(1.55);opacity:0;}100%{transform:scale(1);opacity:0;}}

/* Avatar-embedded variants unify sizing */
.topic-avatar .status-dot,
.member-card .status-dot{width:14px;height:14px;bottom:4px;right:4px;position:absolute;margin:0;border:2px solid var(--bg-primary);}

/* High contrast mode support (prefers-reduced-motion handled) */
@media (prefers-reduced-motion:reduce){
    .status-dot:after{animation:none!important;}
}

/* ======================= */
/* Admin Panel Styling     */
/* ======================= */
.admin-layout { grid-template-columns: 220px 1fr !important; align-items:start; }
@media (max-width:1000px){ .admin-layout { grid-template-columns: 1fr !important; } .admin-side { order:2 } }
.admin-side { position:sticky; top:70px; align-self:start; }
.admin-nav { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:12px; padding:1rem .75rem; }
.admin-nav ul { list-style:none; display:flex; flex-direction:column; gap:.35rem; }
.admin-nav-link { display:flex; align-items:center; gap:.65rem; padding:.6rem .75rem; border-radius:8px; color:var(--text-secondary); font-size:.85rem; font-weight:500; position:relative; transition:background .18s,color .18s; }
.admin-nav-link i { width:18px; text-align:center; color:var(--accent-primary); }
.admin-nav-link:hover { background:var(--bg-tertiary); color:#fff; }
.admin-nav-link.active { background:linear-gradient(90deg,#5865F2,#45b7af); color:#fff; }

.admin-page-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.admin-page-header h2 { margin:0; font-size:1.4rem; display:flex; align-items:center; gap:.6rem; }
.badge-soft { background:var(--bg-tertiary); padding:.35rem .65rem; border-radius:8px; font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-muted); border:1px solid var(--border-color); }

.admin-kpi-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:1.75rem; }
.admin-kpi-card { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:14px; padding:1rem 1.1rem; position:relative; overflow:hidden; }
.admin-kpi-card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,rgba(88,101,242,.15),transparent 60%); opacity:.6; }
.kpi-label { font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.kpi-value { font-size:1.65rem; font-weight:700; margin-top:.35rem; background:linear-gradient(90deg,#5865F2,#45b7af); -webkit-background-clip:text; background-clip:text; color:transparent; }

.admin-panels-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.admin-panel { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:14px; padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; gap:.55rem; position:relative; overflow:hidden; }
.admin-panel h3 { margin:0; font-size:1.05rem; display:flex; gap:.6rem; align-items:center; }
.admin-panel.muted { opacity:.6; }
.btn-admin, .btn-admin-primary { display:inline-block; background:linear-gradient(90deg,#5865F2,#45b7af); color:#fff; padding:.55rem .9rem; border-radius:10px; font-size:.8rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; box-shadow:0 4px 14px -4px rgba(0,0,0,.4); transition:transform .18s, box-shadow .18s; }
.btn-admin:hover, .btn-admin-primary:hover { transform:translateY(-2px); box-shadow:0 6px 18px -6px rgba(0,0,0,.55); }
.btn-admin:active, .btn-admin-primary:active { transform:translateY(0); box-shadow:0 3px 10px -2px rgba(0,0,0,.6); }

.admin-form-card, .admin-table-card { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:14px; padding:1.15rem 1.25rem 1.35rem; margin-bottom:1.75rem; }
.admin-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem 1.25rem; align-items:start; }
.admin-form-grid .form-field { display:flex; flex-direction:column; gap:.35rem; }
.admin-form-grid label { font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; font-weight:600; color:var(--text-muted); }
.admin-form-grid input { background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:10px; padding:.7rem .75rem; color:var(--text-primary); font-size:.9rem; }
.admin-form-grid input:focus { background:#2b2d32; }
.admin-form-grid .form-actions { display:flex; align-items:flex-end; }
.btn-admin-primary { border:none; cursor:pointer; }

.admin-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.admin-table th, .admin-table td { padding:.65rem .75rem; border-bottom:1px solid rgba(255,255,255,.06); text-align:left; }
.admin-table thead th { font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.admin-table tbody tr:hover { background:var(--bg-tertiary); }
.admin-users-table .user-cell { display:flex; align-items:center; gap:.55rem; }
.admin-user-avatar { width:34px; height:34px; border-radius:8px; object-fit:cover; border:2px solid var(--bg-tertiary); }
.admin-table td.actions { white-space:nowrap; }
.admin-table form.inline { display:inline-block; }
.btn-xs { background:var(--bg-tertiary); border:1px solid var(--border-color); color:var(--text-secondary); padding:.4rem .55rem; border-radius:8px; cursor:pointer; font-size:.7rem; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; transition:background .2s,border-color .2s,color .2s; }
.btn-xs:hover { background:#2d2f34; color:#fff; }
.btn-xs.danger { background:#382626; border-color:#4d2f2f; color:#f87171; }
.btn-xs.danger:hover { background:#552e2e; color:#fff; }
.pre-inline { max-width:480px; white-space:pre-wrap; font-size:.7rem; line-height:1.25; margin:0; }

/* --- Added: Label & Warning & Admin Category Enhancements (2025-09-01) --- */
.label-badge {padding:2px 6px;border-radius:4px;font-size:11px;font-weight:500;display:inline-block;line-height:1.2;margin:2px;background:var(--bg-tertiary);border:1px solid var(--border-color);} 
.label-badge[data-label='Angenommen'] {background:linear-gradient(135deg,#1e8e3e,#34a853);color:#fff;border:none;}
.label-badge[data-label='Abgelehnt'] {background:linear-gradient(135deg,#b00020,#d93025);color:#fff;border:none;}
.label-badge[data-label='Whitelist'] {background:linear-gradient(135deg,#3949ab,#5c6bc0);color:#fff;border:none;}
.label-badge[data-label='Vorschlag'] {background:linear-gradient(135deg,#e37400,#f4b400);color:#222;border:none;}
.label-badge[data-label='Allgemein'] {background:linear-gradient(135deg,#546e7a,#78909c);color:#fff;border:none;}

.warnings-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.warning-item {background:var(--bg-tertiary);padding:8px 10px;border:1px solid var(--border-color);border-radius:6px;}
.warning-reason {font-weight:600;display:flex;align-items:center;gap:6px;}
.warning-reason i {color:#ff9800;}
.warning-item .warning-meta {margin-top:2px;font-size:11px;}

.drag-handle {cursor:grab;color:var(--text-secondary);}
tr.dragging {opacity:0.6;}
/* Admin Categories Table specific */
.admin-categories-table.styled td, .admin-categories-table.styled th { vertical-align:middle; }
.admin-categories-table .cat-title-input, .admin-categories-table .cat-desc-input { width:100%; background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:6px; padding:.4rem .5rem; font-size:.8rem; }
.admin-categories-table .cat-desc-text { display:block; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-categories-table .row-actions { display:flex; gap:.35rem; align-items:center; }
.admin-categories-table .btn-inline.btn-xs, .admin-categories-table .btn-xs { min-width:30px; }
.admin-categories-table .drag-handle { width:30px; text-align:center; }
.admin-table-card h3 { margin-top:0; display:flex; align-items:center; gap:.5rem; font-size:1rem; }
.table-footer-actions { margin-top:.75rem; display:flex; justify-content:flex-end; }
.table-footer-actions form { margin:0; }
.admin-form-card form button i, .table-footer-actions button i { margin-right:.35rem; }
.admin-form-card input { font-size:.85rem; }
.admin-form-card .form-actions button { align-self:flex-end; }
.admin-form-grid .form-field input { width:100%; }
.admin-layout .main-content { padding-top:1rem; }
.admin-form-card, .admin-table-card { box-shadow:0 4px 14px -6px rgba(0,0,0,.5); }
.admin-categories-table .hidden { display:none !important; }
.admin-categories-table .btn-inline { background:var(--bg-tertiary); border:1px solid var(--border-color); color:var(--text-secondary); padding:.35rem .55rem; border-radius:6px; font-size:.65rem; cursor:pointer; }
.admin-categories-table .btn-inline:hover { background:var(--bg-secondary); color:#fff; }
.btn-danger { color:#f87171; }
.btn-inline {background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);padding:4px 6px;border-radius:6px;font-size:12px;}
.btn-inline:hover {background:var(--bg-secondary);color:var(--text-primary);} 
.btn-danger {background:#c62828!important;color:#fff!important;border:none;}
.topic-description-card {background:var(--bg-tertiary);border:1px solid var(--border-color);padding:12px 14px;border-radius:8px;margin:-4px 0 12px 0;font-size:14px;line-height:1.5;}

/* Profile activity timeline */
.activity-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;position:relative;}
.activity-timeline:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:linear-gradient(var(--accent-primary),transparent);} 
.activity-tl-item{display:flex;align-items:flex-start;gap:.75rem;position:relative;padding-left:6px;}
.activity-tl-item .act-icon{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.65rem;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--accent-primary);box-shadow:0 2px 4px -2px rgba(0,0,0,.5);} 
.activity-tl-item .act-icon.create{background:linear-gradient(135deg,#5865F2,#45b7af);color:#fff;border:none;}
.activity-tl-item .act-icon.reply{background:linear-gradient(135deg,#374151,#1f2937);}
.activity-tl-item .act-body{flex:1;min-width:0;}
.act-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.65rem;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);}
.act-label{font-weight:600;color:var(--text-secondary);} 
.act-cat{background:var(--bg-tertiary);border:1px solid var(--border-color);padding:2px 5px;border-radius:4px;font-size:.55rem;letter-spacing:.5px;}
.act-time{margin-left:auto;color:var(--text-muted);font-size:.55rem;}
.act-desc{font-size:.75rem;color:var(--text-primary);margin-top:2px;line-height:1.3;word-break:break-word;}
.act-link{display:inline-flex;align-items:center;gap:4px;font-size:.6rem;margin-top:4px;color:var(--accent-primary);text-decoration:none;}
.act-link:hover{text-decoration:underline;}
.act-pagination{display:flex;justify-content:space-between;margin-top:.75rem;}
.act-pagination .page-link{font-size:.6rem;background:var(--bg-tertiary);padding:4px 8px;border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);} 
.act-pagination .page-link:hover{background:var(--bg-secondary);color:#fff;}

/* Attachments redesign */
.attachments{margin-top:12px;}
.attachments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;align-items:stretch;}
.attachment-card{position:relative;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;overflow:hidden;box-shadow:0 2px 4px -2px rgba(0,0,0,.4);transition:.25s background,.25s border-color,.25s transform;display:flex;align-items:center;justify-content:center;padding:6px;}
.attachment-card:hover{border-color:var(--accent-primary);background:var(--bg-secondary);transform:translateY(-2px);} 
.attachment-card:active{transform:scale(.97);} 
.attachment-card .att-thumb{display:block;width:100%;height:100%;}
.attachment-card .att-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9);transition:filter .25s, transform .35s;}
.attachment-card:hover .att-thumb img{filter:saturate(1.15) brightness(1.05);transform:scale(1.05);} 
.attachment-card .att-file{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--text-secondary);text-align:center;padding:10px;font-size:.7rem;gap:.4rem;line-height:1.2;}
.attachment-card .att-icon{font-size:1.35rem;display:inline-block;}
.attachment-card[data-ext$="pdf"] .att-icon{content:"📄";} /* fallback if we later use pseudo */
.attachment-card[data-ext$="zip"] .att-icon{content:"🗜️";}
.attachment-card[data-ext$="txt"] .att-icon{content:"📄";}
.attachment-card[data-ext$="sql"] .att-icon{content:"🗄️";}
.attachment-card .att-filename{word-break:break-word;max-width:100%;}
@media (max-width:600px){ .attachments-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));} }
@media (prefers-reduced-motion:reduce){ .attachment-card:hover{transform:none;} .attachment-card:hover .att-thumb img{transform:none;} }

/* Admin Dashboard */
.admin-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin:1.25rem 0;}
.admin-kpi-card{background:var(--bg-tertiary);border:1px solid var(--border-color);padding:.9rem .95rem;border-radius:14px;display:flex;flex-direction:column;gap:.35rem;position:relative;overflow:hidden;}
.admin-kpi-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 20%,rgba(120,130,255,.15),transparent 60%);opacity:.5;pointer-events:none;}
.admin-kpi-card .kpi-label{font-size:.65rem;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);font-weight:600;}
.admin-kpi-card .kpi-value{font-size:1.6rem;font-weight:700;line-height:1;color:var(--text-primary);}
.admin-kpi-card .kpi-sub{font-size:.55rem;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);}
.admin-kpi-card.accent{border-color:var(--accent-primary);}
.admin-kpi-card.warning{border-color:var(--danger-color);}
.admin-kpi-card.healthy{border-color:rgba(0,200,120,.6);} 
.admin-panels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem;margin-top:1.5rem;}
.admin-panel{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:16px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;position:relative;overflow:hidden;min-height:140px;}
.admin-panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 18%,rgba(120,130,255,.18),transparent 60%);opacity:.5;pointer-events:none;}
.admin-panel h3{margin:0;font-size:.95rem;display:flex;align-items:center;gap:.5rem;}
.admin-panel p{font-size:.7rem;color:var(--text-secondary);line-height:1.3;margin:0 0 .4rem;}
.admin-panel .btn-admin{align-self:flex-start;background:var(--bg-secondary);border:1px solid var(--border-color);padding:.45rem .9rem;font-size:.7rem;border-radius:10px;color:var(--text-secondary);text-decoration:none;transition:.25s background,.25s border-color,.25s color;}
.admin-panel .btn-admin:hover{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;}
.admin-panel.muted{opacity:.6;}
.recent-topics-admin{list-style:none;padding:0;margin:.5rem 0 0 0;display:flex;flex-direction:column;gap:.45rem;font-size:.7rem;}
.recent-topics-admin li{display:flex;gap:.75rem;align-items:center;}
.recent-topics-admin .rt-title{color:var(--accent-primary);text-decoration:none;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.recent-topics-admin .rt-title:hover{text-decoration:underline;}
.recent-topics-admin .rt-time{margin-left:auto;font-size:.55rem;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase;}

/* Admin Tables */
.admin-table{width:100%;border-collapse:separate;border-spacing:0 6px;margin:1rem 0;font-size:.75rem;}
.admin-table thead th{background:var(--bg-tertiary);color:var(--text-secondary);padding:.6rem .7rem;font-weight:600;font-size:.6rem;letter-spacing:.5px;text-transform:uppercase;text-align:left;border-bottom:1px solid var(--border-color);}
.admin-table tbody tr{background:var(--bg-tertiary);border:1px solid var(--border-color);transition:.25s background,.25s border-color;}
.admin-table tbody tr:hover{background:var(--bg-secondary);border-color:var(--accent-primary);} 
.admin-table tbody td{padding:.65rem .7rem;vertical-align:top;color:var(--text-primary);} 
.admin-table tbody td form{display:inline;} 
.admin-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem;margin-top:1rem;}
.admin-form input,.admin-form select{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:.55rem .6rem;border-radius:8px;font-size:.75rem;}
.admin-form input:focus{outline:2px solid var(--accent-primary);outline-offset:1px;}
.admin-form .btn-primary{grid-column:1/-1;justify-self:start;font-size:.75rem;padding:.55rem 1rem;border-radius:10px;}

@media (max-width:800px){
    .admin-kpi-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
    .admin-panel{min-height:130px;}
    .admin-form{grid-template-columns:1fr 1fr;}
}

/* ========================= */
/* Additional Responsive UX  */
/* ========================= */
@media (max-width:900px){
    .achievements-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
    .friends-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
    .admin-layout{grid-template-columns:1fr!important;}
    .admin-side{position:static;}
}
@media (max-width:700px){
    .requests-grid .request-card{flex-direction:row;align-items:center;padding:.75rem .85rem;}
    .req-avatar{width:48px;height:48px;}
    .req-actions{flex-wrap:wrap;}
    .conversations-grid .conv-card{border-radius:12px;}
    .conv-avatar-wrap img{width:48px;height:48px;}
    .chat-scroll{max-height:55vh;}
    .msg-bubble{max-width:100%;}
    .admin-kpi-card .kpi-value{font-size:1.4rem;}
}
@media (max-width:560px){
    .achievements-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;}
    .achievement-tile{padding:.75rem .7rem;gap:.6rem;min-height:100px;}
    .achv-media img{width:52px;height:52px;}
    .achv-title{font-size:.85rem;}
    .achv-desc{font-size:.65rem;}
    .friends-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;}
    .friend-avatar-wrap img{width:60px;height:60px;}
    .friend-name{font-size:.7rem;}
    .requests-grid .request-card{padding:.65rem .75rem;}
    .req-name{font-size:.8rem;}
    .conv-link{padding:.75rem .8rem;gap:.7rem;}
    .conv-snippet{font-size:.65rem;}
    .compose-text{min-height:54px;font-size:.7rem;}
    .chat-compose{padding:.7rem .75rem;}
    .admin-kpi-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem;}
    .admin-kpi-card{padding:.75rem .8rem;}
    .kpi-value{font-size:1.35rem;}
    .admin-panels-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;}
    .admin-panel{padding:.9rem 1rem;}
    .admin-table th,.admin-table td{padding:.5rem .55rem;font-size:.65rem;}
    .admin-table thead th{font-size:.55rem;}
}
@media (max-width:420px){
    .achievements-grid{grid-template-columns:1fr;}
    .friends-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}
    .requests-grid .request-card{flex-direction:column;align-items:flex-start;}
    .req-row{width:100%;}
    .req-time{margin-left:0;}
    .req-actions{width:100%;justify-content:flex-start;}
    .conversations-grid{gap:.65rem;}
    .conv-link{padding:.65rem .7rem;}
    .conv-snippet{max-height:3em;}
    .chat-header{flex-direction:column;align-items:flex-start;gap:.5rem;}
    .chat-scroll{padding:.75rem .65rem;}
    .msg-avatar-wrap img{width:38px;height:38px;}
    .msg-bubble{padding:.55rem .6rem;border-radius:12px;}
    .msg-text{font-size:.7rem;}
    .compose-text{font-size:.65rem;padding:.5rem .55rem;}
    .admin-kpi-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));}
    .kpi-value{font-size:1.2rem;}
    .admin-panel h3{font-size:.9rem;}
}
@media (prefers-reduced-motion:reduce){
    .admin-kpi-card:hover,.friend-card:hover,.attachment-card:hover{transform:none;}
    .achievement-tile:hover{transform:none;}
}

/* Achievements page */
.achievements-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin:0;padding:0;}
.achievement-tile{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:14px;padding:1rem;display:flex;gap:.9rem;align-items:flex-start;position:relative;overflow:hidden;min-height:120px;transition:.3s border-color,.3s background,.3s transform;}
.achievement-tile:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 25% 15%,rgba(120,130,255,.12),transparent 55%);opacity:.6;}
.achievement-tile:hover{border-color:var(--accent-primary);transform:translateY(-3px);} 
.achievement-tile[data-rarity="rare"]{background:linear-gradient(135deg,#262b38,#20242c);} 
.achievement-tile[data-rarity="epic"]{background:linear-gradient(135deg,#2d1f3d,#23182f);} 
.achv-media img{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--border-color);background:#222;}
.achv-title{font-size:.95rem;margin:0 0 4px;font-weight:600;}
.achv-desc{font-size:.75rem;color:var(--text-muted);line-height:1.3;margin:0 0 6px;}
.achv-time{font-size:.6rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;}

/* Friend requests */
.requests-grid{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem;}
.request-card{display:flex;gap:.9rem;align-items:stretch;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;padding:.85rem 1rem;transition:.25s background,.25s border-color;}
.request-card:hover{background:var(--bg-secondary);border-color:var(--accent-primary);}
.req-avatar{width:54px;height:54px;object-fit:cover;border-radius:12px;border:1px solid var(--border-color);background:#222;display:block;}
.req-body{flex:1;display:flex;flex-direction:column;gap:.5rem;}
.req-row{display:flex;align-items:center;gap:.75rem;}
.req-name{font-weight:600;color:var(--text-primary);text-decoration:none;}
.req-name:hover{text-decoration:underline;}
.req-time{margin-left:auto;font-size:.65rem;color:var(--text-muted);}
.req-actions{display:flex;gap:.6rem;}
.req-actions form{display:inline;}
.btn-accept,.btn-decline{border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);padding:4px 10px;border-radius:8px;font-size:.65rem;cursor:pointer;transition:.25s background,.25s color,.25s border-color;}
.btn-accept:hover{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary);} 
.btn-decline{color:var(--danger-color);}
.btn-decline:hover{background:var(--danger-color);color:#fff;border-color:var(--danger-color);} 

/* Friends */
.friends-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem;padding:0;margin:0;}
.friend-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:14px;padding:.9rem .95rem;transition:.25s background,.25s border-color,.25s transform;position:relative;overflow:hidden;}
.friend-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 18%,rgba(120,130,255,.1),transparent 60%);opacity:.5;pointer-events:none;}
.friend-card:hover{background:var(--bg-secondary);border-color:var(--accent-primary);transform:translateY(-3px);} 
.friend-link{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:.65rem;}
.friend-avatar-wrap img{width:72px;height:72px;object-fit:cover;border-radius:50%;border:2px solid var(--border-color);background:#222;}
.friend-name{font-size:.8rem;font-weight:600;color:var(--text-primary);} 

/* Private messages overview */
.conversations-grid{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.85rem;}
.conv-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:14px;transition:.25s background,.25s border-color;}
.conv-card.unread{border-color:var(--accent-primary);} 
.conv-link{display:flex;gap:.9rem;padding:.85rem 1rem;text-decoration:none;color:var(--text-secondary);align-items:flex-start;}
.conv-card:hover{background:var(--bg-secondary);border-color:var(--accent-primary);} 
.conv-avatar-wrap img{width:56px;height:56px;border-radius:14px;object-fit:cover;border:1px solid var(--border-color);background:#222;}
.conv-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35rem;}
.conv-row{display:flex;align-items:center;gap:.6rem;}
.conv-name{font-weight:600;color:var(--text-primary);}
.conv-time{margin-left:auto;font-size:.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;}
.conv-snippet{font-size:.7rem;color:var(--text-secondary);line-height:1.3;max-height:2.6em;overflow:hidden;}

/* Chat view */
.chat-scroll{max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:.9rem;padding:1rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:14px;margin-bottom:1rem;}
.msg{display:flex;}
.msg-inner{display:flex;gap:.65rem;align-items:flex-start;max-width:720px;}
.msg.me{justify-content:flex-end;}
.msg.me .msg-inner{flex-direction:row-reverse;}
.msg-avatar-wrap img{width:42px;height:42px;border-radius:12px;object-fit:cover;border:1px solid var(--border-color);background:#222;}
.msg-bubble{background:linear-gradient(135deg,#2a2f39,#262a31);border:1px solid var(--border-color);padding:.65rem .75rem;border-radius:14px;max-width:520px;position:relative;box-shadow:0 2px 4px -1px rgba(0,0,0,.4);}
.msg.me .msg-bubble{background:linear-gradient(135deg,#5865F2,#45b7af);border-color:rgba(255,255,255,0.15);}
.msg-meta{display:flex;align-items:center;gap:.75rem;margin-bottom:.35rem;}
.msg-author{font-weight:600;font-size:.7rem;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);}
.msg.me .msg-author{color:#fff;}
.msg-time{font-size:.55rem;color:var(--text-muted);margin-left:auto;text-transform:uppercase;letter-spacing:.5px;}
.msg.me .msg-time{color:rgba(255,255,255,.85);}
.msg-text{font-size:.75rem;line-height:1.35;color:var(--text-primary);word-break:break-word;}
.msg.me .msg-text{color:#fff;}
.chat-compose{display:flex;flex-direction:column;gap:.6rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:14px;padding:.85rem 1rem;}
.compose-text{width:100%;resize:vertical;min-height:60px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);padding:.6rem .7rem;border-radius:10px;font-size:.8rem;line-height:1.3;}
.compose-actions{display:flex;justify-content:flex-end;}
.compose-actions .btn-primary{font-size:.75rem;padding:.55rem .95rem;border-radius:10px;}

@media (max-width:700px){
    .msg-inner{max-width:100%;}
    .chat-scroll{max-height:55vh;}
    .friend-card{padding:.75rem .8rem;}
    .friend-avatar-wrap img{width:60px;height:60px;}
}
/* Profile enhanced layout */
.profile-enhanced {display:grid;grid-template-columns:320px 1fr;gap:1.5rem;}
@media (max-width:1100px){ .profile-enhanced {grid-template-columns:1fr;} }
.profile-comments-card .comment-item {padding:.6rem .75rem;border:1px solid var(--border-color);border-radius:8px;margin-bottom:.65rem;background:var(--bg-tertiary);} 
.profile-comments-card .comment-author {font-weight:600;}
.profile-comments-card .comment-meta {font-size:11px;margin-bottom:.35rem;}
.profile-avatar-card form {display:flex;flex-direction:column;gap:.6rem;}
.profile-avatar-card input[type=file] {background:var(--bg-tertiary);border:1px solid var(--border-color);padding:.55rem .6rem;border-radius:8px;color:var(--text-secondary);}
.profile-card h3 i {color:var(--accent-primary);} 
.topic-quick-actions {display:flex;gap:.35rem;margin-top:.4rem;}
.pagination {display:flex;gap:.4rem;margin-top:1rem;flex-wrap:wrap;}
.page-link {background:var(--bg-tertiary);border:1px solid var(--border-color);padding:.45rem .7rem;border-radius:6px;font-size:.75rem;color:var(--text-secondary);}
.page-link.active, .page-link:hover {background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;}
.comment-head {display:flex;align-items:center;gap:.75rem;justify-content:space-between;margin-bottom:.25rem;}
.comment-actions {display:flex;gap:.35rem;margin-left:auto;}
.comment-textarea-small {width:100%;background:var(--bg-tertiary);border:1px solid var(--border-color);padding:.55rem .6rem;border-radius:8px;color:var(--text-primary);min-height:80px;margin-top:.35rem;}
.comment-item .hidden {display:none;}
/* Moderation bar & modal */
.moderation-bar {display:flex;gap:.5rem;margin:0 0 1rem 0;padding:.5rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;}
.modal.hidden {display:none;}
.modal {position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:2000;padding:1rem;}
.modal-dialog {background:var(--bg-secondary);border:1px solid var(--border-color);padding:1rem 1.25rem 1.25rem;border-radius:12px;min-width:320px;max-width:420px;width:100%;}
.modal-dialog h3 {margin:0 0 .75rem;font-size:1.05rem;display:flex;align-items:center;gap:.5rem;}
.modal-dialog input {width:100%;margin:.25rem 0 .75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);padding:.55rem .65rem;border-radius:8px;color:var(--text-primary);}
.modal-actions {display:flex;justify-content:flex-end;gap:.75rem;margin-top:.25rem;}

/* === Private Chat === */
.chat-wrapper { max-width:740px; margin:2rem auto; background:var(--bg-secondary); border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,0.07); padding:1.5rem; }
.chat-messages { max-height:340px; overflow-y:auto; margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.7rem; }
.chat-message { padding:.7rem 1rem; border-radius:10px; background:var(--bg-tertiary); box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.chat-message.me { background:linear-gradient(135deg,#7ee3c6,#5b81ff); color:#fff; align-self:flex-end; }
.chat-message.other { background:var(--bg-tertiary); color:var(--text-primary); align-self:flex-start; }
.chat-meta { font-size:.8rem; color:var(--text-primary); margin-bottom:.3rem; display:flex; gap:1rem; }
.chat-author { font-weight:600; }
.chat-date { font-style:italic; }
.chat-text { font-size:1rem; word-break:break-word; }
.chat-form { display:flex; gap:.7rem; margin-top:1rem; }
.chat-form textarea { flex:1; border-radius:8px; border:1px solid var(--border-color); padding:.7rem; font-size:1rem; }
.chat-form button { padding:.7rem 1.2rem; border-radius:8px; background:var(--accent-primary); color:#fff; border:none; font-weight:600; cursor:pointer; }

.chat-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; }

/* activity-list-modern */
.activity-list-modern { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.activity-item-modern { padding:.55rem .7rem; background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:10px; font-size:.7rem; display:flex; justify-content:space-between; }
.activity-card { padding:.55rem .7rem; background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:10px; font-size:.7rem; display:flex; justify-content:space-between; }
.activity-card a { color:var(--text-primary); font-weight:500; }
.activity-icon { width:24px; height:24px; margin-right:.5rem; }
.activity-content { flex:1; }
.activity-title { font-weight:600; }
.activity-category { font-weight:500; color:var(--text-secondary); }
.activity-meta { font-size:.8rem; color:var(--text-secondary); }
.activity-link { color:var(--text-primary); font-weight:500; }
.activity-link:hover { text-decoration:underline; }
.activity-date { font-size:.8rem; color:var(--text-secondary); }
.activity-age { font-size:.8rem; color:var(--text-secondary); }

/* Footer */
footer.site-footer { margin-top:4rem; background:linear-gradient(135deg,#202226,#1b1d21); border-top:1px solid var(--border-color); padding:2.75rem 0 2.2rem; position:relative; overflow:hidden; }
footer.site-footer:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 12% 18%,rgba(120,130,255,.16),transparent 62%), radial-gradient(circle at 88% 72%,rgba(69,183,175,.14),transparent 62%); opacity:.55; pointer-events:none; }
footer .footer-inner { max-width:1220px; margin:0 auto; padding:0 2.2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2.25rem 3.25rem; position:relative; z-index:2; }
footer .footer-brand { display:flex; flex-direction:column; gap:.85rem; min-width:220px; }
footer .footer-logo { margin:0; font-size:1.5rem; letter-spacing:.6px; background:linear-gradient(90deg,#5865F2,#45b7af); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; }
footer .footer-logo span { background:linear-gradient(90deg,#45b7af,#7ee3c6); -webkit-background-clip:text; background-clip:text; color:transparent; }
footer .footer-tag { font-size:.68rem; letter-spacing:.55px; text-transform:uppercase; color:var(--text-muted); font-weight:600; opacity:.8; }
footer nav.footer-col h4 { margin:0 0 .9rem; font-size:.8rem; letter-spacing:.6px; text-transform:uppercase; font-weight:600; color:var(--text-secondary); position:relative; padding-bottom:.4rem; }
footer nav.footer-col h4:after { content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:linear-gradient(90deg,#5865F2,#45b7af); border-radius:2px; }
footer nav.footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
footer nav.footer-col li { line-height:1.2; }
footer nav.footer-col a { color:var(--text-primary); font-size:.78rem; text-decoration:none; position:relative; padding:.25rem 0 .25rem 0; display:inline-block; transition:.3s color; }
footer nav.footer-col a:before { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:linear-gradient(90deg,#5865F2,#45b7af); transition:.4s width; border-radius:2px; }
footer nav.footer-col a:hover:before { width:100%; }
footer nav.footer-col a:hover { color:#fff; }
footer .social-links { list-style:none; display:flex; flex-wrap:wrap; gap:.55rem .8rem; margin:.35rem 0 0; padding:0; }
footer .social-links a { display:inline-flex; align-items:center; gap:.45rem; background:linear-gradient(145deg,#272a30,#22252a); border:1px solid var(--border-color); padding:.5rem .7rem; border-radius:10px; font-size:.68rem; color:var(--text-secondary); text-decoration:none; font-weight:500; line-height:1; position:relative; overflow:hidden; }
footer .social-links a:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.08),transparent 70%); opacity:0; transition:.4s opacity; }
footer .social-links a:hover { background:linear-gradient(145deg,#5865F2,#45b7af); color:#fff; border-color:rgba(255,255,255,.25); transform:translateY(-3px); }
footer .social-links a:hover:after { opacity:.5; }
footer .footer-bottom { max-width:1220px; margin:2.5rem auto 0; padding:1.2rem 2.2rem 0; border-top:1px solid rgba(255,255,255,.06); display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; font-size:.68rem; letter-spacing:.55px; color:var(--text-muted); position:relative; z-index:2; }
footer .footer-bottom .meta { opacity:.75; }
footer .footer-bottom a { color:var(--text-secondary); text-decoration:none; transition:.25s color; }
footer .footer-bottom a:hover { color:#fff; text-decoration:underline; }
/* --- Hosted by (Footer) --- */
.hosted-by {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.2rem 0 0.2rem 0;
    margin: 0 auto;
    font-size: 0.97rem;
    color: var(--text-muted);
    background: none;
    border: none;
    box-shadow: none;
}
.hosted-by p {
    margin: 0;
    padding: 0;
    font-size: 0.97rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}
.hosted-by img {
    height: 30%;
    margin-left: 8px;
    vertical-align: middle;
    filter: grayscale(0.1) brightness(1.05) drop-shadow(0 1px 4px rgba(69,183,175,0.08));
    border-radius: 6px;
    padding: 2px 6px 2px 2px;
    box-shadow: 0 2px 8px rgba(40,42,46,0.04);
    border-bottom: 1px solid transparent;
    transition: filter 0.3s, box-shadow 0.3s, border-bottom 0.3s;
}
.hosted-by img:hover {
    filter: grayscale(0) brightness(1.1) drop-shadow(0 2px 6px rgba(69,183,175,0.12));
    box-shadow: 0 4px 12px rgba(40,42,46,0.08);
    border-bottom: 1px solid var(--accent-primary);
    transition: filter 0.3s, box-shadow 0.3s, border-bottom 0.3s;
}
@media (max-width: 700px) {
    .hosted-by {
        flex-direction: column;
        font-size: 0.93rem;
        padding: 1.1rem 0 0.2rem 0;
    }
    .hosted-by img {
        height: 50%;
        margin-left: 0;
        margin-top: 6px;
        padding: 2px 4px;
    }
}
@media (max-width:900px){ footer .footer-inner { padding:0 1.75rem; gap:2rem 2.25rem; } footer .footer-bottom { padding:1.15rem 1.75rem 0; } }
@media (max-width:620px){ footer .footer-inner { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); } footer .footer-brand { grid-column:1/-1; flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:1rem 2rem; } footer .footer-tag { flex-basis:100%; } }
@media (max-width:480px){ footer.site-footer { padding:2.3rem 0 1.8rem; } footer .footer-inner { padding:0 1.25rem; gap:1.75rem 1.5rem; } footer .footer-bottom { padding:1.1rem 1.25rem 0; flex-direction:column; align-items:flex-start; } footer nav.footer-col h4 { margin-bottom:.7rem; } }
@media (max-width:360px){ footer .footer-inner { padding:0 1rem; } footer .social-links a { padding:.45rem .6rem; font-size:.63rem; } }
/* Target type badges (reports) */
.badge-tt{display:inline-block;padding:2px 6px;border-radius:6px;font-size:.55rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);margin-right:4px;}
.badge-tt-post{background:#263d55;color:#7ac3ff;border-color:#335676;}
.badge-tt-topic{background:#42324d;color:#e0b3ff;border-color:#5d4670;}
.badge-tt-user{background:#344d32;color:#9fe09a;border-color:#4b6e48;}
.badge-tt-profile_comment{background:#4d3a30;color:#ffcfad;border-color:#6c4f41;}
.badge-tt-page{background:#2f3f54;color:#aed7ff;border-color:#425771;}
.badge-tt-error_code{background:#5a1f1f;color:#ffb9b9;border-color:#7d2c2c;}
.tt-id{font-size:.55rem;opacity:.7;}
/* Report status variants */
.reports .status-open{background:#2d3b28;color:#9adf7f;padding:2px 6px;border-radius:6px;display:inline-block;}
.reports .status-merged{background:#253a52;color:#7fc4ff;padding:2px 6px;border-radius:6px;display:inline-block;}
.reports .status-dismissed{background:#4a2a2a;color:#ffb3b3;padding:2px 6px;border-radius:6px;display:inline-block;}
/* Utility spacing & layout */
.u-flex{display:flex;}
.u-flex-between{display:flex;justify-content:space-between;align-items:center;}
.u-gap-sm{gap:.5rem;}
.u-gap-xs{gap:.25rem;}
.u-wrap{flex-wrap:wrap;}
.u-text-muted{color:var(--text-muted);}
.u-badge{font-size:.55rem;padding:2px 6px;border-radius:6px;display:inline-block;background:var(--bg-tertiary);}