/* =========================================
   1. CORE RESET & LAYOUT - DARK THEME
   ========================================= */
@font-face {
    font-family: 'roboto';
    src: url("../fonts/Roboto-Regular.eot");
    src: url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"), url("../fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

html { box-sizing: border-box; height: 100%; }
*, *:before, *:after { box-sizing: inherit; }

body {
    margin: 0; padding: 0;
    font-family: roboto, helvetica, sans-serif, arial, verdana, tahoma;
    font-size: 16px;
    color: #b5bbbf;
    background: #000;
    line-height: 1.5;
    min-height: 100vh;
    scrollbar-color: #707070 #23282f;
}

a { text-decoration: none; color: #E74C3C; transition: color 0.2s; }
a:hover { color: #fff; }

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

/* =========================================
   2. HEADER / NAVBAR (MOBILE READY)
   ========================================= */
.daunt-navbar {
    position: fixed; top: 0; left: 0; width: 100%; height: 60px;
    background: #1A1E23; z-index: 99999;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4);
    border-bottom: 1px solid #2A2D31;
}

.nav-container {
    width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between;
    height: 100%; position: relative; z-index: 100; background: #1A1E23;
}

.nav-left { display: flex; align-items: center; height: 100%; }

.nav-brand {
    display: flex; align-items: center; text-decoration: none; margin-right: 25px;
}
.nav-logo-img {
    width: 32px; height: 32px; border-radius: 4px; margin-right: 10px;
    background: #E74C3C; padding: 4px; 
}
.nav-logo-text {
    font-size: 24px; color: #b5bbbf; font-weight: bold; line-height: 1;
    letter-spacing: -0.5px;
}
.nav-brand:hover .nav-logo-text { color: #fff; }

.nav-links {
    height: 100%; display: flex; align-items: center;
    border-left: 1px solid #2A2D31; padding-left: 20px;
}
.nav-links ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; }
.nav-links a { color: #888; font-size: 14px; font-weight: 500; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover { color: #fff; }

.nav-right { display: flex; align-items: center; gap: 15px; }

.nav-search-form {
    position: relative; display: flex; align-items: center;
}
.nav-search-form input {
    background: #121518; border: 1px solid #2A2D31;
    color: #b5bbbf; padding: 0 35px 0 12px;
    height: 34px; border-radius: 4px; width: 220px;
    font-size: 13px; transition: border 0.2s, width 0.2s;
}
.nav-search-form input:focus { border-color: #444; outline: none; background: #000; }
.nav-search-form button {
    position: absolute; right: 0; top: 0; height: 34px; width: 34px;
    background: none; border: none; color: #666;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.nav-search-form button:hover { color: #E74C3C; }

.nav-toggle-checkbox { display: none; }
.nav-hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; width: 24px; }
.nav-hamburger .bar {
    width: 100%; height: 2px; background-color: #b5bbbf; border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.mobile-menu-dropdown {
    position: fixed; top: 60px; left: 0; width: 100%;
    background: #15191d; border-bottom: 1px solid #E74C3C;
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    z-index: 90; box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.mobile-menu-dropdown ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu-dropdown li { border-bottom: 1px solid #2A2D31; }
.mobile-menu-dropdown li:last-child { border-bottom: none; }
.mobile-menu-dropdown a {
    display: block; padding: 15px 25px; color: #b5bbbf;
    font-size: 16px; text-decoration: none; font-weight: 500;
}
.mobile-menu-dropdown a:hover { background: #1A1E23; color: #fff; padding-left: 30px; transition: 0.2s; }
.mobile-menu-dropdown .highlight { color: #E74C3C; }
.mobile-menu-dropdown .separator { height: 10px; background: #000; border-bottom: 1px solid #2A2D31; }

@media (max-width: 800px) {
    .desktop-only { display: none; }
    .nav-hamburger { display: flex; }
    .nav-search-form input { width: 140px; }
    .nav-search-form input:focus { width: 160px; }
    .nav-toggle-checkbox:checked ~ .mobile-menu-dropdown { max-height: 500px; }
    .nav-toggle-checkbox:checked ~ .nav-container .nav-hamburger .top { transform: translateY(7px) rotate(45deg); background-color: #E74C3C; }
    .nav-toggle-checkbox:checked ~ .nav-container .nav-hamburger .mid { opacity: 0; }
    .nav-toggle-checkbox:checked ~ .nav-container .nav-hamburger .bot { transform: translateY(-7px) rotate(-45deg); background-color: #E74C3C; }
}
@media (max-width: 400px) {
    .nav-logo-text { display: none; }
    .nav-brand { margin-right: 15px; }
}

/* =========================================
   3. MAIN CONTENT
   ========================================= */
.content {
    flex: 1; width: 100%; margin-top: 60px;
    background: #000; padding-bottom: 40px;
}
.content-inner { max-width: 1240px; margin: 0 auto; padding: 20px; }

.content-inner h1, .content-inner h2, .content-inner h3 { color: #e0e0e0 !important; }
.content-inner p, .content-inner li { color: #b5bbbf !important; }

/* =========================================
   4. DIRECTORY LIST & FILTERS
   ========================================= */
.dir-list { position: relative; margin-top: 20px; }

.dir-list > input[type="radio"][name="link-filter"] {
    position: absolute; top: 0;
    width: 105px; height: 35px;
    opacity: 0; cursor: pointer; z-index: 10; margin: 0;
}
.dir-list > input[type="radio"]:nth-child(1) { left: 0; }
.dir-list > input[type="radio"]:nth-child(2) { left: 110px; }
.dir-list > input[type="radio"]:nth-child(3) { left: 220px; }
.dir-list > input[type="radio"]:nth-child(4) { left: 330px; }
.dir-list > input[type="radio"]:nth-child(5) { left: 440px; }

.filter-buttons { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #2A2D31; }
.standardBtn.dir-filter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 105px; margin-right: 5px; height: 35px; font-weight: bold;
    background: #1A1E23; color: #b5bbbf; cursor: pointer;
    border-radius: 3px; border: 1px solid #2A2D31;
    text-transform: uppercase; font-size: 12px;
}
.standardBtn.dir-filter img.filter-icon { 
    filter: invert(75%) sepia(6%) saturate(163%) hue-rotate(169deg) brightness(88%) contrast(85%);
    width: 12px; height: 12px; margin-right: 6px;
}

.dir-list > input[type="radio"]:nth-child(1):checked ~ .filter-buttons .dir-filter[data-tag="featured"],
.dir-list > input[type="radio"]:nth-child(2):checked ~ .filter-buttons .dir-filter[data-tag="forums"],
.dir-list > input[type="radio"]:nth-child(3):checked ~ .filter-buttons .dir-filter[data-tag="markets"],
.dir-list > input[type="radio"]:nth-child(4):checked ~ .filter-buttons .dir-filter[data-tag="shops"],
.dir-list > input[type="radio"]:nth-child(5):checked ~ .filter-buttons .dir-filter[data-tag="other"] {
    background: #E74C3C; color: #fff; border-color: #E74C3C;
}
.dir-list > input[type="radio"]:checked ~ .filter-buttons .dir-filter.active-filter img.filter-icon { filter: brightness(0) invert(1); }

.items .service-item { display: none; }
.dir-list > input[type="radio"]:nth-child(1):checked ~ .items .service-item.is-featured { display: block; }
.dir-list > input[type="radio"]:nth-child(2):checked ~ .items .service-item[data-category="forums"] { display: block; }
.dir-list > input[type="radio"]:nth-child(3):checked ~ .items .service-item[data-category="markets"] { display: block; }
.dir-list > input[type="radio"]:nth-child(4):checked ~ .items .service-item[data-category="shops"] { display: block; }
.dir-list > input[type="radio"]:nth-child(5):checked ~ .items .service-item[data-category="other"] { display: block; }

/* =========================================
   5. SERVICE ITEMS (LIST VIEW)
   ========================================= */
.service-item {
    background: #1A1E23; border: 1px solid #2A2D31;
    border-radius: 4px; margin-bottom: 15px; position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.service-item > input[type="checkbox"] { 
    position: absolute; top: 0; left: 0; width: 100%; height: 60px; 
    opacity: 0; cursor: pointer; z-index: 5; margin: 0; 
}
.item-detail { padding: 10px; height: 60px; display: flex; align-items: center; }

.item-detail .icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: #2A2D31; border: 1px solid #444; margin-right: 15px;
    flex-shrink: 0; position: relative; z-index: 10;
}

.item-detail .text-hold { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.item-detail .name-row { display: flex; align-items: center; gap: 10px; }

/* FIX: ADDED RELATIVE POSITIONING & Z-INDEX TO ENSURE CLICKABILITY OVER CHECKBOX */
.item-detail .service-name { 
    font-size: 18px; font-weight: bold; color: #b5bbbf; 
    pointer-events: auto; text-decoration: none;
    position: relative; z-index: 10; 
}
.item-detail .service-name:hover { color: #fff; }

.item-detail .count { font-size: 12px; color: #888; margin-top: 4px; }
.item-detail .expand-btn {
    margin-left: 15px; width: 0; height: 0;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-top: 6px solid #888; transition: transform 0.2s;
}
.service-item > input[type="checkbox"]:checked ~ .item-detail .expand-btn { transform: rotate(180deg); }
.service-item > input[type="checkbox"]:checked ~ .mirror-list { display: block; }

.mirror-list { display: none; padding: 15px; background: #121518; border-top: 1px solid #2A2D31; }
.mirror {
    background: #1A1E23; border: 1px solid #2A2D31; border-radius: 3px;
    margin-bottom: 8px; padding: 10px 90px 10px 50px; position: relative; color: #b5bbbf;
}
.mirror .symbol {
    position: absolute; top: 0; left: 0; bottom: 0; width: 40px;
    background: #2A2D31; color: #b5bbbf; display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: bold; border-right: 1px solid #333;
}
.mirror .symbol.tor { background: #5b2c6f; color: #fff; }
.mirror .symbol.i2p { background: #a04000; color: #fff; }
.mirror .symbol.web { background: #1f618d; color: #fff; }
.mirror .link { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: monospace; font-size: 14px; }
.mirror .copy-btn {
    position: absolute; top: 5px; right: 5px; bottom: 5px; width: 70px;
    background: #2A2D31; color: #b5bbbf; border: 1px solid #444; border-radius: 3px;
    font-size: 11px; font-weight: bold; cursor: pointer;
}
.mirror .copy-btn:hover { background: #333; color: #fff; }

/* =========================================
   6. SERVICE VIEW PAGE STRUCTURE
   ========================================= */
.service-view-page { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }

.service-header {
    width: 100%; background: #1A1E23; border: 1px solid #2A2D31;
    border-radius: 4px; padding: 20px; display: flex; align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-bottom: 20px;
}
.service-header .icon {
    width: 80px; height: 80px; border-radius: 50%;
    background-color: #2A2D31; border: 1px solid #444; margin-right: 20px; flex-shrink: 0;
}
.service-header h1 { margin: 0; font-size: 24px; color: #b5bbbf; }
.service-header .meta-badges { margin-top: 10px; }

.meta-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #fff; margin-right: 5px; }
.bg-green { background-color: #218c54; }
.bg-red { background-color: #c0392b; }
.bg-orange { background-color: #d68910; }
.bg-blue { background-color: #2471a3; }
.bg-gray { background-color: #2A2D31; color: #b5bbbf; border: 1px solid #333; }
.bg-dark { background-color: #000; }

.list-badge { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #fff; letter-spacing: 0.5px; }

.sv-sidebar { width: 300px; flex-shrink: 0; }
.sv-content { flex-grow: 1; width: calc(100% - 320px); }
@media (max-width: 900px) { .sv-sidebar, .sv-content { width: 100%; } }

.widget { background: #1A1E23; border: 1px solid #2A2D31; padding: 15px; border-radius: 4px; margin-bottom: 20px; }
.widget h4 { font-size: 14px; text-transform: uppercase; color: #888; border-bottom: 1px solid #2A2D31; padding-bottom: 10px; margin-bottom: 10px; }
.stat-row { display: flex; justify-content: space-between; border-bottom: 1px solid #2A2D31; padding: 8px 0; font-size: 14px; color: #b5bbbf; }
.stat-row:last-child { border-bottom: none; }

.tabs { display: flex; flex-wrap: wrap; background: #1A1E23; border: 1px solid #2A2D31; border-radius: 4px; overflow: hidden; }
.tabs input[type="radio"] { display: none; }
.tabs label { padding: 15px 20px; flex-grow: 1; text-align: center; cursor: pointer; background: #121518; border-bottom: 1px solid #2A2D31; border-right: 1px solid #2A2D31; font-weight: bold; color: #888; transition: background 0.2s; }
.tabs label:hover { background: #2A2D31; color: #b5bbbf; }
.tabs .tab-content { width: 100%; padding: 25px; display: none; order: 10; background: #1A1E23; border-top: 1px solid #2A2D31; color: #b5bbbf; }
.tabs input:checked + label { background: #1A1E23; border-bottom: 1px solid transparent; color: #E74C3C; box-shadow: inset 0 3px 0 #E74C3C; }
.tabs input:checked + label + .tab-content { display: block; }

.pgp-box { background: #121518; padding: 15px; border: 1px solid #2A2D31; font-family: monospace; font-size: 12px; overflow-x: auto; border-radius: 3px; color: #b5bbbf; }

/* =========================================
   7. FOOTER
   ========================================= */
footer { background-color: #111418; border-top: 1px solid #2A2D31; padding: 60px 0 40px; margin-top: auto; }
.footer-grid { max-width: 1240px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.f-col h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 20px 0; font-weight: 700; opacity: 0.9; }
.f-col ul { list-style: none; padding: 0; margin: 0; }
.f-col ul li { margin-bottom: 12px; }
.f-col a { color: #888; text-decoration: none; font-size: 14px; transition: color 0.2s ease; }
.f-col a:hover { color: #E74C3C; }

.f-brand { display: flex; flex-direction: column; align-items: flex-start; }
.f-logo-row { display: flex; align-items: center; margin-bottom: 20px; text-decoration: none; }
.f-logo-row img { width: 36px; height: 36px; border-radius: 4px; margin-right: 12px; }
.f-logo-row span { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.f-desc { color: #666; font-size: 14px; line-height: 1.6; margin-bottom: 25px; max-width: 280px; }
.f-copy { font-size: 12px; color: #444; margin-top: auto; }

.f-news-item { margin-bottom: 15px; display: block; text-decoration: none; }
.f-news-date { display: block; font-size: 11px; color: #555; margin-bottom: 4px; }
.f-news-title { display: block; color: #b5bbbf; line-height: 1.4; font-weight: 500; font-size: 14px; transition: color 0.2s; }
.f-news-title:hover { color: #E74C3C; }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } .f-brand { align-items: center; } .f-desc { margin: 0 auto 25px; } }

/* =========================================
   8. UTILITIES & COMPONENTS
   ========================================= */
.standardBtn {
    display: inline-flex; align-items: center; justify-content: center;
    background: #2A2D31; color: #b5bbbf; border: 1px solid #444;
    padding: 0 20px; height: 35px; line-height: 35px;
    border-radius: 3px; text-transform: uppercase; font-size: 12px;
    text-align: center; cursor: pointer;
}
.standardBtn:hover { background: #333; color: #fff; }

.verified-pill { display: inline-flex; align-items: center; background-color: #1A1E23; color: #27ae60; border: 1px solid #27ae60; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: bold; text-transform: uppercase; }
.verified-pill .chk { background: #27ae60; color: #fff; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 10px; margin-right: 6px; }
.verified-pill.bg-verified { background-color: #e8f8f5; color: #27ae60; border-color: #27ae60; }
.verified-pill.bg-safe { background-color: #e0f2f1; color: #009688; border-color: #009688; }
.verified-pill.bg-safe .chk { background: #009688; color: #fff; }
.verified-pill.bg-warning { background-color: #fef9e7; color: #f39c12; border-color: #f39c12; }
.verified-pill.bg-warning .chk { background: #f39c12; color: #fff; }
.verified-pill.error { background-color: #fdedec; color: #c0392b; border-color: #c0392b; }
.verified-pill.error .chk { background: #c0392b; color: #fff; }
.verified-pill.bg-gray { background-color: #f4f6f7; color: #7f8c8d; border-color: #bdc3c7; }
.verified-pill.bg-gray .chk { background: #95a5a6; color: #fff; }

.micro-icon { width: 14px; height: 14px; vertical-align: middle; margin-right: 6px; opacity: 0.7; }

/* =========================================
   9. SEO, BLOG & FORMS (MERGED FROM INDEX/VIEW)
   ========================================= */
.text-page-container { background: #1A1E23; border: 1px solid #2A2D31; border-radius: 6px; padding: 40px; max-width: 900px; margin: 0 auto; color: #b5bbbf; }
.text-page-container h1 { margin-top: 0; border-bottom: 2px solid #E74C3C; padding-bottom: 15px; display: inline-block; margin-bottom: 20px; color: #fff; }
.text-page-container h3 { color: #e0e0e0; margin-top: 30px; margin-bottom: 10px; font-weight: bold; font-size: 18px; }
.text-page-container p, .text-page-container li { color: #b5bbbf; font-size: 16px; line-height: 1.8; }
.text-page-container strong { color: #fff; }

.seo-intro { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #2A2D31; color: #b5bbbf; }
.seo-intro h1 { font-size: 28px; color: #fff; margin-bottom: 10px; }
.seo-intro p { font-size: 15px; line-height: 1.6; margin-bottom: 15px; color: #b5bbbf; }
.seo-intro .update-time { font-size: 12px; color: #888; font-style: italic; margin-bottom: 15px; }

.security-alert { background-color: #2F301A; color: #b5bbbf; border: 1px solid #444; padding: 15px; border-radius: 4px; margin-bottom: 20px; font-size: 14px; line-height: 1.5; }

.seo-bottom { margin-top: 40px; padding-top: 30px; border-top: 1px solid #2A2D31; color: #b5bbbf; }
.seo-guide-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.seo-guide-box { flex: 1; min-width: 280px; background: #1A1E23; border: 1px solid #2A2D31; padding: 20px; border-radius: 4px; color: #b5bbbf; }
.seo-guide-box h3 { font-size: 18px; color: #E74C3C; margin-bottom: 10px; }
.seo-guide-box ul { list-style-type: disc; padding-left: 20px; color: #b5bbbf; }

.review-form-container { background: #1A1E23; border: 1px solid #2A2D31; padding: 20px; border-radius: 4px; margin-bottom: 30px; }
.form-row { display: flex; gap: 20px; margin-bottom: 15px; align-items: flex-start; }
.form-row.bottom { align-items: flex-end; }
.col { flex: 1; display: flex; flex-direction: column; }
.col.small { flex: 0 0 140px; }
.col.full { flex: 1 1 100%; }
.review-form-container label { display: block; font-size: 12px; font-weight: bold; color: #888; margin-bottom: 8px; }
.review-form-container input[type="text"], .review-form-container select, .review-form-container textarea { background: #2A2D31; border: 1px solid #2A2D31; color: #b5bbbf; border-radius: 3px; padding: 8px 10px; font-size: 14px; width: 100%; box-sizing: border-box; min-height: 38px; }
.review-form-container input:focus, .review-form-container select:focus, .review-form-container textarea:focus { border-color: #E74C3C; outline: none; background: #121518; }
.captcha-group { display: flex; align-items: center; gap: 10px; }
.captcha-img { height: 38px; border-radius: 3px; border: 1px solid #333; }
.captcha-group input { width: 120px !important; text-transform: uppercase; }

.alert.success { background: #1e3a23; color: #82c91e; border: 1px solid #27ae60; }
.alert.error { background: #2A2D31; color: #c0392b; border: 1px solid #c0392b; }

.review-card { background: #1A1E23; border: 1px solid #2A2D31; margin-bottom: 15px; border-radius: 4px; }
.r-head { background: #1a1e23; border-bottom: 1px solid #2A2D31; padding: 10px 15px; display: flex; align-items: center; }
.r-user { color: #b5bbbf; font-weight: bold; margin-right: 15px; }
.r-date { color: #888; font-size: 12px; flex-grow: 1; }
.r-body { padding: 15px; font-size: 14px; color: #b5bbbf; line-height: 1.5; word-wrap: break-word; }
.r-rating { padding: 2px 8px; border-radius: 3px; color: #fff; font-size: 12px; font-weight: bold; }
.rating-high { background-color: #218c54; }
.rating-mid { background-color: #d68910; }
.rating-low { background-color: #c0392b; }

.blog-index-header { text-align: center; padding: 40px 0; border-bottom: 1px solid #2A2D31; margin-bottom: 30px; }
.blog-index-header h1 { margin: 0 0 10px 0; font-size: 32px; color: #fff; }
.blog-index-header p { color: #888; font-size: 18px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 25px; }
.blog-card { background: #1A1E23; border: 1px solid #2A2D31; border-radius: 6px; padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); border-color: #444; }
.blog-thumb-container { width: 100%; height: 200px; background-color: #121518; border-bottom: 1px solid #2A2D31; }
.blog-thumb { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: transform 0.3s; }
.blog-card:hover .blog-thumb { transform: scale(1.05); opacity: 1; }
.blog-content-wrap { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.blog-card .meta { font-size: 12px; color: #888; text-transform: uppercase; margin-bottom: 10px; font-weight: bold; }
.blog-card h2 { font-size: 20px; margin: 0 0 10px 0; line-height: 1.4; }
.blog-card h2 a { color: #fff; }
.blog-card h2 a:hover { color: #E74C3C; }
.blog-card p { font-size: 14px; color: #b5bbbf; flex-grow: 1; margin-bottom: 20px; line-height: 1.6; }

/* Ads */
.ad-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin: 20px 0; width: 100%; }
.ad-banner { display: block; max-width: 100%; transition: opacity 0.2s; }
.ad-banner:hover { opacity: 0.9; }
.ad-banner img { display: block; max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

/* Latest News (Index) Styles */
.latest-news-container { margin-top: 40px; padding-top: 30px; border-top: 1px solid #2A2D31; }
.ln-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.ln-header h2 { margin: 0; font-size: 24px; color: #fff; }
.view-blog-link { font-size: 14px; color: #E74C3C; font-weight: bold; text-transform: uppercase; }
.view-blog-link:hover { color: #fff; }
.ln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.ln-card { background: #1A1E23; border: 1px solid #2A2D31; border-radius: 4px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.ln-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); border-color: #444; }
.ln-thumb { width: 100%; height: 140px; background-color: #121518; border-bottom: 1px solid #2A2D31; position: relative; }
.ln-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.ln-body { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.ln-date { font-size: 11px; color: #888; margin-bottom: 8px; text-transform: uppercase; font-weight: bold; }
.ln-title { font-size: 16px; margin: 0; line-height: 1.4; }
.ln-title a { color: #fff; text-decoration: none; }
.ln-title a:hover { color: #E74C3C; }

/* =========================================
   10. VIEW PAGE & WIDGET SPECIFICS (SCOPED)
   ========================================= */

/* Scoped Icon Styles - THESE ONLY APPLY TO SERVICE CONTENT */
.service-header .icon,
.item-detail .icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Background Color Logic (Scoped) */
.service-header .icon.bg-dark-mode, 
.item-detail .icon.bg-dark-mode { 
    background-color: #2b2b2b !important; border: 1px solid #444; 
}
.service-header .icon.bg-light-mode, 
.item-detail .icon.bg-light-mode { 
    background-color: #ffffff !important; border: 1px solid #eee; 
}
.service-header .icon.bg-default, 
.item-detail .icon.bg-default { 
    background-color: #f5f5f5; 
}

/* Featured Sidebar Items */
.featured-item {
    display: flex; align-items: center; padding: 12px 10px;
    border-bottom: 1px solid #2A2D31; text-decoration: none;
    transition: background 0.2s;
}
.featured-item:last-child { border-bottom: none; }
.featured-item:hover { background: #22262B; }

.f-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background-size: cover; background-position: center;
    margin-right: 12px; border: 1px solid #444;
    background-color: #121518; flex-shrink: 0;
}
.f-info { flex-grow: 1; }
.f-name { font-size: 14px; color: #fff; font-weight: bold; display: block; line-height: 1.2; }
.f-sub { font-size: 11px; color: #888; display: block; margin-top: 2px; }

/* =========================================
   11. SNOWFALL ANIMATION
   ========================================= */
.snow-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 999999;
    overflow: hidden;
}

.snow {
    position: absolute;
    top: -20px;
    color: #fff;
    opacity: 0; 
    font-size: 1em;
    animation: fall linear infinite;
    text-shadow: 0 0 5px rgba(255,255,255,0.8);
}

@keyframes fall {
    0% { top: -10%; opacity: 0.7; transform: translateX(0); }
    100% { top: 110%; opacity: 0.1; transform: translateX(20px); }
}

/* Randomization */
.snow:nth-child(1) { left: 5%; animation-duration: 9s; animation-delay: -2s; font-size: 14px; }
.snow:nth-child(2) { left: 12%; animation-duration: 12s; animation-delay: -8s; font-size: 12px; }
.snow:nth-child(3) { left: 20%; animation-duration: 8s; animation-delay: -4s; font-size: 16px; }
.snow:nth-child(4) { left: 28%; animation-duration: 11s; animation-delay: -6s; font-size: 10px; }
.snow:nth-child(5) { left: 35%; animation-duration: 14s; animation-delay: -10s; font-size: 18px; }
.snow:nth-child(6) { left: 42%; animation-duration: 10s; animation-delay: -1s; font-size: 13px; }
.snow:nth-child(7) { left: 50%; animation-duration: 13s; animation-delay: -5s; font-size: 15px; }
.snow:nth-child(8) { left: 58%; animation-duration: 9s; animation-delay: -9s; font-size: 11px; }
.snow:nth-child(9) { left: 65%; animation-duration: 15s; animation-delay: -3s; font-size: 17px; }
.snow:nth-child(10) { left: 73%; animation-duration: 11s; animation-delay: -7s; font-size: 14px; }
.snow:nth-child(11) { left: 80%; animation-duration: 8s; animation-delay: -2s; font-size: 15px; }
.snow:nth-child(12) { left: 88%; animation-duration: 13s; animation-delay: -6s; font-size: 12px; }
.snow:nth-child(13) { left: 95%; animation-duration: 10s; animation-delay: -1s; font-size: 16px; }
.snow:nth-child(14) { left: 3%; animation-duration: 14s; animation-delay: -4s; font-size: 13px; }
.snow:nth-child(15) { left: 15%; animation-duration: 11s; animation-delay: -9s; font-size: 14px; }
.snow:nth-child(16) { left: 25%; animation-duration: 9s; animation-delay: -3s; font-size: 18px; }
.snow:nth-child(17) { left: 38%; animation-duration: 13s; animation-delay: -8s; font-size: 11px; }
.snow:nth-child(18) { left: 48%; animation-duration: 10s; animation-delay: -2s; font-size: 16px; }
.snow:nth-child(19) { left: 62%; animation-duration: 12s; animation-delay: -5s; font-size: 12px; }
.snow:nth-child(20) { left: 78%; animation-duration: 15s; animation-delay: -7s; font-size: 15px; }
.snow:nth-child(21) { left: 92%; animation-duration: 11s; animation-delay: -1s; font-size: 14px; }
.snow:nth-child(22) { left: 7%; animation-duration: 14s; animation-delay: -9s; font-size: 17px; }
.snow:nth-child(23) { left: 32%; animation-duration: 10s; animation-delay: -4s; font-size: 13px; }
.snow:nth-child(24) { left: 55%; animation-duration: 12s; animation-delay: -6s; font-size: 15px; }
.snow:nth-child(25) { left: 82%; animation-duration: 9s; animation-delay: -2s; font-size: 12px; }
.snow:nth-child(26) { left: 45%; animation-duration: 16s; animation-delay: -12s; font-size: 14px; }
.snow:nth-child(27) { left: 55%; animation-duration: 13s; animation-delay: -4s; font-size: 16px; }
.snow:nth-child(28) { left: 65%; animation-duration: 10s; animation-delay: -8s; font-size: 12px; }
.snow:nth-child(29) { left: 10%; animation-duration: 15s; animation-delay: -3s; font-size: 15px; }
.snow:nth-child(30) { left: 90%; animation-duration: 11s; animation-delay: -7s; font-size: 13px; }