/* =======================================================
   ROPINHOME — STYLE.CSS
   Alle modules gecombineerd
   ======================================================= */

/* =========================
   RESET
========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #000;
    font-family: Arial, sans-serif;
    color: #fff;
    overflow-x: hidden;
}

/* =========================
   CONTAINER
========================= */
.container {
    width: 2048px;
    margin: 0 auto;
}

/* Wrapper voor centreren op brede schermen */
body {
    background: #000;
    font-family: Arial, sans-serif;
    color: #fff;
    overflow-x: hidden;
}

/* =========================
   IMAGE FIX
========================= */
img {
    display: block;
}

/* layout images mogen NIET schalen */
.header img,
.bannermenu img,
.menu img,
.tussen img,
.avatar img,
.topmenu img,
.footer img {
    width: auto;
    max-width: none;
}

/* =========================
   LINKS
========================= */
a {
    color: #fff;
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover {
    color: #66ccff;
}

/* =========================
   HOOFD LAYOUT
========================= */
.row {
    display: flex;
    align-items: flex-start;
    width: 2048px;
}

.right-block {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    height: 869px;
}

.content-row {
    display: flex;
    align-items: flex-start;
}

.menu,
.avatar,
.content-wrapper {
    flex-shrink: 0;
}

/* =========================
   TOPMENU
========================= */
.topmenu {
    height: 69px;
    background: url('images/header/Top.jpg') center/cover no-repeat;
}

.topmenu .menu-items {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-width: 2048px;
    margin: 0 auto;
}

/* =========================
   HEADER
========================= */
.header {
    display: flex;
    width: 2048px;
    margin: 0 auto;
}

.header-left  { width: 622px; }
.header-center { width: 798px; display: flex; flex-direction: column; }
.header-right { width: 622px; }

/* =========================
   BANNER
========================= */
.banner-row1,
.banner-row2 {
    display: flex;
    width: 2048px;
    margin: 0 auto;
}

.banner-left { width: 622px; }
.banner-center { width: 811px; display: flex; flex-direction: column; }
.banner-right { width: 615px; }

.banner-left-small { width: 499px; }
.banner-right-small { width: 512px; }

.banner-middle-menu {
    width: 1037px;
    height: 35px;
    background: url('images/banner/TMBG.jpg') center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================
   MENU
========================= */
.menu {
    width: 318px;
    display: flex;
    flex-direction: column;
}

.menu-bottom {
    display: flex;
}

.menu-links {
    width: 289px;
    display: flex;
    flex-direction: column;
}

.menu-btn {
    width: 289px; height: 54px; flex-shrink: 0;
    background: url('images/menu/Mknop.jpg') center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none; font-size: 13px; font-weight: bold;
    letter-spacing: 0.5px; transition: filter 0.2s; position: relative;
}

.menu-side {
    width: 29px;
    display: flex;
    flex-direction: column;
}

.menu-side-fill {
    flex: 1;
    background: url('images/menu/MZUR.jpg') repeat-y;
}

.menu-footer {
    margin-top: 3px;
}

/* =========================
   CONTENT
========================= */
.content-wrapper {
    width: 979px;
    height: 869px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.content-middle {
    height: 536px;
    flex-shrink: 0;
    background: url('images/content/Contentbg.jpg') repeat-y;
    overflow-y: auto;
}

.content-inner {
    padding: 10px;
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
}

.content-inner img,
.content-inner iframe,
.content-inner table {
    max-width: 100%;
    height: auto;
}

/* =========================
   MIDDEN
========================= */
.midden-layout {
    display: flex;
    width: 2048px;
    max-width: 100%;
    margin: 0 auto;
}

.midden-left {
    width: 94px;
    flex-shrink: 0;
    background: url('images/midden/ML.jpg') repeat-y;
}

.midden-center {
    flex: 1;
    min-width: 0;
    background: url('images/midden/Mbg.jpg') repeat-y;
}

.midden-right {
    width: 98px;
    flex-shrink: 0;
    background: url('images/midden/MR.jpg') repeat-y;
}

.midden-db-content {
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
}

/* =========================
   TMS
========================= */
.tms-bar img {
    width: 100%;
}

/* =========================
   FOOTER
========================= */
.footer {
    width: 100%;
}

.footer-row1,
.footer-row2,
.footer-row3,
.footer-row4,
.footer-row5 {
    display: flex;
    width: 2048px;
    margin: 0 auto;
}

.f1-center,
.f2-center {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.f1-blocks,
.f2-top,
.f2-middle {
    display: flex;
    align-items: center;
}

/* 🔥 COPY FIX */
.copy {
    flex: 1;
    height: 31px;
    background: url('images/footer/Copybg.jpg') center no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
}

/* Gedeelde basis voor fh blokken */
.fh {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
}

/* Individuele achtergronden per fh-blok */
.fh1 {
    width: 493px;
    height: 66px;
    background: url('images/footer/FH1.jpg') center no-repeat;
}
.fh2 {
    width: 512px;
    height: 66px;
    background: url('images/footer/FH2.jpg') center no-repeat;
}
.fh3 {
    width: 488px;
    height: 66px;
    background: url('images/footer/FH3.jpg') center no-repeat;
}

/* Gedeelde basis voor fc blokken */
.fc {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
}

/* Specifieke achtergronden per fc-blok */
.fc {
    align-items: flex-start !important;
    padding-top: 6px !important;
}
.fc1 {
    width: 493px;
    height: 167px;
    background: url('images/footer/Fc1.jpg') center no-repeat;
}
.fc2 {
    width: 512px;
    height: 167px;
    background: url('images/footer/Fc2.jpg') center no-repeat;
}

/* ── Kolom 2 splitsing ── */
.fc2 .fc-inner.fc2-split {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: flex-start;
}
.fc2-left  { flex: 1 1 0 !important; min-width: 0; overflow: hidden; }
.fc2-right { flex: 1 1 0 !important; min-width: 0; overflow: hidden; }
.fc2-divider {
    width: 1px !important;
    flex: 0 0 1px !important;
    background: rgba(255, 255, 255, 0.1);
    align-self: stretch;
}
.fc-inner { width: 100% !important; box-sizing: border-box !important; }
.fc-header { display: flex !important; justify-content: space-between !important; width: 100% !important; }
.fc-row    { display: flex !important; justify-content: space-between !important; width: 100% !important; gap: 4px; }
.fc-title  { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-meta   { flex-shrink: 0; text-align: right; white-space: nowrap; }
.fh2 {
    position: relative;
    overflow: hidden;
}
.fh2 .footer-col2-left-title  { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }
.fh2 .footer-col2-right-title { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.fh2 .footer-col2-divider     { display: none; }
.fc3 {
    width: 488px;
    height: 167px;
    background: url('images/footer/Fc3.jpg') center no-repeat;
}

/* link-mid basis */
.link-mid {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
    position: relative;
}

/* Individuele achtergronden per link-mid blok */
.link-mid-col {
    width: 190px;
    height: 76px;
    background: url('images/footer/Fcolm.jpg') center no-repeat;
}
.link-mid-cor {
    width: 150px;
    height: 76px;
    background: url('images/footer/Fcorm.jpg') center no-repeat;
}

/* footer-menu */
.footer-menu {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
    background: url('images/footer/Ftmbg.jpg') center no-repeat;
}

/* =========================
   FIXES
========================= */

/* ❌ VERWIJDER GEVAARLIJKE RESET */
div {
    line-height: normal;
}

/* =======================================================
   AUTH FORMS
   ======================================================= */

/* =========================
   AUTH FORMS (login/register)
========================= */

.auth-box {
    width: 100%;
    max-width: 520px;
    margin: 30px auto;
    padding: 30px 35px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid #333;
    box-shadow: 0 0 30px rgba(0, 102, 204, 0.15);
}

.auth-header {
    text-align: center;
    margin-bottom: 25px;
}

.auth-header h2 {
    font-size: 22px;
    color: #66ccff;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.auth-header p {
    font-size: 13px;
    color: #888;
}

/* Alerts */
.auth-alert {
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    border-left: 3px solid;
}

.auth-alert--error {
    background: rgba(180, 30, 30, 0.2);
    border-color: #cc3333;
    color: #ffaaaa;
}

.auth-alert--success {
    background: rgba(30, 140, 30, 0.2);
    border-color: #33aa33;
    color: #aaffaa;
}

.auth-alert a {
    color: #66ccff;
    text-decoration: underline;
}

/* Form fields */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field label {
    font-size: 13px;
    color: #aaa;
    letter-spacing: 0.5px;
}

.auth-field input {
    background: #111;
    border: 1px solid #333;
    color: #fff;
    padding: 9px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.auth-field input:focus {
    border-color: #66ccff;
    box-shadow: 0 0 8px rgba(102, 204, 255, 0.2);
}

.auth-field input::placeholder {
    color: #444;
}

.auth-hint {
    font-size: 11px;
    color: #555;
}

/* Submit knop */
.auth-btn {
    margin-top: 6px;
    padding: 10px;
    background: #0066cc;
    color: #fff;
    border: none;
    font-size: 14px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.auth-btn:hover {
    background: #0088ff;
    box-shadow: 0 0 12px rgba(0, 136, 255, 0.4);
}

/* Onderste links */
.auth-links {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #666;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-links a {
    color: #66ccff;
}

.auth-links a:hover {
    color: #99ddff;
}

.auth-links span {
    color: #444;
}


/* =======================================================
   PROFIEL PAGINA
   ======================================================= */

/* =========================
   PROFIEL PAGINA
========================= */

.profile-page {
    padding: 25px 30px;
    color: #ccc;
}

/* Header blok */
.profile-header {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #222;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.profile-avatar-wrap {
    flex-shrink: 0;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 2px solid #333;
    display: block;
}

.profile-info {
    flex: 1;
    min-width: 150px;
}

.profile-username {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 6px;
}

.profile-role {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    color: #000;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.profile-meta {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
}

.profile-meta a {
    color: #66ccff;
}

/* Statistieken */
.profile-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid #2a2a2a;
    padding: 10px 18px;
    min-width: 90px;
}

.profile-stat__value {
    font-size: 15px;
    font-weight: bold;
    color: #66ccff;
}

.profile-stat__label {
    font-size: 10px;
    color: #555;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Secties */
.profile-section {
    margin-bottom: 28px;
}

.profile-section__title {
    font-size: 13px;
    color: #66ccff;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid #1e3a4a;
    padding-bottom: 6px;
    margin-bottom: 14px;
}

.profile-bio {
    font-size: 13px;
    color: #aaa;
    line-height: 1.7;
}

.profile-empty {
    font-size: 12px;
    color: #444;
    font-style: italic;
}

.profile-error {
    color: #ff6666;
    padding: 15px;
}

/* Laatste posts */
.profile-posts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-post {
    background: rgba(255,255,255,0.03);
    border: 1px solid #222;
    padding: 10px 14px;
}

.profile-post__topic a {
    font-size: 13px;
    color: #66ccff;
    font-weight: bold;
}

.profile-post__topic a:hover {
    color: #99ddff;
}

.profile-post__preview {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    line-height: 1.5;
}

.profile-post__time {
    font-size: 11px;
    color: #444;
    margin-top: 5px;
}

/* Profiel formulier */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 600px;
}

.profile-form__row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.profile-form__row label {
    font-size: 12px;
    color: #888;
    letter-spacing: 0.5px;
}

.profile-form__row input,
.profile-form__row textarea {
    background: #111;
    border: 1px solid #333;
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    width: 100%;
}

.profile-form__row input:focus,
.profile-form__row textarea:focus {
    border-color: #66ccff;
}

.profile-form__row textarea {
    resize: vertical;
    min-height: 90px;
}

/* Avatar upload preview */
.profile-avatar-upload {
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-avatar-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border: 1px solid #333;
}

.profile-avatar-upload input[type="file"] {
    font-size: 12px;
    color: #aaa;
    background: none;
    border: none;
    padding: 0;
    width: auto;
}


/* =========================
   NIEUWS SYSTEEM
========================= */

.news-page {
    padding: 20px 25px;
}

.news-page__header {
    border-bottom: 1px solid #1e3a4a;
    margin-bottom: 20px;
    padding-bottom: 8px;
}

.news-page__title {
    font-size: 16px;
    color: #66ccff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Categorie badge */
.news-category {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    color: #000;
    padding: 2px 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* ── FEATURED ── */
.news-featured {
    display: flex;
    gap: 0;
    margin-bottom: 25px;
    background: rgba(255,255,255,0.03);
    border: 1px solid #1e3a4a;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.news-featured:hover {
    border-color: #66ccff;
    box-shadow: 0 0 20px rgba(102, 204, 255, 0.1);
}

.news-featured__image {
    width: 280px;
    flex-shrink: 0;
    overflow: hidden;
}

.news-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.news-featured:hover .news-featured__image img {
    transform: scale(1.03);
}

.news-featured__image--empty {
    width: 280px;
    background: #0a0a0a;
    min-height: 160px;
}

.news-featured__body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.news-featured__label {
    font-size: 10px;
    color: #66ccff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.news-featured__title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.4;
}

.news-featured__summary {
    font-size: 12px;
    color: #777;
    line-height: 1.7;
    margin-bottom: 12px;
}

.news-featured__meta {
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: #555;
}

/* ── LIJST ── */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-item {
    display: flex;
    gap: 0;
    background: rgba(255,255,255,0.02);
    border: 1px solid #1a1a1a;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, background 0.2s ease;
    overflow: hidden;
}

.news-item:hover {
    border-color: #2a4a5a;
    background: rgba(102, 204, 255, 0.04);
}

.news-item__image {
    width: 90px;
    flex-shrink: 0;
    overflow: hidden;
}

.news-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-item__image--empty {
    width: 90px;
    background: #0d0d0d;
    min-height: 65px;
}

.news-item__body {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.news-item__title {
    font-size: 13px;
    color: #ddd;
    margin-bottom: 5px;
    font-weight: normal;
    line-height: 1.4;
}

.news-item:hover .news-item__title {
    color: #66ccff;
}

.news-item__meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #555;
}

/* ── ARTIKEL DETAIL ── */
.news-back {
    padding: 0 0 14px 0;
}

.news-back a {
    font-size: 12px;
    color: #555;
}

.news-back a:hover {
    color: #66ccff;
}

.news-article {
    margin-bottom: 30px;
}

.news-article__title {
    font-size: 22px;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 14px;
}

.news-article__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #1a1a1a;
    flex-wrap: wrap;
}

.news-article__avatar {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border: 1px solid #333;
    flex-shrink: 0;
}

.news-article__author-block {
    display: flex;
    flex-direction: column;
}

.news-article__author {
    font-size: 13px;
    font-weight: bold;
}

.news-article__role {
    font-size: 10px;
    color: #555;
}

.news-article__date {
    font-size: 11px;
    color: #555;
    margin-left: auto;
}

.news-article__views {
    font-size: 11px;
    color: #444;
}

.news-article__image {
    margin-bottom: 18px;
}

.news-article__image img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid #222;
}

.news-article__content {
    font-size: 13px;
    color: #bbb;
    line-height: 1.8;
}

/* ── REACTIES ── */
.news-comments {
    border-top: 1px solid #1e3a4a;
    padding-top: 20px;
}

.news-comments__title {
    font-size: 13px;
    color: #66ccff;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.news-comment {
    background: rgba(255,255,255,0.02);
    border: 1px solid #1a1a1a;
    margin-bottom: 10px;
    padding: 12px 14px;
}

.news-comment__user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.news-comment__avatar {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border: 1px solid #2a2a2a;
    flex-shrink: 0;
}

.news-comment__username {
    font-size: 12px;
    font-weight: bold;
}

.news-comment__role {
    font-size: 10px;
    color: #555;
    margin-left: 4px;
}

.news-comment__date {
    font-size: 10px;
    color: #444;
    margin-left: auto;
}

.news-comment__content {
    font-size: 12px;
    color: #aaa;
    line-height: 1.7;
}

.news-comment-form {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-comment-form textarea {
    background: #111;
    border: 1px solid #333;
    color: #fff;
    padding: 10px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    outline: none;
    resize: vertical;
    min-height: 70px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.news-comment-form textarea:focus {
    border-color: #66ccff;
}

.news-comment-btn {
    max-width: 180px;
}

.news-login-hint {
    margin-top: 14px;
    font-size: 12px;
    color: #555;
}

.news-login-hint a {
    color: #66ccff;
}

.news-empty {
    font-size: 12px;
    color: #444;
    font-style: italic;
    padding: 10px 0;
}

.news-error {
    color: #ff6666;
    padding: 20px;
    font-size: 13px;
}

/* News select dropdown */
.news-select {
    background: #111;
    border: 1px solid #333;
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.news-select:focus {
    border-color: #66ccff;
}


.pm-report__form-btns { display: flex; gap: 8px; margin-top: 8px; }
/* ========================= FORUM ========================= */
.forum-page { padding: 20px 25px; }
.forum-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e3a4a; padding-bottom: 10px; margin-bottom: 20px; }
.forum-page-title { font-size: 16px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; }
.forum-breadcrumb { font-size: 12px; color: #555; margin-bottom: 14px; padding: 8px 0; border-bottom: 1px solid #111; }
.forum-breadcrumb a { color: #66ccff; }
.forum-breadcrumb a:hover { color: #99ddff; }
.forum-breadcrumb span { color: #888; }
.forum-category { margin-bottom: 20px; border: 1px solid #1a1a1a; }
.forum-category__header { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: rgba(102,204,255,0.05); border-bottom: 1px solid #1a1a1a; }
.forum-category__name { font-size: 14px; font-weight: bold; color: #66ccff; text-decoration: none; }
.forum-category__name:hover { color: #99ddff; }
.forum-category__desc { font-size: 12px; color: #555; }
.forum-category__topics { display: flex; flex-direction: column; }
.forum-category__footer { padding: 7px 14px; border-top: 1px solid #111; }
.forum-category__footer a { font-size: 11px; color: #555; }
.forum-category__footer a:hover { color: #66ccff; }
.forum-category__empty { padding: 10px 14px; font-size: 12px; color: #444; font-style: italic; }
.forum-topic-list { display: flex; flex-direction: column; }
.forum-topic-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #111; text-decoration: none; color: inherit; transition: background 0.15s; }
.forum-topic-item:hover { background: rgba(102,204,255,0.04); }
.forum-topic-item--compact { padding: 8px 14px; }
.forum-topic-item__icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.forum-topic-item__body { flex: 1; min-width: 0; }
.forum-topic-item__title { font-size: 13px; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.forum-topic-item:hover .forum-topic-item__title { color: #66ccff; }
.forum-topic-item__meta { font-size: 11px; color: #555; }
.forum-topic-item__stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.forum-topic-item__replies { font-size: 11px; color: #66ccff; white-space: nowrap; }
.forum-topic-item__last { font-size: 10px; color: #444; white-space: nowrap; }
.forum-cat-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 12px; }
.forum-cat-title { font-size: 16px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.forum-cat-desc { font-size: 12px; color: #666; }
.forum-topic-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #1a1a1a; }
.forum-topic-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.forum-topic-title { font-size: 18px; color: #fff; }
.forum-badge { font-size: 11px; padding: 2px 8px; }
.forum-badge--pin { background: #443300; color: #ffcc66; }
.forum-badge--lock { background: #440000; color: #ff8888; }
.forum-topic-meta { display: flex; gap: 14px; font-size: 11px; color: #555; flex-wrap: wrap; margin-bottom: 8px; }
.forum-mod-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.forum-mod-btn { padding: 4px 10px; font-size: 11px; background: #1a2a3a; color: #aaa; border: 1px solid #2a3a4a; cursor: pointer; font-family: Arial, sans-serif; transition: background 0.2s; }
.forum-mod-btn:hover { background: #2a3a4a; }
.forum-mod-btn--danger { background: #2a0000; color: #ff8888; border-color: #440000; }
.forum-mod-btn--danger:hover { background: #440000; }
.forum-posts { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }
.forum-post { display: flex; border: 1px solid #1a1a1a; border-top: none; }
.forum-post:first-child { border-top: 1px solid #1a1a1a; }
.forum-post__user { width: 140px; flex-shrink: 0; padding: 14px 10px; background: rgba(255,255,255,0.02); border-right: 1px solid #1a1a1a; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; }
.forum-post__avatar { width: 70px; height: 70px; object-fit: cover; border: 1px solid #333; margin-bottom: 5px; }
.forum-post__username { font-size: 12px; font-weight: bold; word-break: break-word; }
.forum-post__username a:hover { color: #99ddff !important; }
.forum-post__role { font-size: 10px; color: #555; }
.forum-post__stats { font-size: 10px; color: #444; display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
.forum-post__body { flex: 1; padding: 12px 16px; min-width: 0; }
.forum-post__meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #444; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #111; flex-wrap: wrap; }
.forum-post__date { flex: 1; }
.forum-post__op { background: #003344; color: #66ccff; padding: 1px 6px; font-size: 10px; }
.forum-post__actions { margin-left: auto; }
.forum-post__quote-btn { font-size: 11px; color: #555; text-decoration: none; padding: 2px 8px; border: 1px solid #2a2a2a; transition: all 0.15s; }
.forum-post__quote-btn:hover { color: #66ccff; border-color: #66ccff; }
.forum-post__content { font-size: 13px; color: #bbb; line-height: 1.8; }
.forum-quote { background: rgba(255,255,255,0.04); border-left: 3px solid #333; padding: 8px 12px; margin: 8px 0; font-size: 12px; color: #777; }
.forum-quote strong { color: #888; display: block; margin-bottom: 4px; }
.forum-reply { border-top: 1px solid #1e3a4a; padding-top: 16px; }
.forum-reply__title { font-size: 13px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
.forum-reply-form textarea { background: #111; border: 1px solid #333; color: #fff; padding: 10px 12px; font-size: 13px; font-family: Arial, sans-serif; outline: none; resize: vertical; min-height: 100px; width: 100%; box-sizing: border-box; transition: border-color 0.2s; }
.forum-reply-form textarea:focus { border-color: #66ccff; }
.forum-login-hint { font-size: 12px; color: #555; padding: 10px 0; }
.forum-login-hint a { color: #66ccff; }
.forum-locked-msg { font-size: 12px; color: #ff8888; padding: 10px 0; }
.forum-empty { font-size: 12px; color: #444; font-style: italic; padding: 15px 0; }
.forum-error { color: #ff6666; padding: 20px; font-size: 13px; }
.forum-new-topic { max-width: 700px; }

/* ========================= FORUM SYSTEEM ========================= */
.forum-page { padding: 20px 25px; }
.forum-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e3a4a; padding-bottom: 10px; margin-bottom: 20px; }
.forum-main-title { font-size: 16px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; }
.forum-new-btn { background: #0066cc; color: #fff; padding: 6px 14px; font-size: 12px; text-decoration: none; transition: background 0.2s; }
.forum-new-btn:hover { background: #0088ff; color: #fff; }
.forum-breadcrumb { font-size: 12px; color: #555; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #1a1a1a; }
.forum-breadcrumb a { color: #66ccff; }
.forum-breadcrumb a:hover { color: #99ddff; }
.forum-section-title { font-size: 12px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.forum-empty { font-size: 12px; color: #444; font-style: italic; padding: 10px 0; }
.forum-error { color: #ff6666; padding: 20px; font-size: 13px; }
.forum-login-hint { font-size: 12px; color: #555; margin-top: 14px; }
.forum-login-hint a { color: #66ccff; }
.forum-locked-msg { font-size: 12px; color: #666; margin-top: 14px; padding: 10px; background: rgba(255,255,255,0.02); border: 1px solid #222; }

/* Categorie blok */
.forum-category { margin-bottom: 16px; border: 1px solid #1a1a1a; background: rgba(255,255,255,0.02); }
.forum-category__header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(102,204,255,0.04); border-bottom: 1px solid #1a1a1a; }
.forum-category__name { font-size: 14px; color: #66ccff; font-weight: bold; text-decoration: none; }
.forum-category__name:hover { color: #99ddff; }
.forum-category__desc { font-size: 11px; color: #555; margin-left: 10px; }
.forum-category__stats { font-size: 11px; color: #444; }
.forum-category__topics { display: flex; flex-direction: column; }
.forum-category__empty { padding: 10px 16px; font-size: 12px; color: #333; font-style: italic; }
.forum-category__footer { padding: 6px 16px; border-top: 1px solid #111; }
.forum-category__footer a { font-size: 11px; color: #555; }
.forum-category__footer a:hover { color: #66ccff; }

/* Topic rij in categorie overzicht */
.forum-topic-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid #111; text-decoration: none; color: inherit; transition: background 0.15s; }
.forum-topic-row:hover { background: rgba(102,204,255,0.04); }
.forum-topic-row__icon { font-size: 14px; flex-shrink: 0; width: 20px; }
.forum-topic-row__title { flex: 1; font-size: 13px; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forum-topic-row:hover .forum-topic-row__title { color: #66ccff; }
.forum-topic-row__author { font-size: 11px; flex-shrink: 0; width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forum-topic-row__date { font-size: 11px; color: #444; flex-shrink: 0; width: 75px; }
.forum-topic-row__replies { font-size: 11px; color: #555; flex-shrink: 0; width: 70px; text-align: right; }

/* Categorie detail topic lijst */
.forum-topic-list { display: flex; flex-direction: column; gap: 4px; }
.forum-topic-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; text-decoration: none; color: inherit; transition: background 0.15s, border-color 0.15s; }
.forum-topic-item:hover { background: rgba(102,204,255,0.05); border-color: #2a4a5a; }
.forum-topic-item__icon { font-size: 16px; flex-shrink: 0; }
.forum-topic-item__body { flex: 1; min-width: 0; }
.forum-topic-item__title { font-size: 13px; color: #ddd; margin-bottom: 4px; }
.forum-topic-item:hover .forum-topic-item__title { color: #66ccff; }
.forum-topic-item__meta { display: flex; gap: 12px; font-size: 11px; color: #555; }
.forum-topic-item__stats { text-align: right; flex-shrink: 0; }
.forum-topic-item__replies { display: block; font-size: 16px; font-weight: bold; color: #66ccff; }
.forum-topic-item__replies-label { font-size: 10px; color: #444; }

/* Categorie header */
.forum-cat-header { margin-bottom: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.forum-cat-title { font-size: 18px; color: #fff; }
.forum-cat-desc { font-size: 12px; color: #555; flex: 1; }

/* Topic detail */
.forum-topic-header { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #1a1a1a; }
.forum-topic-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.forum-topic-title { font-size: 18px; color: #fff; }
.forum-topic-meta { font-size: 11px; color: #444; display: flex; gap: 14px; }
.forum-badge { font-size: 10px; padding: 2px 8px; font-weight: bold; }
.forum-badge--pin { background: #003344; color: #66ccff; }
.forum-badge--lock { background: #330000; color: #ff6666; }

/* Mod bar */
.forum-mod-bar { display: flex; align-items: center; gap: 6px; padding: 8px 0; margin-bottom: 12px; border-bottom: 1px solid #1a1a1a; flex-wrap: wrap; }
.forum-mod-label { font-size: 11px; color: #555; }
.forum-mod-btn { background: #222; color: #aaa; border: 1px solid #333; padding: 4px 10px; font-size: 11px; cursor: pointer; font-family: Arial, sans-serif; transition: background 0.2s; }
.forum-mod-btn:hover { background: #333; color: #fff; }
.forum-mod-btn--delete { color: #ff6666; border-color: #440000; }
.forum-mod-btn--delete:hover { background: #330000; }

/* Posts */
.forum-posts { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }
.forum-post { display: flex; border-bottom: 1px solid #111; }
.forum-post__user { width: 140px; flex-shrink: 0; padding: 14px 12px; background: rgba(255,255,255,0.02); border-right: 1px solid #111; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.forum-post__avatar { width: 60px; height: 60px; object-fit: cover; border: 1px solid #333; margin-bottom: 4px; }
.forum-post__username { font-size: 12px; font-weight: bold; text-decoration: none; }
.forum-post__username:hover { text-decoration: underline; }
.forum-post__role { font-size: 10px; color: #555; }
.forum-post__count { font-size: 10px; color: #444; }
.forum-post__since { font-size: 10px; color: #333; }
.forum-post__body { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; }
.forum-post__date { font-size: 11px; color: #444; margin-bottom: 8px; }
.forum-post__content { font-size: 13px; color: #bbb; line-height: 1.8; flex: 1; }
.forum-post__actions { display: flex; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #111; }
.forum-quote-btn { background: none; border: 1px solid #333; color: #666; padding: 3px 10px; font-size: 11px; cursor: pointer; font-family: Arial, sans-serif; transition: color 0.2s, border-color 0.2s; }
.forum-quote-btn:hover { color: #66ccff; border-color: #66ccff; }
.forum-delete-btn { background: none; border: 1px solid #330000; color: #664444; padding: 3px 10px; font-size: 11px; cursor: pointer; font-family: Arial, sans-serif; }
.forum-delete-btn:hover { color: #ff6666; border-color: #660000; }

/* Quote */
.forum-quote { background: rgba(102,204,255,0.05); border-left: 3px solid #66ccff; padding: 8px 12px; margin: 8px 0; font-size: 12px; color: #888; font-style: italic; }
.forum-quote-preview { background: rgba(102,204,255,0.05); border-left: 3px solid #66ccff; padding: 8px 12px; margin-bottom: 10px; font-size: 12px; color: #888; font-style: italic; }

/* Reply form */
.forum-reply-form { border-top: 1px solid #1e3a4a; padding-top: 18px; margin-top: 8px; }
.forum-new-topic { max-width: 700px; }


    border-color: #66ccff;
}
/* =========================
   PRIVÉBERICHTEN
========================= */

.pm-page {
    padding: 20px 25px;
}

/* Header */
.pm-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #1e3a4a;
    padding-bottom: 12px;
    flex-wrap: wrap;
}

.pm-title {
    font-size: 16px;
    color: #66ccff;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex: 1;
}

.pm-badge {
    background: #cc3333;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    letter-spacing: 0.5px;
}

.pm-btn-new {
    background: #0066cc;
    color: #fff;
    font-size: 12px;
    padding: 6px 14px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.pm-btn-new:hover {
    background: #0088ff;
    color: #fff;
}

/* Tabs */
.pm-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    border-bottom: 1px solid #222;
}

.pm-tab {
    padding: 8px 18px;
    font-size: 12px;
    color: #666;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pm-tab:hover {
    color: #aaa;
}

.pm-tab--active {
    color: #66ccff;
    border-bottom-color: #66ccff;
}

.pm-tab-count {
    background: #cc3333;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 2px;
}

/* Berichtenlijst */
.pm-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid #1a1a1a;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pm-item:hover {
    background: rgba(102, 204, 255, 0.04);
    border-color: #2a4a5a;
}

.pm-item--unread {
    background: rgba(0, 80, 140, 0.12);
    border-color: #1e3a5a;
}

.pm-item__avatar img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 1px solid #2a2a2a;
    display: block;
    flex-shrink: 0;
}

.pm-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pm-item__sender {
    font-size: 12px;
    font-weight: bold;
}

.pm-item__subject {
    font-size: 12px;
    color: #bbb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-item__to {
    font-size: 11px;
    color: #555;
}

.pm-item--unread .pm-item__subject {
    color: #fff;
}

.pm-item__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.pm-item__new {
    background: #0066cc;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.pm-item__date {
    font-size: 10px;
    color: #444;
}

/* Bericht lezen */
.pm-message {
    background: rgba(255,255,255,0.02);
    border: 1px solid #1e3a4a;
    margin-bottom: 20px;
}

.pm-message__header {
    padding: 14px 18px;
    border-bottom: 1px solid #1a1a1a;
    background: rgba(0,0,0,0.3);
}

.pm-message__subject {
    font-size: 16px;
    color: #fff;
    margin-bottom: 8px;
}

.pm-message__meta {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #555;
    flex-wrap: wrap;
}

.pm-message__body {
    padding: 18px;
    font-size: 13px;
    color: #bbb;
    line-height: 1.8;
}

.pm-message__actions {
    padding: 12px 18px;
    border-top: 1px solid #1a1a1a;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pm-action-btn {
    font-size: 12px;
    color: #888;
    background: rgba(255,255,255,0.05);
    border: 1px solid #333;
    padding: 5px 12px;
    cursor: pointer;
    text-decoration: none;
    font-family: Arial, sans-serif;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pm-action-btn:hover {
    color: #fff;
    border-color: #555;
}

.pm-action-btn--danger:hover {
    color: #ff6666;
    border-color: #cc3333;
}

.pm-action-btn--report:hover {
    color: #ffaa44;
    border-color: #cc7700;
}

/* Meld formulier */
.pm-report-form {
    margin: 0 18px 18px;
    padding: 16px;
    background: rgba(180, 60, 0, 0.08);
    border: 1px solid #3a1a00;
}

.pm-report-form h4 {
    color: #ffaa44;
    font-size: 13px;
    margin-bottom: 12px;
}

.pm-report-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.pm-report-reason {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #aaa;
    cursor: pointer;
}

.pm-report-reason input {
    cursor: pointer;
}

.pm-report-textarea {
    width: 100%;
    background: #111;
    border: 1px solid #333;
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    outline: none;
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.pm-report-textarea:focus {
    border-color: #ffaa44;
}

.pm-report-btns {
    display: flex;
    gap: 8px;
}

.pm-report-submit {
    max-width: 180px;
    background: #cc5500;
}

.pm-report-submit:hover {
    background: #ff6600;
}

/* Nieuw bericht formulier */
.pm-compose {
    max-width: 700px;
}

.pm-compose__title {
    font-size: 14px;
    color: #66ccff;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.pm-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pm-form__row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pm-form__row label {
    font-size: 12px;
    color: #888;
}

.pm-form__row input,
.pm-form__row textarea {
    background: #111;
    border: 1px solid #333;
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.pm-form__row input:focus,
.pm-form__row textarea:focus {
    border-color: #66ccff;
}

.pm-form__row textarea {
    resize: vertical;
    min-height: 120px;
}

/* Ongelezen teller in avatar zone */
.avatar-unread-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #cc3333;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    min-width: 18px;
    text-align: center;
    z-index: 10;
}

.avatar-username {
    position: relative;
}
/* ========================= PRIVÉBERICHTEN ========================= */
.pm-page { padding: 20px 25px; color: #ccc; }
.pm-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e3a4a; padding-bottom: 10px; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.pm-title { font-size: 16px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.pm-badge { background: #cc3333; color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: bold; }
.pm-btn-new { background: #0066cc; color: #fff; padding: 6px 14px; font-size: 12px; text-decoration: none; transition: background 0.2s; }
.pm-btn-new:hover { background: #0088ff; color: #fff; }
.pm-back-link { font-size: 12px; color: #555; }
.pm-back-link:hover { color: #66ccff; }
.pm-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid #1a1a1a; }
.pm-tab { padding: 7px 16px; font-size: 12px; color: #555; text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
.pm-tab:hover { color: #aaa; }
.pm-tab--active { color: #66ccff; border-bottom-color: #66ccff; }
.pm-list { display: flex; flex-direction: column; }
.pm-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #111; text-decoration: none; color: inherit; transition: background 0.15s; }
.pm-item:hover { background: rgba(102,204,255,0.04); }
.pm-item--unread { background: rgba(102,204,255,0.06); }
.pm-item__left { width: 12px; flex-shrink: 0; }
.pm-item__dot { display: block; width: 8px; height: 8px; background: #66ccff; border-radius: 50%; }
.pm-item__body { flex: 1; min-width: 0; }
.pm-item__from { font-size: 12px; margin-bottom: 3px; }
.pm-item__subject { font-size: 13px; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-item--unread .pm-item__subject { color: #fff; font-weight: bold; }
.pm-item__date { font-size: 11px; color: #444; flex-shrink: 0; }
.pm-empty { font-size: 12px; color: #444; font-style: italic; padding: 15px 0; }
.pm-detail__back { margin-bottom: 14px; }
.pm-detail__back a { font-size: 12px; color: #555; }
.pm-detail__back a:hover { color: #66ccff; }
.pm-detail__header { border-bottom: 1px solid #1a1a1a; padding-bottom: 12px; margin-bottom: 16px; }
.pm-detail__subject { font-size: 18px; color: #fff; margin-bottom: 8px; }
.pm-detail__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; flex-wrap: wrap; }
.pm-detail__avatar { width: 28px; height: 28px; object-fit: cover; border: 1px solid #333; }
.pm-detail__date { color: #444; margin-left: auto; }
.pm-detail__content { font-size: 13px; color: #bbb; line-height: 1.8; margin-bottom: 20px; }
.pm-detail__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pm-action-btn { padding: 6px 14px; font-size: 12px; cursor: pointer; border: none; font-family: Arial, sans-serif; text-decoration: none; display: inline-block; transition: background 0.2s; }
.pm-action-btn--reply { background: #004488; color: #fff; }
.pm-action-btn--reply:hover { background: #0066cc; color: #fff; }
.pm-action-btn--delete { background: #440000; color: #ffaaaa; }
.pm-action-btn--delete:hover { background: #660000; }
.pm-action-btn--report { background: #443300; color: #ffcc66; }
.pm-action-btn--report:hover { background: #665500; }
.pm-report-form { background: rgba(255,200,0,0.04); border: 1px solid #332200; padding: 16px; margin-top: 10px; }
.pm-hidden { display: none; }
.pm-report-reasons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.pm-report-reason { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #aaa; cursor: pointer; }
.pm-reply-form { border-top: 1px solid #1a1a1a; padding-top: 16px; margin-top: 16px; }
.pm-compose { max-width: 600px; }
.pm-section-title { font-size: 12px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.pm-reports-list { display: flex; flex-direction: column; gap: 16px; }
.pm-report { background: rgba(255,255,255,0.02); border: 1px solid #2a1a00; padding: 16px; }
.pm-report--handled { border-color: #1a1a1a; opacity: 0.7; }
.pm-report__header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pm-report__reason { font-size: 11px; font-weight: bold; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.pm-report__reason--spam { background: #554400; color: #ffcc00; }
.pm-report__reason--misbruik { background: #550000; color: #ff6666; }
.pm-report__reason--bedreiging { background: #440000; color: #ff4444; }
.pm-report__reason--ongepast { background: #440044; color: #ff88ff; }
.pm-report__reason--anders { background: #333; color: #aaa; }
.pm-report__status { font-size: 11px; padding: 2px 8px; text-transform: uppercase; }
.pm-report__status--open { background: #003344; color: #66ccff; }
.pm-report__status--handled { background: #003300; color: #44ff88; }
.pm-report__status--dismissed { background: #222; color: #666; }
.pm-report__meta { font-size: 11px; color: #555; }
.pm-report__msg { background: #0a0a0a; border: 1px solid #1a1a1a; padding: 12px; margin-bottom: 10px; }
.pm-report__msg-header { display: flex; gap: 14px; font-size: 12px; color: #666; margin-bottom: 8px; flex-wrap: wrap; }
.pm-report__msg-content { font-size: 12px; color: #aaa; line-height: 1.7; }
.pm-report__thread { border: 1px solid #1a2a1a; padding: 12px; margin-bottom: 10px; background: rgba(0,50,0,0.1); }
.pm-report__thread-msg { padding: 8px 0; border-bottom: 1px solid #111; font-size: 12px; color: #aaa; }
.pm-report__thread-msg:last-child { border-bottom: none; }
.pm-report__extra { font-size: 12px; color: #666; margin-bottom: 10px; font-style: italic; }
.pm-report__handled { font-size: 12px; color: #44ff88; padding-top: 8px; border-top: 1px solid #1a1a1a; }
.pm-report__form { margin-top: 10px; }
.pm-report__form-btns { display: flex; gap: 8px; margin-top: 8px; }

/* ========================= LEDENLIJST & VRIENDEN ========================= */
.members-page { padding: 20px 25px; }
.members-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e3a4a; padding-bottom: 10px; margin-bottom: 16px; }
.members-title { font-size: 16px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; }
.members-count { font-size: 12px; color: #444; margin-left: 8px; font-weight: normal; }
.members-search-form { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
.members-search-input { background: #111; border: 1px solid #2a2a2a; color: #fff; padding: 8px 12px; font-size: 12px; outline: none; flex: 1; min-width: 180px; transition: border-color 0.2s; }
.members-search-input:focus { border-color: #66ccff; }
.members-sort-select { background: #111; border: 1px solid #2a2a2a; color: #fff; padding: 8px 10px; font-size: 12px; cursor: pointer; }
.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.member-card { background: rgba(255,255,255,0.03); border: 1px solid #1a1a1a; padding: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; transition: border-color 0.2s; }
.member-card:hover { border-color: #2a4a5a; }
.member-card__avatar-link { display: block; }
.member-card__avatar { width: 72px; height: 72px; object-fit: cover; border: 2px solid #222; display: block; }
.member-card__info { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.member-card__name { font-size: 13px; font-weight: bold; text-decoration: none; }
.member-card__name:hover { text-decoration: underline; }
.member-card__role { font-size: 10px; color: #555; }
.member-card__location { font-size: 11px; color: #555; }
.member-card__posts { font-size: 10px; color: #444; }
.member-card__since { font-size: 10px; color: #333; }
.member-card__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 6px; width: 100%; }
.member-card__btn { background: #003344; color: #66ccff; border: none; padding: 4px 10px; font-size: 11px; cursor: pointer; font-family: Arial, sans-serif; text-decoration: none; transition: background 0.2s; display: inline-block; }
.member-card__btn:hover { background: #004466; color: #66ccff; }
.member-card__btn--msg { background: #002233; color: #4499bb; }
.member-card__btn--msg:hover { background: #003344; }
.member-card__btn--remove { background: #330000; color: #ff6666; }
.member-card__btn--remove:hover { background: #440000; }
.member-card__friend-badge { font-size: 10px; color: #44ff88; background: rgba(0,100,0,0.2); padding: 3px 8px; }
.member-card__friend-badge--pending { color: #ffcc44; background: rgba(100,80,0,0.2); }
.members-pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.members-page-btn { background: #111; border: 1px solid #222; color: #666; padding: 5px 10px; font-size: 12px; text-decoration: none; transition: all 0.2s; }
.members-page-btn:hover { border-color: #66ccff; color: #66ccff; }
.members-page-btn--active { background: #003344; border-color: #66ccff; color: #66ccff; }
.friends-requests { display: flex; flex-direction: column; gap: 8px; }
.friends-request-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; flex-wrap: wrap; }
.profile-friends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
.profile-friend-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; font-size: 11px; text-align: center; }
.profile-friend-item:hover span { text-decoration: underline; }
.profile-friend-avatar { width: 50px; height: 50px; object-fit: cover; border: 1px solid #222; }

/* ========================= CONTACT FORMULIER ========================= */
.contact-wrap { padding: 20px 25px; max-width: 680px; }
.contact-header { margin-bottom: 22px; }
.contact-title { font-size: 20px; color: #66ccff; margin-bottom: 6px; }
.contact-subtitle { font-size: 13px; color: #666; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-row { display: flex; gap: 14px; flex-wrap: wrap; }
.contact-row .contact-field { flex: 1; min-width: 200px; }
.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-field label { font-size: 12px; color: #888; letter-spacing: 0.5px; }
.contact-required { color: #ff4444; }
.contact-field input,
.contact-field textarea {
    background: #111; border: 1px solid #2a2a2a; color: #fff;
    padding: 9px 12px; font-size: 13px; font-family: Arial, sans-serif;
    outline: none; transition: border-color 0.2s; width: 100%; box-sizing: border-box;
}
.contact-field input:focus,
.contact-field textarea:focus { border-color: #66ccff; }
.contact-field input[readonly] { background: #0d0d0d; color: #666; cursor: default; }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: #333; }
.contact-field textarea { resize: vertical; min-height: 140px; }
.contact-submit {
    background: #0066cc; color: #fff; border: none;
    padding: 11px 28px; font-size: 14px; font-family: Arial, sans-serif;
    cursor: pointer; letter-spacing: 0.5px; transition: background 0.2s, box-shadow 0.2s;
    align-self: flex-start;
}
.contact-submit:hover { background: #0088ff; box-shadow: 0 0 16px rgba(0,136,255,0.4); }
.contact-verify { padding: 40px 25px; text-align: center; }
.contact-verify__icon { font-size: 52px; color: #66ccff; margin-bottom: 14px; }
.contact-verify__title { font-size: 20px; color: #fff; margin-bottom: 10px; }
.contact-verify__text { font-size: 13px; color: #888; line-height: 1.7; margin-bottom: 14px; }
.contact-verify__hint { font-size: 12px; color: #444; }
.contact-verify__hint a { color: #66ccff; }
.contact-back { display: inline-block; margin-top: 16px; color: #66ccff; font-size: 13px; }

/* ========================= MENU BADGES ========================= */
.menu-btn {
    width: 289px; height: 54px; flex-shrink: 0;
    background: url('images/menu/Mknop.jpg') center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none; font-size: 13px; font-weight: bold;
    letter-spacing: 0.5px; transition: filter 0.2s; position: relative;
}

.menu-badge {
    background: #cc3333;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 16px;
    flex-shrink: 0;
}

.menu-btn--active {
    color: #66ccff !important;
}

/* ========================= BANNER MENU ========================= */
.banner-menu-items { display: none; }

.banner-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    overflow: hidden;
}

.banner-nav__left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.banner-nav__center {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    flex: 1;
    justify-content: center;
    overflow: hidden;
}

.banner-nav__right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}

.banner-nav__link {
    color: #aaa;
    font-size: 11px;
    text-decoration: none;
    padding: 2px 8px;
    border: 1px solid #333;
    background: rgba(255,255,255,0.03);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    letter-spacing: 0.3px;
    line-height: 20px;
    cursor: pointer;
    font-family: Arial, sans-serif;
}
.banner-nav__link:hover { color: #66ccff; border-color: #66ccff; background: rgba(102,204,255,0.06); }
.banner-nav__link--role { font-weight: bold; }
.banner-nav__link--notif { padding: 2px 7px; }

.banner-nav__role {
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border: 1px solid currentColor;
    white-space: nowrap;
    line-height: 20px;
    opacity: 0.85;
}

.banner-nav__divider {
    color: #2a2a2a;
    font-size: 16px;
    user-select: none;
    padding: 0 2px;
}

/* Badges */
.banner-badge {
    font-size: 9px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 14px;
    text-align: center;
    line-height: 13px;
    display: inline-block;
    flex-shrink: 0;
}
.banner-badge--danger { background: #cc3333; color: #fff; }
.banner-badge--warn   { background: #885500; color: #ffcc44; }
.banner-badge--info   { background: #003366; color: #66ccff; }

/* Notificatie dropdown */
.banner-notif-wrap {
    position: relative;
    display: inline-flex;
}

.banner-notif-btn {
    background: none;
    border: 1px solid #333;
    cursor: pointer;
}

.banner-notif-dropdown {
    display: none;
    position: fixed;
    width: 300px;
    background: #0d0d0d;
    border: 1px solid #1e3a4a;
    box-shadow: 0 8px 32px rgba(0,0,0,0.9);
    z-index: 99999;
    flex-direction: column;
    max-height: 420px;
    overflow-y: auto;
}
.banner-notif-dropdown--open { display: flex; }

.banner-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #111;
    text-decoration: none;
    color: #ccc;
    transition: background 0.15s;
}
.banner-notif-item:hover { background: rgba(102,204,255,0.05); }

.banner-notif-item__dot {
    width: 7px;
    height: 7px;
    background: #66ccff;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.banner-notif-item__msg {
    font-size: 12px;
    color: #ccc;
    line-height: 1.4;
}

.banner-notif-item__time {
    font-size: 10px;
    color: #444;
    margin-top: 3px;
}

.banner-notif-all {
    display: block;
    text-align: center;
    padding: 8px;
    font-size: 11px;
    color: #66ccff;
    text-decoration: none;
    border-top: 1px solid #1a1a1a;
    background: rgba(102,204,255,0.03);
}
.banner-notif-all:hover { background: rgba(102,204,255,0.07); color: #66ccff; }

/* Profiel knop */
.banner-profile-btn {
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    padding: 2px 8px;
    border: 1px solid currentColor;
    line-height: 20px;
    opacity: 0.9;
    transition: opacity 0.2s;
}
.banner-profile-btn:hover { opacity: 1; }

.banner-role-badge {
    font-size: 9px;
    color: #000;
    font-weight: bold;
    padding: 1px 5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.banner-profile-btn {
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 3px 10px;
    border: 1px solid currentColor;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.banner-profile-btn:hover {
    opacity: 1;
}

.banner-role-badge {
    font-size: 9px;
    color: #000;
    font-weight: bold;
    padding: 1px 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ========================= EVENEMENTEN ========================= */
.event-page { padding: 20px 25px; }
.event-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e3a4a; padding-bottom: 10px; margin-bottom: 20px; }
.event-main-title { font-size: 16px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; }
.event-back { margin-bottom: 14px; }
.event-back a { font-size: 12px; color: #555; }
.event-back a:hover { color: #66ccff; }

/* Kalender */
.event-calendar { background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; margin-bottom: 28px; }
.event-cal__nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #1a1a1a; }
.event-cal__month { font-size: 14px; color: #fff; font-weight: bold; }
.event-cal__navbtn { color: #555; text-decoration: none; font-size: 16px; padding: 2px 10px; border: 1px solid #222; transition: all 0.2s; }
.event-cal__navbtn:hover { color: #66ccff; border-color: #66ccff; }
.event-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.event-cal__dayname { text-align: center; font-size: 10px; color: #444; padding: 8px 4px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #111; }
.event-cal__cell { min-height: 70px; padding: 6px 4px; border-right: 1px solid #111; border-bottom: 1px solid #111; vertical-align: top; position: relative; }
.event-cal__cell:nth-child(7n) { border-right: none; }
.event-cal__cell--empty { background: rgba(0,0,0,0.2); }
.event-cal__cell--today { background: rgba(102,204,255,0.05); }
.event-cal__cell--today .event-cal__daynum { color: #66ccff; font-weight: bold; }
.event-cal__daynum { font-size: 11px; color: #444; display: block; margin-bottom: 3px; }
.event-cal__event { display: block; font-size: 10px; padding: 2px 4px; margin-bottom: 2px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 2px; transition: opacity 0.2s; }
.event-cal__event:hover { opacity: 0.8; }

/* Aankomende lijst */
.event-upcoming__title { font-size: 13px; color: #66ccff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; padding-bottom: 6px; border-bottom: 1px solid #1e3a4a; }
.event-list { display: flex; flex-direction: column; gap: 10px; }
.event-item { display: flex; align-items: stretch; background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; overflow: hidden; transition: border-color 0.2s; }
.event-item:hover { border-color: #2a4a5a; }
.event-item__img { width: 100px; flex-shrink: 0; overflow: hidden; }
.event-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-item__body { flex: 1; padding: 12px 16px; }
.event-item__title { font-size: 14px; color: #ddd; font-weight: bold; text-decoration: none; display: block; margin-bottom: 6px; }
.event-item__title:hover { color: #66ccff; }
.event-item__meta { display: flex; gap: 14px; font-size: 11px; color: #555; flex-wrap: wrap; margin-bottom: 6px; }
.event-item__desc { font-size: 12px; color: #555; line-height: 1.5; }
.event-item__action { padding: 12px 14px; display: flex; align-items: center; flex-shrink: 0; }

/* Detail pagina */
.event-detail__img { margin-bottom: 16px; }
.event-detail__img img { max-width: 100%; height: auto; max-height: 300px; object-fit: cover; display: block; border: 1px solid #222; }
.event-detail__header { padding: 14px 16px; background: rgba(255,255,255,0.02); margin-bottom: 16px; }
.event-detail__title { font-size: 22px; color: #fff; margin-bottom: 10px; }
.event-detail__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: #666; }
.event-meta-item { display: flex; align-items: center; gap: 4px; }
.event-detail__desc { font-size: 13px; color: #bbb; line-height: 1.8; margin-bottom: 20px; }
.event-detail__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; padding: 14px; background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; }

/* Knoppen */
.event-join-btn { background: #0066cc; color: #fff; border: none; padding: 8px 20px; font-size: 13px; cursor: pointer; font-family: Arial, sans-serif; text-decoration: none; transition: background 0.2s; display: inline-block; }
.event-join-btn:hover { background: #0088ff; color: #fff; }
.event-join-btn--sm { padding: 5px 12px; font-size: 11px; }
.event-leave-btn { background: #330000; color: #ffaaaa; border: none; padding: 6px 14px; font-size: 12px; cursor: pointer; font-family: Arial, sans-serif; }
.event-leave-btn:hover { background: #440000; }
.event-edit-btn { background: #222; color: #aaa; border: 1px solid #333; padding: 6px 14px; font-size: 12px; text-decoration: none; }
.event-edit-btn:hover { color: #66ccff; border-color: #66ccff; }
.event-delete-btn { background: #330000; color: #ff6666; border: none; padding: 6px 14px; font-size: 12px; cursor: pointer; font-family: Arial, sans-serif; }
.event-joined-badge { font-size: 12px; color: #44ff88; background: rgba(0,100,0,0.2); padding: 5px 12px; }
.event-full-badge { font-size: 12px; color: #ffcc44; background: rgba(100,80,0,0.2); padding: 5px 12px; }
.event-past-badge { font-size: 12px; color: #555; background: rgba(255,255,255,0.03); border: 1px solid #222; padding: 10px 16px; }

/* Deelnemers */
.event-attendees { margin-top: 20px; border-top: 1px solid #1a1a1a; padding-top: 16px; }
.event-attendees__title { font-size: 12px; color: #66ccff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.event-attendees__grid { display: flex; flex-wrap: wrap; gap: 10px; }
.event-attendee { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; font-size: 11px; width: 60px; text-align: center; }
.event-attendee:hover span { text-decoration: underline; }
.event-attendee__avatar { width: 44px; height: 44px; object-fit: cover; border: 1px solid #222; }

/* ========================= NOTIFICATIE CENTRUM ========================= */
.notif-page { padding: 20px 25px; }
.notif-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e3a4a; padding-bottom: 10px; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.notif-title { font-size: 16px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.notif-action-btn { background: #111; border: 1px solid #333; color: #aaa; padding: 5px 12px; font-size: 11px; cursor: pointer; font-family: Arial, sans-serif; transition: all 0.2s; }
.notif-action-btn:hover { border-color: #66ccff; color: #66ccff; }
.notif-action-btn--danger { color: #ff6666; border-color: #330000; }
.notif-action-btn--danger:hover { background: #110000; }
.notif-list { display: flex; flex-direction: column; gap: 0; }
.notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #0f0f0f; transition: background 0.15s; }
.notif-item:hover { background: rgba(255,255,255,0.02); }
.notif-item--unread { background: rgba(102,204,255,0.04); border-left: 2px solid #66ccff; }
.notif-item__icon { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.notif-item__body { flex: 1; }
.notif-item__msg { font-size: 13px; color: #ccc; text-decoration: none; display: block; line-height: 1.5; }
.notif-item--unread .notif-item__msg { color: #fff; font-weight: bold; }
.notif-item__msg:hover { color: #66ccff; }
.notif-item__time { font-size: 11px; color: #444; margin-top: 3px; display: block; }
.notif-item__actions { display: flex; gap: 4px; flex-shrink: 0; }
.notif-dot-btn { background: none; border: 1px solid #222; color: #444; width: 24px; height: 24px; cursor: pointer; font-size: 11px; transition: all 0.2s; font-family: Arial, sans-serif; }
.notif-dot-btn:hover { border-color: #66ccff; color: #66ccff; }
.notif-dot-btn--del:hover { border-color: #660000; color: #ff6666; }
.notif-prefs table { max-width: 500px; }
.notif-prefs input[type=checkbox] { accent-color: #66ccff; cursor: pointer; width: 14px; height: 14px; }

/* ========================= GALERIJ ========================= */
.gallery-page { padding: 20px 25px; }
.gallery-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.gallery-title { font-size: 16px; color: #fff; }
.gallery-upload { display: none; background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; padding: 16px; margin-bottom: 18px; }
.gallery-upload--open { display: block; }
.gallery-layout { display: flex; gap: 16px; flex-wrap: wrap; }
.gallery-main { flex: 1; min-width: 280px; }
.gallery-main__img { background: #0a0a0a; border: 1px solid #1a1a1a; margin-bottom: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 200px; max-height: 400px; }
.gallery-main__img img { max-width: 100%; max-height: 400px; object-fit: contain; display: block; }
.gallery-main__info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gallery-main__caption { font-size: 13px; color: #888; flex: 1; }
.gallery-main__actions { display: flex; align-items: center; gap: 10px; }
.gallery-like-btn { background: none; border: 1px solid #333; color: #888; padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: Arial, sans-serif; transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px; }
.gallery-like-btn:hover, .gallery-like-btn--liked { border-color: #cc3333; color: #ff6666; background: rgba(200,0,0,0.08); }
.gallery-delete-btn { background: none; border: 1px solid #330000; color: #664444; padding: 4px 10px; font-size: 11px; cursor: pointer; font-family: Arial, sans-serif; }
.gallery-delete-btn:hover { color: #ff6666; border-color: #660000; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 4px; align-content: start; max-width: 280px; flex-shrink: 0; }
.gallery-thumb { display: block; aspect-ratio: 1; overflow: hidden; border: 2px solid transparent; cursor: pointer; position: relative; background: #0a0a0a; }
.gallery-thumb:hover { border-color: #444; }
.gallery-thumb--active { border-color: #66ccff; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.gallery-thumb:hover img { transform: scale(1.05); }
.gallery-thumb__likes { position: absolute; bottom: 2px; right: 3px; font-size: 9px; color: #fff; background: rgba(0,0,0,0.7); padding: 1px 4px; }

/* ========================= RANGLIJST ========================= */
.rank-page { padding: 20px 25px; }
.rank-header { border-bottom: 1px solid #1e3a4a; padding-bottom: 10px; margin-bottom: 16px; }
.rank-title { font-size: 16px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; }
.rank-my-position { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(102,204,255,0.06); border: 1px solid #1e3a4a; margin-bottom: 16px; }
.rank-position { font-size: 16px; font-weight: bold; color: #66ccff; }
.rank-position--mine { color: #ffcc44; }
.rank-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 28px; }
.rank-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #0f0f0f; transition: background 0.15s; }
.rank-item:hover { background: rgba(255,255,255,0.02); }
.rank-item--me { background: rgba(102,204,255,0.05); border-left: 2px solid #66ccff; }
.rank-item:nth-child(1) { background: rgba(255,200,0,0.05); }
.rank-item:nth-child(2) { background: rgba(180,180,180,0.04); }
.rank-item:nth-child(3) { background: rgba(180,100,0,0.04); }
.rank-item__pos { width: 36px; text-align: center; font-size: 14px; font-weight: bold; color: #444; flex-shrink: 0; }
.rank-item__avatar img { width: 40px; height: 40px; object-fit: cover; border: 1px solid #222; flex-shrink: 0; }
.rank-item__info { flex: 1; }
.rank-item__name { font-size: 13px; font-weight: bold; text-decoration: none; display: block; margin-bottom: 3px; }
.rank-item__name:hover { text-decoration: underline; }
.rank-item__stats { display: flex; gap: 12px; font-size: 11px; color: #444; margin-bottom: 4px; }
.rank-item__badges { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid #333; border-radius: 4px; font-size: 13px; cursor: help; background: rgba(255,255,255,0.03); }
.rank-item__points { text-align: right; flex-shrink: 0; }
.rank-points { display: block; font-size: 16px; font-weight: bold; color: #66ccff; }
.rank-badges-section { border-top: 1px solid #1a1a1a; padding-top: 20px; }
.rank-badges-title { font-size: 13px; color: #66ccff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
.rank-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rank-badge-card { background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; padding: 12px; text-align: center; transition: border-color 0.2s; }
.rank-badge-card:hover { border-color: #2a2a2a; }
.rank-badge-card__icon { font-size: 28px; display: block; margin-bottom: 6px; }
.rank-badge-card__name { font-size: 12px; font-weight: bold; margin-bottom: 4px; }
.rank-badge-card__desc { font-size: 11px; color: #555; line-height: 1.4; margin-bottom: 4px; }
.rank-badge-card__req { font-size: 10px; color: #333; font-style: italic; }

/* ========================= STATISTIEKEN ========================= */
.stats-grid-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stats-card { background: rgba(255,255,255,0.03); border: 1px solid #1a1a1a; padding: 14px 12px; text-align: center; }
.stats-card--danger { border-color: #440000; background: rgba(200,0,0,0.05); }
.stats-card--warn   { border-color: #443300; background: rgba(200,100,0,0.05); }
.stats-card--info   { border-color: #002244; background: rgba(0,100,200,0.05); }
.stats-card__val    { font-size: 24px; font-weight: bold; color: #66ccff; display: block; }
.stats-card--danger .stats-card__val { color: #ff6666; }
.stats-card--warn .stats-card__val   { color: #ffaa44; }
.stats-card--info .stats-card__val   { color: #66ccff; }
.stats-card__label  { font-size: 10px; color: #444; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.stats-period-totals { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 10px 14px; background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; margin-bottom: 16px; }
.stats-period-label  { font-size: 11px; color: #444; }
.stats-period-item   { text-align: center; }
.stats-period-val    { display: block; font-size: 15px; font-weight: bold; color: #fff; }
.stats-period-key    { font-size: 10px; color: #444; text-transform: uppercase; }
.stats-charts canvas { max-height: 200px; }

/* ========================= CMS EDITOR ========================= */
.cms-toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 8px; background: #0d0d0d; border: 1px solid #222; border-bottom: none; }
.cms-toolbar button { background: #111; border: 1px solid #2a2a2a; color: #aaa; padding: 3px 9px; font-size: 12px; cursor: pointer; font-family: Arial, sans-serif; transition: all 0.15s; min-width: 28px; }
.cms-toolbar button:hover { background: #1a1a1a; color: #66ccff; border-color: #66ccff; }
.cms-toolbar-preview { margin-left: auto; color: #66ccff !important; }

/* ========================= ZOEKSYSTEEM ========================= */
.search-page { padding: 20px 25px; }
.search-bar-wrap { position: relative; margin-bottom: 14px; }
.search-bar { display: flex; gap: 0; }
.search-bar input { flex: 1; background: #0a0a0a; border: 1px solid #2a2a2a; border-right: none; color: #fff; padding: 10px 14px; font-size: 14px; outline: none; }
.search-bar input:focus { border-color: #66ccff; }
.search-btn { background: #003344; border: 1px solid #2a2a2a; color: #66ccff; padding: 0 16px; font-size: 16px; cursor: pointer; }
.search-btn:hover { background: #004466; }
.search-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #0d0d0d; border: 1px solid #1e3a4a; z-index: 999; max-height: 420px; overflow-y: auto; }
.search-drop__item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid #111; color: #ccc; transition: background 0.15s; }
.search-drop__item:hover { background: rgba(102,204,255,0.06); }
.search-drop__avatar { width: 32px; height: 32px; object-fit: cover; border: 1px solid #222; flex-shrink: 0; }
.search-drop__info { flex: 1; }
.search-drop__title { font-size: 13px; color: #fff; }
.search-drop__meta { font-size: 11px; color: #555; }
.search-drop__type { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
.search-drop__empty { padding: 14px; font-size: 12px; color: #444; text-align: center; }
.search-drop__all { display: block; text-align: center; padding: 10px; font-size: 12px; color: #66ccff; text-decoration: none; background: rgba(102,204,255,0.03); }
.search-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.search-filter { background: #111; border: 1px solid #222; color: #666; padding: 4px 12px; font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: all 0.15s; }
.search-filter:hover { color: #aaa; border-color: #444; }
.search-filter--active { color: #66ccff; border-color: #66ccff; background: rgba(102,204,255,0.06); }
.search-filter__count { background: #003344; color: #66ccff; font-size: 10px; padding: 1px 5px; border-radius: 8px; }
.search-meta { font-size: 12px; color: #555; margin-bottom: 14px; }
.search-section { margin-bottom: 20px; }
.search-section__title { font-size: 12px; color: #66ccff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #1e3a4a; }
.search-results { display: flex; flex-direction: column; gap: 0; }
.search-result { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid #0f0f0f; color: #ccc; transition: background 0.15s; }
.search-result:hover { background: rgba(255,255,255,0.02); }
.search-result__avatar { width: 40px; height: 40px; object-fit: cover; border: 1px solid #222; flex-shrink: 0; }
.search-result__body { flex: 1; }
.search-result__title { font-size: 13px; color: #ddd; font-weight: bold; margin-bottom: 3px; }
.search-result__meta { font-size: 11px; color: #555; }
.search-result__preview { font-size: 11px; color: #444; margin-top: 3px; }
.search-result__type { font-size: 10px; text-transform: uppercase; color: #444; letter-spacing: 0.5px; flex-shrink: 0; }
.search-empty { text-align: center; padding: 50px 20px; color: #444; }
.search-empty__icon { font-size: 48px; display: block; margin-bottom: 12px; opacity: 0.3; }

/* ========================= LIKES ========================= */
.like-wrap { display: inline-flex; align-items: center; gap: 8px; position: relative; }
.like-btn { background: none; border: 1px solid #2a2a2a; color: #666; padding: 4px 10px; font-size: 13px; cursor: pointer; font-family: Arial, sans-serif; display: inline-flex; align-items: center; gap: 4px; transition: all 0.15s; }
.like-btn:hover { border-color: #66ccff; color: #66ccff; }
.like-btn--liked { border-color: #cc3333; color: #ff6666; background: rgba(200,0,0,0.06); }
.like-count { font-size: 12px; }
.like-emojis { display: flex; gap: 4px; flex-wrap: wrap; }
.like-emoji-display { font-size: 13px; cursor: default; display: inline-flex; align-items: center; gap: 2px; }
.like-emoji-display span { font-size: 11px; color: #555; }
.like-emoji-picker { position: absolute; bottom: calc(100% + 4px); left: 0; background: #0d0d0d; border: 1px solid #2a2a2a; padding: 6px; display: flex; gap: 4px; z-index: 100; box-shadow: 0 4px 20px rgba(0,0,0,0.6); }
.like-emoji-opt { background: none; border: 1px solid transparent; font-size: 18px; cursor: pointer; padding: 3px 5px; border-radius: 4px; transition: all 0.15s; }
.like-emoji-opt:hover, .like-emoji-opt--active { background: rgba(255,255,255,0.1); border-color: #444; }

/* ========================= POLLS ========================= */
.poll-wrap { background: rgba(102,204,255,0.04); border: 1px solid #1e3a4a; padding: 16px; margin: 14px 0; }
.poll-title { font-size: 13px; font-weight: bold; color: #fff; margin-bottom: 10px; }
.poll-expired, .poll-expires { font-size: 11px; color: #555; margin-bottom: 8px; }
.poll-options { display: flex; flex-direction: column; gap: 6px; }
.poll-option { background: #111; border: 1px solid #2a2a2a; color: #aaa; padding: 8px 14px; font-size: 12px; cursor: pointer; text-align: left; font-family: Arial, sans-serif; transition: all 0.15s; }
.poll-option:hover { border-color: #66ccff; color: #66ccff; }
.poll-results { display: flex; flex-direction: column; gap: 8px; }
.poll-result-item { display: flex; align-items: center; gap: 8px; }
.poll-result-label { font-size: 12px; color: #aaa; width: 150px; flex-shrink: 0; }
.poll-result-bar-wrap { flex: 1; background: #111; height: 6px; border: 1px solid #1a1a1a; }
.poll-result-bar { height: 100%; background: linear-gradient(to right, #003366, #66ccff); transition: width 0.5s; }
.poll-result-stats { font-size: 11px; color: #555; width: 80px; text-align: right; flex-shrink: 0; }
.poll-total { font-size: 11px; color: #333; margin-top: 4px; }
.poll-login-hint { font-size: 11px; color: #444; margin-top: 6px; }

/* ========================= BLOG ========================= */
.blog-page { padding: 20px 25px; }
.blog-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e3a4a; padding-bottom: 10px; margin-bottom: 16px; }
.blog-main-title { font-size: 16px; color: #66ccff; letter-spacing: 1px; }
.blog-back { margin-bottom: 14px; }
.blog-back a { font-size: 12px; color: #555; }
.blog-list { display: flex; flex-direction: column; gap: 14px; }
.blog-item { background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; padding: 16px; transition: border-color 0.2s; }
.blog-item:hover { border-color: #2a4a5a; }
.blog-item__author { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; color: #555; }
.blog-item__avatar { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; border: 1px solid #222; }
.blog-item__title a { font-size: 15px; font-weight: bold; color: #ddd; text-decoration: none; }
.blog-item__title a:hover { color: #66ccff; }
.blog-item__meta { font-size: 11px; color: #555; margin: 4px 0; }
.blog-item__preview { font-size: 12px; color: #666; line-height: 1.6; }
.blog-read-more { font-size: 12px; color: #66ccff; text-decoration: none; display: inline-block; margin-top: 6px; }
.blog-article { background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; padding: 20px; margin-bottom: 20px; }
.blog-article__title { font-size: 22px; color: #fff; margin-bottom: 10px; }
.blog-article__meta { display: flex; gap: 14px; font-size: 12px; color: #555; margin-bottom: 16px; flex-wrap: wrap; }
.blog-article__meta a { text-decoration: none; }
.blog-article__content { font-size: 14px; color: #ccc; line-height: 1.9; }
.blog-article__footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #1a1a1a; flex-wrap: wrap; }
.blog-visibility { color: #ffaa44; }
.blog-edit-btn { color: #66ccff; text-decoration: none; font-size: 12px; border: 1px solid #1e3a4a; padding: 4px 10px; }
.blog-delete-btn { background: none; border: 1px solid #330000; color: #664444; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: Arial, sans-serif; }
.blog-comments { }
.blog-comments__title { font-size: 13px; color: #66ccff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.blog-comment { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #0f0f0f; }
.blog-comment__avatar { width: 36px; height: 36px; object-fit: cover; border: 1px solid #222; flex-shrink: 0; }
.blog-comment__body { flex: 1; }
.blog-comment__author { font-size: 12px; font-weight: bold; margin-bottom: 3px; }
.blog-comment__text { font-size: 13px; color: #bbb; line-height: 1.6; }
.blog-comment__time { font-size: 10px; color: #444; margin-top: 3px; }
.blog-comment-form textarea { background: #0a0a0a; border: 1px solid #1a1a1a; color: #fff; padding: 10px; font-size: 13px; width: 100%; resize: vertical; outline: none; font-family: Arial, sans-serif; margin-top: 12px; }

/* ========================= GROEPEN ========================= */
.groups-page { padding: 20px 25px; }
.groups-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e3a4a; padding-bottom: 10px; margin-bottom: 16px; }
.groups-main-title { font-size: 16px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; }
.groups-back { margin-bottom: 12px; }
.groups-back a { font-size: 12px; color: #555; }
.groups-back a:hover { color: #66ccff; }
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.groups-card { background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; padding: 14px; transition: border-color 0.2s; }
.groups-card:hover { border-color: #2a4a5a; }
.groups-card--member { border-color: #1e3a4a; }
.groups-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.groups-card__name a { font-size: 14px; font-weight: bold; color: #ddd; text-decoration: none; }
.groups-card__name a:hover { color: #66ccff; }
.groups-card__desc { font-size: 12px; color: #555; line-height: 1.5; margin-bottom: 8px; }
.groups-card__meta { display: flex; justify-content: space-between; font-size: 11px; color: #444; margin-bottom: 10px; }
.groups-card__btn { display: block; text-align: center; background: #003344; color: #66ccff; padding: 6px; font-size: 12px; text-decoration: none; transition: background 0.2s; }
.groups-card__btn:hover { background: #004466; color: #66ccff; }
.groups-detail-header { background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; padding: 16px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.groups-detail-title { font-size: 22px; color: #fff; margin-bottom: 6px; }
.groups-detail-meta { font-size: 12px; color: #555; }
.groups-topic-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #1a1a1a; flex-wrap: wrap; gap: 8px; }
.groups-topic-title { font-size: 18px; color: #fff; }
.groups-posts { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.groups-post { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #0f0f0f; }
.groups-post--warning { background: rgba(200,100,0,0.07); border-left: 3px solid #ffaa44; }
.groups-post__author { width: 80px; flex-shrink: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }
.groups-post__avatar { width: 44px; height: 44px; object-fit: cover; border: 1px solid #222; }
.groups-post__body { flex: 1; }
.groups-post__warn-label { font-size: 11px; color: #ffaa44; margin-bottom: 4px; }
.groups-post__content { font-size: 13px; color: #bbb; line-height: 1.7; }
.groups-post__time { font-size: 10px; color: #444; margin-top: 4px; }
.groups-mod-warn { background: rgba(150,80,0,0.08); border: 1px solid #443300; padding: 12px; margin-bottom: 14px; }
.groups-reply-form textarea { background: #0a0a0a; border: 1px solid #1a1a1a; color: #fff; padding: 10px; font-size: 13px; width: 100%; resize: vertical; outline: none; font-family: Arial, sans-serif; min-height: 80px; }
.groups-closed-msg { font-size: 12px; color: #555; padding: 12px; background: rgba(0,0,0,0.2); border: 1px solid #1a1a1a; }
.forum-topic--hidden { opacity: 0.4; }

/* ========================= SEIZOENEN ========================= */
.season-page { padding: 20px 25px; }
.season-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border: 1px solid; padding: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.season-hero__left { display: flex; gap: 14px; align-items: flex-start; flex: 1; }
.season-hero__icon { font-size: 48px; flex-shrink: 0; }
.season-hero__title { font-size: 22px; font-weight: bold; margin-bottom: 6px; }
.season-hero__desc { font-size: 13px; color: #888; margin-bottom: 8px; }
.season-hero__meta { display: flex; gap: 14px; font-size: 11px; color: #555; flex-wrap: wrap; }
.season-hero__progress { text-align: center; min-width: 160px; flex-shrink: 0; }
.season-pts-big { font-size: 36px; font-weight: bold; color: #66ccff; line-height: 1; }
.season-progress-bar { height: 6px; background: #111; border: 1px solid #1a1a1a; margin-top: 4px; }
.season-progress-fill { height: 100%; transition: width 0.5s; }
.season-section { margin-bottom: 24px; }
.season-section__title { font-size: 13px; color: #66ccff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #1e3a4a; }
.season-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.season-badge-card { background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; padding: 14px; text-align: center; transition: border-color 0.2s; }
.season-badge-card--earned { background: rgba(255,255,255,0.04); }
.season-badge-card__icon { font-size: 32px; display: block; margin-bottom: 6px; }
.season-badge-card__name { font-size: 12px; font-weight: bold; margin-bottom: 4px; }
.season-badge-card__req { font-size: 10px; color: #444; }
.season-badge-card__status { font-size: 10px; color: #44ff88; margin-top: 4px; }
.season-top { display: flex; flex-direction: column; gap: 0; }
.season-top__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #0f0f0f; }
.season-top__item--me { background: rgba(102,204,255,0.05); border-left: 2px solid #66ccff; }
.season-top__pos { width: 32px; text-align: center; font-size: 14px; font-weight: bold; color: #444; }
.season-top__avatar { width: 32px; height: 32px; object-fit: cover; border: 1px solid #222; }
.season-top__name { flex: 1; font-size: 12px; text-decoration: none; }
.season-top__pts { font-size: 13px; font-weight: bold; color: #66ccff; }
.season-archive { display: flex; flex-direction: column; gap: 6px; }
.season-archive__item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; }
.season-archive__icon { font-size: 20px; flex-shrink: 0; }
.season-archive__info { flex: 1; }
.season-archive__name { font-size: 13px; font-weight: bold; }
.season-archive__date { font-size: 11px; color: #444; margin-top: 2px; }

/* ========================= PUNTENWINKEL ========================= */
.shop-page { padding: 20px 25px; }
.shop-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; border-bottom: 1px solid #1e3a4a; padding-bottom: 10px; }
.shop-title { font-size: 16px; color: #66ccff; letter-spacing: 1px; text-transform: uppercase; }
.shop-balance { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.shop-balance__pts { font-size: 24px; font-weight: bold; color: #66ccff; }
.shop-balance__label { font-size: 11px; color: #444; }
.shop-category { margin-bottom: 20px; }
.shop-category__title { font-size: 13px; color: #66ccff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.shop-category__desc { font-size: 11px; color: #444; text-transform: none; letter-spacing: 0; font-weight: normal; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 10px; }
.shop-item { background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; padding: 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: border-color 0.2s; }
.shop-item:hover { border-color: #2a2a2a; }
.shop-item--owned { border-color: #1e3a1e; background: rgba(0,100,0,0.05); }
.shop-item--cant-afford { opacity: 0.5; }
.shop-item__icon { font-size: 32px; }
.shop-item__name { font-size: 12px; font-weight: bold; color: #ddd; }
.shop-item__desc { font-size: 11px; color: #555; line-height: 1.4; }
.shop-item__preview { font-size: 12px; font-weight: bold; }
.shop-item__price { font-size: 13px; color: #66ccff; font-weight: bold; }
.shop-item__badge { font-size: 11px; padding: 3px 8px; background: rgba(0,100,0,0.2); color: #44ff88; }
.shop-item__badge--red { background: rgba(100,0,0,0.2); color: #ff6666; }
.shop-item__badge--gray { background: rgba(50,50,50,0.3); color: #555; }
.shop-buy-btn { background: #0066cc; color: #fff; border: none; padding: 5px 14px; font-size: 12px; cursor: pointer; font-family: Arial, sans-serif; transition: background 0.2s; }
.shop-buy-btn:hover { background: #0088ff; }
.shop-buy-btn--equip { background: #006633; }
.shop-buy-btn--equip:hover { background: #008844; }
.shop-unequip-btn { background: none; border: 1px solid #330000; color: #664444; padding: 3px 8px; font-size: 11px; cursor: pointer; font-family: Arial, sans-serif; }
.shop-equip-panel { max-width: 500px; }
.shop-equip-row { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #0f0f0f; gap: 16px; }
.shop-equip-label { font-size: 12px; color: #555; width: 100px; flex-shrink: 0; }
.shop-equip-value { flex: 1; font-size: 13px; color: #aaa; }

/* ========================= SHOUTBOX ========================= */
.shoutbox-widget { background: #080808; border: 1px solid #1a1a1a; margin-bottom: 10px; }
.shoutbox-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: #0d0d0d; border-bottom: 1px solid #1a1a1a; font-size: 11px; color: #66ccff; text-transform: uppercase; letter-spacing: 1px; }
.shoutbox-toggle { background: none; border: none; color: #555; cursor: pointer; font-size: 14px; line-height: 1; }
.shoutbox-messages { max-height: 160px; overflow-y: auto; padding: 6px 0; }
.shoutbox-loading, .shoutbox-empty { font-size: 11px; color: #333; padding: 8px 10px; }
.shout-item { display: flex; align-items: baseline; gap: 5px; padding: 3px 8px; font-size: 12px; border-bottom: 1px solid #050505; flex-wrap: nowrap; }
.shout-item a { font-weight: bold; text-decoration: none; flex-shrink: 0; font-size: 11px; }
.shout-msg { color: #999; flex: 1; word-break: break-word; }
.shout-del { background: none; border: none; color: #333; cursor: pointer; font-size: 10px; flex-shrink: 0; }
.shout-del:hover { color: #ff4444; }
.shoutbox-input { padding: 6px; border-top: 1px solid #1a1a1a; }
.shoutbox-emojis { display: none; flex-wrap: wrap; gap: 3px; margin-bottom: 4px; padding: 4px; background: #0d0d0d; border: 1px solid #1a1a1a; }
.shoutbox-emojis span { cursor: pointer; font-size: 16px; padding: 2px; border-radius: 3px; }
.shoutbox-emojis span:hover { background: #1a1a1a; }
.shoutbox-input input { background: #111; border: 1px solid #222; color: #fff; padding: 4px 8px; font-size: 12px; flex: 1; outline: none; }
.shoutbox-input input:focus { border-color: #66ccff; }
.shoutbox-send { background: #003344; border: 1px solid #1e3a4a; color: #66ccff; padding: 4px 8px; cursor: pointer; font-size: 13px; }
.shoutbox-login { padding: 6px 10px; font-size: 11px; color: #444; border-top: 1px solid #1a1a1a; }

/* ========================= LIVE CHAT ========================= */
.chat-page { padding: 16px 20px; display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 400px; max-height: 700px; }
.chat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-shrink: 0; }
.chat-title { font-size: 15px; color: #66ccff; }
.chat-online { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #555; }
.chat-online__dot { width: 7px; height: 7px; background: #44ff88; border-radius: 50%; animation: chatPulse 2s ease-in-out infinite; }
@keyframes chatPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.chat-box { flex: 1; overflow-y: auto; background: #050505; border: 1px solid #1a1a1a; padding: 8px; display: flex; flex-direction: column; gap: 2px; scroll-behavior: smooth; }
.chat-loading { font-size: 11px; color: #333; padding: 8px; }
.chat-msg { padding: 5px 8px; border-radius: 2px; max-width: 85%; }
.chat-msg--me { align-self: flex-end; background: rgba(0,51,68,0.4); }
.chat-msg__meta { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
.chat-msg__name { font-size: 11px; font-weight: bold; text-decoration: none; }
.chat-msg__title { font-size: 9px; color: #555; border: 1px solid #222; padding: 1px 4px; }
.chat-msg__time { font-size: 10px; color: #333; margin-left: auto; }
.chat-msg__content { font-size: 13px; color: #bbb; word-break: break-word; line-height: 1.5; }
.chat-del { background: none; border: none; color: #333; cursor: pointer; font-size: 10px; }
.chat-del:hover { color: #ff4444; }
.chat-input-area { flex-shrink: 0; margin-top: 8px; }
.chat-emojis { display: none; flex-wrap: wrap; gap: 4px; padding: 6px; background: #0d0d0d; border: 1px solid #1a1a1a; border-bottom: none; max-height: 80px; overflow-y: auto; }
.chat-emojis span { cursor: pointer; font-size: 18px; padding: 2px; border-radius: 3px; }
.chat-emojis span:hover { background: #1a1a1a; }
.chat-input-row { display: flex; gap: 4px; }
.chat-emoji-toggle { background: #111; border: 1px solid #222; color: #aaa; padding: 0 10px; cursor: pointer; font-size: 16px; flex-shrink: 0; }
.chat-input-row input { flex: 1; background: #0a0a0a; border: 1px solid #2a2a2a; color: #fff; padding: 8px 12px; font-size: 13px; outline: none; }
.chat-input-row input:focus { border-color: #66ccff; }
.chat-send-btn { background: #003344; border: 1px solid #1e3a4a; color: #66ccff; padding: 8px 14px; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.chat-send-btn:hover { background: #004466; }

/* Profielframes */
.avatar-frame--blue-gold { border: 3px solid #ffcc44; box-shadow: 0 0 10px rgba(255,200,0,0.3); }
.avatar-frame--fire      { border: 3px solid #ff4400; box-shadow: 0 0 10px rgba(255,60,0,0.3); }
.avatar-frame--ice       { border: 3px solid #88ddff; box-shadow: 0 0 10px rgba(136,220,255,0.3); }
.avatar-frame--night     { border: 3px solid #8844aa; box-shadow: 0 0 10px rgba(136,68,170,0.3); }

/* ========================= DATING ========================= */
.dating-page { padding: 20px 25px; }
.dating-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e3a4a; padding-bottom: 10px; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.dating-title { font-size: 16px; color: #ff88aa; letter-spacing: 1px; }
.dating-back { margin-bottom: 12px; }
.dating-back a { font-size: 12px; color: #555; }
.dating-intro { text-align: center; padding: 40px 20px; }
.dating-intro__icon { font-size: 64px; display: block; margin-bottom: 16px; }
.dating-intro h2 { font-size: 24px; color: #fff; margin-bottom: 10px; }
.dating-intro p { font-size: 13px; color: #888; line-height: 1.7; max-width: 500px; margin: 0 auto; }
.dating-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dating-card { background: rgba(255,136,170,0.04); border: 1px solid #2a1a1a; overflow: hidden; transition: border-color 0.2s; }
.dating-card:hover { border-color: #ff88aa44; }
.dating-card__photo { position: relative; height: 260px; overflow: hidden; background: #0a0a0a; }
.dating-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.dating-card:hover .dating-card__photo img { transform: scale(1.03); }
.dating-card__online { position: absolute; top: 8px; right: 8px; color: #44ff88; font-size: 10px; background: rgba(0,0,0,0.6); padding: 2px 6px; border-radius: 10px; }
.dating-card__body { padding: 12px; }
.dating-card__name { font-size: 14px; font-weight: bold; margin-bottom: 4px; }
.dating-card__loc { font-size: 11px; color: #555; margin-bottom: 6px; }
.dating-card__specs { display: flex; gap: 6px; flex-wrap: wrap; font-size: 10px; color: #444; margin-bottom: 6px; }
.dating-card__specs span { background: rgba(255,255,255,0.04); border: 1px solid #1a1a1a; padding: 2px 6px; }
.dating-card__bio { font-size: 11px; color: #666; line-height: 1.5; margin-bottom: 8px; }
.dating-card__interests { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.dating-interest { font-size: 10px; background: rgba(255,136,170,0.1); border: 1px solid rgba(255,136,170,0.2); color: #ff88aa; padding: 2px 7px; border-radius: 10px; }
.dating-card__actions { display: flex; justify-content: center; gap: 16px; }
.dating-skip-btn { background: #111; border: 2px solid #333; color: #666; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 18px; transition: all 0.2s; }
.dating-skip-btn:hover { border-color: #ff4444; color: #ff4444; }
.dating-like-btn { background: rgba(255,136,170,0.1); border: 2px solid #ff88aa44; color: #ff88aa; width: 54px; height: 54px; border-radius: 50%; cursor: pointer; font-size: 22px; transition: all 0.2s; }
.dating-like-btn:hover { background: rgba(255,136,170,0.2); border-color: #ff88aa; box-shadow: 0 0 16px rgba(255,136,170,0.3); }
.dating-matches-list { display: flex; flex-direction: column; gap: 0; }
.dating-match-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #0f0f0f; text-decoration: none; color: #ccc; transition: background 0.15s; }
.dating-match-item:hover { background: rgba(255,136,170,0.04); }
.dating-match-avatar { width: 54px; height: 54px; object-fit: cover; border: 2px solid #2a1a1a; border-radius: 50%; }
.dating-match-info { flex: 1; }
.dating-match-name { font-size: 14px; font-weight: bold; margin-bottom: 3px; }
.dating-match-meta { font-size: 11px; color: #555; }
.dating-match-time { font-size: 10px; color: #333; margin-top: 2px; }
.dating-match-new { font-size: 11px; color: #ff88aa; font-weight: bold; }
.dating-unread-badge { position: absolute; top: 0; right: 0; background: #ff4444; color: #fff; font-size: 9px; font-weight: bold; padding: 2px 5px; border-radius: 8px; }
.dating-chat-header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255,136,170,0.04); border: 1px solid #2a1a1a; margin-bottom: 12px; flex-wrap: wrap; }
.dating-chat-avatar { width: 48px; height: 48px; object-fit: cover; border: 2px solid #ff88aa44; border-radius: 50%; }
.dating-chat-name { font-size: 14px; font-weight: bold; }
.dating-chat-age { font-size: 11px; color: #555; }
.dating-chat-messages { background: #050505; border: 1px solid #1a1a1a; padding: 12px; min-height: 300px; max-height: 500px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; scroll-behavior: smooth; }
.dating-chat-empty { text-align: center; color: #333; font-size: 13px; padding: 20px; }
.dating-msg { max-width: 70%; }
.dating-msg--me { align-self: flex-end; }
.dating-msg__bubble { background: rgba(255,255,255,0.04); border: 1px solid #1a1a1a; padding: 8px 12px; font-size: 13px; color: #bbb; line-height: 1.6; border-radius: 4px; }
.dating-msg--me .dating-msg__bubble { background: rgba(255,136,170,0.08); border-color: rgba(255,136,170,0.2); }
.dating-msg__time { font-size: 10px; color: #333; margin-top: 3px; }
.dating-chat-input { display: flex; gap: 6px; }
.dating-chat-input textarea { flex: 1; background: #0a0a0a; border: 1px solid #2a2a2a; color: #fff; padding: 8px 12px; font-size: 13px; outline: none; font-family: Arial, sans-serif; resize: none; }

/* ========================= GARAGE ========================= */
.garage-page { padding: 20px 25px; }
.garage-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e3a4a; padding-bottom: 10px; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.garage-main-title { font-size: 16px; color: #ffaa44; letter-spacing: 1px; }
.garage-back { margin-bottom: 12px; }
.garage-back a { font-size: 12px; color: #555; }
.garage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.garage-card { background: rgba(255,170,68,0.04); border: 1px solid #221800; overflow: hidden; transition: border-color 0.2s; }
.garage-card:hover { border-color: #ffaa4444; }
.garage-card__img { display: block; height: 160px; overflow: hidden; background: #0a0a0a; }
.garage-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.garage-card:hover .garage-card__img img { transform: scale(1.03); }
.garage-card__no-img { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: 0.2; }
.garage-card__body { padding: 10px 12px; }
.garage-card__title { font-size: 13px; font-weight: bold; color: #ddd; text-decoration: none; display: block; margin-bottom: 3px; }
.garage-card__title:hover { color: #ffaa44; }
.garage-card__sub { font-size: 11px; color: #555; margin-bottom: 5px; }
.garage-card__meta { display: flex; justify-content: space-between; font-size: 10px; color: #444; }
.garage-car-header { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.garage-car-cover { flex-shrink: 0; width: 300px; max-height: 220px; overflow: hidden; border: 1px solid #222; }
.garage-car-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.garage-car-info { flex: 1; }
.garage-car-title { font-size: 22px; color: #fff; margin-bottom: 6px; }
.garage-car-subtitle { font-size: 14px; color: #ffaa44; margin-bottom: 8px; }
.garage-car-meta { display: flex; gap: 12px; font-size: 12px; color: #555; flex-wrap: wrap; }
.garage-specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 16px; }
.garage-spec-item { background: rgba(255,170,68,0.04); border: 1px solid #1a1000; padding: 10px; text-align: center; }
.garage-spec-icon { font-size: 20px; display: block; margin-bottom: 4px; }
.garage-spec-label { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.garage-spec-value { font-size: 12px; color: #ffaa44; font-weight: bold; }
.garage-section { margin-bottom: 20px; }
.garage-section__title { font-size: 13px; color: #ffaa44; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #221800; }
.garage-desc { font-size: 13px; color: #bbb; line-height: 1.8; }
.garage-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.garage-photo { aspect-ratio: 1; overflow: hidden; background: #0a0a0a; border: 1px solid #1a1a1a; cursor: pointer; }
.garage-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.garage-photo:hover img { transform: scale(1.05); }
.garage-diary-form { background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; padding: 14px; margin-bottom: 14px; }
.garage-diary-list { display: flex; flex-direction: column; gap: 8px; }
.garage-diary-item { background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; border-left: 3px solid #ffaa44; padding: 12px 14px; }
.garage-diary-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.garage-diary-cat { font-size: 16px; flex-shrink: 0; }
.garage-diary-title { font-size: 13px; color: #fff; font-weight: bold; flex: 1; }
.garage-diary-cost { font-size: 12px; color: #44ff88; background: rgba(0,100,0,0.2); padding: 2px 8px; flex-shrink: 0; }
.garage-diary-date { font-size: 11px; color: #444; margin-left: auto; flex-shrink: 0; }
.garage-diary-content { font-size: 12px; color: #888; line-height: 1.6; }
.garage-diary-total { font-size: 13px; color: #44ff88; padding: 10px 14px; background: rgba(0,100,0,0.1); border: 1px solid rgba(0,100,0,0.2); text-align: right; }

/* ========================= BERICHTEN + NOTIFICATIES HOOFD NAV ========================= */
.berichten-hoofd-nav {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #1a1a1a;
}

.berichten-hoofd-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 22px;
    font-size: 13px;
    font-weight: bold;
    color: #555;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    letter-spacing: 0.3px;
}

.berichten-hoofd-btn:hover {
    color: #aaa;
}

.berichten-hoofd-btn--active {
    color: #66ccff;
    border-bottom-color: #66ccff;
}

/* ========================= ADMIN NAV BADGE ========================= */
.admin-nav__badge {
    background: #cc3333;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
    line-height: 14px;
    display: inline-block;
}

/* ========================= SPELLEN ========================= */
.games-page { padding: 20px 25px; }
.games-header { margin-bottom: 20px; text-align: center; padding: 20px; background: rgba(102,204,255,0.04); border: 1px solid #1e3a4a; }
.games-title { font-size: 22px; color: #66ccff; margin-bottom: 6px; }
.games-subtitle { font-size: 13px; color: #555; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-bottom: 24px; }
.games-card { background: rgba(255,255,255,0.03); border: 1px solid #1a1a1a; padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.2s; }
.games-card:hover { border-color: #2a4a5a; }
.games-card__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.games-card__name { font-size: 16px; color: #fff; font-weight: bold; }
.games-card__reset { font-size: 11px; color: #555; }
.games-card__desc { font-size: 12px; color: #777; line-height: 1.6; }
.games-rewards { display: flex; gap: 6px; flex-wrap: wrap; }
.games-reward { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.03); border: 1px solid #1a1a1a; padding: 3px 8px; font-size: 11px; }
.games-reward__pos { font-size: 14px; }
.games-reward__pts { color: #44ff88; font-weight: bold; }
.games-my-best { font-size: 12px; color: #555; }
.games-my-best strong { color: #66ccff; }
.games-play-btn { display: block; text-align: center; background: #003344; color: #66ccff; padding: 10px; font-size: 13px; text-decoration: none; font-weight: bold; border: 1px solid #1e3a4a; transition: background 0.2s; }
.games-play-btn:hover { background: #004466; color: #66ccff; }
.games-mini-board { border-top: 1px solid #1a1a1a; padding-top: 8px; }
.games-mini-board__title { font-size: 10px; color: #444; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.games-mini-row { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 11px; }
.games-mini-row--me { background: rgba(102,204,255,0.06); padding: 4px 6px; }
.games-mini-pos { width: 24px; text-align: center; font-weight: bold; color: #555; flex-shrink: 0; }
.games-mini-avatar { width: 20px; height: 20px; object-fit: cover; border: 1px solid #222; flex-shrink: 0; }
.games-mini-name { flex: 1; }
.games-mini-score { font-weight: bold; color: #66ccff; }
.games-archive { }
.games-archive__title { font-size: 13px; color: #66ccff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.games-back { margin-bottom: 12px; }
.games-back a { font-size: 12px; color: #555; }
.games-play-layout { display: flex; gap: 16px; flex-wrap: wrap; }
.games-canvas-wrap { flex: 1; min-width: 300px; }
.games-play-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.games-play-title { font-size: 16px; color: #fff; font-weight: bold; }
.games-play-stats { display: flex; gap: 14px; font-size: 12px; color: #555; }
.games-current-score strong { color: #66ccff; }
.games-canvas { display: block; width: 100%; max-width: 700px; border: 2px solid #1e3a4a; background: #0a0a0a; cursor: crosshair; }
.games-controls { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.games-start-btn { background: #0066cc; color: #fff; border: none; padding: 10px 28px; font-size: 14px; cursor: pointer; font-family: Arial, sans-serif; font-weight: bold; transition: background 0.2s; align-self: flex-start; }
.games-start-btn:hover { background: #0088ff; }
.games-hint { font-size: 11px; color: #555; }
.games-worms-controls { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10px; color: #444; }
.games-worms-controls span { background: #111; border: 1px solid #222; padding: 3px 8px; }
.games-over { position: relative; margin-top: 10px; background: rgba(0,0,0,0.9); border: 1px solid #1e3a4a; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.games-over__score { font-size: 28px; font-weight: bold; color: #66ccff; }
.games-over__msg { font-size: 14px; color: #ffcc44; }
.games-scoreboard { width: 220px; flex-shrink: 0; }
.games-scoreboard__title { font-size: 14px; color: #66ccff; font-weight: bold; margin-bottom: 4px; }
.games-scoreboard__reset { font-size: 11px; color: #444; margin-bottom: 12px; }
.games-board-row { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-bottom: 1px solid #0f0f0f; font-size: 12px; }
.games-board-row--me { background: rgba(102,204,255,0.06); border-left: 2px solid #66ccff; }
.games-board-pos { width: 26px; text-align: center; font-size: 14px; }
.games-board-avatar { width: 24px; height: 24px; object-fit: cover; border: 1px solid #222; }
.games-board-name { flex: 1; font-size: 11px; }
.games-board-score { font-weight: bold; color: #66ccff; font-size: 12px; }
.games-rewards-side { margin-top: 14px; padding-top: 10px; border-top: 1px solid #1a1a1a; }
.games-reward-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; border-bottom: 1px solid #0f0f0f; }

/* ========================= EXTRA SPELLEN ========================= */
/* Zeeslag */
.zeeslag-wrap { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.zeeslag-col { display:flex; flex-direction:column; align-items:center; gap:6px; }
.zeeslag-label { font-size:11px; color:#66ccff; text-transform:uppercase; letter-spacing:1px; }
.zeeslag-board { border:2px solid #1e3a4a; display:block; }
.zeeslag-mid { display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px; min-width:140px; }
.zeeslag-msg { font-size:12px; color:#aaa; text-align:center; }
.zeeslag-score-live { font-size:13px; color:#555; }
.zeeslag-score-live strong { color:#66ccff; }

/* Tetris */
.tetris-side { width:120px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; }
.tetris-next-wrap { background:#111; border:1px solid #1a1a1a; padding:8px; text-align:center; }
.tetris-side-label { font-size:10px; color:#555; text-transform:uppercase; margin-bottom:4px; }
.tetris-info { display:flex; flex-direction:column; gap:4px; }
.tetris-stat { display:flex; justify-content:space-between; font-size:12px; padding:4px 6px; background:#111; border:1px solid #1a1a1a; }
.tetris-stat span { color:#555; }
.tetris-stat strong { color:#66ccff; }

/* Galgje */
.galgje-wrap { max-width:600px; }
.galgje-settings { background:rgba(255,255,255,0.03); border:1px solid #1a1a1a; padding:16px; margin-bottom:14px; }
.galgje-settings-title { font-size:13px; color:#66ccff; margin-bottom:12px; font-weight:bold; }
.galgje-row { margin-bottom:10px; display:flex; flex-direction:column; gap:4px; }
.galgje-row label { font-size:11px; color:#555; }
.galgje-diff { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border:1px solid #222; cursor:pointer; font-size:12px; color:#888; transition:all 0.2s; }
.galgje-diff:hover { border-color:#66ccff; color:#66ccff; }
.galgje-top { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-bottom:14px; }
.galgje-info { flex:1; }
.galgje-category { font-size:11px; color:#555; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.galgje-hint { font-size:12px; color:#888; font-style:italic; margin-bottom:8px; }
.galgje-word { font-size:28px; font-weight:bold; color:#fff; letter-spacing:8px; margin-bottom:10px; font-family:monospace; }
.galgje-lives { font-size:13px; color:#ff6666; margin-bottom:4px; }
.galgje-score { font-size:13px; color:#555; margin-bottom:4px; }
.galgje-score strong { color:#66ccff; }
.galgje-wrong { font-size:12px; color:#ff4444; }
.galgje-keyboard { display:flex; flex-wrap:wrap; gap:4px; }
.galgje-key { width:36px; height:36px; background:#111; border:1px solid #2a2a2a; color:#aaa; font-size:13px; font-weight:bold; cursor:pointer; font-family:Arial,sans-serif; transition:all 0.15s; }
.galgje-key:hover:not(:disabled) { border-color:#66ccff; color:#66ccff; background:#003344; }
.galgje-key:disabled { opacity:0.3; cursor:default; }

/* ========================= SPELLEN GAST MELDING ========================= */
.games-guest-banner {
    background: rgba(102,204,255,0.08);
    border: 1px solid #1e3a4a;
    padding: 10px 16px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.games-guest-banner strong { color: #66ccff; }
.games-guest-banner a { color: #66ccff; text-decoration: underline; }
.games-register-link {
    color: #66ccff !important;
    font-weight: bold;
    text-decoration: underline;
}
.games-over--guest .games-over__score { color: #ffcc44; }
.games-over--guest { border-color: #ffcc44; }

/* ========================= FOOTER TOOLBAR ========================= */
.footer-tb-btn {
    background: #111;
    border: 1px solid #2a2a2a;
    color: #aaa;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: all 0.15s;
    line-height: 1.4;
}
.footer-tb-btn:hover {
    background: #1e3a4a;
    border-color: #66ccff;
    color: #66ccff;
}

/* ========================= BANNER LAYOUT BTN ========================= */
.banner-layout-btn {
    color: #444;
    text-decoration: none;
    font-size: 16px;
    padding: 3px 8px;
    border: 1px solid #222;
    transition: all 0.2s;
    margin-left: 6px;
}
.banner-layout-btn:hover { color: #ffcc44; border-color: #ffcc44; }
.banner-notif-btn--active { color: #66ccff !important; }
.banner-notif-empty { padding: 12px; font-size: 12px; color: #444; text-align: center; }

/* ========================= PROFIEL FRAME DISPLAY ========================= */
.profile-frame-preview { display: inline-block; padding: 3px; }
.profile-frame-preview.frame-blue-gold { border: 3px solid #ffcc44; box-shadow: 0 0 10px rgba(255,200,0,0.3); }
.profile-frame-preview.frame-fire      { border: 3px solid #ff4400; box-shadow: 0 0 10px rgba(255,60,0,0.3); }
.profile-frame-preview.frame-ice       { border: 3px solid #88ddff; box-shadow: 0 0 10px rgba(136,220,255,0.3); }
.profile-frame-preview.frame-night     { border: 3px solid #8844aa; box-shadow: 0 0 10px rgba(136,68,170,0.3); }

/* ========================= SHOP LOCK INDICATOR ========================= */
.shop-item--locked { opacity: 0.6; }
.shop-item--locked .shop-item__name::after { content: ' 🔒'; font-size: 10px; }

/* ========================= PROFIEL CUSTOM TITLE ========================= */
.profile-custom-title {
    font-size: 12px;
    color: #888;
    font-style: italic;
    margin: 2px 0 4px 0;
    letter-spacing: 0.5px;
}

/* ========================= UITGEBREID PROFIEL ========================= */
:root {
    --profile-accent: #66ccff;
    --profile-bg: #0a0a0a;
    --profile-header: #111;
}

.profile-header-ext {
    position: relative;
    min-height: 160px;
    margin-bottom: 0;
    border-radius: 2px 2px 0 0;
    overflow: hidden;
}
.profile-header-ext__overlay {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 20px 16px;
    background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 100%);
    flex-wrap: wrap;
}
.profile-avatar { border: 3px solid var(--profile-accent); }
.profile-quote {
    font-size: 12px;
    color: #aaa;
    font-style: italic;
    padding: 4px 8px;
    margin: 6px 0;
    max-width: 400px;
}
.profile-badges-showcase {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid #1a1a1a;
}
.profile-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid #1a1a1a;
    cursor: default;
}
.profile-badge-item:hover { border-color: var(--profile-accent); }
.profile-badge-item__name { font-size: 9px; color: #555; text-align: center; max-width: 60px; }

/* Thema achtergronden voor profiel */
.profile-page[style*="--profile-accent:#ff6600"] .pm-tab--active { border-color: #ff6600; color: #ff6600; }
.profile-page[style*="--profile-accent:#0099ff"] .pm-tab--active { border-color: #0099ff; color: #0099ff; }
.profile-page[style*="--profile-accent:#aa44ff"] .pm-tab--active { border-color: #aa44ff; color: #aa44ff; }
.profile-page[style*="--profile-accent:#44cc66"] .pm-tab--active { border-color: #44cc66; color: #44cc66; }
.profile-page[style*="--profile-accent:#ffcc00"] .pm-tab--active { border-color: #ffcc00; color: #ffcc00; }

/* ========================= PROFIEL V2 ========================= */
.profile-mood-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.05);
    border: 1px solid #222;
    padding: 3px 10px;
    font-size: 12px;
    color: #aaa;
    margin: 6px 0;
    animation: moodPulse 3s ease-in-out infinite;
}
.profile-mood-badge__icon { font-size: 16px; }
@keyframes moodPulse {
    0%,100% { opacity:1; }
    50% { opacity:0.7; }
}

.guestbook-entry {
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    padding: 12px;
    transition: border-color 0.2s;
}
.guestbook-entry:hover { border-color: var(--profile-accent,#66ccff); }

.portfolio-card {
    display: block;
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    text-decoration: none;
    transition: border-color 0.2s;
    overflow: hidden;
}
.portfolio-card:hover { border-color: var(--profile-accent,#66ccff); }

.profile-card-embed { font-family: Arial,sans-serif; }

.profile-share-btn {
    background: none;
    border: 1px solid #333;
    color: #555;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}
.profile-share-btn:hover { border-color: var(--profile-accent,#66ccff); color: var(--profile-accent,#66ccff); }

/* Mood radio styling */
.profile-form input[type="radio"]:checked + * { /* via JS */ }

/* ========================= PROFIEL V3 ========================= */

/* Tijdlijn */
.profile-timeline { position: relative; padding-left: 24px; }
.profile-timeline::before { content:''; position:absolute; left:10px; top:0; bottom:0; width:2px; background:var(--profile-accent,#66ccff); opacity:0.2; }
.profile-timeline__item { display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; position:relative; }
.profile-timeline__dot { width:28px; height:28px; background:#0d0d0d; border:2px solid var(--profile-accent,#66ccff); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; margin-left:-34px; border-radius:50%; }
.profile-timeline__content { flex:1; background:#0d0d0d; border:1px solid #1a1a1a; padding:10px 12px; }
.profile-timeline__title { color:#fff; font-size:13px; font-weight:bold; }
.profile-timeline__desc { color:#666; font-size:11px; margin-top:3px; }
.profile-timeline__date { color:var(--profile-accent,#66ccff); font-size:10px; margin-top:4px; }

/* Challenge notificatie badge */
.challenge-badge { display:inline-flex; align-items:center; gap:4px; background:rgba(255,100,0,0.1); border:1px solid #ff6600; padding:2px 8px; font-size:11px; color:#ff8844; }

/* Collectie */
.collection-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }

/* Poll */
.profile-poll { background:#0d0d0d; border:1px solid #1a1a1a; padding:14px; margin-bottom:14px; }

/* ========================= WEDSTRIJDEN ========================= */
.contest-page { }
.contest-card { display:block; text-decoration:none; background:#0d0d0d; border:1px solid #1a1a1a; transition:border-color 0.2s; overflow:hidden; }
.contest-card:hover { border-color:#66ccff; }

.contest-status { display:inline-block; padding:2px 8px; font-size:11px; font-weight:bold; }
.contest-status--open    { background:rgba(68,255,136,0.1); color:#44ff88; border:1px solid #44ff88; }
.contest-status--voting  { background:rgba(102,204,255,0.1); color:#66ccff; border:1px solid #66ccff; }
.contest-status--finished{ background:rgba(255,204,0,0.1); color:#ffcc44; border:1px solid #ffcc44; }
.contest-status--closed  { background:rgba(100,100,100,0.1); color:#666; border:1px solid #333; }
.contest-status--draft   { background:rgba(100,100,100,0.1); color:#555; border:1px solid #222; }

.contest-entry { background:#0d0d0d; border:1px solid #1a1a1a; overflow:hidden; transition:border-color 0.2s; }
.contest-entry:hover { border-color:#333; }
.contest-entry--winner { border-color:#ffcc44 !important; box-shadow:0 0 12px rgba(255,204,0,0.15); }
.contest-entry--pending { opacity:0.7; }

.contest-photos { }
.contest-photo-main { transition:opacity 0.2s; }
.contest-photo-main:hover { opacity:0.9; }

.contest-header { margin-bottom:16px; }

/* ========================= NIVEAU SYSTEEM ========================= */
.level-bar { display:flex; align-items:center; gap:10px; padding:8px 16px; background:#0a0a0a; }
.level-bar__icon { font-size:20px; }
.level-bar__info { flex:1; }
.level-bar__title { font-size:12px; font-weight:bold; }
.level-bar__track { background:#111; height:8px; border-radius:4px; margin-top:3px; overflow:hidden; }
.level-bar__fill  { height:8px; border-radius:4px; transition:width 0.5s ease; }

/* VIP stijl */
.vip-name { text-shadow:0 0 8px rgba(255,204,0,0.5) !important; }

/* ========================= SHOP V2 / HALF AFGEROND ========================= */
.member-card--spotlight { border-color: #66ccff !important; box-shadow: 0 0 12px rgba(102,204,255,0.2); }
.member-card--vip       { border-color: #ffcc00 !important; box-shadow: 0 0 12px rgba(255,204,0,0.2); }
.member-card__spotlight-badge {
    background: rgba(102,204,255,0.1);
    color: #66ccff;
    font-size: 10px;
    padding: 2px 8px;
    border-bottom: 1px solid #66ccff22;
    text-align: center;
}
.groups-card--boosted { border-color: #ff6644 !important; }

.forum-post__signature {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #1a1a1a;
    font-size: 11px;
    color: #555;
    font-style: italic;
}

/* Forum niveau lock */
.forum-cat-locked {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}
.forum-cat-locked::after {
    content: '🔒';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 1;
}

/* ========================= DATING REPORT ========================= */
.dating-report-btn {
    background: rgba(255,100,0,0.1);
    border: 1px solid #ff6600;
    color: #ff8844;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.dating-report-btn:hover { background: rgba(255,100,0,0.2); }

/* ========================= DASHBOARD KLIKBARE KAARTEN ========================= */
.admin-stat-card {
    transition: border-color 0.2s, transform 0.1s;
    cursor: pointer;
}
.admin-stat-card:hover {
    transform: translateY(-2px);
}
a.admin-stat-card {
    text-decoration: none;
    color: inherit;
}

/* ========================= PROFIEL DROPDOWN & DASHBOARD ========================= */
.banner-profile-btn {
    background: none;
    border: 1px solid #333;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: border-color 0.2s;
}
.banner-profile-btn:hover { border-color: #66ccff; }

.dashboard-page { }

/* ========================= REGISTRATIE UITGEBREID ========================= */
.auth-section-label {
    font-size: 11px;
    color: #66ccff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #1a1a1a;
}

.auth-checkbox-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    cursor: pointer;
    transition: border-color 0.2s;
}
.auth-checkbox-card:hover { border-color: #333; }
.auth-checkbox-card--checked { border-color: #66ccff !important; background: #0a1520; }
.auth-checkbox-card input[type="checkbox"] { display: none; }
.auth-checkbox-card__icon { font-size: 28px; flex-shrink: 0; }
.auth-checkbox-card__title { color: #fff; font-size: 13px; font-weight: bold; }
.auth-checkbox-card__desc { color: #555; font-size: 11px; margin-top: 2px; line-height: 1.4; }
.auth-checkbox-card--checked .auth-checkbox-card__title { color: #66ccff; }

/* ========================= STATISCHE PAGINA'S ========================= */
.static-page { max-width: 760px; }
.static-page__header { margin-bottom: 20px; border-bottom: 1px solid #1a1a1a; padding-bottom: 14px; }
.static-page__header h1 { color: #fff; font-size: 22px; margin: 0 0 6px; }
.static-page__header p  { color: #444; font-size: 12px; margin: 0; }
.static-page__content { font-size: 13px; color: #888; line-height: 1.7; }
.rules-section { margin-bottom: 20px; }
.rules-section h2 { color: #aaa; font-size: 15px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid #1a1a1a; }
.rules-section ul { margin: 0; padding-left: 20px; }
.rules-section ul li { margin-bottom: 6px; }
.rules-section p { margin: 0 0 8px; }
.rules-section strong { color: #ccc; }

/* ========================= MOBIELE OPTIMALISATIE ========================= */
@media (max-width: 768px) {
    /* Container */
    .container { padding: 0; }

    /* Bannermenu */
    .banner-row1 { display: none; }
    .banner-row2 { flex-wrap: wrap; }
    .banner-left-small, .banner-right-small { display: none; }
    .banner-middle-menu { width: 100%; overflow-x: auto; padding: 6px 10px; }

    /* Menu zijbalk verbergen op mobiel */
    .menu-block { display: none; }
    .right-block { width: 100%; }
    .content-row { flex-direction: column; }
    .content-avatar { display: none; }
    .midden-left, .midden-right { display: none; }
    .midden-center { width: 100%; padding: 0 8px; box-sizing: border-box; }
    .midden-content { padding: 0; }

    /* Auth box */
    .auth-box { margin: 8px; padding: 16px; }

    /* Forum */
    .forum-post { flex-direction: column; }
    .forum-post__user { flex-direction: row; gap: 8px; min-width: auto; border-right: none; border-bottom: 1px solid #1a1a1a; padding-bottom: 8px; margin-bottom: 8px; }
    .forum-post__avatar { width: 28px; height: 28px; }

    /* Profiel */
    .profile-header-ext__overlay { flex-direction: column; }
    .profile-stats { flex-direction: row; flex-wrap: wrap; gap: 8px; }

    /* Member cards */
    .members-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .member-card { padding: 8px; }

    /* Admin */
    .admin-wrap { flex-direction: column; }
    .admin-sidebar { width: 100%; max-height: 200px; overflow-y: auto; position: static; }
    .admin-main { padding: 12px; }
    .admin-stats { grid-template-columns: repeat(3, 1fr); }

    /* Bannermenu buttons */
    .banner-profile-btn { font-size: 11px; padding: 3px 6px; }

    /* Tabel overflow */
    .admin-table { display: block; overflow-x: auto; }
    table.admin-table { min-width: 500px; }

    /* Modals */
    [style*="max-width:360px"] { max-width: 95vw !important; }
    [style*="max-width:400px"] { max-width: 95vw !important; }

    /* Dating */
    .dating-card { max-width: 100%; }

    /* Groepen grid */
    [style*="minmax(280px"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
    .members-grid { grid-template-columns: 1fr !important; }
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .profile-header-ext { min-height: auto; }
    .forum-topic-row { padding: 8px; }
}

/* Hamburger menu voor mobiel */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: 1px solid #333;
    color: #aaa;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 16px;
}
@media (max-width: 768px) {
    .mobile-menu-toggle { display: block; }
}

/* ========================= TAGGING AUTOCOMPLETE ========================= */
.tag-dropdown {
    position: absolute;
    background: #111;
    border: 1px solid #333;
    z-index: 9999;
    min-width: 180px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.tag-item {
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #1a1a1a;
}
.tag-item:hover, .tag-item.selected { background: #1a1a1a; color: #fff; }
.tag-item__type { font-size: 10px; color: #444; }

/* Crew pagina */
.crew-section { margin-bottom: 28px; }

/* ========================= PROFIEL THEMA ACHTERGRONDEN ========================= */
.profile-page { transition: background 0.3s; }

/* Thema: Vuur */
.profile-page[style*="--profile-accent:#ff6600"] { background: linear-gradient(180deg, #0f0500 0%, #0a0a0a 300px); }
.profile-page[style*="--profile-accent:#ff6600"] .profile-header-ext { background: linear-gradient(135deg, #1a0800, #2a0f00) !important; }

/* Thema: Oceaan */
.profile-page[style*="--profile-accent:#0099ff"] { background: linear-gradient(180deg, #00050f 0%, #0a0a0a 300px); }
.profile-page[style*="--profile-accent:#0099ff"] .profile-header-ext { background: linear-gradient(135deg, #000d1a, #001a33) !important; }

/* Thema: Nacht */
.profile-page[style*="--profile-accent:#aa44ff"] { background: linear-gradient(180deg, #05000f 0%, #0a0a0a 300px); }
.profile-page[style*="--profile-accent:#aa44ff"] .profile-header-ext { background: linear-gradient(135deg, #0d0015, #1a0030) !important; }

/* Thema: Natuur */
.profile-page[style*="--profile-accent:#44cc66"] { background: linear-gradient(180deg, #000f05 0%, #0a0a0a 300px); }

/* Thema: Goud */
.profile-page[style*="--profile-accent:#ffcc00"] { background: linear-gradient(180deg, #0f0d00 0%, #0a0a0a 300px); }

/* Thema: IJs */
.profile-page[style*="--profile-accent:#88ddff"] { background: linear-gradient(180deg, #00080f 0%, #0a0a0a 300px); }

/* Frame CSS (indien niet al aanwezig) */
.avatar-frame--fire      { border: 3px solid #ff4400 !important; box-shadow: 0 0 15px rgba(255,60,0,0.5) !important; }
.avatar-frame--ice       { border: 3px solid #88ddff !important; box-shadow: 0 0 15px rgba(136,220,255,0.5) !important; }
.avatar-frame--night     { border: 3px solid #8844aa !important; box-shadow: 0 0 15px rgba(136,68,170,0.5) !important; }
.avatar-frame--blue-gold { border: 3px solid #ffcc44 !important; box-shadow: 0 0 15px rgba(255,200,0,0.5) !important; }

/* VIP badge op profiel */
.profile-vip-badge {
    display: inline-block;
    background: linear-gradient(135deg, #1a1400, #2a2000);
    color: #ffcc44;
    border: 1px solid #ffcc4444;
    padding: 2px 8px;
    font-size: 11px;
    vertical-align: middle;
    margin-left: 6px;
}




.avatar-bavatar { width:638px; height:236px; flex-shrink:0; }
.avatar-row2 { display:flex; align-items:stretch; }
.avatar-ml { width:53px; flex-shrink:0; }
.avatar-mbg { width:481px; height:423px; background:url('images/avatar/Abg.jpg') center no-repeat; display:flex; justify-content:center; align-items:center; overflow:hidden; flex-shrink:0; }
.avatar-mbg img { max-width:100%; max-height:100%; object-fit:contain; }
.avatar-mr { width:104px; flex-shrink:0; }

.avatar-uname img { width:113px; height:455px; }
.avatar-row3 { display:flex; }
.avatar-aok { width:534px; height:210px; flex-shrink:0; }
.avatar-ator { width:104px; height:210px; flex-shrink:0; }
.avatar-zaob { width:113px; height:414px; flex-shrink:0; }
.avatar-name-wrap { position:absolute; }



/* ========================= AVATAR ========================= */
.avatar { display: flex; flex-shrink: 0; }
.avatar-left { display: flex; flex-direction: column; width: 638px; flex-shrink: 0; }
.avatar-top { width: 638px; height: 236px; flex-shrink: 0; }
.avatar-top img { width: 638px; height: 236px; display: block; }
.avatar-middle { display: flex; width: 638px; height: 423px; flex-shrink: 0; }
.avatar-ml { width: 53px; height: 423px; flex-shrink: 0; }
.avatar-ml img { width: 53px; height: 423px; display: block; }
.avatar-mbg { width: 481px; height: 423px; background: url('images/avatar/Abg.jpg') center no-repeat; display: flex; justify-content: center; align-items: center; overflow: hidden; flex-shrink: 0; }
.avatar-mbg .avatar-img { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.avatar-mbg .avatar-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.avatar-mr { width: 104px; height: 423px; flex-shrink: 0; }
.avatar-mr img { width: 104px; height: 423px; display: block; }
.avatar-bottom { display: flex; width: 638px; height: 210px; flex-shrink: 0; }
.avatar-bl { width: 534px; height: 210px; flex-shrink: 0; }
.avatar-bl img { width: 534px; height: 210px; display: block; }
.avatar-br { width: 104px; height: 210px; flex-shrink: 0; }
.avatar-br img { width: 104px; height: 210px; display: block; }
.avatar-right { display: flex; flex-direction: column; width: 113px; flex-shrink: 0; }
.avatar-username { width: 113px; height: 455px; background: url('images/avatar/Uname.jpg') center no-repeat; display: flex; justify-content: center; align-items: center; flex-shrink: 0; overflow: hidden; }
.username-text { writing-mode: vertical-lr; font-weight: bold; letter-spacing: 2px; white-space: nowrap; max-height: 440px; overflow: hidden; text-align: center; }
.avatar-bottom-right { width: 113px; height: 414px; flex-shrink: 0; }
.avatar-bottom-right img { width: 113px; height: 414px; display: block; }







/* ========================= MENU KOLOMMEN ========================= */
.menu-wrap { display: grid; grid-template-columns: 289px 29px; grid-template-rows: auto 1fr auto; flex-shrink: 0; width: 318px; }
.menu-wrap .menu { display: none; }
img.menu-mt { grid-column: 1 / 3; width: 318px; height: 118px; display: block; }
.menu-body { grid-column: 1; grid-row: 2; display: flex; }
.menu-col1 { width: 289px; height: 545px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; }
.menu-col1 .menu-btn--empty { display: none; }
.menu-btn { width: 289px !important; height: auto !important; flex: 1 1 0 !important; max-height: 54px !important; background: url("images/menu/Mknop.jpg") center/cover no-repeat !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; text-decoration: none !important; font-size: 13px !important; font-weight: bold !important; position: relative !important; }
.menu-btn:hover { filter: brightness(1.3) !important; color: #66ccff !important; }
.menu-btn--active { color: #66ccff !important; filter: brightness(1.2) !important; }
.menu-btn--empty { pointer-events: none !important; opacity: 0.3 !important; }
.menu-col2 { grid-column: 2; grid-row: 2 / 4; width: 29px; position: relative; background: url("images/menu/MZUR.jpg") repeat-y center top; }
.menu-zuur { display: none; }
.menu-footer-row { grid-column: 1; grid-row: 3; display: flex; height: 222px; }
img.menu-mo { width: 289px; height: 222px; display: block; flex-shrink: 0; }
.menu-mo-fill { display: none; }
img.menu-mzok { width: 29px; height: 256px; display: block; position: absolute; bottom: 0; left: 0; }

/* ========================= LAYOUT HOOGTE FIXES ========================= */
.right-block { display: flex !important; flex-direction: column !important; flex: 1 !important; min-width: 0 !important; height: 885px !important; overflow: hidden !important; }
.tms-bar { height: 16px !important; flex-shrink: 0 !important; overflow: hidden !important; }
.tms-bar img { height: 16px !important; }
.content-row { display: flex !important; align-items: flex-start !important; height: 869px !important; flex-shrink: 0 !important; overflow: hidden !important; }
.content-wrapper { width: 979px !important; height: 869px !important; display: flex !important; flex-direction: column !important; flex-shrink: 0 !important; overflow: hidden !important; }
.content-top { height: 151px !important; flex-shrink: 0 !important; }
.content-top img { width: 979px !important; height: 151px !important; display: block !important; }
.content-middle { height: 536px !important; flex-shrink: 0 !important; background: url("images/content/Contentbg.jpg") repeat-y !important; overflow-y: auto !important; }
.content-bottom { height: 182px !important; flex-shrink: 0 !important; }
.content-bottom img { width: 979px !important; height: 182px !important; display: block !important; }