/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f5f7fa; color: #2d3436; line-height: 1.7; }
a { color: #6c5ce7; text-decoration: none; transition: color 0.3s; }
a:hover { color: #a29bfe; }
img { max-width: 100%; height: auto; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* === HEADER === */
.site-header {
    background: linear-gradient(135deg, #5c5ce4 0%, #5c5ce4 50%, #5c5ce4 100%);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 1.6rem; font-weight: 800; color: #000000; }
.logo:hover { color: #000000; }
.logo-icon { font-size: 2rem; color: #fd79a8; }
.logo-highlight { color: #fd79a8; }

/* === NAV === */
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.8rem; cursor: pointer; }
.nav-list { display: flex; list-style: none; gap: 5px; }
.nav-list li a {
    color: #5c5ce4; padding: 8px 16px; border-radius: 8px;
    font-size: 0.95rem; font-weight: 500; transition: all 0.3s;
}
.nav-list li a:hover, .nav-list li a.active { background: rgba(66, 62, 64, 0.2); color: #fd79a8; }

/* === MAIN === */
.site-main { min-height: 60vh; padding: 40px 0; }

/* === HERO === */
.hero {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe, #fd79a8);
    color: #000000; padding: 80px 0; text-align: center; border-radius: 16px;
    margin-bottom: 50px; position: relative; overflow: hidden;
}
.hero::before {
    content: '✦ ♥ ★ ♫ ☮ ✿ ✦'; position: absolute; top: 10px; left: 0; right: 0;
    font-size: 1.2rem; opacity: 0.3; letter-spacing: 30px; text-align: center;
}
.hero h1 { font-size: 2.8rem; margin-bottom: 15px; font-weight: 800; }
.hero p { font-size: 1.2rem; max-width: 700px; margin: 0 auto 30px; opacity: 0.9; }
.hero-search { max-width: 500px; margin: 0 auto; display: flex; }
.hero-search input {
    flex: 1; padding: 15px 20px; border: none; border-radius: 50px 0 0 50px;
    font-size: 1rem; outline: none;
}
.hero-search button {
    padding: 15px 30px; background: #5c5ce4; color: #fff; border: none;
    border-radius: 0 50px 50px 0; cursor: pointer; font-size: 1rem; font-weight: 600;
    transition: background 0.3s;
}
.hero-search button:hover { background: #0f3460; }

/* === CATEGORIES === */
.section-title { font-size: 1.8rem; margin-bottom: 30px; color: #1a1a2e; text-align: center; }
.categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; margin-bottom: 50px; }
.cat-card {
    background: #ffffff; padding: 30px 20px; border-radius: 12px; text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(108,92,231,0.15); }
.cat-icon { font-size: 2.5rem; margin-bottom: 15px; }
.cat-card h3 { font-size: 1.2rem; margin-bottom: 8px; color: #1a1a2e; }
.cat-card p { font-size: 0.9rem; color: #636e72; }

/* === SYMBOLS GRID === */
.symbols-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 15px; margin-bottom: 50px;
}
.symbol-item {
    background: #fff; padding: 20px 10px; text-align: center; border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); cursor: pointer; transition: all 0.3s;
    font-size: 1.0rem; position: relative;
}
.symbol-item:hover { transform: scale(1.05); box-shadow: 0 5px 20px rgba(108,92,231,0.2); }
.symbol-item .sym-label { display: block; font-size: 0.7rem; color: #b2bec3; margin-top: 8px; }

/* === ARTICLES === */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; }
.article-card {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: transform 0.3s;
}
.article-card:hover { transform: translateY(-5px); }
.article-card-img { height: 200px; background: linear-gradient(135deg, #6c5ce7, #fd79a8); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.article-card-body { padding: 25px; }
.article-card-body .cat-tag {
    display: inline-block; background: #dfe6e9; padding: 4px 12px; border-radius: 20px;
    font-size: 0.8rem; color: #636e72; margin-bottom: 10px;
}
.article-card-body h3 { font-size: 1.2rem; margin-bottom: 10px; }
.article-card-body h3 a { color: #1a1a2e; }
.article-card-body h3 a:hover { color: #6c5ce7; }
.article-card-body p { font-size: 0.95rem; color: #636e72; margin-bottom: 15px; }
.read-more { color: #6c5ce7; font-weight: 600; font-size: 0.9rem; }

/* === ARTICLE PAGE === */
.article-page { max-width: 800px; margin: 0 auto; }
.article-page h1 { font-size: 2.2rem; color: #1a1a2e; margin-bottom: 20px; line-height: 1.3; }
.article-meta { color: #636e72; font-size: 0.9rem; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #dfe6e9; }
.article-meta span { margin-right: 20px; }
.article-content h2 { font-size: 1.6rem; color: #1a1a2e; margin: 40px 0 15px; }
.article-content h3 { font-size: 1.3rem; color: #2d3436; margin: 30px 0 12px; }
.article-content p { margin-bottom: 18px; font-size: 1.05rem; }
.article-content ul, .article-content ol { margin: 15px 0 20px 25px; }
.article-content li { margin-bottom: 10px; font-size: 1.02rem; }
.article-content .symbox {
    background: #fff; border: 2px solid #dfe6e9; border-radius: 10px; padding: 30px;
    margin: 25px 0; text-align: center; font-size: 2rem; letter-spacing: 10px;
}
.article-content blockquote {
    border-left: 4px solid #6c5ce7; padding: 15px 20px; margin: 25px 0;
    background: #f8f9fa; font-style: italic; color: #636e72;
}
.article-nav { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 30px; border-top: 1px solid #dfe6e9; }

/* === BREADCRUMB === */
.breadcrumb { font-size: 0.85rem; color: #b2bec3; margin-bottom: 30px; }
.breadcrumb a { color: #6c5ce7; }
.breadcrumb span { color: #636e72; }

/* === FOOTER === */
.site-footer {
    background: linear-gradient(135deg, #5c5ce4 0%, #5c5ce4 100%);
    color: #ffffff; padding: 60px 0 0;
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 40px; margin-bottom: 40px; }
.footer-col h4 { color: #ffffff; font-size: 1.1rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; }
.footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: #fd79a8; }
.footer-col p { font-size: 0.9rem; line-height: 1.7; color: #ffffff; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links li a { color: #ffffff; font-size: 0.9rem; transition: color 0.3s, padding-left 0.3s; }
.footer-links li a:hover { color: #fd79a8; padding-left: 5px; }
.footer-social { margin-top: 20px; display: flex; gap: 15px; }
.footer-social a { font-size: 1.5rem; color: #ffffff; transition: color 0.3s; }
.footer-social a:hover { color: #fd79a8; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; text-align: center; }
.footer-bottom p { font-size: 0.85rem; color: #ffffff; margin-bottom: 5px; }
.footer-links-bottom a { color: #b2bec3; font-size: 0.85rem; margin: 0 3px; }
.footer-links-bottom a:hover { color: #fd79a8; }
.footer-disclaimer { font-size: 0.8rem; color: #ffffff; margin-top: 5px; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .nav-toggle { display: block; }
    .nav-list { display: none; flex-direction: column; position: absolute; top: 70px; left: 0; right: 0; background: #1a1a2e; padding: 20px; border-radius: 0 0 12px 12px; }
    .nav-list.show { display: flex; }
    .hero h1 { font-size: 1.8rem; }
    .hero p { font-size: 1rem; }
    .categories-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .articles-grid { grid-template-columns: 1fr; }
    .article-page h1 { font-size: 1.6rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* Symbol category styling for aesthetic symbols */
.symbol-category {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06);
}
.symbol-category h2 {
    font-size: 1.5rem;
    color: #2d3436;
    margin-bottom: 20px;
    text-align: center;
}
.sym-char {
    user-select: all;
}