/* ================================================================
   BLOG-CYBER.CSS  —  Cyberpunk / Far-Future Dashboard Blog
   Salwa.tech  |  cb-* namespace
   ================================================================ */

/* ── CSS-Variablen ─────────────────────────────────────────────── */
:root {
    --cb-cyan:    #00f0ff;
    --cb-pink:    #ff0099;
    --cb-lime:    #7fff00;
    --cb-gold:    #ffd700;
    --cb-silver:  #c0c0c0;
    --cb-bronze:  #cd7f32;
    --cb-bg:      #020b14;
    --cb-panel:   rgba(2, 11, 20, 0.94);
    --cb-border:  rgba(0, 240, 255, 0.2);
    --cb-glow:    rgba(0, 240, 255, 0.35);
    --cb-font:    'Courier New', Courier, monospace;
}

/* ── Main override ──────────────────────────────────────────────── */
main.cb-main {
    display: block;
    padding: 0;
    min-height: unset;
    background: var(--cb-bg);
}

/* ================================================================
   HERO — NEUESTE TRANSMISSION
   ================================================================ */
.cb-hero {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;
    cursor: pointer;
    border-bottom: 1px solid var(--cb-border);
}

.cb-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #020b14 0%, #030d1e 60%, #010810 100%);
}
.cb-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.55) saturate(0.7);
    transition: transform 8s ease, filter 0.6s ease;
}
.cb-hero:hover .cb-hero-bg img {
    transform: scale(1.04);
    filter: brightness(0.65) saturate(0.9);
}

.cb-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2,11,20,0.92) 0%, rgba(2,11,20,0.55) 55%, rgba(2,11,20,0.15) 100%),
        linear-gradient(0deg, rgba(2,11,20,0.85) 0%, transparent 40%);
    z-index: 1;
}

/* HUD corner brackets */
.cb-hud-tl, .cb-hud-tr, .cb-hud-bl, .cb-hud-br {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: var(--cb-cyan);
    border-style: solid;
    z-index: 3;
    transition: width 0.4s, height 0.4s, opacity 0.4s;
    opacity: 0.6;
}
.cb-hero:hover .cb-hud-tl,
.cb-hero:hover .cb-hud-tr,
.cb-hero:hover .cb-hud-bl,
.cb-hero:hover .cb-hud-br { width: 44px; height: 44px; opacity: 1; }

.cb-hud-tl { top:    8px; left:  8px; border-width: 2px 0 0 2px; }
.cb-hud-tr { top:    8px; right: 8px; border-width: 2px 2px 0 0; }
.cb-hud-bl { bottom: 8px; left:  8px; border-width: 0 0 2px 2px; }
.cb-hud-br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

/* Scan line animation */
.cb-hero-scan {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cb-cyan) 30%, var(--cb-pink) 70%, transparent);
    transform: translateY(-4px);
    opacity: 0;
    z-index: 4;
    pointer-events: none;
}
.cb-hero:hover .cb-hero-scan {
    animation: heroScan 2.5s ease-in-out infinite;
}
@keyframes heroScan {
    0%   { transform: translateY(0);    opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translateY(480px); opacity: 0; }
}

/* Hero content */
.cb-hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 60px;
    max-width: 650px;
}

.cb-hero-topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}

.cb-hero-signal {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--cb-font);
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--cb-lime);
    text-shadow: 0 0 8px var(--cb-lime);
}
.cb-signal-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cb-lime);
    box-shadow: 0 0 8px var(--cb-lime);
    animation: dotBlink 1.2s ease-in-out infinite;
}
@keyframes dotBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}

.cb-hero-id {
    font-family: var(--cb-font);
    font-size: 0.62rem;
    color: rgba(0,240,255,0.4);
    letter-spacing: 2px;
}

.cb-hero-cat {
    display: inline-block;
    font-family: var(--cb-font);
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: var(--cb-pink);
    text-shadow: 0 0 8px rgba(255,0,153,0.6);
    margin-bottom: 10px;
    text-transform: uppercase;
}
.cb-hero-cat::before { content: '[ '; opacity: 0.5; }
.cb-hero-cat::after  { content: ' ]'; opacity: 0.5; }

.cb-hero-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.22;
    margin: 0 0 14px;
    text-shadow: 0 0 30px rgba(0,240,255,0.25), 0 2px 8px rgba(0,0,0,0.8);
    transition: text-shadow 0.4s;
}
.cb-hero:hover .cb-hero-title {
    text-shadow: 0 0 40px rgba(0,240,255,0.4), 0 2px 8px rgba(0,0,0,0.8);
}

.cb-hero-excerpt {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.65;
    margin: 0 0 18px;
}

.cb-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cb-font);
    font-size: 0.68rem;
    color: rgba(255,255,255,0.45);
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.cb-meta-sep { color: rgba(0,240,255,0.25); }

.cb-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    font-family: var(--cb-font);
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--cb-cyan);
    border: 1px solid rgba(0,240,255,0.5);
    text-decoration: none;
    background: rgba(0,240,255,0.05);
    transition: background 0.25s, box-shadow 0.25s, transform 0.2s;
    align-self: flex-start;
    position: relative;
    overflow: hidden;
}
.cb-hero-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0,240,255,0.08), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s;
}
.cb-hero-cta:hover::before { transform: translateX(100%); }
.cb-hero-cta:hover {
    background: rgba(0,240,255,0.12);
    box-shadow: 0 0 24px rgba(0,240,255,0.3), 0 0 8px rgba(0,240,255,0.2) inset;
    transform: translateY(-1px);
    color: var(--cb-cyan);
    text-decoration: none;
}
.cb-cta-bracket { color: rgba(0,240,255,0.45); }
.cb-cta-arrow {
    display: inline-block;
    transition: transform 0.25s;
}
.cb-hero-cta:hover .cb-cta-arrow { transform: translateX(5px); }

/* ================================================================
   3-COLUMN GRID
   ================================================================ */
.cb-grid {
    display: grid;
    grid-template-columns: 260px 1fr 255px;
    grid-template-areas: "sidebar feed dashboard";
    gap: 0;
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px 20px 52px;
    gap: 20px;
    align-items: start;
}

.cb-sidebar   { grid-area: sidebar; }
.cb-feed      { grid-area: feed; }
.cb-dashboard { grid-area: dashboard; }

/* ================================================================
   PANELS  (shared base)
   ================================================================ */
.cb-panel {
    background: var(--cb-panel);
    border: 1px solid var(--cb-border);
    position: relative;
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.cb-panel:hover { border-color: rgba(0,240,255,0.38); }

.cb-panel-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(0,240,255,0.12);
    background: rgba(0,240,255,0.03);
}
.cb-panel-hdr > span:nth-child(2) {
    font-family: var(--cb-font);
    font-size: 0.66rem;
    color: var(--cb-cyan);
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(0,240,255,0.5);
    flex: 1;
}
.cb-panel-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cb-cyan);
    box-shadow: 0 0 6px var(--cb-cyan);
    flex-shrink: 0;
}
.cb-panel-dot.blink { animation: dotBlink 1.5s ease-in-out infinite; }
.cb-panel-dot.warning {
    background: #ffcc00;
    box-shadow: 0 0 6px #ffcc00;
}
.cb-panel-count {
    font-family: var(--cb-font);
    font-size: 0.58rem;
    color: rgba(0,240,255,0.4);
    letter-spacing: 1px;
}
.cb-status-ok {
    font-family: var(--cb-font);
    font-size: 0.58rem;
    color: var(--cb-lime);
    letter-spacing: 2px;
    text-shadow: 0 0 6px var(--cb-lime);
}

/* ================================================================
   SIDEBAR — Frequenz-Filter (Kategorie-Pills)
   ================================================================ */
.cb-freq-wrap {
    padding: 12px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cb-freq-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-family: var(--cb-font);
    font-size: 0.68rem;
    letter-spacing: 1px;
    color: rgba(0,240,255,0.55);
    background: transparent;
    border: 1px solid rgba(0,240,255,0.2);
    cursor: pointer;
    transition: all 0.22s;
    white-space: nowrap;
}
.cb-freq-btn:hover {
    color: var(--cb-cyan);
    border-color: rgba(0,240,255,0.55);
    background: rgba(0,240,255,0.07);
    box-shadow: 0 0 10px rgba(0,240,255,0.15);
}
.cb-freq-btn.active {
    color: var(--cb-bg);
    background: var(--cb-cyan);
    border-color: var(--cb-cyan);
    box-shadow: 0 0 16px rgba(0,240,255,0.45), 0 0 6px rgba(0,240,255,0.3) inset;
    text-shadow: none;
}
.cb-freq-icon { font-size: 0.6rem; }

/* ================================================================
   SIDEBAR — Top-Signale (Popular)
   ================================================================ */
.cb-signal-list {
    list-style: none;
    margin: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cb-signal-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    border: 1px solid rgba(0,240,255,0.08);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.cb-signal-item:hover {
    border-color: rgba(0,240,255,0.35);
    background: rgba(0,240,255,0.04);
}

.cb-signal-rank {
    font-family: var(--cb-font);
    font-size: 0.75rem;
    color: rgba(0,240,255,0.35);
    min-width: 20px;
    padding-top: 2px;
    flex-shrink: 0;
}
.cb-signal-item:nth-child(1) .cb-signal-rank { color: var(--cb-gold); }
.cb-signal-item:nth-child(2) .cb-signal-rank { color: var(--cb-silver); }
.cb-signal-item:nth-child(3) .cb-signal-rank { color: var(--cb-bronze); }

.cb-signal-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cb-signal-title {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.cb-signal-bar-wrap {
    height: 3px;
    background: rgba(0,240,255,0.08);
    border-radius: 0;
    overflow: hidden;
}
.cb-signal-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--cb-cyan), var(--cb-pink));
    width: 0; /* animated via JS */
}

.cb-signal-views {
    font-family: var(--cb-font);
    font-size: 0.6rem;
    color: var(--cb-pink);
    letter-spacing: 1px;
}

/* ================================================================
   SIDEBAR — Suche
   ================================================================ */
.cb-search { padding: 12px 12px 14px; }

.cb-search-row {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0,240,255,0.22);
    margin-bottom: 8px;
    background: rgba(0,240,255,0.03);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cb-search-row:focus-within {
    border-color: rgba(0,240,255,0.6);
    box-shadow: 0 0 12px rgba(0,240,255,0.12) inset;
}

.cb-search-prompt {
    font-family: var(--cb-font);
    font-size: 0.85rem;
    color: var(--cb-cyan);
    padding: 0 10px;
    opacity: 0.6;
    flex-shrink: 0;
}

.cb-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--cb-cyan);
    font-family: var(--cb-font);
    font-size: 0.74rem;
    letter-spacing: 1px;
    padding: 9px 10px 9px 0;
}
.cb-search-input::placeholder { color: rgba(0,240,255,0.28); }

.cb-search-btn {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(0,240,255,0.3);
    color: var(--cb-cyan);
    font-family: var(--cb-font);
    font-size: 0.66rem;
    letter-spacing: 3px;
    padding: 8px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.cb-search-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0,240,255,0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s;
}
.cb-search-btn:hover::before { transform: translateX(100%); }
.cb-search-btn:hover {
    background: rgba(0,240,255,0.08);
    box-shadow: 0 0 14px rgba(0,240,255,0.2);
}

/* ================================================================
   FEED — Header
   ================================================================ */
.cb-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(0,240,255,0.12);
    margin-bottom: 16px;
}
.cb-feed-title {
    font-family: var(--cb-font);
    font-size: 0.7rem;
    color: var(--cb-cyan);
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(0,240,255,0.45);
}
.cb-feed-count {
    font-family: var(--cb-font);
    font-size: 0.6rem;
    color: rgba(0,240,255,0.38);
    letter-spacing: 1px;
}

/* ================================================================
   FEED — Blog Cards
   ================================================================ */
.cb-card {
    display: flex;
    background: rgba(2,11,20,0.9);
    border: 1px solid rgba(0,240,255,0.15);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.22s;
    cursor: pointer;
    min-height: 170px;
}
.cb-card:hover {
    border-color: rgba(0,240,255,0.55);
    box-shadow:
        0 0 28px rgba(0,240,255,0.08),
        0 0 1px rgba(0,240,255,0.4),
        inset 0 0 50px rgba(0,240,255,0.02);
    transform: translateY(-2px);
}

/* HUD corners on cards */
.cb-card-tl, .cb-card-br {
    position: absolute;
    width: 12px; height: 12px;
    border-color: rgba(0,240,255,0.4);
    border-style: solid;
    z-index: 2;
    pointer-events: none;
    transition: width 0.3s, height 0.3s, border-color 0.3s;
}
.cb-card-tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.cb-card-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.cb-card:hover .cb-card-tl,
.cb-card:hover .cb-card-br {
    width: 20px; height: 20px;
    border-color: var(--cb-cyan);
}

/* Scan line */
.cb-card-scan {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cb-cyan) 40%, var(--cb-pink) 60%, transparent);
    transform: translateY(-4px);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}
.cb-card:hover .cb-card-scan {
    animation: cardScan 1.6s ease-in-out;
}
@keyframes cardScan {
    0%   { transform: translateY(-4px); opacity: 0; }
    6%   { opacity: 1; }
    94%  { opacity: 1; }
    100% { transform: translateY(400px); opacity: 0; }
}

/* Image */
.cb-card-img {
    width: 200px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.cb-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.65) saturate(0.7);
    transition: filter 0.4s, transform 0.5s;
}
.cb-card:hover .cb-card-img img {
    filter: brightness(0.85) saturate(1.1);
    transform: scale(1.06);
}
.cb-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #020b14 0%, #041528 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cb-card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 50%, rgba(2,11,20,0.88));
}
.cb-card-cat-badge {
    position: absolute;
    top: 10px; left: 10px;
    font-family: var(--cb-font);
    font-size: 0.58rem;
    letter-spacing: 2px;
    color: var(--cb-bg);
    background: var(--cb-pink);
    padding: 2px 8px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255,0,153,0.5);
}

/* Body */
.cb-card-body {
    flex: 1;
    padding: 14px 18px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.cb-card-id {
    font-family: var(--cb-font);
    font-size: 0.58rem;
    color: rgba(0,240,255,0.28);
    letter-spacing: 2px;
}

.cb-card-title {
    font-size: 1.05rem;
    color: #ddf4ff;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 0 8px rgba(0,240,255,0.1);
    transition: color 0.22s, text-shadow 0.22s;
}
.cb-card:hover .cb-card-title {
    color: var(--cb-cyan);
    text-shadow: 0 0 18px rgba(0,240,255,0.35);
}

.cb-card-excerpt {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.48);
    line-height: 1.62;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cb-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid rgba(0,240,255,0.08);
}
.cb-meta-item {
    font-family: var(--cb-font);
    font-size: 0.64rem;
    color: rgba(255,255,255,0.4);
}
.cb-meta-lbl {
    color: rgba(0,240,255,0.5);
    margin-right: 4px;
}

.cb-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--cb-font);
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--cb-cyan);
    text-decoration: none;
    padding: 5px 0;
    border-bottom: 1px solid transparent;
    align-self: flex-start;
    transition: border-color 0.2s, text-shadow 0.2s, gap 0.2s;
}
.cb-card-cta:hover {
    border-bottom-color: var(--cb-cyan);
    text-shadow: 0 0 8px rgba(0,240,255,0.55);
    gap: 10px;
    color: var(--cb-cyan);
    text-decoration: none;
}
.cb-cta-arrow-sm {
    display: inline-block;
    transition: transform 0.2s;
}
.cb-card-cta:hover .cb-cta-arrow-sm { transform: translateX(3px); }

/* Empty state */
.cb-empty {
    text-align: center;
    padding: 50px 20px;
}
.cb-empty-icon {
    display: block;
    font-size: 2rem;
    color: rgba(0,240,255,0.15);
    margin-bottom: 14px;
}
.cb-empty p {
    font-family: var(--cb-font);
    font-size: 0.75rem;
    color: rgba(0,240,255,0.3);
    letter-spacing: 2px;
}

/* ================================================================
   DASHBOARD — Operative (User)
   ================================================================ */
.cb-operative-panel { overflow: visible; }

.cb-op-body {
    padding: 0 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cb-op-avatar-wrap {
    position: relative;
    width: 72px; height: 72px;
    margin: 18px auto 10px;
    flex-shrink: 0;
}

/* Hexagonal avatar */
.cb-op-hex {
    width: 72px; height: 72px;
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.cb-op-hex img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cb-op-ring {
    position: absolute;
    inset: -9px;
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    border: 2px solid var(--cb-cyan);
    animation: opRingPulse 2.8s ease-in-out infinite;
    z-index: 0;
}
@keyframes opRingPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%       { opacity: 0.9; transform: scale(1.06); }
}

.cb-op-name {
    font-family: var(--cb-font);
    font-size: 0.9rem;
    letter-spacing: 2px;
    color: var(--cb-cyan);
    text-shadow: 0 0 12px rgba(0,240,255,0.5);
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: center;
}

/* XP bar */
.cb-op-xp { width: 100%; padding: 0 14px 12px; }
.cb-op-xp-lbl {
    display: flex;
    justify-content: space-between;
    font-family: var(--cb-font);
    font-size: 0.6rem;
    color: rgba(0,240,255,0.6);
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.cb-op-xp-bar {
    height: 5px;
    background: rgba(0,240,255,0.08);
    border: 1px solid rgba(0,240,255,0.18);
    position: relative;
    overflow: visible;
}
.cb-op-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #0044ff, var(--cb-cyan));
    position: relative;
    transition: width 0.8s ease;
}
.cb-op-xp-fill::after {
    content: '';
    position: absolute;
    right: -1px; top: -3px;
    width: 3px; height: 11px;
    background: var(--cb-cyan);
    box-shadow: 0 0 8px var(--cb-cyan);
}

/* Stats grid */
.cb-op-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-top: 1px solid rgba(0,240,255,0.1);
    border-bottom: 1px solid rgba(0,240,255,0.1);
    margin-bottom: 10px;
    gap: 1px;
    background: rgba(0,240,255,0.06);
}
.cb-op-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 4px;
    background: var(--cb-panel);
    gap: 3px;
}
.cb-op-stat-val {
    font-family: var(--cb-font);
    font-size: 1.15rem;
    color: #e8f8ff;
    text-shadow: 0 0 10px rgba(0,240,255,0.3);
}
.cb-op-stat-lbl {
    font-family: var(--cb-font);
    font-size: 0.56rem;
    letter-spacing: 1px;
    color: rgba(0,240,255,0.42);
}

/* Quests */
.cb-op-quests {
    width: 100%;
    padding: 6px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.cb-op-quest {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cb-font);
    font-size: 0.62rem;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.5px;
}
.cb-quest-indicator {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    flex-shrink: 0;
}
.cb-quest-indicator.active {
    background: var(--cb-lime);
    box-shadow: 0 0 8px var(--cb-lime);
    animation: dotBlink 1.8s ease-in-out infinite;
}
.cb-quest-indicator.warning {
    background: #ffcc00;
    box-shadow: 0 0 8px #ffcc00;
}
.cb-quest-lbl { flex: 1; }
.cb-quest-val { color: rgba(0,240,255,0.5); }

/* ================================================================
   DASHBOARD — Locked (Guest)
   ================================================================ */
.cb-locked-panel {}
.cb-locked-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 24px;
    gap: 14px;
}
.cb-locked-hex {
    width: 64px; height: 64px;
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    background: rgba(0,240,255,0.04);
    border: 1px solid rgba(0,240,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: rgba(0,240,255,0.25);
    animation: opRingPulse 2.5s ease-in-out infinite;
}
.cb-locked-msg {
    font-family: var(--cb-font);
    font-size: 0.68rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1.5px;
    text-align: center;
    line-height: 1.7;
    margin: 0;
}
.cb-locked-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    font-family: var(--cb-font);
    font-size: 0.68rem;
    letter-spacing: 2px;
    color: var(--cb-cyan);
    border: 1px solid rgba(0,240,255,0.4);
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s;
}
.cb-locked-btn:hover {
    background: rgba(0,240,255,0.1);
    box-shadow: 0 0 18px rgba(0,240,255,0.25);
    color: var(--cb-cyan);
    text-decoration: none;
}

/* ================================================================
   DASHBOARD — Rangliste (Leaderboard)
   ================================================================ */
.cb-rank-list {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cb-rank-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(0,240,255,0.1);
    transition: border-color 0.2s, background 0.2s;
    position: relative;
}
.cb-rank-entry:hover {
    background: rgba(0,240,255,0.04);
    border-color: rgba(0,240,255,0.32);
}
.cb-rank-entry.rank-gold   { border-color: rgba(255,215,0,0.25); }
.cb-rank-entry.rank-silver { border-color: rgba(192,192,192,0.18); }
.cb-rank-entry.rank-gold:hover   { border-color: rgba(255,215,0,0.55); background: rgba(255,215,0,0.04); }
.cb-rank-entry.rank-silver:hover { border-color: rgba(192,192,192,0.45); }

.cb-rank-pos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 24px;
}
.cb-rank-num {
    font-family: var(--cb-font);
    font-size: 0.68rem;
    color: rgba(0,240,255,0.35);
}
.rank-gold   .cb-rank-num   { color: var(--cb-gold); text-shadow: 0 0 8px rgba(255,215,0,0.5); }
.rank-silver .cb-rank-num   { color: var(--cb-silver); }
.rank-bronze .cb-rank-num   { color: var(--cb-bronze); }
.cb-rank-medal {
    font-size: 0.75rem;
    color: rgba(0,240,255,0.25);
}
.rank-gold   .cb-rank-medal { color: var(--cb-gold);   text-shadow: 0 0 8px rgba(255,215,0,0.6); }
.rank-silver .cb-rank-medal { color: var(--cb-silver); }
.rank-bronze .cb-rank-medal { color: var(--cb-bronze); }

/* Hexagonal rank avatar */
.cb-rank-hex-wrap { flex-shrink: 0; }
.cb-rank-hex {
    width: 40px; height: 40px;
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    overflow: hidden;
}
.cb-rank-hex img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.8);
}
.rank-gold   .cb-rank-hex { box-shadow: 0 0 10px rgba(255,215,0,0.4); }

.cb-rank-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cb-rank-name {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cb-rank-level {
    font-family: var(--cb-font);
    font-size: 0.58rem;
    color: rgba(0,240,255,0.42);
    letter-spacing: 1px;
}
.cb-rank-xp-bar {
    height: 3px;
    background: rgba(0,240,255,0.08);
    overflow: hidden;
}
.cb-rank-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cb-cyan), var(--cb-pink));
}
.rank-gold   .cb-rank-xp-fill { background: linear-gradient(90deg, #b8860b, var(--cb-gold)); }
.rank-silver .cb-rank-xp-fill { background: linear-gradient(90deg, #666, var(--cb-silver)); }
.rank-bronze .cb-rank-xp-fill { background: linear-gradient(90deg, #7a4a1e, var(--cb-bronze)); }

/* ================================================================
   DASHBOARD — System Status
   ================================================================ */
.cb-sys-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cb-sys-metric {}

.cb-sys-metric-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.cb-sys-lbl {
    font-family: var(--cb-font);
    font-size: 0.6rem;
    letter-spacing: 1px;
    color: rgba(0,240,255,0.5);
}
.cb-sys-val {
    font-family: var(--cb-font);
    font-size: 0.62rem;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.5px;
}

.cb-sys-bar-wrap {
    height: 5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(0,240,255,0.1);
    position: relative;
    overflow: hidden;
}
.cb-sys-bar {
    height: 100%;
    background: var(--sys-color, var(--cb-cyan));
    width: 0; /* animated via JS */
    box-shadow: 0 0 8px var(--sys-color, var(--cb-cyan));
    position: relative;
}
.cb-sys-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: sysPulse 2s ease-in-out infinite;
}
@keyframes sysPulse {
    0%, 100% { opacity: 0; transform: translateX(-100%); }
    50%       { opacity: 1; transform: translateX(100%); }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1150px) {
    .cb-grid {
        grid-template-columns: 230px 1fr;
        grid-template-areas:
            "sidebar feed"
            "dashboard dashboard";
    }
    .cb-dashboard {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .cb-dashboard .cb-panel { margin-bottom: 0; }
}

@media (max-width: 820px) {
    .cb-hero         { height: 360px; }
    .cb-hero-content { padding: 0 30px; }
    .cb-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "feed"
            "sidebar"
            "dashboard";
        padding: 14px;
    }
    .cb-dashboard {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .cb-card { flex-direction: column; }
    .cb-card-img {
        width: 100%;
        height: 165px;
    }
    .cb-card-img-overlay {
        background: linear-gradient(0deg, rgba(2,11,20,0.85) 0%, transparent 55%);
    }
}

@media (max-width: 540px) {
    .cb-hero         { height: 280px; }
    .cb-hero-content { padding: 0 18px; }
    .cb-hero-title   { font-size: 1.3rem; }
    .cb-dashboard    { grid-template-columns: 1fr; }
    .cb-grid         { padding: 10px; }
}