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

:root {
  --accent:        #fa6400;
  --accent-h:      #e05800;
  --accent-sub:    rgba(250,100,0,0.09);
  --r:             10px;
  --r-lg:          14px;
  --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-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;
  --card-shadow:   0 1px 3px rgba(0,0,0,0.07);
  --card-shadow-h: 0 6px 20px rgba(0,0,0,0.11);
}

[data-theme="dark"] {
  --bg:            #111111;
  --bg-nav:        #1a1a1a;
  --bg-card:       #1e1e1e;
  --bg-elevated:   #161616;
  --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;
  --card-shadow:   0 1px 4px rgba(0,0,0,0.3);
  --card-shadow-h: 0 6px 24px rgba(0,0,0,0.4);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
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}
img{max-width:100%;display:block}
::-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)}
.header-inner{max-width:1400px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;gap:10px}
.logo{font-weight:800;font-size:1.1rem;color:var(--text);letter-spacing:-0.4px}
.logo span{color:var(--accent)}
.back-btn{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--text-dim);padding:6px 10px;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:8px}
.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)}
.login-btn{height:32px;padding:0 14px;display:inline-flex;align-items:center;background:var(--accent);color:#fff;font-size:12px;font-weight:600;border-radius:var(--r);transition:background var(--trans)}
.login-btn:hover{background:var(--accent-h)}
.avatar{width:30px;height:30px;border-radius:50%;cursor:pointer;object-fit:cover}
.user-menu-wrapper{position:relative}
.user-menu-trigger{cursor:pointer;display:flex;align-items:center;gap:4px}
.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:200}
.user-menu-wrapper.open .user-dropdown{display:block}
.dropdown-header{padding:13px 16px;border-bottom:1px solid var(--border)}
.dropdown-name{font-size:14px;font-weight:600}
.dropdown-email{font-size:11px;color:var(--text-muted);margin-top:2px}
.dropdown-items{padding:6px}
.dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;font-size:13px;color:var(--text-dim);transition:all var(--trans)}
.dropdown-item:hover{background:var(--bg-tag);color:var(--text)}
.dropdown-divider{height:1px;background:var(--border);margin:4px 0}
.dropdown-danger{color:#e53}

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

.not-found{text-align:center;padding:80px 20px}
.not-found h1{font-size:22px;margin-bottom:10px;color:var(--text)}
.not-found p{color:var(--text-dim);margin-bottom:20px}
.back-home-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:var(--accent);color:#fff;border-radius:var(--r);font-size:13px;font-weight:600}

/* ─── DESIGNER HEADER ────────────────────────────────────────── */
.designer-header{display:flex;gap:22px;align-items:center;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.designer-avatar{width:76px;height:76px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:#fff;flex-shrink:0}
.designer-info{flex:1;min-width:0}
.designer-name{font-size:26px;font-weight:700;margin-bottom:4px;font-family:var(--mono);color:var(--text)}
.designer-meta{font-size:13px;color:var(--text-dim);margin-bottom:14px}
.designer-stats{display:flex;gap:24px}
.stat{text-align:center}
.stat-num{font-size:20px;font-weight:700;font-family:var(--mono);color:var(--accent)}
.stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-top:2px}

/* Categories */
.designer-categories{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.cat-pill{padding:5px 13px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:20px;font-size:12px;color:var(--text-dim);transition:all var(--trans)}
.cat-pill:hover{border-color:var(--accent);color:var(--accent)}
.cat-pill span{color:var(--text-muted);font-size:11px}

/* Sort bar */
.sort-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.results-info{font-size:13px;color:var(--text-dim)}
.sort-options{display:flex;gap:5px}
.sort-pill{padding:5px 11px;border-radius:var(--r);font-size:12px;color:var(--text-muted);background:var(--bg-card);border:1.5px solid var(--border);transition:all var(--trans)}
.sort-pill:hover{color:var(--text-dim);border-color:var(--border-h)}
.sort-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ─── MODEL GRID ─────────────────────────────────────────────── */
.model-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.model-card{position:relative;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--card-shadow);transition:all var(--trans)}
.model-card:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:var(--card-shadow-h)}
.card-link{display:block}
.card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-elevated)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.model-card:hover .card-img img{transform:scale(1.04)}
.card-source{position:absolute;bottom:7px;left:7px;padding:3px 8px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.3px}
.card-source.printables{background:rgba(250,104,49,.18);color:#fa6831;border:1px solid rgba(250,104,49,.25)}
.card-source.thingiverse{background:rgba(36,139,251,.18);color:#248bfb;border:1px solid rgba(36,139,251,.25)}
.card-source.myminifactory{background:rgba(45,178,128,.18);color:#2db280;border:1px solid rgba(45,178,128,.25)}
.card-source.cults3d{background:rgba(214,51,132,.18);color:#d63384;border:1px solid rgba(214,51,132,.25)}
.card-source.makerworld{background:rgba(0,174,66,.18);color:#00ae42;border:1px solid rgba(0,174,66,.25)}
.card-source.makeronline{background:rgba(0,150,214,.18);color:#0096d6;border:1px solid rgba(0,150,214,.25)}
.card-body{padding:11px 13px}
.card-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;color:var(--text)}
.card-stats{font-size:11px;color:var(--text-muted);display:flex;gap:10px;font-family:var(--mono)}

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

/* ─── PAGINATION ─────────────────────────────────────────────── */
.pagination{display:flex;justify-content:center;gap:4px;margin-top:14px}
.page-btn{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);font-size:13px;font-weight:500;color:var(--text-dim);background:var(--bg-card);border:1.5px solid var(--border);transition:all var(--trans)}
.page-btn:hover:not(.disabled):not(.active){border-color:var(--accent);color:var(--accent)}
.page-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.page-btn.disabled{opacity:.3;cursor:default}
.page-dots{display:flex;align-items:center;padding:0 4px;color:var(--text-muted);font-size:12px}

/* Footer */
.footer-wrap{border-top:1px solid var(--border);margin-top:auto}
.footer{max-width:1400px;margin:0 auto;padding:18px 20px;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)}

@media(max-width:1024px){.model-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){
  .model-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .designer-header{flex-direction:column;text-align:center}
  .designer-stats{justify-content:center}
  .designer-name{font-size:20px}
  .designer-avatar{width:60px;height:60px;font-size:24px}
  .sort-bar{flex-direction:column;align-items:flex-start}
  .footer{flex-direction:column;gap:8px;text-align:center}
  .main{padding:18px 14px 40px}
}
@media(max-width:480px){
  .model-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .card-body{padding:9px 11px}
  .designer-stats{gap:14px}
}