/*
Theme Name: NovaSphere Portal
Theme URI: https://novasphere.jp/
Author: Yuichi.S
Author URI: https://novasphere.jp/
Description: NovaSphere - Yahoo!トップ風ポータルテーマ。AJAXタブ・サムネ・バッジ・ピン留め・アクセスランキング（期間別）・おすすめカード・フェードモーション・ローディング画面・OGP/SNS・SNSシェア・関連記事・パンくず・コメント・速報バー・管理画面アクセスログ/ダッシュボード。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: novasphere-portal
Tags: news, portal, two-columns, custom-colors, custom-menu
*/
:root{
 --ns-primary: #7c3aed;
 --ns-accent: #22d3ee;
 --ns-link: #a78bfa;
 --ns-border: rgba(255,255,255,.10);
 --ns-bg: #070a12;
 --ns-surface: rgba(255,255,255,.06);
 --ns-text: rgba(255,255,255,.92);
 --ns-muted: rgba(255,255,255,.65);
 --ns-shadow: 0 10px 30px rgba(0,0,0,.35);
 --ns-radius: 18px;
}
*{ box-sizing:border-box; }
body{
 margin:0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', Meiryo, Arial, sans-serif;
 background:
  radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.35), transparent 60%),
  radial-gradient(900px 600px at 90% 0%, rgba(34,211,238,.25), transparent 55%),
  radial-gradient(900px 600px at 50% 110%, rgba(16,185,129,.12), transparent 55%),
  var(--ns-bg);
 color: var(--ns-text);
}
a{ color: var(--ns-link); text-decoration: none; }
a:hover{ text-decoration: underline; }
.ns-container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ===== LOADING SCREEN ===== */
#ns-loader{
 position:fixed; inset:0; z-index:99999;
 display:flex; justify-content:center; align-items:center;
 background:
  radial-gradient(circle at top left,#1e40ff33 0%,transparent 35%),
  radial-gradient(circle at bottom right,#7b4dff33 0%,transparent 35%),
  #090B16;
 font-family:'Poppins',sans-serif;
 transition: opacity .6s ease, visibility .6s ease;
}
#ns-loader.ns-loader-hide{ opacity:0; visibility:hidden; pointer-events:none; }
.ns-ldr-container{ position:relative; display:flex; flex-direction:column; align-items:center; gap:32px; }
.ns-ldr-planet{ position:relative; width:140px; height:140px; border-radius:50%; background:linear-gradient(135deg,#0B3DFF,#22B8FF,#7B4DFF); display:flex; justify-content:center; align-items:center; box-shadow: 0 0 40px rgba(34,184,255,0.45), 0 0 80px rgba(123,77,255,0.35); animation:ns-ldr-pulse 3s ease-in-out infinite; }
.ns-ldr-n{ color:white; font-size:72px; font-weight:700; z-index:2; }
.ns-ldr-ring{ position:absolute; width:220px; height:220px; border:6px solid transparent; border-top:6px solid #ffffff; border-right:6px solid #7B4DFF; border-radius:50%; animation:ns-ldr-orbit 2.5s linear infinite; opacity:0.9; }
.ns-ldr-star{ position:absolute; width:10px; height:10px; background:white; border-radius:50%; box-shadow:0 0 12px white; animation:ns-ldr-twinkle 1.5s infinite alternate; }
.ns-ldr-s1{ top:-10px; left:20px; }
.ns-ldr-s2{ right:-20px; bottom:40px; animation-delay:0.7s; }
.ns-ldr-s3{ left:-25px; bottom:10px; animation-delay:1.2s; }
.ns-ldr-text{ color:white; font-size:28px; font-weight:600; letter-spacing:2px; animation:ns-ldr-float 2s ease-in-out infinite; }
.ns-ldr-dots::after{ content:''; animation:ns-ldr-dots 1.5s infinite; }
@keyframes ns-ldr-orbit{ to{ transform:rotate(360deg); } }
@keyframes ns-ldr-pulse{ 0%{ transform:scale(1); } 50%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
@keyframes ns-ldr-twinkle{ from{ opacity:0.3; transform:scale(0.8); } to{ opacity:1; transform:scale(1.4); } }
@keyframes ns-ldr-float{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } 100%{ transform:translateY(0); } }
@keyframes ns-ldr-dots{ 0%{ content:''; } 33%{ content:'.'; } 66%{ content:'..'; } 100%{ content:'...'; } }

/* ===== HEADER ===== */
.ns-header{ border-bottom:1px solid var(--ns-border); background: linear-gradient(180deg, rgba(7,10,18,.92), rgba(7,10,18,.78)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top:0; z-index: 50; }
.ns-header-inner{ display:flex; align-items:center; gap:16px; padding: 10px 0; }
.ns-logo a{ display:inline-flex; align-items:center; gap:10px; font-weight: 900; font-size: 20px; letter-spacing: .6px; color: var(--ns-text); }
.ns-logo img{ max-height: 38px; width: auto; }
.ns-search{ flex: 1; }
.ns-search form{ display:flex; gap:8px; }
.ns-search input[type='search']{ width:100%; padding: 10px 12px; border: 1px solid var(--ns-border); border-radius: 12px; font-size: 14px; background: rgba(255,255,255,.05); color: var(--ns-text); outline: none; }
.ns-search input[type='search']::placeholder{ color: rgba(255,255,255,.55); }
.ns-search button{ padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(124,58,237,.55); background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,211,238,.70)); color:#081018; font-weight: 800; cursor:pointer; white-space: nowrap; }
.ns-search button:hover{ filter: brightness(1.05); }

/* ===== SERVICE MENU ===== */
.ns-servicebar{ border-top:1px solid var(--ns-border); }
.ns-servicebar nav > ul{ display:flex; flex-wrap:wrap; gap:2px; list-style:none; padding: 6px 0; margin:0; }
.ns-servicebar nav > ul > li{ position: relative; }
.ns-servicebar nav > ul > li > a{ display:inline-flex; align-items:center; gap:4px; color: var(--ns-text); font-size: 13px; padding: 6px 10px; border-radius: 8px; transition: background .15s; }
.ns-servicebar nav > ul > li > a:hover{ background: rgba(255,255,255,.08); text-decoration:none; }
.ns-servicebar nav ul ul{ display:none; position:absolute; top:100%; left:0; min-width:180px; background: rgba(15,18,30,.96); border:1px solid var(--ns-border); border-radius: 12px; padding: 6px 0; list-style:none; z-index:60; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.ns-servicebar nav > ul > li:hover > ul{ display:block; }
.ns-servicebar nav > ul > li.is-open > ul{ display:block; }
.ns-servicebar nav ul ul a{ display:block; padding: 8px 14px; font-size: 13px; color: var(--ns-text); }
.ns-servicebar nav ul ul a:hover{ background: rgba(255,255,255,.06); text-decoration:none; }

/* ===== BREAKING TICKER ===== */
.ns-ticker{ margin: 12px 0 0; border:1px solid rgba(34,211,238,.22); border-radius: 14px; background: linear-gradient(135deg, rgba(34,211,238,.10), rgba(124,58,237,.10)); overflow:hidden; box-shadow: var(--ns-shadow); }
.ns-ticker-inner{ display:flex; align-items:center; gap:12px; padding: 10px 12px; }
.ns-ticker-badge{ display:inline-flex; align-items:center; gap:6px; font-size: 12px; font-weight: 900; letter-spacing:.6px; color:#081018; padding: 6px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--ns-accent), #f59e0b); white-space:nowrap; }
.ns-ticker-badge::before{ content:'\1F4E2'; }
.ns-ticker-track{ position:relative; flex:1; overflow:hidden; }
.ns-ticker-marquee{ display:inline-flex; gap:22px; align-items:center; white-space:nowrap; will-change: transform; animation: ns-marquee 22s linear infinite; }
.ns-ticker:hover .ns-ticker-marquee{ animation-play-state: paused; }
.ns-ticker-item{ color: var(--ns-text); font-weight: 700; font-size: 13px; }
.ns-ticker-item span{ color: var(--ns-muted); font-weight: 600; margin-right: 6px; }
@keyframes ns-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ===== MAIN GRID ===== */
.ns-main{ display:grid; grid-template-columns: 1fr 320px; gap: 18px; padding: 18px 0; }
.ns-full-width{ grid-column: 1 / -1; }
.ns-card{ border:1px solid var(--ns-border); border-radius: var(--ns-radius); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)); box-shadow: var(--ns-shadow); overflow: hidden; }
.ns-card-header{ display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; border-bottom:1px solid var(--ns-border); }
.ns-card-header h1,.ns-card-header h2,.ns-card-header h3,.ns-card-header h4{ font-size: 16px; margin:0; }
.ns-card-body{ padding: 12px 14px; }

/* Tabs (news) */
.ns-tabs{ display:flex; flex-wrap:wrap; gap: 8px; padding: 10px 14px; border-bottom:1px solid var(--ns-border); }
.ns-tab{ display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 999px; border:1px solid var(--ns-border); font-size: 13px; color: var(--ns-text); background: rgba(255,255,255,.03); transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease; }
.ns-tab:hover{ transform: translateY(-1px); text-decoration:none; }
.ns-tab.is-active{ border-color: rgba(34,211,238,.55); box-shadow: 0 0 0 3px rgba(34,211,238,.12); }

/* Featured */
.ns-featured{ display:grid; gap: 10px; margin-bottom: 12px; }
.ns-featured-item{ display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid rgba(34,211,238,.18); border-radius: 14px; background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(124,58,237,.10)); }
.ns-featured-thumb{ width: 80px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink:0; background: rgba(255,255,255,.08); }
.ns-featured-body{ flex:1; min-width:0; }
.ns-featured-item a.ns-featured-link{ color: var(--ns-text); font-weight: 800; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ns-featured-meta{ font-size: 12px; color: var(--ns-muted); margin-top: 3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* Badges */
.ns-badge{ display:inline-flex; align-items:center; font-size: 10px; font-weight:700; padding: 2px 7px; border-radius: 999px; line-height: 1.4; }
.ns-badge-new{ background: rgba(239,68,68,.85); color:#fff; }
.ns-badge-cat{ background: rgba(124,58,237,.35); color: rgba(255,255,255,.9); }
.ns-badge-pin{ background: rgba(234,179,8,.8); color:#1a1a2e; }

.ns-divider{ height:1px; background: var(--ns-border); margin: 10px 0 12px; }
.ns-subtitle{ font-size: 12px; color: var(--ns-muted); margin: 0 0 8px; }

/* News list */
.ns-news-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px; }
.ns-news-item a{ color: var(--ns-text); }
.ns-news-meta{ font-size: 12px; color: var(--ns-muted); margin-top:2px; display:flex; align-items:center; gap:6px; }

/* AJAX fade */
#ns-news-container{ transition: opacity .25s ease, transform .25s ease; }
#ns-news-container.ns-fade-out{ opacity: 0; transform: translateY(6px); }
#ns-news-container.ns-fade-in{ opacity: 1; transform: translateY(0); }

/* Loading */
.ns-loading{ color: var(--ns-muted); font-size: 13px; display:flex; gap:8px; align-items:center; }
.ns-spinner{ width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: rgba(34,211,238,.75); animation: ns-spin 0.8s linear infinite; }
@keyframes ns-spin{ to{ transform: rotate(360deg); } }

/* Recommend */
.ns-recommend-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 14px; }
.ns-rec-card{ border:1px solid var(--ns-border); border-radius: 14px; overflow:hidden; background: rgba(255,255,255,.04); transition: transform .12s ease, box-shadow .12s ease; }
.ns-rec-card:hover{ transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.ns-rec-thumb{ width:100%; height: 130px; object-fit: cover; display:block; background: rgba(255,255,255,.06); }
.ns-rec-body{ padding: 10px 12px; }
.ns-rec-body a{ color: var(--ns-text); font-weight: 700; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ns-rec-meta{ font-size: 11px; color: var(--ns-muted); margin-top: 4px; }

/* Sidebar Ranking */
.ns-ranking-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ns-rank-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.ns-rank-tab{ font-size: 11px; padding: 3px 8px; border:1px solid var(--ns-border); border-radius: 999px; color: var(--ns-muted); background: rgba(255,255,255,.03); }
.ns-rank-tab.is-active{ color: var(--ns-text); border-color: rgba(34,211,238,.55); box-shadow: 0 0 0 3px rgba(34,211,238,.10); }
.ns-ranking-list{ list-style:none; padding:0; margin:0; counter-reset: rank; }
.ns-ranking-item{ display:flex; gap:10px; align-items:flex-start; padding: 8px 0; border-bottom: 1px solid var(--ns-border); counter-increment: rank; }
.ns-ranking-item:last-child{ border-bottom:none; }
.ns-rank-num{ flex-shrink:0; width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:12px; color:#fff; background: linear-gradient(135deg, var(--ns-primary), var(--ns-accent)); }
.ns-rank-num::before{ content: counter(rank); }
.ns-ranking-item:nth-child(1) .ns-rank-num{ background: linear-gradient(135deg, #f59e0b, #ef4444); }
.ns-ranking-item:nth-child(2) .ns-rank-num{ background: linear-gradient(135deg, #6b7280, #9ca3af); }
.ns-ranking-item:nth-child(3) .ns-rank-num{ background: linear-gradient(135deg, #92400e, #d97706); }
.ns-rank-body{ min-width:0; flex:1; }
.ns-rank-body a{ color: var(--ns-text); font-size: 13px; font-weight:600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ns-rank-views{ font-size: 11px; color: var(--ns-muted); margin-top:2px; }

/* Breadcrumbs */
.ns-breadcrumbs{ padding: 12px 0 4px; font-size: 13px; color: var(--ns-muted); }
.ns-breadcrumbs a{ color: var(--ns-link); }
.ns-breadcrumbs a:hover{ text-decoration: underline; }
.ns-bc-sep{ margin: 0 6px; opacity: .5; }

/* Archive / Search */
.ns-archive-title{ font-size: 18px; margin: 0; }
.ns-archive-desc{ color: var(--ns-muted); font-size: 14px; margin: 0 0 12px; }
.ns-archive-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ns-archive-item{ display: flex; gap: 14px; padding: 12px; border: 1px solid var(--ns-border); border-radius: 14px; background: rgba(255,255,255,.03); transition: background .15s; }
.ns-archive-item:hover{ background: rgba(255,255,255,.06); }
.ns-archive-thumb{ width: 120px; height: 80px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.ns-archive-body{ flex: 1; min-width: 0; }
.ns-archive-link{ color: var(--ns-text); font-weight: 700; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ns-archive-link:hover{ color: var(--ns-accent); text-decoration: none; }
.ns-archive-meta{ font-size: 12px; color: var(--ns-muted); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ns-archive-excerpt{ font-size: 13px; color: var(--ns-muted); margin: 6px 0 0; line-height: 1.6; }

/* Pagination */
.ns-pagination{ margin: 20px 0 8px; }
.ns-pagination .page-numbers{ list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; justify-content: center; flex-wrap: wrap; }
.ns-pagination .page-numbers a,
.ns-pagination .page-numbers span{ display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--ns-border); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ns-text); background: rgba(255,255,255,.04); transition: all .15s; }
.ns-pagination .page-numbers a:hover{ background: rgba(124,58,237,.25); border-color: rgba(124,58,237,.5); text-decoration: none; }
.ns-pagination .page-numbers .current{ background: linear-gradient(135deg, var(--ns-primary), var(--ns-accent)); border-color: transparent; color: #fff; }

/* Single */
.ns-single-meta{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; font-size: 13px; color: var(--ns-muted); border-bottom: 1px solid var(--ns-border); }
.ns-single-thumb{ padding: 14px; }
.ns-single-content{ line-height: 1.8; font-size: 15px; }
.ns-single-content h2{ font-size: 20px; margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ns-accent); }
.ns-single-content h3{ font-size: 17px; margin: 22px 0 10px; }
.ns-single-content img{ max-width: 100%; height: auto; border-radius: 12px; }
.ns-single-content blockquote{ border-left: 4px solid var(--ns-accent); margin: 16px 0; padding: 12px 16px; background: rgba(255,255,255,.04); border-radius: 0 12px 12px 0; }
.ns-single-content pre{ background: rgba(0,0,0,.4); padding: 14px; border-radius: 12px; overflow-x: auto; font-size: 13px; }
.ns-single-content code{ background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.ns-single-content pre code{ background: none; padding: 0; }

/* Share */
.ns-share-buttons{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px; border-top: 1px solid var(--ns-border); }
.ns-share-label{ font-size: 13px; font-weight: 700; color: var(--ns-muted); }
.ns-share-btn{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; font-size: 16px; font-weight: 800; color: #fff; transition: transform .1s ease, box-shadow .15s ease; }
.ns-share-btn:hover{ transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.3); text-decoration: none; color: #fff; }
.ns-share-x{ background: #000; }
.ns-share-fb{ background: #1877f2; }
.ns-share-line{ background: #06c755; }
.ns-share-hatena{ background: #00a4de; font-size: 13px; }

/* Related */
.ns-related{ padding: 14px; border-top: 1px solid var(--ns-border); }
.ns-related-title{ font-size: 16px; margin: 0 0 12px; }
.ns-related-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

/* Comments */
.ns-comments{ margin-top: 18px; }
.ns-comments-title{ font-size: 16px; margin: 0 0 14px; }
.ns-comment-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ns-comment-item{ padding: 0; }
.ns-comment-body{ display: flex; gap: 12px; padding: 12px; border: 1px solid var(--ns-border); border-radius: 14px; background: rgba(255,255,255,.03); }
.ns-comment-avatar img{ border-radius: 50%; }
.ns-comment-content{ flex: 1; min-width: 0; }
.ns-comment-meta{ display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ns-comment-author{ font-size: 14px; color: var(--ns-text); }
.ns-comment-date{ font-size: 12px; color: var(--ns-muted); }
.ns-comment-text{ font-size: 14px; line-height: 1.7; }
.ns-comment-text p{ margin: 0 0 8px; }
.ns-comment-reply a{ font-size: 12px; color: var(--ns-accent); padding: 2px 8px; border: 1px solid rgba(34,211,238,.3); border-radius: 6px; }
.ns-comment-reply a:hover{ background: rgba(34,211,238,.1); text-decoration: none; }
.ns-comment-form .comment-form-comment textarea{ width: 100%; padding: 12px; border: 1px solid var(--ns-border); border-radius: 12px; background: rgba(255,255,255,.05); color: var(--ns-text); font-size: 14px; resize: vertical; outline: none; }
.ns-comment-form .comment-form-comment textarea:focus{ border-color: rgba(34,211,238,.5); }
.ns-comment-form .form-submit input[type="submit"]{ padding: 10px 20px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--ns-primary), var(--ns-accent)); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.ns-comment-form .form-submit input[type="submit"]:hover{ filter: brightness(1.1); }
.ns-comment-form label{ color: var(--ns-muted); font-size: 13px; }
.ns-comment-form input[type="text"],
.ns-comment-form input[type="email"],
.ns-comment-form input[type="url"]{ width: 100%; padding: 8px 12px; border: 1px solid var(--ns-border); border-radius: 10px; background: rgba(255,255,255,.05); color: var(--ns-text); font-size: 14px; outline: none; }

/* 404 */
.ns-404-wrap{ display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; text-align: center; padding: 40px 20px; }
.ns-404-planet{ position: relative; width: 160px; height: 160px; border-radius: 50%; background: linear-gradient(135deg, #0B3DFF, #22B8FF, #7B4DFF); display: flex; justify-content: center; align-items: center; box-shadow: 0 0 60px rgba(34,184,255,0.4), 0 0 120px rgba(123,77,255,0.3); animation: ns-ldr-pulse 3s ease-in-out infinite; margin-bottom: 24px; }
.ns-404-num{ color: #fff; font-size: 52px; font-weight: 900; z-index: 2; font-family: 'Poppins', sans-serif; }
.ns-404-ring{ position: absolute; width: 240px; height: 240px; border: 5px solid transparent; border-top: 5px solid #fff; border-right: 5px solid #7B4DFF; border-radius: 50%; animation: ns-ldr-orbit 3s linear infinite; opacity: 0.7; }
.ns-404-title{ font-size: 24px; margin: 0 0 10px; }
.ns-404-desc{ color: var(--ns-muted); font-size: 15px; margin: 0 0 24px; }
.ns-404-actions{ display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.ns-btn{ display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 12px; font-weight: 700; font-size: 14px; transition: all .15s; }
.ns-btn-primary{ background: linear-gradient(135deg, var(--ns-primary), var(--ns-accent)); color: #fff; border: none; }
.ns-btn-primary:hover{ filter: brightness(1.1); text-decoration: none; color: #fff; }
.ns-404-search{ display: flex; gap: 8px; }
.ns-404-search input[type="search"]{ padding: 10px 14px; border: 1px solid var(--ns-border); border-radius: 12px; background: rgba(255,255,255,.05); color: var(--ns-text); font-size: 14px; outline: none; width: 200px; }
.ns-404-search button{ padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(124,58,237,.55); background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,211,238,.70)); color: #081018; font-weight: 800; cursor: pointer; }

/* Footer */
.ns-footer{ border-top:1px solid var(--ns-border); margin-top: 16px; padding: 24px 0 16px; color: var(--ns-muted); font-size: 13px; }
.ns-footer-widgets{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 20px; margin-bottom: 16px; border-bottom: 1px solid var(--ns-border); }
.ns-footer-widget-title{ font-size: 14px; color: var(--ns-text); margin: 0 0 10px; }
.ns-footer-widget ul{ list-style: none; padding: 0; margin: 0; }
.ns-footer-widget li{ margin-bottom: 6px; }
.ns-footer-widget a{ color: var(--ns-muted); font-size: 13px; }
.ns-footer-widget a:hover{ color: var(--ns-link); }
.ns-footer-nav{ margin-bottom: 12px; }
.ns-footer-nav ul{ list-style: none; display: flex; gap: 16px; padding: 0; margin: 0; justify-content: center; flex-wrap: wrap; }
.ns-footer-nav a{ color: var(--ns-muted); font-size: 13px; }
.ns-footer-nav a:hover{ color: var(--ns-link); }
.ns-footer-copy{ text-align: center; }


/* ===== DARK/LIGHT MODE TOGGLE ===== */
.ns-theme-toggle{
  appearance:none; border:none; background:none; cursor:pointer;
  width:38px; height:38px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;
  border:1px solid var(--ns-border);
  background: rgba(255,255,255,.04);
  transition: background .15s, transform .1s;
  flex-shrink:0;
}
.ns-theme-toggle:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }

/* ===== LIGHT MODE ===== */
body.ns-light-mode{
  --ns-bg: #f4f6f9; --ns-surface: rgba(0,0,0,.03); --ns-text: #1a1a2e;
  --ns-muted: #6b7280; --ns-border: rgba(0,0,0,.10); --ns-shadow: 0 4px 16px rgba(0,0,0,.08); --ns-link: #6d28d9;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.08), transparent 60%), radial-gradient(900px 600px at 90% 0%, rgba(34,211,238,.06), transparent 55%), var(--ns-bg);
  color: var(--ns-text);
}
body.ns-light-mode .ns-header{ background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)); }
body.ns-light-mode .ns-logo a{ color: #1a1a2e; }
body.ns-light-mode .ns-search input[type='search']{ background: rgba(0,0,0,.04); color: #1a1a2e; border-color: rgba(0,0,0,.12); }
body.ns-light-mode .ns-search input[type='search']::placeholder{ color: #9ca3af; }
body.ns-light-mode .ns-search button{ background: linear-gradient(135deg, rgba(124,58,237,.90), rgba(34,211,238,.65)); color: #fff; }
body.ns-light-mode .ns-servicebar nav > ul > li > a{ color: #1a1a2e; }
body.ns-light-mode .ns-servicebar nav > ul > li > a:hover{ background: rgba(0,0,0,.05); }
body.ns-light-mode .ns-servicebar nav ul ul{ background: rgba(255,255,255,.98); border-color: rgba(0,0,0,.10); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
body.ns-light-mode .ns-servicebar nav ul ul a{ color: #1a1a2e; }
body.ns-light-mode .ns-servicebar nav ul ul a:hover{ background: rgba(0,0,0,.04); }
body.ns-light-mode .ns-card{ background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)); border-color: rgba(0,0,0,.08); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
body.ns-light-mode .ns-tab{ background: rgba(0,0,0,.03); color: #1a1a2e; border-color: rgba(0,0,0,.10); }
body.ns-light-mode .ns-tab.is-active{ border-color: rgba(34,211,238,.6); box-shadow: 0 0 0 3px rgba(34,211,238,.15); }
body.ns-light-mode .ns-featured-item{ background: linear-gradient(135deg, rgba(34,211,238,.06), rgba(124,58,237,.04)); border-color: rgba(34,211,238,.15); }
body.ns-light-mode .ns-featured-item a.ns-featured-link{ color: #1a1a2e; }
body.ns-light-mode .ns-news-item a{ color: #1a1a2e; }
body.ns-light-mode .ns-rec-card{ background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.08); }
body.ns-light-mode .ns-rec-body a{ color: #1a1a2e; }
body.ns-light-mode .ns-rank-body a{ color: #1a1a2e; }
body.ns-light-mode .ns-ticker{ background: linear-gradient(135deg, rgba(34,211,238,.06), rgba(124,58,237,.04)); border-color: rgba(34,211,238,.15); }
body.ns-light-mode .ns-ticker-item{ color: #1a1a2e; }
body.ns-light-mode .ns-ticker-badge{ color: #fff; }
body.ns-light-mode .ns-archive-item{ background: rgba(255,255,255,.8); border-color: rgba(0,0,0,.08); }
body.ns-light-mode .ns-archive-link{ color: #1a1a2e; }
body.ns-light-mode .ns-comment-body{ background: rgba(255,255,255,.8); border-color: rgba(0,0,0,.08); }
body.ns-light-mode .ns-comment-author{ color: #1a1a2e; }
body.ns-light-mode .ns-single-content{ color: #1a1a2e; }
body.ns-light-mode .ns-single-content blockquote{ background: rgba(0,0,0,.03); }
body.ns-light-mode .ns-single-content pre{ background: rgba(0,0,0,.06); color: #1a1a2e; }
body.ns-light-mode .ns-single-content code{ background: rgba(0,0,0,.06); }
body.ns-light-mode .ns-comment-form .comment-form-comment textarea{ background: rgba(0,0,0,.03); color: #1a1a2e; border-color: rgba(0,0,0,.12); }
body.ns-light-mode .ns-comment-form input[type="text"],
body.ns-light-mode .ns-comment-form input[type="email"],
body.ns-light-mode .ns-comment-form input[type="url"]{ background: rgba(0,0,0,.03); color: #1a1a2e; border-color: rgba(0,0,0,.12); }
body.ns-light-mode .ns-footer{ color: #6b7280; }
body.ns-light-mode .ns-footer-widget a{ color: #6b7280; }
body.ns-light-mode .ns-footer-nav a{ color: #6b7280; }
body.ns-light-mode .ns-theme-toggle{ border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04); }
body.ns-light-mode .ns-theme-toggle:hover{ background: rgba(0,0,0,.08); }
body.ns-light-mode .ns-spinner{ border-color: rgba(0,0,0,.15); border-top-color: rgba(34,211,238,.75); }
body.ns-light-mode .ns-rank-tab{ color: #6b7280; border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.03); }
body.ns-light-mode .ns-rank-tab.is-active{ color: #1a1a2e; border-color: rgba(34,211,238,.55); }
body.ns-light-mode .ns-404-search input[type="search"]{ background: rgba(0,0,0,.04); color: #1a1a2e; border-color: rgba(0,0,0,.12); }
body.ns-light-mode .ns-badge-cat{ background: rgba(124,58,237,.12); color: #6d28d9; }


/* ===== AD SLOTS ===== */
.ns-ad-slot{margin:16px 0;text-align:center;min-height:50px;overflow:hidden;}
.ns-ad-slot-header{margin:12px 0 0;}
.ns-ad-slot-sidebar_top{margin:0 0 16px;}
.ns-ad-slot-sidebar_bottom{margin:16px 0 0;}
.ns-ad-slot-footer{margin:16px 0 0;}
.ns-ad-slot-single_top{margin:0 0 12px;padding:0 14px;}
.ns-ad-slot-single_bottom{margin:12px 0 0;padding:0 14px;}
.ns-ad-slot-between{margin:18px 0;}
.ns-ad-slot ins{display:block;}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px){
 .ns-main{ grid-template-columns: 1fr; }
 .ns-recommend-grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
 .ns-footer-widgets{ grid-template-columns: 1fr; }
 .ns-related-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 720px){
 .ns-header-inner{ flex-wrap: wrap; }
 .ns-search{ flex: 1 1 100%; }
 .ns-search form{ width: 100%; }
 .ns-logo{ flex: 1 1 auto; }
 .ns-servicebar nav > ul{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
 .ns-servicebar nav > ul > li{ flex: 0 0 auto; }
 .ns-servicebar nav ul ul{ position: static; box-shadow: none; border: none; background: transparent; padding: 0 0 0 10px; }
 .ns-servicebar nav ul ul a{ padding: 8px 10px; }
}
@media (max-width: 600px){
 .ns-archive-item{ flex-direction: column; }
 .ns-archive-thumb{ width: 100%; height: 160px; }
 .ns-404-search{ flex-direction: column; width: 100%; }
 .ns-404-search input[type="search"]{ width: 100%; }
 .ns-ticker-inner{ flex-wrap: wrap; }
 .ns-ticker-badge{ width: 100%; justify-content:center; }
}