/* ═══════════════════════════════════════════════════════════
   3DSEARCH.NET – style-blog.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-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-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.6;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)}
.header-inner{display:flex;align-items:center;height:56px;padding:0 20px;gap:12px;max-width:1200px;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)}
.header-nav{display:flex;gap:4px}
.header-nav a{font-size:13px;font-weight:500;color:var(--text-dim);padding:6px 10px;border-radius:var(--r);transition:all var(--trans)}
.header-nav a:hover,.header-nav a.active{color:var(--accent);background:var(--accent-sub)}
.header-spacer{flex:1}
.header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.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);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);display:inline-flex;align-items:center;transition:background var(--trans)}
.login-btn:hover{background:var(--accent-h)}
.user-menu-wrapper{position:relative}
.user-menu-trigger{cursor:pointer;display:flex;align-items:center;gap:4px;padding:2px;border-radius:20px}
.user-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;width:200px;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:12px 16px;border-bottom:1px solid var(--border)}
.dropdown-name{font-size:14px;font-weight:600}
.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:background var(--trans),color var(--trans)}
.dropdown-item:hover{background:var(--bg-tag);color:var(--text)}
.dropdown-danger{color:#e53}
.dropdown-danger:hover{background:rgba(238,85,51,.08)}

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

.blog-hero{text-align:center;padding:36px 0 28px}
.blog-hero h1{font-family:var(--mono);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;letter-spacing:-1px;margin-bottom:8px}
.blog-hero h1 span{color:var(--accent)}
.blog-hero p{font-size:15px;color:var(--text-dim)}

.blog-cats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:36px}
.blog-cat{font-size:13px;font-weight:500;color:var(--text-dim);padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);transition:all var(--trans)}
.blog-cat:hover{border-color:var(--accent);color:var(--accent)}
.blog-cat.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.cat-count{font-size:11px;opacity:.6;margin-left:2px}

/* Featured */
.featured-post{display:grid;grid-template-columns:1.2fr 1fr;gap:0;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin-bottom:36px;transition:all var(--trans)}
.featured-post:hover{border-color:var(--border-h);box-shadow:0 10px 32px rgba(0,0,0,.12);transform:translateY(-2px)}
.featured-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-elevated)}
.featured-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.featured-post:hover .featured-img img{transform:scale(1.03)}
.featured-body{padding:28px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.featured-body h2{font-family:var(--mono);font-size:clamp(1.1rem,2vw,1.5rem);font-weight:700;line-height:1.2;letter-spacing:-.3px;color:var(--text)}
.featured-excerpt{font-size:14px;color:var(--text-dim);line-height:1.6}
.post-cat{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}

/* Post meta */
.post-meta{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.post-author{font-weight:600;color:var(--text-dim)}
.meta-dot{color:var(--text-muted);opacity:.4}

/* Post grid */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:36px}
.post-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:all var(--trans)}
.post-card:hover{border-color:var(--border-h);box-shadow:0 8px 24px rgba(0,0,0,.10);transform:translateY(-2px)}
.post-card:hover .post-card-img img{transform:scale(1.04)}
.post-card-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-elevated)}
.post-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post-card-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted)}
.post-card-body{padding:14px 16px 16px}
.post-card-body h3{font-size:14px;font-weight:600;line-height:1.3;margin:5px 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text)}
.post-card-excerpt{font-size:13px;color:var(--text-dim);line-height:1.5;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Breadcrumb */
.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)}

/* Article */
.article-header{margin-bottom:28px}
.article-header h1{font-family:var(--mono);font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:700;line-height:1.15;letter-spacing:-.5px;margin:10px 0 18px;color:var(--text)}
.article-meta{display:flex;align-items:center;gap:10px}
.author-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.article-cover{margin-bottom:28px;border-radius:var(--r-xl);overflow:hidden;border:1.5px solid var(--border)}
.article-cover img{width:100%;aspect-ratio:2/1;object-fit:cover}

.article-content{font-size:15px;line-height:1.8;color:var(--text-dim);margin-bottom:28px}
.article-content p{margin-bottom:18px}
.article-content h2{font-family:var(--mono);font-size:1.3rem;font-weight:700;color:var(--text);margin:36px 0 14px;letter-spacing:-.3px}
.article-content h3{font-family:var(--mono);font-size:1.05rem;font-weight:700;color:var(--text);margin:28px 0 10px}
.article-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article-content a:hover{color:var(--accent-h)}
.article-content strong{color:var(--text);font-weight:600}
.article-content ul{margin:0 0 18px 22px;list-style:disc}
.article-content li{margin-bottom:6px}
.article-content code{font-family:var(--mono);font-size:.88em;background:var(--bg-tag);padding:2px 7px;border-radius:4px;border:1px solid var(--border)}
.article-content pre{background:var(--bg-elevated);border:1.5px solid var(--border);border-radius:var(--r);padding:18px;margin:18px 0;overflow-x:auto}
.article-content pre code{background:none;border:none;padding:0;font-size:13px}
.article-content figure{margin:20px 0;border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--border)}
.article-content figure img{width:100%}
.article-content figcaption{font-size:12px;color:var(--text-muted);text-align:center;padding:8px 14px;background:var(--bg-card)}
.article-content blockquote{border-left:3px solid var(--accent);padding:12px 18px;margin:18px 0;background:var(--accent-sub);border-radius:0 var(--r) var(--r) 0;font-style:italic;color:var(--text)}

/* Tags */
.article-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.tag{font-size:12px;font-weight:500;color:var(--text-dim);background:var(--bg-elevated);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)}

/* Share */
.article-share{display:flex;align-items:center;gap:8px;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:36px}
.share-label{font-size:11px;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)}
.share-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Section divider */
.section-div{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.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:22px;margin-bottom:36px}
.comment-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#22c55e;padding:10px 14px;border-radius:var(--r);font-size:13px;margin-bottom:14px;font-weight:500}
.comment-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.comment-item:first-of-type{padding-top:0}
.comment-item:last-child{border-bottom:none;padding-bottom:0}
.comment-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;object-fit:cover}
.comment-initial{width:34px;height:34px;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)}
.comment-empty{font-size:13px;color:var(--text-muted);text-align:center;padding:20px 0;font-style:italic}
.login-prompt{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--bg-elevated);border:1.5px solid var(--border);border-radius:var(--r);padding:14px 18px;margin-bottom:18px}
.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:11px 13px;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 18px;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;transition:background var(--trans)}
.submit-btn:hover{background:var(--accent-h)}

/* Pagination */
.blog-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin:28px 0}
.page-btn{font-size:13px;font-weight:600;color:var(--accent);padding:7px 18px;border:1.5px solid var(--accent);border-radius:var(--r);transition:all var(--trans)}
.page-btn:hover{background:var(--accent);color:#fff}
.page-info{font-size:13px;color:var(--text-muted)}

/* Empty / 404 */
.blog-empty{text-align:center;padding:60px 20px;color:var(--text-muted);font-size:15px}
.not-found{text-align:center;padding:80px 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:14px 0 28px;font-size:14px}
.not-found a{color:var(--accent);font-weight:600}

/* Footer */
.footer-wrap{border-top:1px solid var(--border)}
.footer{padding:20px 24px;max-width:1200px;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)}}
.featured-post{animation:fadeIn .35s ease both}
.post-card{animation:fadeIn .3s ease both}
.post-card:nth-child(2){animation-delay:.05s}
.post-card:nth-child(3){animation-delay:.1s}

@media(max-width:768px){
  .main{padding:16px 14px 40px}
  .header-inner{padding:0 12px;gap:8px}
  .featured-post{grid-template-columns:1fr}
  .featured-body{padding:18px}
  .post-grid{grid-template-columns:1fr}
  .blog-hero{padding:20px 0 16px}
  .article-header h1{font-size:1.4rem}
  .article-content{font-size:14px}
}