/* ═══════════════════════════════════════════════════════════
   3DSEARCH.NET – style-model.css v8 – Light/Dark
   ═══════════════════════════════════════════════════════════ */

:root {
  --accent:        #fa6400;
  --accent-h:      #e05800;
  --accent-sub:    rgba(250,100,0,0.09);
  --r:             10px;
  --r-lg:          14px;
  --r-xl:          20px;
  --trans:         0.17s ease;
  --font:          'Figtree','DM Sans',system-ui,sans-serif;
  --mono:          'JetBrains Mono','Space Mono',monospace;
  --shadow-md:     0 4px 16px rgba(0,0,0,0.10);
}

:root,[data-theme="light"] {
  --bg:            #f4f4f4;
  --bg-nav:        #ffffff;
  --bg-card:       #ffffff;
  --bg-elevated:   #f8f8f8;
  --bg-input:      #ffffff;
  --bg-tag:        #f0f0f0;
  --bg-tag-h:      #e5e5e5;
  --bg-overlay:    rgba(0,0,0,0.35);
  --text:          #111111;
  --text-dim:      #555555;
  --text-muted:    #888888;
  --border:        #e5e5e5;
  --border-h:      #cccccc;
  --nav-shadow:    0 1px 0 #e5e5e5;
}

[data-theme="dark"] {
  --bg:            #111111;
  --bg-nav:        #1a1a1a;
  --bg-card:       #1e1e1e;
  --bg-elevated:   #161616;
  --bg-input:      #222222;
  --bg-tag:        #2a2a2a;
  --bg-tag-h:      #333333;
  --bg-overlay:    rgba(0,0,0,0.65);
  --text:          #f0f0f0;
  --text-dim:      #aaaaaa;
  --text-muted:    #606060;
  --border:        #2c2c2c;
  --border-h:      #3d3d3d;
  --nav-shadow:    0 1px 0 #2c2c2c;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;transition:background var(--trans),color var(--trans)}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--border-h);border-radius:3px}

/* ─── HEADER ─────────────────────────────────────────────────── */
.header{position:sticky;top:0;z-index:100;background:var(--bg-nav);box-shadow:var(--nav-shadow);transition:background var(--trans),box-shadow var(--trans)}
.header-inner{display:flex;align-items:center;height:56px;padding:0 20px;gap:12px;max-width:1500px;margin:0 auto}
.logo{font-weight:800;font-size:1.1rem;letter-spacing:-0.4px;white-space:nowrap;flex-shrink:0;color:var(--text)}
.logo span{color:var(--accent)}
.back-btn{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text-dim);padding:6px 12px;border-radius:var(--r);transition:all var(--trans)}
.back-btn:hover{color:var(--accent);background:var(--accent-sub)}
.header-spacer{flex:1}
.header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.header-btn{height:34px;padding:0 10px;display:flex;align-items:center;gap:5px;border-radius:var(--r);color:var(--text-dim);font-size:12px;font-weight:500;transition:color var(--trans),background var(--trans)}
.header-btn:hover{color:var(--text);background:var(--bg-tag)}
.theme-btn{width:32px;height:32px;border-radius:var(--r);background:var(--bg-tag);border:1.5px solid var(--border);display:grid;place-items:center;color:var(--text-dim);flex-shrink:0;transition:all var(--trans)}
.theme-btn:hover{background:var(--bg-tag-h);color:var(--text)}
.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover}
.login-btn{height:32px;padding:0 14px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;border-radius:var(--r);transition:background var(--trans)}
.login-btn:hover{background:var(--accent-h)}
.auth-link{font-size:12px;font-weight:500;color:var(--text-dim);padding:6px 12px;border:1.5px solid var(--border);border-radius:var(--r);transition:all var(--trans)}
.auth-link:hover{border-color:var(--accent);color:var(--accent)}

/* User menu */
.user-menu-wrapper{position:relative}
.user-menu-trigger{cursor:pointer;display:flex;align-items:center;gap:4px;padding:2px;border-radius:20px}
.user-menu-caret{color:var(--text-muted);transition:transform var(--trans)}
.user-menu-wrapper.open .user-menu-caret{transform:rotate(180deg)}
.user-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;width:220px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden;z-index:300}
.user-menu-wrapper.open .user-dropdown{display:block}
.dropdown-header{padding:14px 16px;border-bottom:1px solid var(--border)}
.dropdown-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown-email{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown-items{padding:6px}
.dropdown-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;font-size:13px;color:var(--text-dim);transition:background var(--trans),color var(--trans)}
.dropdown-item:hover{background:var(--bg-tag);color:var(--text)}
.dropdown-item svg{flex-shrink:0}
.dropdown-divider{height:1px;background:var(--border);margin:4px 0}
.dropdown-danger{color:#e53}
.dropdown-danger:hover{color:#e53;background:rgba(238,85,51,.08)}

/* ─── MAIN ───────────────────────────────────────────────────── */
.main{max-width:1100px;margin:0 auto;padding:28px 24px 60px}

.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);margin-bottom:24px;flex-wrap:wrap}
.breadcrumb a{color:var(--text-dim);font-weight:500;transition:color var(--trans)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb-sep{color:var(--text-muted)}

/* ─── MODEL HERO ─────────────────────────────────────────────── */
.model-hero{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:32px;align-items:start;animation:fadeIn .35s ease both}

.img-wrap{aspect-ratio:1;background:var(--bg-elevated);border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--border);position:relative}
.img-wrap img{width:100%;height:100%;object-fit:cover}

.source-badge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;backdrop-filter:blur(8px)}
.source-badge.printables{background:rgba(250,104,49,.85);color:#fff}
.source-badge.thingiverse{background:rgba(36,139,251,.85);color:#fff}
.source-badge.myminifactory{background:rgba(45,178,128,.85);color:#fff}
.source-badge.cults3d{background:rgba(214,51,132,.85);color:#fff}
.source-badge.makerworld{background:rgba(0,174,66,.85);color:#fff}
.source-badge.makeronline{background:rgba(0,150,214,.85);color:#fff}

.wish-btn-detail{position:absolute;top:12px;right:12px;z-index:5;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border-radius:50%;color:var(--text-muted);transition:all var(--trans);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.wish-btn-detail:hover{transform:scale(1.1);color:#e53}
.wish-btn-detail svg{fill:none;stroke:currentColor;stroke-width:2}
.wish-btn-detail.active{color:#e53}
.wish-btn-detail.active svg{fill:#e53;stroke:#e53}

.col-btn-detail{position:absolute;top:12px;right:62px;z-index:5;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border-radius:50%;color:var(--text-muted);transition:all var(--trans);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.col-btn-detail:hover{transform:scale(1.1);color:var(--accent)}
.col-btn-detail svg{fill:none;stroke:currentColor;stroke-width:2}

/* Info box */
.info-box{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:18px}
.model-category{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent)}
.model-title{font-family:var(--mono);font-size:clamp(1.2rem,2.5vw,1.8rem);font-weight:700;letter-spacing:-.5px;line-height:1.2;color:var(--text)}
.model-designer{font-size:14px;color:var(--text-dim)}
.model-designer a{color:var(--accent)}
.model-designer a:hover{text-decoration:underline}

/* Stats block */
.stat-block{display:flex;border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden}
.stat-item{flex:1;padding:12px 14px;text-align:center;border-right:1px solid var(--border);background:var(--bg-card)}
.stat-item:last-child{border-right:none}
.stat-value{font-family:var(--mono);font-size:1.2rem;font-weight:700;color:var(--text);display:block;line-height:1}
.stat-label{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);display:block;margin-top:4px}

/* CTA */
.cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--accent);color:#fff;font-size:15px;font-weight:600;padding:13px 24px;border-radius:var(--r);transition:background var(--trans)}
.cta-btn:hover{background:var(--accent-h)}

/* Share */
.share-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.share-label{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-right:4px}
.share-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r);border:1.5px solid var(--border);background:var(--bg-elevated);color:var(--text-muted);transition:all var(--trans);flex-shrink:0}
.share-btn:hover{border-color:var(--accent);color:var(--accent)}
.share-copy.copied{border-color:#22c55e;color:#22c55e}

/* Tags */
.model-tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:12px;font-weight:500;color:var(--text-dim);background:var(--bg-tag);border:1.5px solid var(--border);padding:5px 12px;border-radius:20px;transition:all var(--trans)}
.tag:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-sub)}

/* Summary */
.model-summary{font-size:14px;line-height:1.75;color:var(--text-dim)}

/* Meta grid */
.meta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:36px}
.meta-item{padding:13px 16px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-card)}
.meta-label{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.meta-value{font-size:13px;font-weight:500;color:var(--text);display:flex;align-items:center;gap:6px}

/* Section divider */
.section-div{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.section-div h2{font-family:var(--mono);font-size:15px;font-weight:700;white-space:nowrap;color:var(--text)}
.section-div-line{flex:1;height:1px;background:var(--border)}
.section-div-count{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}

/* Comments */
.comment-box{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:24px;margin-bottom:36px}
.comment-item{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--border)}
.comment-item:first-child{padding-top:0}
.comment-item:last-child{border-bottom:none;padding-bottom:0}
.comment-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;object-fit:cover}
.comment-initial{width:36px;height:36px;border-radius:50%;background:var(--bg-elevated);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--text-muted);flex-shrink:0}
.comment-author{font-size:13px;font-weight:600;color:var(--text)}
.comment-date{font-size:11px;color:var(--text-muted)}
.comment-text{font-size:13px;line-height:1.6;color:var(--text-dim);margin-top:4px}
.comment-empty{font-size:13px;color:var(--text-muted);text-align:center;padding:24px 0;font-style:italic}
.login-prompt{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--bg-elevated);border:1.5px solid var(--border);border-radius:var(--r);padding:16px 20px;margin-bottom:20px}
.login-prompt p{font-size:13px;color:var(--text-dim)}
textarea{width:100%;background:var(--bg-elevated);border:1.5px solid var(--border);color:var(--text);padding:12px 14px;border-radius:var(--r);font-family:var(--font);font-size:14px;resize:vertical;outline:none;transition:border-color var(--trans)}
textarea:focus{border-color:var(--accent)}
.submit-btn{background:var(--accent);color:#fff;border:none;padding:8px 20px;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;transition:background var(--trans)}
.submit-btn:hover{background:var(--accent-h)}

/* Collection Modal */
.col-modal-overlay{position:fixed;inset:0;background:var(--bg-overlay);z-index:500;display:none;align-items:center;justify-content:center}
.col-modal-overlay.active{display:flex}
.col-modal{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);width:360px;max-width:90vw;max-height:70vh;overflow:hidden;box-shadow:var(--shadow-md)}
.col-modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.col-modal-head h3{font-size:15px;font-weight:700;margin:0}
.col-modal-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--text-muted);cursor:pointer;transition:background var(--trans)}
.col-modal-close:hover{background:var(--bg-tag)}
.col-modal-body{padding:10px;overflow-y:auto;max-height:40vh}
.col-modal-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:6px;cursor:pointer;transition:background var(--trans)}
.col-modal-item:hover{background:var(--bg-tag)}
.col-check{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--trans)}
.col-check.checked{background:var(--accent);border-color:var(--accent)}
.col-item-name{font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-dim)}
.col-item-count{font-size:12px;color:var(--text-muted);font-family:var(--mono)}
.col-modal-foot{padding:10px 16px;border-top:1px solid var(--border)}
.col-new-btn{width:100%;padding:9px;background:var(--bg-tag);border:1.5px solid var(--border);color:var(--text-dim);font-size:13px;font-weight:600;border-radius:var(--r);cursor:pointer;transition:all var(--trans)}
.col-new-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Related */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:36px}
.related-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:all var(--trans)}
.related-card:hover{border-color:var(--border-h);box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px)}
.related-card:hover .related-img img{transform:scale(1.04)}
.related-img{aspect-ratio:4/3;overflow:hidden;background:var(--bg-elevated)}
.related-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.related-body{padding:11px 13px}
.related-name{font-size:13px;font-weight:600;line-height:1.3;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.related-designer{font-size:11px;color:var(--text-muted);margin-top:3px}
.related-stats{font-size:11px;color:var(--text-muted);margin-top:3px;display:flex;gap:10px;font-family:var(--mono)}

/* Not found */
.not-found{text-align:center;padding:100px 24px}
.not-found h1{font-family:var(--mono);font-size:5rem;font-weight:700;color:var(--text-muted);line-height:1;opacity:.3}
.not-found p{color:var(--text-dim);margin:16px 0 28px;font-size:15px}
.not-found a{color:var(--accent);font-weight:600}
.not-found a:hover{text-decoration:underline}

/* Footer */
.footer-wrap{border-top:1px solid var(--border)}
.footer{padding:20px 24px;max-width:1500px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-muted)}
.footer a{color:var(--text-muted);transition:color var(--trans)}
.footer a:hover{color:var(--accent)}

@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:768px){
  .model-hero{grid-template-columns:1fr;gap:16px}
  .main{padding:16px 14px 40px}
  .header-inner{padding:0 12px;gap:8px}
  .info-box{padding:18px}
  .related-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
}