/* Neura3D - Shell-integrated styles */

:root {

    --n3d-primary: #0ea5e9;

}



/* Stats Bar - Full width above content */

.n3d-stats-bar {
    flex: 0 0 100%;
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;

    padding: 16px 0;

    margin-bottom: 20px;

    border-bottom: 1px solid var(--border-color);

}

.n3d-stats-inline {

    display: flex;

    gap: 24px;

    font-size: 14px;

    color: var(--text-muted);

}

.n3d-stats-inline strong { color: var(--text-primary); margin-right: 4px; }

.n3d-category-pills {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}

.n3d-pill {

    padding: 6px 14px;

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: 20px;

    font-size: 13px;

    color: var(--text-muted);

    text-decoration: none;

    transition: all 0.2s;

}

.n3d-pill:hover { border-color: var(--n3d-primary); color: var(--n3d-primary); }

.n3d-pill.active {

    background: var(--n3d-primary);

    border-color: var(--n3d-primary);

    color: #fff;

}



/* Browse Layout - Main + Sidebar */

.n3d-browse-layout {
    flex: 0 0 100%;
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 300px;

    gap: 24px;

}

.n3d-browse-main { min-width: 0; }

.n3d-browse-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    flex-wrap: wrap;

    gap: 12px;

}

.n3d-browse-header h2 { margin: 0; font-size: 18px; font-weight: 600; }



/* View Controls */

.n3d-view-controls {

    display: flex;

    align-items: center;

    gap: 12px;

}

.n3d-view-toggle {

    display: flex;

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: 6px;

    overflow: hidden;

}

.n3d-view-toggle button {

    padding: 8px 12px;

    background: none;

    border: none;

    color: var(--text-muted);

    cursor: pointer;

    transition: all 0.2s;

}

.n3d-view-toggle button:hover { color: var(--text-primary); }

.n3d-view-toggle button.active {

    background: var(--n3d-primary);

    color: #fff;

}

.n3d-column-controls {

    display: flex;

    border: 1px solid var(--border-color);

    border-radius: 6px;

    overflow: hidden;

}

.n3d-column-controls button {

    padding: 8px 12px;

    background: var(--bg-secondary);

    border: none;

    border-right: 1px solid var(--border-color);

    color: var(--text-muted);

    cursor: pointer;

    font-size: 13px;

    transition: all 0.2s;

}

.n3d-column-controls button:last-child { border-right: none; }

.n3d-column-controls button:hover { color: var(--text-primary); }

.n3d-column-controls button.active {

    background: var(--n3d-primary);

    color: #fff;

}

.n3d-sort-select {

    padding: 8px 12px;

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: 6px;

    color: var(--text-primary);

    font-size: 13px;

    cursor: pointer;

}



/* Designs Grid */

.n3d-designs-grid {

    display: grid;

    gap: 20px;

}

.n3d-designs-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.n3d-designs-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.n3d-designs-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }



/* List View */

.n3d-designs-list { display: flex; flex-direction: column; gap: 16px; }

.n3d-designs-list .n3d-design-card {

    display: grid;

    grid-template-columns: 240px 1fr;

}

.n3d-designs-list .n3d-design-image { aspect-ratio: 16/9; max-height: 450px; }



/* Design Card */

.n3d-design-card {

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    overflow: hidden;

    transition: transform 0.2s, box-shadow 0.2s;

}

.n3d-design-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 24px rgba(0,0,0,0.2);

}

.n3d-design-image {

    position: relative;

    aspect-ratio: 4/3;

    background: var(--bg-primary);

    cursor: pointer;

    overflow: hidden;

}

.n3d-design-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s;

}

.n3d-design-card:hover .n3d-design-image img {

    transform: scale(1.05);

}

.n3d-design-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 40px;

    color: var(--text-muted);

}

.n3d-quickview-btn {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 36px;

    height: 36px;

    background: rgba(0,0,0,0.7);

    border: none;

    border-radius: 8px;

    color: #fff;

    cursor: pointer;

    opacity: 0;

    transition: opacity 0.2s;

    display: flex;

    align-items: center;

    justify-content: center;

}

.n3d-design-card:hover .n3d-quickview-btn { opacity: 1; }

.n3d-quickview-btn:hover { background: var(--n3d-primary); }

.n3d-image-count {

    position: absolute;

    bottom: 10px;

    right: 10px;

    padding: 4px 10px;

    background: rgba(0,0,0,0.7);

    border-radius: 6px;

    font-size: 12px;

    color: #fff;

}

.n3d-design-info { padding: 14px; }

.n3d-design-title {

    font-weight: 600;

    font-size: 14px;

    margin-bottom: 10px;

    line-height: 1.3;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.n3d-design-author {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

}

.n3d-design-author a {

    color: var(--text-muted);

    text-decoration: none;

    font-size: 13px;

}

.n3d-design-author a:hover { color: var(--n3d-primary); }

.n3d-avatar-sm {

    width: 24px;

    height: 24px;

    background: var(--n3d-primary);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    font-weight: 600;

    color: #fff;

    flex-shrink: 0;

}

.n3d-design-stats {

    display: flex;

    gap: 14px;

    font-size: 12px;

    color: var(--text-muted);

}

.n3d-design-stats span { display: flex; align-items: center; gap: 5px; }



/* Sidebar */

.n3d-browse-sidebar {}

.n3d-sidebar-section {

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 16px;

    margin-bottom: 16px;

}

.n3d-sidebar-section h3 {

    margin: 0 0 14px 0;

    font-size: 15px;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 8px;

}

.n3d-creators-list { display: flex; flex-direction: column; gap: 10px; }

.n3d-creator-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px;

    background: var(--bg-primary);

    border-radius: 10px;

    text-decoration: none;

    color: inherit;

    transition: background 0.2s;

}

.n3d-creator-item:hover { background: var(--border-color); }

.n3d-creator-rank {

    font-size: 12px;

    font-weight: 700;

    color: var(--text-muted);

    min-width: 24px;

}

.n3d-creator-info { flex: 1; min-width: 0; }

.n3d-creator-name {

    font-weight: 600;

    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.n3d-creator-stats {

    font-size: 12px;

    color: var(--text-muted);

    margin-top: 2px;

}



/* Quick View Modal */

.n3d-modal-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0,0,0,0.9);

    z-index: 10000;

    align-items: center;

    justify-content: center;

}

.n3d-qv-nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 50px;

    height: 50px;

    background: rgba(255,255,255,0.1);

    border: none;

    border-radius: 50%;

    color: #fff;

    font-size: 18px;

    cursor: pointer;

    z-index: 10;

    transition: background 0.2s;

}

.n3d-qv-nav:hover { background: rgba(255,255,255,0.2); }

.n3d-qv-nav.prev { left: 20px; }

.n3d-qv-nav.next { right: 20px; }

.n3d-qv-content {

    background: var(--bg-primary);

    border-radius: 16px;

    width: 90%;

    max-width: 1000px;

    max-height: 85vh;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}

.n3d-qv-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 20px;

    border-bottom: 1px solid var(--border-color);

}

.n3d-qv-header h3 {

    margin: 0;

    font-size: 16px;

    display: flex;

    align-items: center;

    gap: 8px;

}

.n3d-qv-close {

    width: 36px;

    height: 36px;

    background: var(--bg-secondary);

    border: none;

    border-radius: 8px;

    color: var(--text-muted);

    font-size: 18px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}

.n3d-qv-close:hover { background: var(--border-color); color: var(--text-primary); }

.n3d-qv-body {

    display: grid;

    grid-template-columns: 1fr 320px;

    flex: 1;

    overflow: hidden;

}

.n3d-qv-gallery {

    padding: 20px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    background: #000;

}

.n3d-qv-main-image {

    position: relative;

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 300px;

}

.n3d-qv-main-image img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}

.n3d-qv-img-nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 40px;

    height: 40px;

    background: rgba(255,255,255,0.1);

    border: none;

    border-radius: 50%;

    color: #fff;

    cursor: pointer;

    transition: background 0.2s;

}

.n3d-qv-img-nav:hover { background: rgba(255,255,255,0.2); }

.n3d-qv-img-nav.prev { left: 10px; }

.n3d-qv-img-nav.next { right: 10px; }

.n3d-qv-thumbs {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    padding: 4px;

}

.n3d-qv-thumbs img {

    width: 70px;

    height: 50px;

    object-fit: cover;

    border-radius: 6px;

    cursor: pointer;

    opacity: 0.5;

    transition: opacity 0.2s;

    border: 2px solid transparent;

}

.n3d-qv-thumbs img:hover { opacity: 0.8; }

.n3d-qv-thumbs img.active {

    opacity: 1;

    border-color: var(--n3d-primary);

}

.n3d-qv-details {

    padding: 20px;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.n3d-qv-details h2 {

    margin: 0;

    font-size: 20px;

    line-height: 1.3;

}

.n3d-qv-creator {

    display: flex;

    align-items: center;

    gap: 12px;

}

.n3d-qv-stats {

    display: flex;

    gap: 20px;

    padding: 16px;

    background: var(--bg-secondary);

    border-radius: 10px;

}

.n3d-qv-stat { text-align: center; flex: 1; }

.n3d-qv-stat-value {

    font-size: 24px;

    font-weight: 700;

    color: var(--n3d-primary);

}

.n3d-qv-stat > div:last-child {

    font-size: 12px;

    color: var(--text-muted);

    margin-top: 4px;

}

.n3d-qv-files h4 {

    margin: 0 0 12px 0;

    font-size: 14px;

    display: flex;

    align-items: center;

    gap: 8px;

}

.n3d-qv-file {

    padding: 10px 12px;

    background: var(--bg-secondary);

    border-radius: 8px;

    font-size: 13px;

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    gap: 10px;

}

.n3d-qv-file i { color: var(--n3d-primary); }

.n3d-qv-file span { color: var(--text-muted); margin-left: auto; }

.n3d-qv-actions {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: auto;

}

.n3d-text-muted { color: var(--text-muted); }



/* Empty State */

.n3d-empty {

    text-align: center;

    padding: 80px 20px;

}

.n3d-empty-icon {

    font-size: 64px;

    color: var(--text-muted);

    margin-bottom: 20px;

}

.n3d-empty-title {

    font-size: 20px;

    font-weight: 600;

    margin-bottom: 10px;

}

.n3d-empty p {

    color: var(--text-muted);

    margin-bottom: 20px;

}



/* Page layouts */

.n3d-page-narrow {

    max-width: 800px;

    margin: 0 auto;

}

.n3d-page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 24px;

}

.n3d-page-header h1 {

    margin: 0;

    font-size: 24px;

    display: flex;

    align-items: center;

    gap: 12px;

}

.n3d-link {

    color: var(--n3d-primary);

    text-decoration: none;

}

.n3d-link:hover { text-decoration: underline; }



/* Cards */

.n3d-card {

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 20px;

}

.n3d-card-header {

    margin: -20px -20px 20px -20px;

    padding: 14px 20px;

    border-bottom: 1px solid var(--border-color);

}

.n3d-card-header h3 { margin: 0; font-size: 15px; }

.n3d-mb-16 { margin-bottom: 16px; }



/* Dropzone */

.n3d-dropzone {

    border: 2px dashed var(--border-color);

    border-radius: 10px;

    padding: 30px;

    text-align: center;

    cursor: pointer;

    transition: all 0.2s;

}

.n3d-dropzone:hover {

    border-color: var(--n3d-primary);

    background: rgba(14, 165, 233, 0.05);

}

.n3d-dropzone input[type="file"] { display: none; }



/* Buttons */

.n3d-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 20px;

    border: none;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    text-decoration: none;

    transition: all 0.2s;

}

.n3d-btn-primary {

    background: var(--n3d-primary);

    color: #fff;

}

.n3d-btn-primary:hover { background: #0284c7; }

.n3d-btn-full { width: 100%; }



/* Responsive */

@media (max-width: 1100px) {

    .n3d-designs-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }

    .n3d-designs-grid.cols-6 { grid-template-columns: repeat(4, 1fr); }

}

@media (max-width: 900px) {

    .n3d-browse-layout {
    flex: 0 0 100%;
    width: 100%; grid-template-columns: 1fr; }

    .n3d-browse-sidebar { display: none; }

}

@media (max-width: 700px) {

    .n3d-designs-grid.cols-2,

    .n3d-designs-grid.cols-4,

    .n3d-designs-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }

    .n3d-qv-body { grid-template-columns: 1fr; }

    .n3d-qv-gallery { min-height: 250px; }

}

@media (max-width: 500px) {

    .n3d-designs-grid.cols-2,

    .n3d-designs-grid.cols-4,

    .n3d-designs-grid.cols-6 { grid-template-columns: 1fr; }

    .n3d-stats-inline { flex-wrap: wrap; gap: 12px; }

    .n3d-view-controls { flex-wrap: wrap; }

}




/* Force stats bar full width in shell */

.n3d-stats-bar {
    flex: 0 0 100%;
    width: 100%;

    width: 100%;

    clear: both;

    float: none;

}

.dapp-fullwidth .n3d-stats-bar,

.main-content .n3d-stats-bar {
    flex: 0 0 100%;
    width: 100%;

    width: calc(100% + 40px);

    margin-left: -20px;

    margin-right: -20px;

    padding-left: 20px;

    padding-right: 20px;

    background: var(--bg-secondary);

}




/* Wrapper for shell flex container */

.n3d-wrapper {
    overflow-y: auto;
    max-height: calc(100vh - 200px);

    width: 100%;

    padding: 24px;

}




/* Design page layout */

.n3d-design-layout {

    display: grid;

    grid-template-columns: 1fr 360px;

    gap: 24px;

}

.n3d-design-main { min-width: 0; }

.n3d-design-sidebar { }



/* Gallery */

.n3d-gallery { background: #000; border-radius: 12px; overflow: hidden; }

.n3d-gallery-main {

    position: relative;

    aspect-ratio: 16/9; max-height: 450px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.n3d-gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; }

.n3d-gallery-nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 40px;

    height: 40px;

    background: rgba(255,255,255,0.1);

    border: none;

    border-radius: 50%;

    color: #fff;

    cursor: pointer;

}

.n3d-gallery-nav.prev { left: 12px; }

.n3d-gallery-nav.next { right: 12px; }

.n3d-gallery-nav:hover { background: rgba(255,255,255,0.2); }

.n3d-gallery-count {

    position: absolute;

    bottom: 12px;

    left: 50%;

    transform: translateX(-50%);

    padding: 6px 12px;

    background: rgba(0,0,0,0.7);

    border-radius: 20px;

    font-size: 13px;

    color: #fff;

}

.n3d-gallery-thumbs {

    display: flex;

    gap: 8px;

    padding: 12px;

    overflow-x: auto;

    background: var(--bg-secondary);

}

.n3d-gallery-thumb {

    width: 80px;

    height: 60px;

    object-fit: cover;

    border-radius: 6px;

    cursor: pointer;

    opacity: 0.5;

    transition: opacity 0.2s;

    border: 2px solid transparent;

}

.n3d-gallery-thumb:hover { opacity: 0.8; }

.n3d-gallery-thumb.active { opacity: 1; border-color: var(--n3d-primary); }



/* Tabs */

.n3d-tabs {

    display: flex;

    gap: 4px;

    background: var(--bg-secondary);

    padding: 6px;

    border-radius: 10px;

    margin-bottom: 16px;

}

.n3d-tab {

    flex: 1;

    padding: 10px 16px;

    background: none;

    border: none;

    border-radius: 8px;

    color: var(--text-muted);

    font-size: 13px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    transition: all 0.2s;

}

.n3d-tab:hover { color: var(--text-primary); }

.n3d-tab.active { background: var(--n3d-primary); color: #fff; }

.n3d-tab-panel { display: none; }

.n3d-tab-panel.active { display: block; }



/* Files list */

.n3d-files { display: flex; flex-direction: column; gap: 10px; }

.n3d-file {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px;

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: 10px;

}

.n3d-file-icon {

    width: 44px;

    height: 44px;

    background: var(--n3d-primary);

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: 700;

    color: #fff;

}

.n3d-file-info { flex: 1; min-width: 0; }

.n3d-file-name {

    font-weight: 500;

    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.n3d-file-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.n3d-file-actions { display: flex; gap: 8px; }



/* Details */

.n3d-details { display: flex; flex-direction: column; gap: 12px; }

.n3d-detail {

    display: flex;

    justify-content: space-between;

    padding-bottom: 12px;

    border-bottom: 1px solid var(--border-color);

}

.n3d-detail:last-child { border-bottom: none; padding-bottom: 0; }

.n3d-detail-label { color: var(--text-muted); font-size: 13px; }

.n3d-detail-value { font-weight: 500; font-size: 13px; }

.n3d-text-success { color: #22c55e; }



/* 3D Viewer Modal */

.n3d-viewer-modal {

    display: none;

    position: fixed;

    top: 0; left: 0; right: 0; bottom: 0;

    background: rgba(0,0,0,0.95);

    z-index: 10000;

    flex-direction: column;

}

.n3d-viewer-modal.active { display: flex; }

.n3d-viewer-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 20px;

    color: #fff;

}

.n3d-viewer-canvas { flex: 1; }

.n3d-viewer-controls {

    display: flex;

    justify-content: center;

    gap: 12px;

    padding: 16px;

}

.n3d-btn-icon {

    width: 40px;

    height: 40px;

    background: rgba(255,255,255,0.1);

    border: none;

    border-radius: 8px;

    color: #fff;

    cursor: pointer;

}

.n3d-btn-icon:hover { background: rgba(255,255,255,0.2); }

.n3d-btn-secondary {

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    color: var(--text-primary);

}

.n3d-btn-sm { padding: 8px 12px; font-size: 12px; }



@media (max-width: 900px) {

    .n3d-design-layout { grid-template-columns: 1fr; }

}




/* Fix gallery overflow */

.n3d-gallery {

    background: #000;

    border-radius: 12px;

    overflow: hidden;

}

.n3d-gallery-main {

    position: relative;

    height: 400px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}

.n3d-gallery-main img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}

.n3d-design-layout {

    display: grid;

    grid-template-columns: 1fr 350px;

    gap: 24px;

    align-items: start;

}

.n3d-design-main {

    min-width: 0;

}




/* Center gallery image properly */

.n3d-gallery {

    background: #111 !important;

    border-radius: 12px !important;

    overflow: hidden !important;

}

.n3d-gallery-main {

    height: 400px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: #111 !important;

}

.n3d-gallery-main img {

    max-width: 100% !important;

    max-height: 100% !important;

    width: auto !important;

    height: auto !important;

    object-fit: contain !important;

}




/* Force gallery full width and center */

.n3d-design-main .n3d-gallery {

    width: 100% !important;

    background: #111 !important;

}

.n3d-design-main .n3d-gallery-main {

    width: 100% !important;

    height: 400px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

}