/**
 * BuildGuide3D – 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; }

.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;
}

/* ── Controls-Overlay UNTEN im Container (v1.8.0) ─────────────────────── */
/* Alle Steuerelemente INNERHALB des Containers (position:absolute).     */
/* Dadurch sind sie auch im Vollbild-Modus sichtbar.                     */
.bg3d-controls-overlay {
    position:      absolute;
    bottom:        0;
    left:          0;
    right:         0;
    z-index:       10;
    background:    rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    padding:       7px 10px;
    display:       flex;
    flex-direction:column;
    gap:           5px;
    pointer-events:auto;
}

/* Zeilen im Controls-Overlay */
.bg3d-ctrl-row {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}

.bg3d-ctrl-mode-row {
    gap: 5px;
}

.bg3d-ctrl-slider-wrap {
    gap: 6px;
}

.bg3d-ctrl-bottom-row {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

/* Layer-Label */
.bg3d-ctrl-layer-label {
    font-size:   11px;
    color:       rgba(255,255,255,.60);
    white-space: nowrap;
    min-width:   90px;
}

/* Zoom-Gruppe */
.bg3d-ctrl-zoom-group {
    display:     flex;
    align-items: center;
    gap:         5px;
    flex:        1 1 auto;
    min-width:   140px;
    max-width:   260px;
}

.bg3d-ctrl-zoom-label {
    font-size:    13px;
    flex-shrink:  0;
    opacity:      .7;
}

.bg3d-zoom-slider {
    flex:         1 1 60px;
    accent-color: var(--bg3d-accent);
    cursor:       pointer;
    height:       4px;
    min-width:    60px;
}

.bg3d-ctrl-zoom-btn {
    width:         28px;
    height:        28px;
    flex-shrink:   0;
    background:    rgba(255,255,255,.12);
    border:        1px solid rgba(255,255,255,.20);
    border-radius: 4px;
    color:         #fff;
    font-size:     16px;
    line-height:   1;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background .15s;
    padding:       0;
    touch-action:  manipulation;
}

.bg3d-ctrl-zoom-btn:hover { background: rgba(255,255,255,.25); }

/* 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-Button ────────────────────────────────────────────────────────── */
.bg3d-fullscreen-btn {
    position:      absolute;
    top:           10px;
    right:         10px;
    z-index:       20;
    width:         36px;
    height:        36px;
    padding:       0;
    background:    rgba(0,0,0,.55);
    border:        1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    color:         #fff;
    font-size:     18px;
    line-height:   1;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background .2s;
    touch-action:  manipulation;
}
.bg3d-fullscreen-btn:hover { background: rgba(0,0,0,.8); }

/* 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;
}

/* ── Modus-Auswahl (v1.9.0 – besser erkennbar) ─────────────────────────────── */
.bg3d-mode-btn {
    flex:          1;
    padding:       7px 10px;
    background:    rgba(255,255,255,.07);
    border:        1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    color:         rgba(255,255,255,.55);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .15s, color .15s, border-color .15s;
    touch-action:  manipulation;
    white-space:   nowrap;
    letter-spacing:.01em;
    min-height:    34px;
}
.bg3d-mode-btn:hover {
    background:   rgba(255,255,255,.15);
    color:        #fff;
    border-color: rgba(255,255,255,.35);
}
.bg3d-mode-btn-active {
    background:   rgba(74,144,217,.35);
    border-color: #4a90d9;
    color:        #fff;
    box-shadow:   0 0 0 1px rgba(74,144,217,.4);
}

/* Ebenen-Slider im Controls-Overlay */
.bg3d-layer-slider {
    flex:         1 1 60px;
    min-width:    60px;
    accent-color: var(--bg3d-accent);
    cursor:       pointer;
    height:       4px;
}

/* ── 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) {
    /* Viewer-Container Mindesthöhe auf Mobile */
    .bg3d-viewer-container {
        min-height: 260px;
    }

    /* Controls-Overlay: etwas kleiner auf Mobile */
    .bg3d-controls-overlay {
        padding:   5px 8px;
        gap:       4px;
    }

    /* Modus-Buttons: kleiner Text, trotzdem gut tippbar */
    .bg3d-mode-btn {
        font-size: 11px;
        padding:   5px 4px;
    }

    /* Zoom-Gruppe: volle Breite auf Mobile */
    .bg3d-ctrl-zoom-group {
        min-width: 100px;
        max-width: 100%;
        flex:      1 1 auto;
    }

    /* Materialliste-Button */
    .bg3d-ctrl-mat-btn {
        font-size: 11px;
        padding:   4px 8px;
    }

    /* Layer-Label kürzer */
    .bg3d-ctrl-layer-label {
        min-width: 70px;
        font-size: 10px;
    }

    /* Disclaimer außen: etwas kleiner auf Mobile */
    .bg3d-disclaimer-note {
        font-size: 9px;
        padding:   4px 2px 0;
    }

    /* Materialliste außen: etwas kompakter auf Mobile */
    .bg3d-materials-body-wrap {
        max-height: 200px;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   BuildGuide3D 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; }

/* ── Kamera-Reset-Button ─────────────────────────────────────────────────── */
.bg3d-reset-camera-btn {
    position: absolute; top: 44px; right: 8px; z-index: 20;
    background: rgba(13,13,26,.75);
    border: 1px solid var(--bg3d-border, #2e2e5a);
    color: var(--bg3d-accent, #5dbbf5);
    border-radius: 6px; padding: 5px 9px;
    font-size: 1rem; cursor: pointer;
    backdrop-filter: blur(4px); line-height: 1;
    transition: background .15s;
}
.bg3d-reset-camera-btn:hover { background: rgba(93,187,245,.15); }

/* ── Mobiler Controls-Toggle ─────────────────────────────────────────────── */
.bg3d-controls-toggle {
    display: none;
    position: absolute; bottom: 56px; right: 8px; z-index: 21;
    background: rgba(13,13,26,.85);
    border: 1px solid var(--bg3d-border, #2e2e5a);
    color: var(--bg3d-text, #e8e8f8);
    border-radius: 6px; padding: 6px 10px;
    font-size: 1rem; cursor: pointer;
}
.bg3d-controls-panel--hidden { display: none !important; }
@media (max-width: 600px) {
    .bg3d-controls-toggle   { display: block; }
    .bg3d-viewer-container  { min-height: 300px; }
    .bg3d-controls-overlay  { max-width: calc(100% - 16px); }
}

/* ── 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); }