/* ═══════════════════════════════════════════════════════════
   3DSEARCH.NET – style-category.css v1 – 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);
  --header-h:      56px;
}

:root, [data-theme="dark"] {
  --bg:            #232427;
  --bg-nav:        #2a2b2f;
  --bg-card:       #2e3035;
  --bg-card-h:     #363840;
  --bg-input:      #323439;
  --bg-sidebar:    #27282c;
  --bg-elevated:   #292a2e;
  --bg-2:          #2e3035;
  --bg-3:          #3a3c42;
  --bg-tag:        #3a3c42;
  --bg-tag-h:      #44464d;
  --bg-overlay:    rgba(0,0,0,0.55);
  --text:          #f2f3f5;
  --text-dim:      #b8bbc1;
  --text-muted:    #868a92;
  --border:        #3c3e45;
  --border-h:      #4d5057;
  --nav-shadow:    0 1px 0 #3c3e45;
  --card-shadow:   0 1px 4px rgba(0,0,0,0.22);
  --card-shadow-h: 0 6px 24px rgba(0,0,0,0.3);
  --shadow:        0 8px 40px rgba(0,0,0,0.35);
}

[data-theme="light"] {
  --bg:            #f4f4f4;
  --bg-nav:        #ffffff;
  --bg-card:       #ffffff;
  --bg-card-h:     #fafafa;
  --bg-input:      #ffffff;
  --bg-sidebar:    #f9f9f9;
  --bg-elevated:   #f8f8f8;
  --bg-2:          #ffffff;
  --bg-3:          #f0f0f0;
  --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);
  --shadow:        0 8px 32px rgba(0,0,0,0.10);
}

*,*::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:var(--header-h);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);cursor:pointer;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}

/* HERO */
.cat-hero{background:var(--bg-card);border-bottom:1px solid var(--border);padding:2rem 1.25rem 1.5rem}
.cat-hero-inner{max-width:1400px;margin:0 auto}
.breadcrumb{font-size:.8rem;color:var(--text-muted);margin-bottom:.75rem;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.breadcrumb a{color:var(--text-dim)}
.breadcrumb a:hover{color:var(--accent)}
.cat-title{font-size:clamp(1.5rem,4vw,2rem);font-weight:800;color:var(--text);margin:0 0 .4rem;line-height:1.2}
.cat-subtitle{font-size:.9rem;color:var(--text-dim);margin:0 0 1rem}
.cat-stats{display:flex;flex-wrap:wrap;gap:.5rem}
.cat-stat-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:999px;border:1.5px solid var(--border);font-size:.75rem;color:var(--text-dim);background:var(--bg)}
.cat-stat-badge .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cat-stat-badge strong{color:var(--text);font-weight:600}

/* LAYOUT */
.cat-layout{max-width:1400px;margin:1.5rem auto;padding:0 1.25rem 3rem;display:grid;grid-template-columns:210px 1fr;gap:1.5rem;align-items:start}
@media(max-width:768px){.cat-layout{grid-template-columns:1fr;padding:0 .75rem 2rem}.cat-sidebar{display:flex;flex-wrap:wrap;gap:.75rem}.sidebar-block{flex:1 1 180px}}

/* SIDEBAR */
.cat-sidebar{position:sticky;top:calc(var(--header-h) + 12px)}
.sidebar-block{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1rem;margin-bottom:.75rem}
.sidebar-block h3{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin:0 0 .65rem}
.sort-links{display:flex;flex-direction:column;gap:.2rem}
.sort-link{padding:.35rem .6rem;border-radius:var(--r);font-size:.83rem;color:var(--text-dim);transition:all var(--trans)}
.sort-link:hover{background:var(--bg-tag);color:var(--text)}
.sort-link.active{background:var(--accent);color:#fff;font-weight:600}
.designer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.designer-list li{display:flex;justify-content:space-between;align-items:center;font-size:.8rem}
.designer-list a{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
.designer-list a:hover{color:var(--accent)}
.designer-list .dim{color:var(--text-muted);font-size:.72rem;flex-shrink:0}
.related-cats{display:flex;flex-wrap:wrap;gap:.35rem}
.rel-cat-tag{padding:.22rem .55rem;border-radius:999px;background:var(--bg-tag);border:1.5px solid var(--border);font-size:.75rem;color:var(--text-dim);transition:all var(--trans)}
.rel-cat-tag:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* MODEL GRID */
.cat-main{min-width:0}
.model-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
@media(max-width:1100px){.model-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.model-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:400px){.model-grid{grid-template-columns:repeat(2,1fr);gap:8px}}

.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-img-wrap{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-elevated)}
.card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.model-card:hover .card-img-wrap img{transform:scale(1.04)}
.card-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.card-img-placeholder svg{width:36px;height:36px;opacity:.35}
.source-badge{position:absolute;bottom:7px;left:7px;padding:3px 8px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.3px;color:#fff}
.card-body{padding:10px 12px 12px}
.card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.82rem;font-weight:600;color:var(--text);line-height:1.35;margin-bottom:.25rem}
.card-title:hover{color:var(--accent)}
.card-designer{display:block;font-size:.73rem;color:var(--text-muted);margin-bottom:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-designer:hover{color:var(--accent)}
.card-meta{display:flex;gap:.5rem;font-size:.7rem;color:var(--text-muted);font-family:var(--mono)}
.wl-btn{position:absolute;top:8px;right:8px;background:var(--bg-card);border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);font-size:.9rem;box-shadow:0 1px 4px rgba(0,0,0,.15);opacity:0;transition:all var(--trans)}
.model-card:hover .wl-btn{opacity:1}
.wl-btn:hover{color:#e53;transform:scale(1.1)}
.wl-btn.in-wl{opacity:1;color:#e53}

/* PAGINATION */
.pagination{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:1.5rem 0}
.page-btn{padding:.45rem 1.1rem;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text-dim);font-size:.85rem;font-weight:600;transition:all var(--trans)}
.page-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.page-info{font-size:.82rem;color:var(--text-muted)}

/* SEO TEXT */
.seo-text{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.5rem;margin-top:1.5rem}
.seo-text h2{font-size:.9rem;font-weight:700;color:var(--text);margin:0 0 .6rem}
.seo-text p{font-size:.83rem;color:var(--text-dim);line-height:1.65;margin:0 0 .4rem}
.seo-text p:last-child{margin:0}

/* FOOTER */
.footer{border-top:1px solid var(--border);padding:18px 20px;display:flex;justify-content:center;gap:1.5rem;font-size:12px;color:var(--text-muted);margin-top:auto}
.footer a{color:var(--text-muted);transition:color var(--trans)}
.footer a:hover{color:var(--accent)}

.no-results{text-align:center;padding:3rem;color:var(--text-dim)}


/* Mobile Header Fixes */
@media(max-width:640px) {
  .header { height: auto; min-height: 56px; }
  .header-inner { flex-wrap: wrap; padding: 6px 12px; height: auto; gap: 0; }
  .header-search {
    order: 4; width: 100%; max-width: unset;
    margin: 8px 0 12px 0; flex-basis: 100%;
  }
  .header-search input { height: 48px; font-size: 16px; border-radius: 12px; }
  .login-btn { height: 36px !important; width: 36px !important; padding: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .login-text { display: none !important; }
}

@media(max-width:640px) {
  .header-actions .lang-select { display: block !important; font-size: 11px; padding: 0 4px; height: 32px; max-width: 52px; }
}