/* ============================================
   606导航 - 前台暗黑模式 CSS
   在 common.css 之后引入即可启用
   ============================================ */

:root {
    --primary: #6366F1;
    --primary-dark: #4F46E5;
    --primary-light: #818CF8;
    --bg: #0F1419;
    --card: #1A202C;
    --text: #E2E8F0;
    --text-light: #A0AEC0;
    --text-muted: #718096;
    --border: #2D3748;
    --shadow-sm: 0 1px 4px rgba(0,0,0,.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,.4);
    --shadow-lg: 0 12px 35px rgba(0,0,0,.5);
    --header-gradient: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #4338CA 100%);
    --text-gradient: linear-gradient(135deg, #818CF8, #A78BFA);
}

/* Body */
body { background: var(--bg); color: var(--text); }

/* Header */
.header { background: var(--header-gradient); box-shadow: 0 4px 20px rgba(0,0,0,.4); }

/* Hero */
.hero { background: var(--header-gradient); }

/* Card / Site Card */
.site-card,
.featured-card,
.article-item,
.article-detail,
.about-box,
.source-box,
.ad-pos-card,
.link-item,
.form-container,
.rank-list {
    background: var(--card);
    border-color: #2D3748;
}
.site-card:hover,
.featured-card:hover,
.article-item:hover,
.link-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(99,102,241,.15);
}

/* Category nav */
.cat-nav a {
    background: var(--card);
    border-color: #2D3748;
    color: var(--text);
}
.cat-nav a:hover,
.cat-nav a.active {
    border-color: var(--primary);
    color: var(--primary);
}

/* Favicon */
.favicon { background: linear-gradient(135deg, #4338CA, #6366F1); }

/* Form */
.form-group input,
.form-group textarea,
.form-group select {
    background: #0D1117;
    border-color: #2D3748;
    color: #E2E8F0;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

/* Article */
.article-detail { background: var(--card); }
.article-detail h1 { color: #F7FAFC; }
.article-detail .content { color: #CBD5E0; }

/* Feature list */
.feature-list li {
    background: #161B22;
    border-color: #2D3748;
    color: #E2E8F0;
}

/* Notice boxes */
.notice-blue  { background: #1E3A5F; color: #90CDF4; }
.notice-green { background: #1C4532; color: #9AE6B4; }
.notice-yellow{ background: #4A3500; color: #FEFCBF; }
.notice-red   { background: #4A0E0E; color: #FEB2B2; }

/* Code block */
.code-block { background: #0D1117; color: #E2E8F0; border: 1px solid #2D3748; }

/* Footer */
.footer { background: #0D1117; border-top: 1px solid #2D3748; }

/* Pagination */
.pagination a,
.pagination span {
    background: var(--card);
    border-color: #2D3748;
    color: var(--text);
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); }

/* Rank items */
.rank-item { border-bottom-color: #2D3748; }
.rank-item:hover { background: #161B22; }
.rank-num.normal { background: #2D3748; color: var(--text-light); }

/* Search box in header */
.search-box { background: rgba(255,255,255,.08); }
.search-box input { color: #fff; }
.search-box input::placeholder { color: rgba(255,255,255,.4); }

/* Hot keywords */
.hot-keywords a { background: rgba(255,255,255,.08); }

/* Hero search */
.hero-search { background: var(--card); box-shadow: 0 8px 40px rgba(0,0,0,.4); }
.hero-search input { color: var(--text); }
.hero-search input::placeholder { color: var(--text-muted); }

/* Toast */
.toast.success { background: #10B981; }
.toast.error   { background: #EF4444; }

/* Selection */
::selection { background: var(--primary); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar-track { background: #161B22; }
::-webkit-scrollbar-thumb { background: #4A5568; }
::-webkit-scrollbar-thumb:hover { background: #718096; }