/**
 * Blockspo – Frontend Styles
 * Design: Dark, modern, Minecraft-flavoured
 */

/* ── Reset / Base ──────────────────────────────────────────────────────────── */
.bg3d-wrap *,
.bg3d-wrap *::before,
.bg3d-wrap *::after {
    box-sizing: border-box;
}

:root {
    --bg3d-bg0:      #0d0d1a;
    --bg3d-bg1:      #13132a;
    --bg3d-bg2:      #1c1c38;
    --bg3d-bg3:      #252545;
    --bg3d-border:   #2e2e5a;
    --bg3d-accent:   #5dbbf5;
    --bg3d-accent2:  #7b61ff;
    --bg3d-green:    #4caf50;
    --bg3d-red:      #f44336;
    --bg3d-yellow:   #ffc107;
    --bg3d-text:     #e8e8f8;
    --bg3d-text-dim: #8888aa;
    --bg3d-radius:   10px;
    --bg3d-shadow:   0 4px 24px rgba(0,0,0,.45);
    --bg3d-card-w:   280px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}

/* ── Viewer Wrapper ─────────────────────────────────────────────────────────── */
.bg3d-viewer-wrap {
    position:        relative;
    width:           100%;
    background:      var(--bg3d-bg1);
    border-radius:   var(--bg3d-radius);
    overflow:        hidden;
    box-shadow:      var(--bg3d-shadow);
    border:          1px solid var(--bg3d-border);
    user-select:     none;
}

.bg3d-viewer-canvas-wrap {
    position:        relative;
    width:           100%;
    aspect-ratio:    16/9;
    background:      var(--bg3d-bg0);
    min-height:      300px;
}

.bg3d-viewer-canvas {
    display:         block;
    width:           100% !important;
    height:          100% !important;
    outline:         none;
    cursor:          grab;
    touch-action:    none;
}

.bg3d-viewer-canvas:active { cursor: grabbing; }

/* Overlays */
.bg3d-overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      rgba(13,13,26,.85);
    color:           var(--bg3d-text);
    gap:             12px;
    z-index:         10;
    font-size:       14px;
}

.bg3d-overlay[hidden] { display: none; }

.bg3d-spinner {
    width:           40px;
    height:          40px;
    border:          3px solid var(--bg3d-border);
    border-top-color:var(--bg3d-accent);
    border-radius:   50%;
    animation:       bg3dSpin .7s linear infinite;
}

@keyframes bg3dSpin { to { transform: rotate(360deg); } }

.bg3d-error-icon { font-size: 2rem; }

/* Controls bar */
.bg3d-viewer-controls {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    gap:             8px;
    padding:         10px 14px;
    background:      var(--bg3d-bg2);
    border-top:      1px solid var(--bg3d-border);
}

.bg3d-layer-controls {
    display:         flex;
    align-items:     center;
    gap:             8px;
    flex:            1 1 auto;
}

.bg3d-view-controls {
    display:         flex;
    align-items:     center;
    gap:             6px;
    flex:            0 0 auto;
}

.bg3d-layer-slider {
    flex:            1 1 80px;
    max-width:       200px;
    accent-color:    var(--bg3d-accent);
    cursor:          pointer;
    height:          4px;
}

.bg3d-layer-label {
    font-size:       12px;
    color:           var(--bg3d-text-dim);
    white-space:     nowrap;
    min-width:       80px;
}

.bg3d-ghost-toggle {
    display:         flex;
    align-items:     center;
    gap:             5px;
    font-size:       12px;
    color:           var(--bg3d-text-dim);
    cursor:          pointer;
}

.bg3d-ghost-toggle input { accent-color: var(--bg3d-accent2); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.bg3d-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         8px 16px;
    border:          none;
    border-radius:   6px;
    font-size:       14px;
    font-weight:     600;
    cursor:          pointer;
    transition:      background .15s, opacity .15s, transform .1s;
    text-decoration: none;
}

.bg3d-btn:hover { opacity: .85; }
.bg3d-btn:active { transform: scale(.97); }
.bg3d-btn:disabled { opacity: .45; cursor: not-allowed; }

.bg3d-btn--primary  { background: var(--bg3d-accent);  color: #000; }
.bg3d-btn--secondary{ background: var(--bg3d-bg3);     color: var(--bg3d-text); border: 1px solid var(--bg3d-border); }
.bg3d-btn--danger   { background: var(--bg3d-red);     color: #fff; }
.bg3d-btn--success  { background: var(--bg3d-green);   color: #fff; }

.bg3d-btn--icon {
    padding:    6px 8px;
    background: var(--bg3d-bg3);
    color:      var(--bg3d-text-dim);
    border:     1px solid var(--bg3d-border);
    font-size:  16px;
    min-width:  32px;
    height:     32px;
}

.bg3d-btn--icon:hover { color: var(--bg3d-accent); border-color: var(--bg3d-accent); }

/* ── Build Cards ────────────────────────────────────────────────────────────── */
.bg3d-grid-items {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--bg3d-card-w), 1fr));
    gap:                   20px;
    padding:               20px 0;
}

.bg3d-build-card {
    background:    var(--bg3d-bg1);
    border:        1px solid var(--bg3d-border);
    border-radius: var(--bg3d-radius);
    overflow:      hidden;
    display:       flex;
    flex-direction:column;
    transition:    border-color .2s, transform .2s, box-shadow .2s;
    position:      relative;
}

.bg3d-build-card:hover {
    border-color:  var(--bg3d-accent);
    transform:     translateY(-3px);
    box-shadow:    0 8px 30px rgba(93,187,245,.18);
}

.bg3d-build-card.is-featured {
    border-color:  var(--bg3d-yellow);
    box-shadow:    0 0 0 1px var(--bg3d-yellow);
}

.bg3d-card__thumb {
    display:       block;
    position:      relative;
    aspect-ratio:  16/9;
    overflow:      hidden;
    background:    var(--bg3d-bg0);
}

.bg3d-card__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .3s;
}

.bg3d-build-card:hover .bg3d-card__thumb img {
    transform: scale(1.04);
}

.bg3d-card__thumb-placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       2.5rem;
    color:           var(--bg3d-border);
    background:      var(--bg3d-bg0);
}

.bg3d-card__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.bg3d-card__title {
    font-size:   15px;
    font-weight: 700;
    margin:      0;
    line-height: 1.3;
    color:       var(--bg3d-text);
}

.bg3d-card__title a {
    color:          inherit;
    text-decoration:none;
}

.bg3d-card__title a:hover { color: var(--bg3d-accent); }

.bg3d-card__author {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    color:       var(--bg3d-text-dim);
}

.bg3d-card__author img {
    border-radius: 50%;
    flex-shrink: 0;
}

.bg3d-card__author a {
    color:          inherit;
    text-decoration:none;
}

.bg3d-card__author a:hover { color: var(--bg3d-accent); }

.bg3d-card__chips {
    display:    flex;
    flex-wrap:  wrap;
    gap:        4px;
}

.bg3d-chip {
    display:       inline-block;
    padding:       2px 8px;
    border-radius: 20px;
    font-size:     11px;
    font-weight:   600;
    background:    var(--bg3d-bg3);
    color:         var(--bg3d-text-dim);
    border:        1px solid var(--bg3d-border);
}

.bg3d-chip--format   { background: rgba(93,187,245,.12); color: var(--bg3d-accent); border-color: var(--bg3d-accent); }
.bg3d-chip--featured { background: rgba(255,193,7,.12);  color: var(--bg3d-yellow); border-color: var(--bg3d-yellow); }

.bg3d-card__meta {
    display:     flex;
    align-items: center;
    gap:         12px;
    font-size:   12px;
    color:       var(--bg3d-text-dim);
}

.bg3d-card__rating { display: flex; align-items: center; gap: 4px; }
.bg3d-card__excerpt {
    font-size:   12px;
    color:       var(--bg3d-text-dim);
    line-height: 1.5;
    margin:      0;
    overflow:    hidden;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Stars ──────────────────────────────────────────────────────────────────── */
.bg3d-stars { display: inline-flex; }
.bg3d-star  { font-size: 14px; color: var(--bg3d-border); cursor: default; transition: color .1s; }
.bg3d-star.is-active { color: var(--bg3d-yellow); }

.bg3d-star-rating .bg3d-star { cursor: pointer; font-size: 22px; }
.bg3d-star-rating .bg3d-star:hover,
.bg3d-star-rating .bg3d-star:hover ~ .bg3d-star { color: var(--bg3d-yellow); }

/* ── Build Filters ──────────────────────────────────────────────────────────── */
.bg3d-filters {
    display:    flex;
    flex-wrap:  wrap;
    gap:        10px;
    align-items:center;
    padding:    16px 0;
    border-bottom: 1px solid var(--bg3d-border);
    margin-bottom: 8px;
}

.bg3d-filters select,
.bg3d-filters input[type="text"],
.bg3d-filters input[type="search"] {
    background:   var(--bg3d-bg2);
    border:       1px solid var(--bg3d-border);
    border-radius:6px;
    color:        var(--bg3d-text);
    padding:      8px 12px;
    font-size:    14px;
    outline:      none;
    transition:   border-color .15s;
    min-width:    120px;
}

.bg3d-filters select:focus,
.bg3d-filters input:focus {
    border-color: var(--bg3d-accent);
}

.bg3d-search-wrap {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.bg3d-search-wrap input {
    width: 100%;
    padding-left: 36px;
}

.bg3d-search-icon {
    position:   absolute;
    left:       10px;
    top:        50%;
    transform:  translateY(-50%);
    color:      var(--bg3d-text-dim);
    pointer-events: none;
}

/* ── Upload Form ────────────────────────────────────────────────────────────── */
.bg3d-upload-form-wrap {
    background:    var(--bg3d-bg1);
    border:        1px solid var(--bg3d-border);
    border-radius: var(--bg3d-radius);
    padding:       28px;
    max-width:     760px;
    margin:        0 auto;
}

.bg3d-form-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   18px;
}

.bg3d-form-group {
    display:       flex;
    flex-direction:column;
    gap:           6px;
}

.bg3d-form-group.bg3d-full-width {
    grid-column: 1 / -1;
}

.bg3d-form-group label {
    font-size:   13px;
    font-weight: 600;
    color:       var(--bg3d-text);
}

.bg3d-form-group input[type="text"],
.bg3d-form-group input[type="url"],
.bg3d-form-group textarea,
.bg3d-form-group select {
    background:   var(--bg3d-bg2);
    border:       1px solid var(--bg3d-border);
    border-radius:6px;
    color:        var(--bg3d-text);
    padding:      9px 13px;
    font-size:    14px;
    outline:      none;
    transition:   border-color .15s;
    font-family:  inherit;
    width:        100%;
}

.bg3d-form-group input:focus,
.bg3d-form-group textarea:focus,
.bg3d-form-group select:focus {
    border-color: var(--bg3d-accent);
}

.bg3d-form-group textarea { resize: vertical; min-height: 100px; }

.bg3d-dropzone {
    border:          2px dashed var(--bg3d-border);
    border-radius:   var(--bg3d-radius);
    padding:         36px 20px;
    text-align:      center;
    cursor:          pointer;
    transition:      border-color .15s, background .15s;
    background:      var(--bg3d-bg0);
    color:           var(--bg3d-text-dim);
    font-size:       14px;
}

.bg3d-dropzone:hover,
.bg3d-dropzone.is-dragging {
    border-color: var(--bg3d-accent);
    background:   rgba(93,187,245,.06);
    color:        var(--bg3d-text);
}

.bg3d-dropzone-icon { font-size: 2.5rem; display: block; margin-bottom: 8px; }

/* Achievements (v4.0.0) */
.bg3d-achievements {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bg3d-achievement {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg3d-bg, #f7f7fa);
    border: 1px solid var(--bg3d-border, #e1e1e8);
    border-radius: 16px;
    padding: 4px 10px 4px 6px;
    font-size: 12px;
    color: var(--bg3d-text);
    cursor: help;
}
.bg3d-achievement__icon { font-size: 18px; line-height: 1; }
.bg3d-achievement__label { font-weight: 600; }

/* Collections (v4.0.0) */
.bg3d-collections-wrap { margin: 20px 0; }
.bg3d-collections-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.bg3d-coll-form {
    background: var(--bg3d-card-bg, #fff);
    border: 1px solid var(--bg3d-border, #e1e1e8);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bg3d-coll-form input, .bg3d-coll-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--bg3d-border, #e1e1e8);
    border-radius: 6px;
    font: inherit;
}
.bg3d-collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.bg3d-collection-card {
    position: relative;
    background: var(--bg3d-card-bg, #fff);
    border: 1px solid var(--bg3d-border, #e1e1e8);
    border-radius: 8px;
    padding: 14px 16px;
    transition: transform 0.15s ease;
}
.bg3d-collection-card:hover { transform: translateY(-2px); }
.bg3d-collection-card__title {
    font-weight: 700;
    color: var(--bg3d-text);
    text-decoration: none;
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}
.bg3d-collection-card__meta { font-size: 12px; color: var(--bg3d-text-dim); margin: 0 0 8px; }
.bg3d-collection-card__desc { font-size: 13px; color: var(--bg3d-text-dim); margin: 0; }
.bg3d-coll-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: 0.5;
    font-size: 14px;
    padding: 4px;
}
.bg3d-coll-delete:hover { opacity: 1; }

.bg3d-collection-show { margin: 20px 0; }
.bg3d-collection-desc { color: var(--bg3d-text-dim); margin: 0 0 16px; }

.bg3d-add-to-coll { position: relative; display: inline-block; }
.bg3d-add-to-coll-list {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg3d-card-bg, #fff);
    border: 1px solid var(--bg3d-border, #e1e1e8);
    border-radius: 6px;
    padding: 4px 0;
    margin: 4px 0 0;
    min-width: 220px;
    z-index: 50;
    list-style: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.bg3d-add-to-coll-list li button {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 6px 12px;
    cursor: pointer;
    font: inherit;
    color: var(--bg3d-text);
}
.bg3d-add-to-coll-list li button:hover { background: var(--bg3d-bg, #f7f7fa); }

/* Featured-Banner (v4.0.0) */
.bg3d-featured-banner {
    margin: 20px 0 36px;
}
.bg3d-featured-banner__title {
    margin: 0 0 16px;
    font-size: 24px;
    color: var(--bg3d-text);
}
.bg3d-featured-banner__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    aspect-ratio: 16 / 7;
    min-height: 320px;
}
.bg3d-featured-banner__item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #1a1a2e center/cover no-repeat;
    text-decoration: none;
    color: #fff;
    transition: transform 0.25s ease;
    display: block;
}
.bg3d-featured-banner__item:hover {
    transform: scale(1.02);
    z-index: 2;
}
.bg3d-featured-banner__item--hero {
    grid-row: span 2;
}
.bg3d-featured-banner__overlay {
    position: absolute;
    inset: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
}
.bg3d-featured-banner__item--hero .bg3d-featured-banner__overlay { padding: 24px; }
.bg3d-featured-banner__rank {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 87, 34, 0.95);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 14px;
}
.bg3d-featured-banner__item--hero .bg3d-featured-banner__rank {
    font-size: 15px;
    padding: 6px 14px;
}
.bg3d-featured-banner__overlay h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.bg3d-featured-banner__item--hero .bg3d-featured-banner__overlay h3 {
    font-size: 28px;
}
.bg3d-featured-banner__author {
    margin: 0;
    font-size: 11px;
    color: rgba(255,255,255,0.85);
}
.bg3d-featured-banner__item--hero .bg3d-featured-banner__author { font-size: 14px; }
.bg3d-featured-banner__excerpt {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    line-height: 1.4;
}
.bg3d-featured-banner__stats {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255,255,255,0.85);
}
.bg3d-featured-banner__item--hero .bg3d-featured-banner__stats {
    font-size: 13px;
    gap: 16px;
}
@media (max-width: 768px) {
    .bg3d-featured-banner__grid {
        grid-template-columns: 1fr;
        grid-template-rows: 200px 150px 150px;
        aspect-ratio: auto;
        min-height: 0;
    }
    .bg3d-featured-banner__item--hero { grid-row: span 1; }
}

/* Notifications-Bell (v3.1.0) */
.bg3d-notif-wrap   { position: relative; display: inline-block; }
.bg3d-notif-bell {
    background:    transparent;
    border:        0;
    cursor:        pointer;
    position:      relative;
    padding:       6px 10px;
    font-size:     18px;
    line-height:   1;
}
.bg3d-notif-icon { display: inline-block; }
.bg3d-notif-badge {
    position:      absolute;
    top:           0;
    right:         0;
    background:    #d32f2f;
    color:         #fff;
    border-radius: 10px;
    font-size:     11px;
    line-height:   1;
    padding:       3px 6px;
    min-width:     16px;
    text-align:    center;
}
.bg3d-notif-panel {
    position:      absolute;
    top:           100%;
    right:         0;
    width:         340px;
    max-width:     90vw;
    max-height:    480px;
    overflow:      auto;
    background:    var(--bg3d-card-bg, #fff);
    border:        1px solid var(--bg3d-border, #e1e1e8);
    border-radius: 8px;
    box-shadow:    0 8px 24px rgba(0,0,0,0.12);
    z-index:       100;
    margin-top:    6px;
}
.bg3d-notif-panel-header {
    display:        flex;
    justify-content:space-between;
    align-items:    center;
    padding:        12px 14px;
    border-bottom:  1px solid var(--bg3d-border, #e1e1e8);
}
.bg3d-notif-mark-all {
    background: transparent;
    border:     0;
    color:      var(--bg3d-accent, #2d7ff9);
    cursor:     pointer;
    font-size:  12px;
}
.bg3d-notif-list { padding: 4px 0; }
.bg3d-notif-loading,
.bg3d-notif-empty { padding: 16px; text-align: center; color: var(--bg3d-text-dim); font-size: 13px; margin: 0; }
.bg3d-notif-item {
    display:    flex;
    gap:        10px;
    padding:    10px 14px;
    border-bottom: 1px solid var(--bg3d-border, #f1f1f4);
    align-items: flex-start;
}
.bg3d-notif-item.is-read { opacity: 0.6; }
.bg3d-notif-avatar { border-radius: 50%; flex-shrink: 0; }
.bg3d-notif-body  { flex: 1; font-size: 13px; }
.bg3d-notif-body p { margin: 0 0 2px; }
.bg3d-notif-body small { color: var(--bg3d-text-dim); font-size: 11px; }
.bg3d-notif-body a { color: var(--bg3d-accent, #2d7ff9); }

/* Build-Vergleich (v3.0.0) */
.bg3d-compare-wrap   { margin: 20px 0; }
.bg3d-compare-header {
    display:        flex;
    justify-content:space-between;
    align-items:    center;
    margin-bottom:  14px;
}
.bg3d-compare-header h2 { margin: 0; font-size: 22px; color: var(--bg3d-text); }
.bg3d-compare-grid {
    display:              grid;
    grid-template-columns:1fr 1fr;
    gap:                  16px;
    margin-bottom:        24px;
}
.bg3d-compare-side {
    background:    var(--bg3d-card-bg, #fff);
    border:        1px solid var(--bg3d-border, #e1e1e8);
    border-radius: 8px;
    overflow:      hidden;
}
.bg3d-compare-side-header {
    padding:       10px 14px;
    border-bottom: 1px solid var(--bg3d-border, #e1e1e8);
    background:    var(--bg3d-bg, #f7f7fa);
}
.bg3d-compare-side-header h3 { margin: 0 0 4px; font-size: 16px; }
.bg3d-compare-side-header h3 a { color: var(--bg3d-text); text-decoration: none; }
.bg3d-compare-side-header h3 a:hover { color: var(--bg3d-accent); }
.bg3d-compare-side-meta {
    font-size: 12px;
    color: var(--bg3d-text-dim);
}
.bg3d-compare-side .bg3d-viewer-container { min-height: 350px; border-radius: 0; }
.bg3d-compare-diff {
    background:    var(--bg3d-card-bg, #fff);
    border:        1px solid var(--bg3d-border, #e1e1e8);
    border-radius: 8px;
    padding:       16px;
}
.bg3d-compare-diff h3 { margin: 0 0 8px; font-size: 16px; }
.bg3d-compare-diff-table { width: 100%; }
.bg3d-diff-pos { color: #2e7d32; font-weight: 600; }
.bg3d-diff-neg { color: #c62828; font-weight: 600; }
.bg3d-compare-picker {
    max-width:  600px;
    margin:     30px auto;
    padding:    24px;
    background: var(--bg3d-card-bg, #fff);
    border:     1px solid var(--bg3d-border, #e1e1e8);
    border-radius: 8px;
}
.bg3d-compare-picker h2 { margin: 0 0 8px; }
@media (max-width: 768px) {
    .bg3d-compare-grid   { grid-template-columns: 1fr; }
    .bg3d-compare-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Pre-Upload-Preview (v3.0.0) */
.bg3d-pre-preview {
    margin-top:    14px;
    padding:       14px;
    background:    var(--bg3d-bg, #f7f7fa);
    border:        1px solid var(--bg3d-border, #e1e1e8);
    border-radius: 8px;
}
.bg3d-pre-preview-loading {
    display:      flex;
    align-items:  center;
    gap:          10px;
    color:        var(--bg3d-text-dim);
    font-size:    13px;
}
.bg3d-pre-preview-error {
    color:        #b71c1c;
    background:   #ffebee;
    padding:      10px 12px;
    border-radius:6px;
    font-size:    13px;
}
.bg3d-pre-preview-grid {
    display:      grid;
    grid-template-columns: 200px 1fr;
    gap:          16px;
    align-items:  start;
}
#bg3d-pre-preview-canvas {
    background:   #1a1a2e;
    border-radius:6px;
    image-rendering: pixelated;
    width:        200px;
    height:       200px;
}
.bg3d-pre-preview-info h4 {
    margin:       0 0 10px;
    font-size:    14px;
    color:        var(--bg3d-text);
}
.bg3d-pre-preview-stats {
    list-style:   none;
    padding:      0;
    margin:       0;
    font-size:    12px;
}
.bg3d-pre-preview-stats li {
    display:      flex;
    justify-content: space-between;
    padding:      4px 0;
    border-bottom:1px dotted var(--bg3d-border, #e1e1e8);
}
.bg3d-pre-preview-stats li span { color: var(--bg3d-text-dim); }
.bg3d-pre-preview-mats {
    margin:       0;
    padding-left: 18px;
    font-size:    12px;
    color:        var(--bg3d-text);
}
.bg3d-pre-preview-mats li { margin: 2px 0; }
.bg3d-spinner {
    width:        14px;
    height:       14px;
    border:       2px solid var(--bg3d-border, #e1e1e8);
    border-top-color: var(--bg3d-accent, #2d7ff9);
    border-radius:50%;
    display:      inline-block;
    animation:    bg3d-spin 0.8s linear infinite;
}
@keyframes bg3d-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
    .bg3d-pre-preview-grid { grid-template-columns: 1fr; }
    #bg3d-pre-preview-canvas { width: 100%; height: auto; aspect-ratio: 1; }
}

.bg3d-file-label {
    display:     block;
    font-size:   12px;
    color:       var(--bg3d-accent);
    margin-top:  6px;
    word-break:  break-all;
}

.bg3d-progress-wrap {
    margin-top:    12px;
    background:    var(--bg3d-bg3);
    border-radius: 4px;
    overflow:      hidden;
    height:        6px;
}

.bg3d-progress-bar {
    height:          100%;
    background:      var(--bg3d-accent);
    width:           0;
    transition:      width .2s;
    border-radius:   4px;
}

.bg3d-upload-status {
    padding:       10px 14px;
    border-radius: 6px;
    font-size:     14px;
    margin-top:    14px;
}

.bg3d-status--success {
    background:  rgba(76,175,80,.12);
    border:      1px solid var(--bg3d-green);
    color:       var(--bg3d-green);
}

.bg3d-status--error {
    background:  rgba(244,67,54,.12);
    border:      1px solid var(--bg3d-red);
    color:       var(--bg3d-red);
}

.bg3d-checkbox-group {
    display:    flex;
    align-items:center;
    gap:        8px;
    font-size:  13px;
    color:      var(--bg3d-text-dim);
    cursor:     pointer;
}

.bg3d-checkbox-group input { accent-color: var(--bg3d-accent); }

/* ── Single Build Page ──────────────────────────────────────────────────────── */
.bg3d-single-wrap {
    max-width: 1100px;
    margin:    0 auto;
    padding:   20px 16px;
}

.bg3d-single-header {
    margin-bottom: 18px;
}

.bg3d-single-title {
    font-size:   28px;
    font-weight: 800;
    color:       var(--bg3d-text);
    margin:      0 0 8px;
}

.bg3d-single-meta-row {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         14px;
    color:       var(--bg3d-text-dim);
    font-size:   13px;
}

.bg3d-author-link {
    display:     flex;
    align-items: center;
    gap:         7px;
    color:       var(--bg3d-text-dim);
    text-decoration: none;
    font-weight: 600;
}

.bg3d-author-link img { border-radius: 50%; }
.bg3d-author-link:hover { color: var(--bg3d-accent); }

.bg3d-single-layout {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 320px);
    gap: 24px;
    align-items: start;
}

@media (max-width: 860px) {
    .bg3d-single-layout { grid-template-columns: 1fr; }
}

.bg3d-single-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Interaction bar */
.bg3d-interaction-bar {
    display:    flex;
    align-items:center;
    gap:        12px;
    padding:    14px 0;
    border-top: 1px solid var(--bg3d-border);
    border-bottom: 1px solid var(--bg3d-border);
    margin:     14px 0;
    flex-wrap:  wrap;
}

.bg3d-like-btn,
.bg3d-fav-btn {
    display:    flex;
    align-items:center;
    gap:        6px;
    padding:    8px 16px;
    border:     1px solid var(--bg3d-border);
    border-radius:6px;
    background: var(--bg3d-bg2);
    color:      var(--bg3d-text-dim);
    cursor:     pointer;
    font-size:  14px;
    transition: all .15s;
}

.bg3d-like-btn:hover   { border-color: #e91e63; color: #e91e63; }
.bg3d-fav-btn:hover    { border-color: var(--bg3d-yellow); color: var(--bg3d-yellow); }
.bg3d-like-btn.is-liked  { border-color:#e91e63; color:#e91e63; background: rgba(233,30,99,.08); }
.bg3d-fav-btn.is-saved   { border-color:var(--bg3d-yellow); color:var(--bg3d-yellow); background: rgba(255,193,7,.08); }

/* Build info card */
.bg3d-info-card {
    background:    var(--bg3d-bg1);
    border:        1px solid var(--bg3d-border);
    border-radius: var(--bg3d-radius);
    padding:       18px;
}

.bg3d-info-card h3 {
    font-size:    13px;
    font-weight:  700;
    color:        var(--bg3d-text-dim);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin:       0 0 12px;
}

.bg3d-info-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        8px;
}

.bg3d-info-list li {
    display:     flex;
    justify-content: space-between;
    font-size:   13px;
    color:       var(--bg3d-text-dim);
}

.bg3d-info-list li strong { color: var(--bg3d-text); font-weight: 600; }

/* Material list */
.bg3d-materials {
    background:    var(--bg3d-bg1);
    border:        1px solid var(--bg3d-border);
    border-radius: var(--bg3d-radius);
    overflow:      hidden;
}

.bg3d-materials-header {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    padding:     12px 16px;
    border-bottom: 1px solid var(--bg3d-border);
    cursor:      pointer;
}

.bg3d-materials-header h3 {
    font-size:   14px;
    margin:      0;
    color:       var(--bg3d-text);
}

.bg3d-materials-body {
    max-height: 300px;
    overflow-y: auto;
}

.bg3d-mat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.bg3d-mat-table th {
    padding:     8px 14px;
    text-align:  left;
    font-size:   11px;
    color:       var(--bg3d-text-dim);
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--bg3d-border);
    background:  var(--bg3d-bg2);
    position:    sticky;
    top:         0;
}

.bg3d-mat-table td {
    padding:     7px 14px;
    border-bottom: 1px solid rgba(46,46,90,.4);
    color:       var(--bg3d-text);
}

.bg3d-mat-table tr:hover td { background: var(--bg3d-bg2); }

/* Rating widget */
.bg3d-rating-wrap {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}

.bg3d-rating-summary {
    font-size:   18px;
    font-weight: 800;
    color:       var(--bg3d-yellow);
}

.bg3d-rating-count { font-size: 12px; color: var(--bg3d-text-dim); }

/* ── Creator Profile ────────────────────────────────────────────────────────── */
.bg3d-profile-card {
    display:       flex;
    align-items:   flex-start;
    gap:           20px;
    background:    var(--bg3d-bg1);
    border:        1px solid var(--bg3d-border);
    border-radius: var(--bg3d-radius);
    padding:       22px;
}

.bg3d-profile-avatar img {
    border-radius: 50%;
    border:        3px solid var(--bg3d-border);
}

.bg3d-profile-info { flex: 1; }
.bg3d-profile-name { font-size: 20px; font-weight: 800; color: var(--bg3d-text); margin: 0 0 6px; }
.bg3d-profile-bio  { font-size: 14px; color: var(--bg3d-text-dim); line-height: 1.6; margin: 0 0 12px; }

.bg3d-profile-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bg3d-profile-links a {
    font-size:      12px;
    color:          var(--bg3d-accent);
    text-decoration:none;
    display:        flex;
    align-items:    center;
    gap:            4px;
}

.bg3d-profile-links a:hover { text-decoration: underline; }

/* ── Toast Notifications ────────────────────────────────────────────────────── */
#bg3d-toast-container {
    position: fixed;
    bottom:   24px;
    right:    24px;
    z-index:  99999;
    display:  flex;
    flex-direction: column;
    gap: 8px;
}

.bg3d-toast {
    padding:       12px 18px;
    border-radius: 8px;
    font-size:     14px;
    font-weight:   600;
    opacity:       0;
    transform:     translateY(10px);
    transition:    opacity .25s, transform .25s;
    max-width:     320px;
    pointer-events:auto;
    box-shadow:    var(--bg3d-shadow);
}

.bg3d-toast.is-visible { opacity: 1; transform: none; }

.bg3d-toast--success { background: var(--bg3d-green);  color: #fff; }
.bg3d-toast--error   { background: var(--bg3d-red);    color: #fff; }
.bg3d-toast--info    { background: var(--bg3d-accent);  color: #000; }

/* ── Login note ─────────────────────────────────────────────────────────────── */
.bg3d-login-note {
    font-size:   14px;
    color:       var(--bg3d-text-dim);
    padding:     12px;
    background:  var(--bg3d-bg2);
    border:      1px solid var(--bg3d-border);
    border-radius:6px;
}

.bg3d-login-note a { color: var(--bg3d-accent); }

/* ── Empty / Error States ───────────────────────────────────────────────────── */
.bg3d-empty-state,
.bg3d-error {
    text-align:  center;
    padding:     40px 20px;
    color:       var(--bg3d-text-dim);
    font-size:   15px;
    grid-column: 1 / -1;
}

/* ── Load More ──────────────────────────────────────────────────────────────── */
.bg3d-load-more-wrap {
    text-align: center;
    padding:    24px 0;
}

/* ── Embed Snippet ──────────────────────────────────────────────────────────── */
.bg3d-embed-snippet {
    background:    var(--bg3d-bg0);
    border:        1px solid var(--bg3d-border);
    border-radius: var(--bg3d-radius);
    padding:       14px;
}

.bg3d-embed-snippet code {
    display:    block;
    font-family:'Courier New', monospace;
    font-size:  12px;
    color:      var(--bg3d-text-dim);
    white-space:pre-wrap;
    word-break: break-all;
    margin-bottom: 10px;
}

/* ── Related Builds ─────────────────────────────────────────────────────────── */
.bg3d-related-section h2 {
    font-size:    18px;
    font-weight:  800;
    margin:       0 0 16px;
    color:        var(--bg3d-text);
}

/* ── Fullscreen override ────────────────────────────────────────────────────── */
.bg3d-viewer-wrap:fullscreen {
    border-radius: 0;
}

.bg3d-viewer-wrap:fullscreen .bg3d-viewer-canvas-wrap {
    aspect-ratio: unset;
    height:       calc(100vh - 60px);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .bg3d-grid-items           { --bg3d-card-w: 240px; }
    .bg3d-upload-form-wrap     { padding: 16px; }
    .bg3d-profile-card         { flex-direction: column; }
    .bg3d-viewer-controls      { flex-direction: column; align-items: stretch; }
    .bg3d-layer-slider         { max-width: 100%; }
    .bg3d-single-title         { font-size: 20px; }
    #bg3d-toast-container      { right: 12px; bottom: 12px; }
}

/* ── Status badges ──────────────────────────────────────────────────────────── */
.bg3d-status {
    display:       inline-block;
    padding:       2px 8px;
    border-radius: 20px;
    font-size:     11px;
    font-weight:   700;
}

.bg3d-status--pending   { background: rgba(255,193,7,.15);  color: #ffc107; }
.bg3d-status--approved  { background: rgba(76,175,80,.15);  color: #4caf50; }
.bg3d-status--rejected  { background: rgba(244,67,54,.15);  color: #f44336; }

/* ── Disclaimer: außerhalb Viewer-Container (v1.9.0) ───────────────────── */
/* Kleiner Hinweis unter dem Build – kein Overlay mehr im Viewer.          */
.bg3d-external-wrap {
    margin-top:  6px;
}

.bg3d-disclaimer-note {
    font-size:   10px;
    line-height: 1.5;
    color:       var(--bg3d-text-dim);
    opacity:     .65;
    margin:      0;
    padding:     6px 2px 0;
    border-top:  1px solid rgba(46,46,90,.35);
}

/* Altes Overlay + altes äußeres Element verstecken */
.bg3d-disclaimer-overlay,
.bg3d-disclaimer {
    display: none !important;
}

/* Materialliste-Button in der Interaction-Bar (v1.9.0) */
.bg3d-mat-bar-btn {
    display:      flex;
    align-items:  center;
    gap:          6px;
    padding:      8px 16px;
    border:       1px solid var(--bg3d-border);
    border-radius:6px;
    background:   var(--bg3d-bg2);
    color:        var(--bg3d-text-dim);
    cursor:       pointer;
    font-size:    14px;
    transition:   all .15s;
    white-space:  nowrap;
}

.bg3d-mat-bar-btn:hover {
    border-color: var(--bg3d-accent);
    color:        var(--bg3d-accent);
}

.bg3d-mat-bar-btn.is-active {
    border-color: var(--bg3d-accent);
    color:        var(--bg3d-accent);
    background:   rgba(93,187,245,.08);
}

/* Alten Controls-Overlay-Button ausblenden falls noch im DOM */
.bg3d-ctrl-mat-btn { display: none !important; }

/* ── Materialliste: außerhalb Viewer-Container (v1.9.0) ────────────────── */
/* Normales Block-Element auf der Seite, accordion-artig auf-/zuklappbar.  */
.bg3d-materials-panel {
    margin-top:    10px;
    background:    var(--bg3d-bg1);
    border:        1px solid var(--bg3d-border);
    border-radius: var(--bg3d-radius);
    overflow:      hidden;
}

.bg3d-materials-panel.bg3d-hidden { display: none; }

.bg3d-materials-heading {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 16px;
    border-bottom:   1px solid var(--bg3d-border);
    font-size:       14px;
    font-weight:     700;
    color:           var(--bg3d-text);
    cursor:          pointer;
    user-select:     none;
    gap:             8px;
}

.bg3d-materials-heading:hover {
    background: var(--bg3d-bg2);
}

.bg3d-mat-arrow {
    font-size:  11px;
    color:      var(--bg3d-text-dim);
    transition: transform .2s;
    flex-shrink: 0;
}

.bg3d-materials-close {
    margin-left: auto;
    background:  none;
    border:      none;
    color:       var(--bg3d-text-dim);
    cursor:      pointer;
    font-size:   16px;
    padding:     0 4px;
    line-height: 1;
}
.bg3d-materials-close:hover { color: var(--bg3d-text); }

/* Scrollbarer Inhalt mit sanfter Höhen-Animation */
.bg3d-materials-body-wrap {
    max-height: 320px;
    overflow-y: auto;
    transition: max-height .25s ease;
}

.bg3d-materials-body-wrap.bg3d-mat-collapsed {
    max-height: 0;
    overflow:   hidden;
}

.bg3d-materials-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
}

.bg3d-materials-table thead th {
    padding:        8px 16px;
    text-align:     left;
    font-size:      11px;
    color:          var(--bg3d-text-dim);
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom:  1px solid var(--bg3d-border);
    background:     var(--bg3d-bg2);
    position:       sticky;
    top:            0;
}

.bg3d-materials-table tbody td {
    padding:      7px 16px;
    border-bottom:1px solid rgba(46,46,90,.3);
    color:        var(--bg3d-text);
}

.bg3d-materials-table tbody tr:last-child td { border-bottom: none; }
.bg3d-materials-table tbody tr:hover td { background: var(--bg3d-bg2); }

.bg3d-materials-total {
    padding:    10px 16px;
    font-size:  12px;
    color:      var(--bg3d-text-dim);
    border-top: 1px solid var(--bg3d-border);
    text-align: right;
    background: var(--bg3d-bg2);
}

/* Vollbild-Zustand: Container füllt den ganzen Bildschirm              */
/* Alle Overlays (Controls, Disclaimer) bleiben sichtbar,               */
/* weil sie position:absolute INNERHALB des Containers sind.            */
.bg3d-viewer-container:fullscreen,
.bg3d-viewer-container:-webkit-full-screen {
    width:     100vw !important;
    height:    100vh !important;
    max-width: none !important;
    background: #1a1a2e;
}
.bg3d-viewer-container:fullscreen canvas,
.bg3d-viewer-container:-webkit-full-screen canvas {
    width:  100% !important;
    height: 100% !important;
}

/* ── Viewer-Container: position:relative (v1.8.0) ──────────────────────────── */
/* Pflicht damit position:absolute Overlays (Disclaimer, Controls) korrekt     */
/* positioniert werden – auch im Vollbild-Modus.                                */
.bg3d-viewer-container {
    position:   relative;
    width:      100%;
    min-height: 300px;
    overflow:   hidden;
    background: var(--bg3d-bg0);
    display:    block;
}

/* Canvas füllt den Container vollständig */
.bg3d-viewer-container canvas {
    display:      block;
    width:        100% !important;
    height:       100% !important;
    touch-action: none;
    outline:      none;
}

/* ── Responsive: Mobile (v1.8.0) ───────────────────────────────────────────── */
/* Auf Smartphones sind die Overlays kompakter und touch-freundlich.            */
@media (max-width: 600px) {
    .bg3d-viewer-container { min-height: 260px; }
    .bg3d-disclaimer-note { font-size: 9px; padding: 4px 2px 0; }
    .bg3d-materials-body-wrap { max-height: 200px; }
}


/* ════════════════════════════════════════════════════════════════════════
   Blockspo v2.5.0 – neue Stile
   ════════════════════════════════════════════════════════════════════════ */

/* ── Rang-Badges ─────────────────────────────────────────────────────────── */
.bg3d-rank-badge {
    display:      inline-block;
    padding:      2px 8px;
    border-radius: 4px;
    font-size:    .75rem;
    font-weight:  700;
    line-height:  1.4;
}
.bg3d-rank-badge--user        { background: #3a3a50; color: #aaa; }
.bg3d-rank-badge--premium     { background: #7c5c00; color: #ffd700; }
.bg3d-rank-badge--moderator   { background: #1a4a2e; color: #4caf50; }
.bg3d-rank-badge--build_admin { background: #1a2a5e; color: #6fa3ef; }
.bg3d-rank-badge--admin       { background: #5e1a1a; color: #ef6f6f; }

/* ── Profil-Header (Banner + Avatar + Meta) ──────────────────────────────── */
.bg3d-profile-banner-wrap {
    width: 100%; height: 220px;
    overflow: hidden;
    background: var(--bg3d-bg2, #1a1a2e);
}
.bg3d-profile-banner-wrap--empty {
    background: linear-gradient(135deg, var(--bg3d-bg1,#0d0d1a), var(--bg3d-bg3,#252540));
}
.bg3d-profile-banner {
    width: 100%; height: 100%; object-fit: cover;
}
.bg3d-profile-header {
    display: flex; align-items: flex-end; gap: 16px;
    margin-top: -40px; padding: 0 24px 16px;
    flex-wrap: wrap;
}
.bg3d-profile-avatar-wrap { flex-shrink: 0; }
.bg3d-profile-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    border: 3px solid var(--bg3d-bg0, #0d0d1a);
    object-fit: cover;
}
.bg3d-profile-meta { flex: 1; min-width: 200px; }
.bg3d-profile-name {
    font-size: 1.4rem; font-weight: 800;
    color: var(--bg3d-text, #e8e8f8); margin: 4px 0;
}
.bg3d-profile-bio {
    color: var(--bg3d-text-dim, #8888aa);
    font-size: .9rem; margin: 4px 0 8px;
}
.bg3d-follow-stats { display: flex; gap: 16px; flex-wrap: wrap; }
.bg3d-follow-stat  { font-size: .85rem; color: var(--bg3d-text-dim, #8888aa); }
.bg3d-follow-stat strong { color: var(--bg3d-text, #e8e8f8); }
.bg3d-follow-btn {
    padding: 8px 20px; border-radius: 6px;
    font-weight: 700; cursor: pointer;
    border: 2px solid var(--bg3d-accent, #5dbbf5);
    color: var(--bg3d-accent, #5dbbf5);
    background: transparent; transition: .2s;
}
.bg3d-follow-btn:hover,
.bg3d-follow-btn.is-following {
    background: var(--bg3d-accent, #5dbbf5); color: #fff;
}

/* ── Such-Leiste ─────────────────────────────────────────────────────────── */
.bg3d-search-bar-wrap { width: 100%; }
.bg3d-search-controls {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.bg3d-search-input-wrap { position: relative; flex: 1; min-width: 200px; }
.bg3d-search-input {
    width: 100%; padding: 10px 14px;
    background: var(--bg3d-bg2, #1a1a2e);
    border: 1px solid var(--bg3d-border, #2e2e5a);
    border-radius: 8px;
    color: var(--bg3d-text, #e8e8f8);
    font-size: .95rem; box-sizing: border-box;
}
.bg3d-search-filter {
    padding: 10px 12px;
    background: var(--bg3d-bg2, #1a1a2e);
    border: 1px solid var(--bg3d-border, #2e2e5a);
    border-radius: 8px;
    color: var(--bg3d-text, #e8e8f8);
    font-size: .88rem; cursor: pointer;
}
.bg3d-search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.bg3d-search-card {
    display: flex; flex-direction: column;
    background: var(--bg3d-bg2, #1a1a2e);
    border: 1px solid var(--bg3d-border, #2e2e5a);
    border-radius: 10px; overflow: hidden;
    text-decoration: none; transition: .2s;
}
.bg3d-search-card:hover {
    border-color: var(--bg3d-accent, #5dbbf5);
    transform: translateY(-2px);
}
.bg3d-search-card__thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.bg3d-search-card__thumb--empty {
    background: var(--bg3d-bg3, #252540); aspect-ratio: 16/9;
}
.bg3d-search-card__body   { padding: 10px; }
.bg3d-search-card__title  { font-size: .9rem; font-weight: 700; color: var(--bg3d-text, #e8e8f8); margin: 0 0 4px; }
.bg3d-search-card__meta   { font-size: .8rem; color: var(--bg3d-text-dim, #8888aa); margin: 0; }

/* ── Top-Builds-Streifen ─────────────────────────────────────────────────── */
.bg3d-top-builds-wrap    { margin: 16px 0; }
.bg3d-top-builds-heading { font-size: 1.1rem; font-weight: 800; color: var(--bg3d-text, #e8e8f8); margin-bottom: 12px; }
.bg3d-top-builds-scroll  {
    display: flex; gap: 12px;
    overflow-x: auto; padding-bottom: 8px;
    scrollbar-width: thin;
}
.bg3d-top-card {
    display: flex; flex-direction: column;
    min-width: 160px; max-width: 180px;
    background: var(--bg3d-bg2, #1a1a2e);
    border: 1px solid var(--bg3d-border, #2e2e5a);
    border-radius: 10px; overflow: hidden;
    text-decoration: none; flex-shrink: 0;
    transition: .2s; position: relative;
}
.bg3d-top-card:hover { border-color: var(--bg3d-accent, #5dbbf5); }
.bg3d-top-card__rank {
    position: absolute; top: 6px; left: 6px;
    background: rgba(0,0,0,.6); color: #fff;
    font-weight: 900; font-size: .8rem;
    padding: 2px 6px; border-radius: 4px;
}
.bg3d-top-card__thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.bg3d-top-card__thumb--empty { background: var(--bg3d-bg3, #252540); aspect-ratio: 16/9; }
.bg3d-top-card__body   { padding: 8px; }
.bg3d-top-card__title  {
    font-size: .82rem; font-weight: 700;
    color: var(--bg3d-text, #e8e8f8); margin: 0 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bg3d-top-card__meta   { font-size: .75rem; color: var(--bg3d-text-dim, #8888aa); margin: 0; }

/* ── Mein Konto ──────────────────────────────────────────────────────────── */
.bg3d-my-account { color: var(--bg3d-text, #e8e8f8); }
.bg3d-my-account__header {
    display: flex; align-items: center; gap: 16px;
    padding: 16px;
    background: var(--bg3d-bg2, #1a1a2e);
    border-radius: 12px; margin-bottom: 16px;
}
.bg3d-my-account__avatar {
    width: 72px; height: 72px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--bg3d-border, #2e2e5a);
}
.bg3d-my-account__nav {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bg3d-border, #2e2e5a);
    padding-bottom: 8px;
}
.bg3d-my-account__nav-link {
    padding: 8px 14px; border-radius: 6px 6px 0 0;
    color: var(--bg3d-text-dim, #8888aa);
    text-decoration: none; font-size: .9rem; transition: .15s;
}
.bg3d-my-account__nav-link.is-active,
.bg3d-my-account__nav-link:hover {
    color: var(--bg3d-accent, #5dbbf5);
    background: var(--bg3d-bg2, #1a1a2e);
}
.bg3d-my-account__content {
    background: var(--bg3d-bg1, #111122);
    border-radius: 12px; padding: 20px;
}
.bg3d-my-account__section h3 {
    font-size: 1rem; font-weight: 800;
    margin-bottom: 12px; color: var(--bg3d-text, #e8e8f8);
}
.bg3d-avatar-upload,
.bg3d-banner-upload  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bg3d-avatar-preview {
    width: 72px; height: 72px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--bg3d-border, #2e2e5a);
}
.bg3d-banner-preview {
    width: 180px; height: 50px; object-fit: cover;
    border-radius: 6px; border: 1px solid var(--bg3d-border, #2e2e5a);
}
.bg3d-banner-preview--empty { background: var(--bg3d-bg3, #252540); }
.bg3d-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0);
}

/* ── Authentifizierungsformulare ─────────────────────────────────────────── */
.bg3d-auth-wrap {
    max-width: 420px; margin: 0 auto; padding: 24px;
    background: var(--bg3d-bg2, #1a1a2e);
    border-radius: 12px; border: 1px solid var(--bg3d-border, #2e2e5a);
}
.bg3d-auth-title {
    font-size: 1.3rem; font-weight: 800;
    margin-bottom: 16px; color: var(--bg3d-text, #e8e8f8);
}
.bg3d-auth-desc { color: var(--bg3d-text-dim, #8888aa); font-size: .9rem; margin-bottom: 12px; }
.bg3d-field-wrap { margin-bottom: 14px; }
.bg3d-field-wrap label { display: block; font-size: .85rem; color: var(--bg3d-text-dim, #8888aa); margin-bottom: 4px; }
.bg3d-field-wrap input[type=text],
.bg3d-field-wrap input[type=email],
.bg3d-field-wrap input[type=password],
.bg3d-field-wrap input[type=url],
.bg3d-field-wrap textarea,
.bg3d-field-wrap select {
    width: 100%; padding: 9px 12px;
    background: var(--bg3d-bg1, #111122);
    border: 1px solid var(--bg3d-border, #2e2e5a);
    border-radius: 6px; color: var(--bg3d-text, #e8e8f8);
    font-size: .92rem; box-sizing: border-box;
}
.bg3d-field-inline { display: flex; align-items: center; gap: 8px; }
.bg3d-auth-message {
    padding: 10px 14px; border-radius: 6px;
    font-size: .88rem; margin-bottom: 12px;
}
.bg3d-auth-message--ok  { background: rgba(76,175,80,.15); color: #4caf50; border: 1px solid rgba(76,175,80,.3); }
.bg3d-auth-message--err { background: rgba(239,83,80,.15);  color: #ef5350; border: 1px solid rgba(239,83,80,.3); }
.bg3d-auth-links { font-size: .85rem; color: var(--bg3d-text-dim, #8888aa); margin-top: 12px; }
.bg3d-auth-links a { color: var(--bg3d-accent, #5dbbf5); text-decoration: none; }
.bg3d-text-dim { color: var(--bg3d-text-dim, #8888aa); }

/* ── v5.2: Kommentar-Formular — Abschicken-Button deutlich sichtbar ─────────
   Task „Kommentar Abschicken Button noch besser sichtbar machen": Der Standard-
   WP-Submit erbte unauffällige Theme-Styles. Jetzt: Akzentfarbe, volle Breite
   auf Mobile, klarer Hover/Focus-Zustand. */
.single-build #commentform .form-submit { margin-top: 16px; }
.single-build #commentform .form-submit .submit,
.single-build #commentform input[type="submit"] {
    display: inline-block;
    background: var(--bg3d-accent, #f97316);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    padding: 14px 28px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.single-build #commentform .form-submit .submit:hover,
.single-build #commentform input[type="submit"]:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.45);
}
.single-build #commentform .form-submit .submit:focus-visible,
.single-build #commentform input[type="submit"]:focus-visible {
    outline: 3px solid rgba(249, 115, 22, 0.5);
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .single-build #commentform .form-submit .submit,
    .single-build #commentform input[type="submit"] { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   Blockspo v6 – Seiten-Toolbar, Dock mit Modus-Umschalter + Timeline
   ════════════════════════════════════════════════════════════════════════ */
.bg3d-viewer-container {
    --v-glass:  linear-gradient(180deg, rgba(10, 20, 34, 0.74) 0%, rgba(8, 16, 28, 0.9) 100%);
    --v-line:   rgba(231, 246, 255, 0.12);
    --v-text:   #e7f6ff;
    --v-accent: #0085ff;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bg3d-viewer-container:focus { outline: none; }
.bg3d-viewer-container:focus-visible { outline: 2px solid var(--v-accent); outline-offset: -2px; }
.bg3d-viewer-container button svg {
    width: 18px; height: 18px; display: block;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Größe: Build-Seite etwas höher, Embed füllt den iframe */
.viewer-frame .bg3d-viewer-container { height: clamp(420px, 68vh, 720px); min-height: 360px !important; }
.embed__viewer .bg3d-viewer-container { height: 100%; min-height: 0 !important; }

/* ── Statistik-Badge ──────────────────────────────────────────────────── */
.bg3d-stats-badge {
    position: absolute; left: 12px; top: 12px; z-index: 19;
    max-width: calc(100% - 96px);
    padding: 6px 10px;
    background: var(--v-glass);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--v-line); border-radius: 8px;
    color: rgba(231, 246, 255, 0.85);
    font-size: 11px; letter-spacing: 0.02em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    pointer-events: none; user-select: none;
}

/* ── Seiten-Toolbar ───────────────────────────────────────────────────── */
.bg3d-side-toolbar {
    position: absolute; top: 12px; right: 12px; z-index: 20;
    display: flex; flex-direction: column; gap: 8px;
}
.bg3d-tb-group {
    display: flex; flex-direction: column;
    background: var(--v-glass);
    backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid var(--v-line); border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.bg3d-tb-btn {
    width: 38px; height: 38px; padding: 0;
    display: grid; place-items: center;
    background: transparent; border: 0; border-radius: 0;
    color: var(--v-text); cursor: pointer;
    transition: background-color .15s, color .15s;
    touch-action: manipulation;
}
.bg3d-tb-btn + .bg3d-tb-btn { border-top: 1px solid var(--v-line); }
.bg3d-tb-btn:hover { background: rgba(0, 133, 255, 0.22); color: #fff; }
.bg3d-tb-btn:focus-visible { outline: 2px solid var(--v-accent); outline-offset: -2px; }
.bg3d-tb-btn.bg3d-tb-active { background: rgba(0, 133, 255, 0.38); color: #fff; }

/* ── Dock (Modus + Timeline) ──────────────────────────────────────────── */
.bg3d-dock {
    position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 21;
    display: flex; flex-direction: column; gap: 8px;
    padding: 8px 10px;
    background: var(--v-glass);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--v-line); border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    color: var(--v-text);
}
.bg3d-dock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.bg3d-seg {
    display: inline-flex; gap: 2px; padding: 3px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--v-line); border-radius: 10px;
}
.bg3d-seg .bg3d-mode-btn {
    flex: 0 0 auto; min-height: 30px; padding: 0 14px;
    background: transparent; border: 0; border-radius: 8px; box-shadow: none;
    color: rgba(231, 246, 255, 0.72);
    font-family: inherit; font-weight: 600; font-size: 12.5px; line-height: 1;
    cursor: pointer; transition: background-color .15s, color .15s;
}
.bg3d-seg .bg3d-mode-btn:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.bg3d-seg .bg3d-mode-btn.bg3d-mode-btn-active {
    background: var(--v-accent); color: #fff;
    box-shadow: 0 2px 10px rgba(0, 133, 255, 0.35);
}

.bg3d-steps { display: flex; gap: 4px; }
.bg3d-step-btn,
.bg3d-speed-btn {
    height: 30px; min-width: 30px; padding: 0 8px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--v-line); border-radius: 8px;
    color: var(--v-text); cursor: pointer;
    font-family: inherit; font-weight: 600; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums;
    transition: background-color .15s, border-color .15s;
    touch-action: manipulation;
}
.bg3d-step-btn svg { width: 16px; height: 16px; }
.bg3d-step-btn:hover,
.bg3d-speed-btn:hover { background: rgba(0, 133, 255, 0.22); border-color: rgba(0, 133, 255, 0.5); }

.bg3d-timeline { display: flex; align-items: center; gap: 10px; }
.bg3d-play-btn {
    flex: 0 0 auto; width: 36px; height: 36px; padding: 0;
    display: grid; place-items: center;
    background: var(--v-accent); color: #fff;
    border: 0; border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 133, 255, 0.4);
    cursor: pointer; transition: background-color .15s, transform .12s;
    touch-action: manipulation;
}
.bg3d-play-btn:hover { background: #2b97ff; transform: scale(1.05); }
.bg3d-play-btn svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.bg3d-play-btn:not(.is-playing) svg { margin-left: 2px; }
.bg3d-timeline-label {
    flex: 0 0 auto; min-width: 104px; text-align: right;
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: rgba(231, 246, 255, 0.9); white-space: nowrap;
}
.bg3d-speed-btn { flex: 0 0 auto; min-width: 38px; }

/* Timeline-Regler */
.bg3d-timeline-range {
    --progress: 100%;
    flex: 1 1 auto; min-width: 0; height: 24px; margin: 0;
    background: transparent; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    accent-color: var(--v-accent);
}
.bg3d-timeline-range:focus { outline: none; }
.bg3d-timeline-range:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 2px; border-radius: 6px; }
.bg3d-timeline-range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, var(--v-accent) 0 var(--progress), rgba(255, 255, 255, 0.16) var(--progress) 100%);
}
.bg3d-timeline-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; margin-top: -5px;
    background: #fff; border: 3px solid var(--v-accent); border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.bg3d-timeline-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.bg3d-timeline-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--v-accent); }
.bg3d-timeline-range::-moz-range-thumb {
    width: 10px; height: 10px;
    background: #fff; border: 3px solid var(--v-accent); border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ── Kompakte / schmale Viewer (Klassen setzt viewer.js in _onResize) ─── */
.bg3d-compact .bg3d-tb-group--extra { display: none; }
.bg3d-compact .bg3d-steps,
.bg3d-narrow .bg3d-steps { display: none; }
.bg3d-narrow .bg3d-stats-badge { left: 8px; top: 8px; font-size: 10px; padding: 4px 8px; }
.bg3d-narrow .bg3d-side-toolbar { top: 8px; right: 8px; gap: 6px; }
.bg3d-narrow .bg3d-dock { left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; gap: 6px; }
.bg3d-narrow .bg3d-seg .bg3d-mode-btn { padding: 0 10px; font-size: 12px; }
.bg3d-narrow .bg3d-timeline { gap: 8px; }
.bg3d-narrow .bg3d-timeline-label { min-width: 0; font-size: 11px; }
.bg3d-tiny .bg3d-dock-row--modes,
.bg3d-tiny .bg3d-stats-badge { display: none; }
.bg3d-tiny .bg3d-tb-btn { width: 32px; height: 32px; }
.bg3d-tiny .bg3d-tb-btn svg { width: 16px; height: 16px; }
/* Sehr flache Viewer (Mini-Embeds): Toolbar waagerecht oben rechts, damit sie das Dock nicht überdeckt */
.bg3d-tiny .bg3d-side-toolbar { flex-direction: row; top: 6px; right: 6px; gap: 6px; }
.bg3d-tiny .bg3d-tb-group { flex-direction: row; }
.bg3d-tiny .bg3d-tb-btn + .bg3d-tb-btn { border-top: 0; border-left: 1px solid var(--v-line); }

/* ── Interaktions-Sperre: erst nach Klick/Tipp/Enter steuerbar ─────────── */
.bg3d-lock {
    position: absolute; inset: 0; z-index: 15;
    width: 100%; height: 100%; margin: 0; border: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0 0 var(--dock-h, 0px);
    background: rgba(8, 18, 29, 0.14);
    color: var(--v-text); font: inherit; font-family: inherit;
    cursor: pointer;
    transition: opacity .2s ease, visibility .2s;
}
.bg3d-lock:focus-visible { outline: none; }
.bg3d-lock__pill {
    display: inline-flex; align-items: center; gap: 10px;
    max-width: calc(100% - 24px);
    padding: 10px 16px;
    background: var(--v-glass);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--v-line); border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    font-size: 13px; font-weight: 500; line-height: 1.2;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.bg3d-lock:hover .bg3d-lock__pill { transform: translateY(-1px); border-color: rgba(0, 133, 255, 0.55); }
.bg3d-lock:focus-visible .bg3d-lock__pill,
.bg3d-viewer-container:focus-visible .bg3d-lock__pill { box-shadow: 0 0 0 2px var(--v-accent), 0 10px 30px rgba(0, 0, 0, 0.35); }
.bg3d-lock__pill svg { width: 18px; height: 18px; flex: 0 0 auto; color: #6cbcff; }
.bg3d-lock__kbd { display: none; color: rgba(231, 246, 255, 0.7); white-space: nowrap; }
.bg3d-lock:focus-visible .bg3d-lock__kbd,
.bg3d-viewer-container:focus-visible .bg3d-lock__kbd { display: inline; }
.bg3d-lock kbd {
    padding: 2px 6px; border: 1px solid var(--v-line); border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    font-family: inherit; font-weight: 600; font-size: 11px; line-height: 1;
}
.bg3d-unlocked .bg3d-lock { opacity: 0; visibility: hidden; pointer-events: none; }
.bg3d-unlocked canvas { cursor: grab; }
.bg3d-unlocked canvas:active { cursor: grabbing; }
.bg3d-narrow .bg3d-lock__pill,
.bg3d-tiny .bg3d-lock__pill { gap: 8px; padding: 8px 12px; font-size: 12px; }

/* ── Showcase: dekorativer Hero-Viewer ohne UI (cfg.showcase) ─────────── */
.bg3d-viewer-container.bg3d-showcase {
    position: absolute !important; inset: 0;
    width: 100%; height: 100%;
    min-height: 0 !important;
    background: transparent !important;
    pointer-events: none; user-select: none; outline: none;
}
.bg3d-showcase canvas {
    pointer-events: none;
    touch-action: auto;
    opacity: 1;
    transition: opacity .5s ease;
}
.bg3d-showcase.bg3d-loading canvas { opacity: 0; }
.bg3d-showcase .bg3d-loader,
.bg3d-showcase.bg3d-error { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .bg3d-showcase canvas { transition: none; }
}

/* ── v7: Himmel & Licht ───────────────────────────────────────────────── */
.bg3d-env-panel {
    position: absolute; top: 12px; right: 60px; z-index: 30;
    width: min(272px, calc(100% - 84px)); max-height: calc(100% - 24px); overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
    padding: 10px;
    background: var(--v-glass);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--v-line); border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    color: var(--v-text);
}
.bg3d-env-title {
    margin: 2px 4px 6px; font-family: inherit; font-weight: 600; font-size: 11px; line-height: 1.2;
    letter-spacing: .06em; text-transform: uppercase; color: rgba(231, 246, 255, 0.6);
}
.bg3d-env-title:not(:first-child) { margin-top: 12px; }
.bg3d-env-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.bg3d-env-opt {
    display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 30px; margin: 0; padding: 4px 8px;
    overflow-wrap: anywhere; hyphens: auto;
    background: rgba(0, 0, 0, 0.22); border: 1px solid transparent; border-radius: 9px;
    color: rgba(231, 246, 255, 0.85); font-family: inherit; font-weight: 500; font-size: 12px; line-height: 1.2; text-align: left;
    cursor: pointer; transition: background-color .15s, border-color .15s;
}
.bg3d-env-opt:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.bg3d-env-opt:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 1px; }
.bg3d-env-opt.is-active { border-color: var(--v-accent); background: rgba(0, 133, 255, 0.22); color: #fff; }
.bg3d-env-swatch {
    flex: 0 0 auto; width: 14px; height: 14px; border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.25); background: #666;
}
.bg3d-env-swatch[data-light="standard"]  { background: linear-gradient(135deg, #fff 0%, #9aa7c0 100%); }
.bg3d-env-swatch[data-light="minecraft"] { background: linear-gradient(90deg, #fff 0 33%, #ccc 33% 66%, #999 66%); }
.bg3d-env-swatch[data-light="sun"]       { background: radial-gradient(circle at 30% 30%, #ffe2b0, #c9772a); }
.bg3d-env-swatch[data-light="night"]     { background: radial-gradient(circle at 70% 70%, #ffc070 0 25%, #1a2250 30%); }
@media (max-width: 480px) { .bg3d-env-options { grid-template-columns: 1fr; } }