/*
Theme Name: JIN Child Theme - Cyber AI Edition
Template: jin
Version: 2.6.0
Description: High-Tech Cyber Quant Theme for Mosatsumo AI Coin Trading Diary
*/

/* --- GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700;800&family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* --- CYBER AI AMBIENT BACKGROUND & MESH --- */
html, body {
    background-color: #060913 !important;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(0, 242, 254, 0.14) 0%, transparent 60%),
        radial-gradient(circle at 85% 25%, rgba(168, 85, 247, 0.09) 0%, transparent 50%),
        radial-gradient(circle at 15% 65%, rgba(16, 185, 129, 0.08) 0%, transparent 45%),
        linear-gradient(rgba(56, 189, 248, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 36px 36px, 36px 36px !important;
    background-attachment: fixed !important;
    color: #e2e8f0 !important;
    font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}
#wrapper {
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
}
#contents {
    width: 1200px !important;
    max-width: 96% !important;
    margin: 0 auto !important;
    padding-top: 15px !important;
    box-sizing: border-box !important;
}

/* --- HIGH-END CYBER GLOBAL NAVBAR --- */
#header-box {
    background: rgba(7, 11, 20, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    padding: 8px 0 !important;
}
#header {
    max-width: 1200px !important;
    width: 96% !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
#site-info {
    float: none !important;
    margin: 0 !important;
}
#site-info a {
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.8px !important;
    text-decoration: none !important;
    font-size: 1.2rem !important;
    text-shadow: 0 0 16px rgba(0, 242, 254, 0.5) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#site-info a::before {
    content: "⚡" !important;
    color: #00f2fe !important;
    font-size: 1.25rem !important;
}

/* Global Nav Links */
#drawernav3 {
    margin: 0 !important;
}
.menu-box {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.menu-box li a {
    color: #94a3b8 !important;
    font-weight: 600 !important;
    font-size: 0.86rem !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    letter-spacing: 0.3px !important;
}
.menu-box li a:hover, .menu-box li.current-menu-item a {
    color: #00f2fe !important;
    background: rgba(0, 242, 254, 0.12) !important;
    border-color: rgba(0, 242, 254, 0.35) !important;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* --- TOP PAGE / MAIN ARCHIVE HORIZONTAL COMPACT CARDS --- */
.site-main > .toppost-list-box-simple > .post-list .post-list-item,
#main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-item {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.site-main > .toppost-list-box-simple > .post-list .post-list-item:hover,
#main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-item:hover {
    border-color: #00f2fe !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.25) !important;
    transform: translateY(-2px) !important;
}
.site-main > .toppost-list-box-simple > .post-list a.post-list-link,
#main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) a.post-list-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    padding: 0 !important;
    width: 100% !important;
}
.site-main > .toppost-list-box-simple > .post-list .post-list-inner,
#main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.site-main > .toppost-list-box-simple > .post-list .post-list-thumb,
#main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-thumb {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    height: 165px !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: 0 !important;
    background: #030712 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.site-main > .toppost-list-box-simple > .post-list .post-list-thumb img,
#main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-thumb img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
}
.site-main > .toppost-list-box-simple > .post-list .post-list-item:hover .post-list-thumb img,
#main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-item:hover .post-list-thumb img {
    transform: scale(1.05) !important;
}
.site-main > .toppost-list-box-simple > .post-list .post-list-meta,
#main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-meta {
    padding: 16px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.site-main > .toppost-list-box-simple > .post-list .post-list-title,
#main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-title {
    font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif !important;
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.45 !important;
    margin: 0 0 8px 0 !important;
    transition: color 0.2s ease !important;
}
.site-main > .toppost-list-box-simple > .post-list .post-list-item:hover .post-list-title,
#main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-item:hover .post-list-title {
    color: #00f2fe !important;
}
.site-main > .toppost-list-box-simple > .post-list .post-list-date,
#main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-date {
    font-size: 0.78rem !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
    display: block !important;
}
.site-main > .toppost-list-box-simple > .post-list .post-list-desc,
#main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-desc {
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
    line-height: 1.55 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
}

@media (max-width: 680px) {
    .site-main > .toppost-list-box-simple > .post-list .post-list-inner,
    #main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-inner {
        flex-direction: column !important;
    }
    .site-main > .toppost-list-box-simple > .post-list .post-list-thumb,
    #main-contents > .toppost-list-box-simple > .post-list:not(.post-list-mag3col):not(.related-slide) .post-list-thumb {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
    }
}

/* --- RELATED POSTS SLIDER (RELATED POST) & 3-COLUMN CARDS --- */
.related-entry-section,
.related-slide {
    margin-top: 30px !important;
}
.related-entry-headline-text span {
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
}
.related-entry-section .swiper-container2,
.related-slide .swiper-container2 {
    padding: 10px 0 35px 0 !important;
    min-height: auto !important;
    overflow: hidden !important;
}
.related-entry-section .swiper-wrapper,
.related-slide .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
}
.related-entry-section .swiper-slide,
.related-slide .swiper-slide {
    height: auto !important;
    display: flex !important;
}
.related-entry-section .post-list-item,
.related-slide .post-list-item,
.post-list-mag3col .post-list-item {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}
.related-entry-section .post-list-item:hover,
.related-slide .post-list-item:hover,
.post-list-mag3col .post-list-item:hover {
    border-color: #00f2fe !important;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.35) !important;
    transform: translateY(-3px) !important;
}
.related-entry-section a.post-list-link,
.related-slide a.post-list-link,
.post-list-mag3col a.post-list-link {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    text-decoration: none !important;
    padding: 0 !important;
}
.related-entry-section .post-list-inner,
.related-slide .post-list-inner,
.post-list-mag3col .post-list-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
}
.related-entry-section .post-list-thumb,
.related-slide .post-list-thumb,
.post-list-mag3col .post-list-thumb {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 135px !important;
    min-height: 135px !important;
    max-height: 135px !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: 0 !important;
    background: #030712 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.related-entry-section .post-list-thumb img,
.related-slide .post-list-thumb img,
.post-list-mag3col .post-list-thumb img {
    width: 100% !important;
    height: 135px !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 135px !important;
    max-height: 135px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    transition: transform 0.4s ease !important;
}
.related-entry-section .post-list-item:hover .post-list-thumb img,
.related-slide .post-list-item:hover .post-list-thumb img,
.post-list-mag3col .post-list-item:hover .post-list-thumb img {
    transform: scale(1.06) !important;
}
.related-entry-section .post-list-meta,
.related-slide .post-list-meta,
.post-list-mag3col .post-list-meta {
    padding: 12px 14px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.related-entry-section .post-list-title,
.related-slide .post-list-title,
.post-list-mag3col .post-list-title {
    font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.45 !important;
    margin: 4px 0 8px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}
.related-entry-section .post-list-item:hover .post-list-title,
.related-slide .post-list-item:hover .post-list-title,
.post-list-mag3col .post-list-item:hover .post-list-title {
    color: #00f2fe !important;
}
.related-entry-section .post-list-date,
.related-slide .post-list-date,
.post-list-mag3col .post-list-date {
    font-size: 0.75rem !important;
    color: #64748b !important;
    margin-top: auto !important;
    display: block !important;
}
.related-entry-section .writer,
.related-slide .writer,
.related-entry-section .post-list-publisher,
.related-slide .post-list-publisher {
    display: none !important;
}

/* --- CYBER SIDEBAR --- */
#sidebar {
    color: #cbd5e1 !important;
}
#sidebar .widget {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 14px !important;
    padding: 24px 20px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
#sidebar .widgettitle {
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.8px !important;
    border-bottom: 2px solid #00f2fe !important;
    padding-bottom: 10px !important;
    margin-bottom: 18px !important;
    background: transparent !important;
}
#sidebar .widgettitle::before {
    content: "// " !important;
    color: #00f2fe !important;
}
#sidebar input[type="search"], #sidebar input[type="text"] {
    background: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.92rem !important;
    outline: none !important;
    transition: all 0.25s ease !important;
}
#sidebar input[type="search"]:focus, #sidebar input[type="text"]:focus {
    border-color: #00f2fe !important;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.45) !important;
}
#sidebar input[type="submit"], #sidebar button {
    background: linear-gradient(135deg, #00f2fe 0%, #0284c7 100%) !important;
    color: #070b14 !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 11px 18px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    margin-top: 10px !important;
    width: 100% !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
}
#sidebar input[type="submit"]:hover, #sidebar button:hover {
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.6) !important;
    transform: translateY(-2px) !important;
}
#sidebar ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#sidebar ul li {
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.1) !important;
}
#sidebar ul li a {
    color: #94a3b8 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    font-size: 0.92rem !important;
}
#sidebar ul li a:hover {
    color: #00f2fe !important;
    transform: translateX(4px) !important;
}

/* --- SINGLE POST MAIN BOX --- */
.cps-post-main-box {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 16px !important;
    padding: 35px 30px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6) !important;
    color: #e2e8f0 !important;
}
.cps-post-title {
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: clamp(1.4rem, 3.5vw, 2.1rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.35 !important;
    margin-bottom: 18px !important;
    text-shadow: 0 0 25px rgba(0, 242, 254, 0.3) !important;
}
.cps-post-thumb {
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 20px 0 30px 0 !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.cps-post-thumb img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
.entry-content h2 {
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: linear-gradient(90deg, rgba(0, 242, 254, 0.18) 0%, rgba(15, 23, 42, 0.2) 100%) !important;
    border-left: 5px solid #00f2fe !important;
    padding: 12px 18px !important;
    margin: 45px 0 22px 0 !important;
    border-radius: 0 10px 10px 0 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}
.entry-content h3 {
    font-size: 1.22rem !important;
    font-weight: 700 !important;
    color: #38bdf8 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.3) !important;
    padding-bottom: 8px !important;
    margin: 32px 0 16px 0 !important;
    letter-spacing: 0.3px !important;
}
.entry-content p {
    font-size: 1.02rem !important;
    line-height: 1.85 !important;
    color: #cbd5e1 !important;
    margin-bottom: 22px !important;
}

/* --- CYBER CHARACTER SPEECH BUBBLES --- */
.cyber-bubble {
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
    margin: 26px 0 !important;
}
.cyber-bubble-avatar {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 15px rgba(0,0,0,0.5) !important;
}
.cyber-bubble-box {
    background: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 14px !important;
    padding: 16px 22px !important;
    flex: 1 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
.cyber-bubble-name {
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.6px !important;
}
.cyber-bubble-text {
    font-size: 0.96rem !important;
    line-height: 1.75 !important;
    color: #f8fafc !important;
    margin: 0 !important;
}

/* --- CYBER TERMINAL DISPLAY --- */
.cyber-terminal {
    background: #030712 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    font-family: 'Consolas', 'Courier New', monospace !important;
    font-size: 0.86rem !important;
    color: #4ade80 !important;
    overflow-x: auto !important;
    margin: 30px 0 !important;
    line-height: 1.6 !important;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.9) !important;
}

/* --- CYBER METRICS TABLE --- */
.cyber-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 25px 0 !important;
    background: rgba(15, 23, 42, 0.7) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}
.cyber-table th {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #00f2fe !important;
    padding: 14px 16px !important;
    font-weight: 800 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.3) !important;
    text-align: left !important;
    font-size: 0.92rem !important;
}
.cyber-table td {
    padding: 13px 16px !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.1) !important;
    color: #cbd5e1 !important;
    font-size: 0.92rem !important;
}

/* --- HIGH CONVERTING MONETIZATION CTA --- */
.cyber-cta-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(6, 78, 59, 0.9) 100%) !important;
    border: 2px solid #10b981 !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    margin: 40px 0 !important;
    box-shadow: 0 10px 35px rgba(16, 185, 129, 0.28) !important;
    text-align: center !important;
}
.cyber-cta-badge {
    display: inline-block !important;
    background: rgba(16, 185, 129, 0.25) !important;
    color: #34d399 !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    margin-bottom: 14px !important;
    letter-spacing: 1.2px !important;
}
.cyber-cta-title {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
}
.cyber-cta-desc {
    font-size: 0.95rem !important;
    color: #cbd5e1 !important;
    line-height: 1.65 !important;
    max-width: 680px !important;
    margin: 0 auto 22px auto !important;
}
.cyber-cta-btn {
    display: inline-block !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.12rem !important;
    padding: 15px 38px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.55) !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.6px !important;
}
.cyber-cta-btn:hover {
    box-shadow: 0 0 35px rgba(16, 185, 129, 0.85) !important;
    transform: translateY(-2px) scale(1.02) !important;
}


/* ==========================================================================
   ⚡ CRITICAL PERFECTION FIX: RELATED POSTS SLIDER & IMAGE DISTORTION ⚡
   ========================================================================== */

/* 1. RELATED POSTS SLIDER CONTAINER */
.related-entry-section,
.related-slide,
.post-list-mag3col-slide {
    margin-top: 35px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.related-entry-section .swiper-container2,
.related-slide .swiper-container2,
.post-list-mag3col-slide .swiper-container2 {
    height: 275px !important;
    min-height: 275px !important;
    max-height: 275px !important;
    padding: 10px 0 35px 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.related-entry-section .swiper-wrapper,
.related-slide .swiper-wrapper,
.post-list-mag3col-slide .swiper-wrapper {
    height: 230px !important;
    max-height: 230px !important;
    display: flex !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

.related-entry-section .swiper-slide,
.related-slide .swiper-slide,
.post-list-mag3col-slide .swiper-slide {
    height: 230px !important;
    max-height: 230px !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: transparent !important;
}

/* 2. SLIDER CARD ARTICLE & LINK */
.related-entry-section article.post-list-item,
.related-slide article.post-list-item,
.post-list-mag3col-slide article.post-list-item {
    height: 230px !important;
    max-height: 230px !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

.related-entry-section article.post-list-item:hover,
.related-slide article.post-list-item:hover,
.post-list-mag3col-slide article.post-list-item:hover {
    border-color: #00f2fe !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.35) !important;
    transform: translateY(-3px) !important;
}

.related-entry-section a.post-list-link,
.related-slide a.post-list-link,
.post-list-mag3col-slide a.post-list-link {
    height: 230px !important;
    max-height: 230px !important;
    min-height: 230px !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.related-entry-section .post-list-inner,
.related-slide .post-list-inner,
.post-list-mag3col-slide .post-list-inner {
    height: 230px !important;
    max-height: 230px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 3. SLIDER THUMBNAIL (CRITICAL FIX FOR VERTICAL STRETCHING) */
.related-entry-section .post-list-thumb,
.related-slide .post-list-thumb,
.post-list-mag3col-slide .post-list-thumb {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    flex: 0 0 130px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #030712 !important;
    box-sizing: border-box !important;
}

.related-entry-section .post-list-thumb img,
.related-slide .post-list-thumb img,
.post-list-mag3col-slide .post-list-thumb img {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    transition: transform 0.4s ease !important;
}

.related-entry-section article.post-list-item:hover .post-list-thumb img,
.related-slide article.post-list-item:hover .post-list-thumb img,
.post-list-mag3col-slide article.post-list-item:hover .post-list-thumb img {
    transform: scale(1.06) !important;
}

/* 4. SLIDER CARD META & TYPOGRAPHY */
.related-entry-section .post-list-meta,
.related-slide .post-list-meta,
.post-list-mag3col-slide .post-list-meta {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    flex: 0 0 100px !important;
    padding: 10px 14px 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
    background: transparent !important;
}

.related-entry-section .post-list-title,
.related-slide .post-list-title,
.post-list-mag3col-slide .post-list-title {
    font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}

.related-entry-section article.post-list-item:hover .post-list-title,
.related-slide article.post-list-item:hover .post-list-title,
.post-list-mag3col-slide article.post-list-item:hover .post-list-title {
    color: #00f2fe !important;
}

.related-entry-section .post-list-date,
.related-slide .post-list-date,
.post-list-mag3col-slide .post-list-date {
    font-size: 0.74rem !important;
    color: #64748b !important;
    margin: 0 !important;
    display: block !important;
}

.related-entry-section .post-list-cat,
.related-slide .post-list-cat,
.post-list-mag3col-slide .post-list-cat {
    position: absolute !important;
    top: -120px !important;
    left: 8px !important;
    background: rgba(14, 165, 233, 0.92) !important;
    backdrop-filter: blur(4px) !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    z-index: 5 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.related-entry-section .writer,
.related-slide .writer,
.related-entry-section .post-list-publisher,
.related-slide .post-list-publisher,
.post-list-mag3col-slide .writer,
.post-list-mag3col-slide .post-list-publisher {
    display: none !important;
}

/* 5. TOP PAGE & MAIN ARCHIVE POST LIST (HORIZONTAL CARDS) */
#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-item,
.site-main > .toppost-list-box-simple > .post-list .post-list-item {
    background: rgba(15, 23, 42, 0.88) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-item:hover,
.site-main > .toppost-list-box-simple > .post-list .post-list-item:hover {
    border-color: #00f2fe !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.25) !important;
    transform: translateY(-2px) !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) a.post-list-link,
.site-main > .toppost-list-box-simple > .post-list a.post-list-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    padding: 0 !important;
    width: 100% !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-inner,
.site-main > .toppost-list-box-simple > .post-list .post-list-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-thumb,
.site-main > .toppost-list-box-simple > .post-list .post-list-thumb {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    height: 165px !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: 0 !important;
    background: #030712 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-thumb img,
.site-main > .toppost-list-box-simple > .post-list .post-list-thumb img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-meta,
.site-main > .toppost-list-box-simple > .post-list .post-list-meta {
    padding: 16px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-title,
.site-main > .toppost-list-box-simple > .post-list .post-list-title {
    font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif !important;
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.45 !important;
    margin: 0 0 8px 0 !important;
    transition: color 0.2s ease !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-item:hover .post-list-title,
.site-main > .toppost-list-box-simple > .post-list .post-list-item:hover .post-list-title {
    color: #00f2fe !important;
}

@media (max-width: 680px) {
    #main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-inner,
    .site-main > .toppost-list-box-simple > .post-list .post-list-inner {
        flex-direction: column !important;
    }
    #main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-thumb,
    .site-main > .toppost-list-box-simple > .post-list .post-list-thumb {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
    }
}

/* 6. SINGLE POST MAIN EYECATCH */
.cps-post-thumb {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 25px auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    background: #030712 !important;
}

.cps-post-thumb img {
    width: 100% !important;
    height: auto !important;
    max-height: 480px !important;
    object-fit: cover !important;
    display: block !important;
}

/* 7. GLOBAL IMAGE STRETCH SAFETY NET */
.post-list-thumb img,
.thumb-image img,
.widget_recent_entries img {
    object-fit: cover !important;
}



/* ==========================================================================
   ⚡ CRITICAL PERFECTION FIX: RELATED POSTS SLIDER & PREV/NEXT & IMAGES ⚡
   ========================================================================== */

/* 1. RELATED POSTS SLIDER CONTAINER */
.related-entry-section,
.related-slide,
.post-list-mag3col-slide {
    margin-top: 35px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.related-entry-section .swiper-container2,
.related-slide .swiper-container2,
.post-list-mag3col-slide .swiper-container2 {
    height: 275px !important;
    min-height: 275px !important;
    max-height: 275px !important;
    padding: 10px 0 35px 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.related-entry-section .swiper-wrapper,
.related-slide .swiper-wrapper,
.post-list-mag3col-slide .swiper-wrapper {
    height: 230px !important;
    max-height: 230px !important;
    display: flex !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

.related-entry-section .swiper-slide,
.related-slide .swiper-slide,
.post-list-mag3col-slide .swiper-slide {
    height: 230px !important;
    max-height: 230px !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: transparent !important;
}

/* 2. SLIDER CARD ARTICLE & LINK & INNER (DARK CYBER BACKGROUND) */
.related-entry-section article.post-list-item,
.related-slide article.post-list-item,
.post-list-mag3col-slide article.post-list-item,
.related-entry-section a.post-list-link,
.related-slide a.post-list-link,
.post-list-mag3col-slide a.post-list-link,
.related-entry-section .post-list-inner,
.related-slide .post-list-inner,
.post-list-mag3col-slide .post-list-inner {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

.related-entry-section article.post-list-item,
.related-slide article.post-list-item,
.post-list-mag3col-slide article.post-list-item {
    height: 230px !important;
    max-height: 230px !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

.related-entry-section article.post-list-item:hover,
.related-slide article.post-list-item:hover,
.post-list-mag3col-slide article.post-list-item:hover {
    border-color: #00f2fe !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.35) !important;
    transform: translateY(-3px) !important;
}

.related-entry-section a.post-list-link,
.related-slide a.post-list-link,
.post-list-mag3col-slide a.post-list-link {
    height: 230px !important;
    max-height: 230px !important;
    min-height: 230px !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.related-entry-section .post-list-inner,
.related-slide .post-list-inner,
.post-list-mag3col-slide .post-list-inner {
    height: 230px !important;
    max-height: 230px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 3. SLIDER THUMBNAIL (EXACT 130PX 16:9 RATIO) */
.related-entry-section .post-list-thumb,
.related-slide .post-list-thumb,
.post-list-mag3col-slide .post-list-thumb {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    flex: 0 0 130px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #030712 !important;
    box-sizing: border-box !important;
}

.related-entry-section .post-list-thumb img,
.related-slide .post-list-thumb img,
.post-list-mag3col-slide .post-list-thumb img {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    transition: transform 0.4s ease !important;
}

.related-entry-section article.post-list-item:hover .post-list-thumb img,
.related-slide article.post-list-item:hover .post-list-thumb img,
.post-list-mag3col-slide article.post-list-item:hover .post-list-thumb img {
    transform: scale(1.06) !important;
}

/* 4. SLIDER CARD META & CRISP TYPOGRAPHY ON DARK BACKGROUND */
.related-entry-section .post-list-meta,
.related-slide .post-list-meta,
.post-list-mag3col-slide .post-list-meta {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    flex: 0 0 100px !important;
    padding: 10px 14px 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
    background: #0f172a !important;
    background-color: #0f172a !important;
}

.related-entry-section .post-list-title,
.related-slide .post-list-title,
.post-list-mag3col-slide .post-list-title {
    font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}

.related-entry-section article.post-list-item:hover .post-list-title,
.related-slide article.post-list-item:hover .post-list-title,
.post-list-mag3col-slide article.post-list-item:hover .post-list-title {
    color: #00f2fe !important;
}

.related-entry-section .post-list-date,
.related-slide .post-list-date,
.post-list-mag3col-slide .post-list-date {
    font-size: 0.74rem !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    display: block !important;
    font-weight: 500 !important;
}

.related-entry-section .post-list-cat,
.related-slide .post-list-cat,
.post-list-mag3col-slide .post-list-cat {
    position: absolute !important;
    top: -120px !important;
    left: 8px !important;
    background: rgba(14, 165, 233, 0.92) !important;
    backdrop-filter: blur(4px) !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    z-index: 5 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.related-entry-section .writer,
.related-slide .writer,
.related-entry-section .post-list-publisher,
.related-slide .post-list-publisher,
.post-list-mag3col-slide .writer,
.post-list-mag3col-slide .post-list-publisher {
    display: none !important;
}

/* 5. ⚡ PREV / NEXT NAVIGATION SECTION (FIXED DISTORTION & DARK THEME) ⚡ */
#prev-next {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    margin: 40px 0 25px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#prev-next .prev,
#prev-next .next {
    flex: 1 1 50% !important;
    width: calc(50% - 10px) !important;
    min-width: 0 !important;
    max-width: 50% !important;
    height: 95px !important;
    min-height: 95px !important;
    max-height: 95px !important;
    background: rgba(15, 23, 42, 0.95) !important;
    background-color: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

#prev-next .prev:hover,
#prev-next .next:hover {
    border-color: #00f2fe !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.35) !important;
    transform: translateY(-2px) !important;
}

#prev-next .prev .metabox,
#prev-next .next .metabox {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 95px !important;
    min-height: 95px !important;
    max-height: 95px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

#prev-next .metabox img,
#prev-next .prev .metabox img,
#prev-next .next .metabox img {
    width: 135px !important;
    min-width: 135px !important;
    max-width: 135px !important;
    height: 95px !important;
    min-height: 95px !important;
    max-height: 95px !important;
    flex: 0 0 135px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    transition: transform 0.4s ease !important;
}

#prev-next .prev:hover .metabox img,
#prev-next .next:hover .metabox img {
    transform: scale(1.06) !important;
}

#prev-next .prev .metabox p,
#prev-next .next .metabox p {
    flex: 1 1 auto !important;
    width: calc(100% - 135px) !important;
    min-width: 0 !important;
    height: 95px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 14px 10px 14px !important;
    font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}

#prev-next .prev:hover .metabox p,
#prev-next .next:hover .metabox p {
    color: #00f2fe !important;
}

#prev-next a.prev:after,
#prev-next a.next:after {
    position: absolute !important;
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

#prev-next a.prev:after {
    content: "◀ PREV" !important;
    top: 6px !important;
    left: 6px !important;
    background: rgba(14, 165, 233, 0.9) !important;
    color: #ffffff !important;
}

#prev-next a.next:after {
    content: "NEXT ▶" !important;
    top: 6px !important;
    right: 6px !important;
    background: rgba(0, 242, 254, 0.9) !important;
    color: #060913 !important;
}

@media (max-width: 680px) {
    #prev-next {
        flex-direction: column !important;
        gap: 12px !important;
    }
    #prev-next .prev,
    #prev-next .next {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 6. TOP PAGE & MAIN ARCHIVE POST LIST */
#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-item,
.site-main > .toppost-list-box-simple > .post-list .post-list-item {
    background: rgba(15, 23, 42, 0.88) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-item:hover,
.site-main > .toppost-list-box-simple > .post-list .post-list-item:hover {
    border-color: #00f2fe !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.25) !important;
    transform: translateY(-2px) !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) a.post-list-link,
.site-main > .toppost-list-box-simple > .post-list a.post-list-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-inner,
.site-main > .toppost-list-box-simple > .post-list .post-list-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-thumb,
.site-main > .toppost-list-box-simple > .post-list .post-list-thumb {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    height: 165px !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: 0 !important;
    background: #030712 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-thumb img,
.site-main > .toppost-list-box-simple > .post-list .post-list-thumb img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-meta,
.site-main > .toppost-list-box-simple > .post-list .post-list-meta {
    padding: 16px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-title,
.site-main > .toppost-list-box-simple > .post-list .post-list-title {
    font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif !important;
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.45 !important;
    margin: 0 0 8px 0 !important;
    transition: color 0.2s ease !important;
}

#main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-item:hover .post-list-title,
.site-main > .toppost-list-box-simple > .post-list .post-list-item:hover .post-list-title {
    color: #00f2fe !important;
}

@media (max-width: 680px) {
    #main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-inner,
    .site-main > .toppost-list-box-simple > .post-list .post-list-inner {
        flex-direction: column !important;
    }
    #main-contents > .toppost-list-box-simple > .post-list:not(.related-slide) .post-list-thumb,
    .site-main > .toppost-list-box-simple > .post-list .post-list-thumb {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
    }
}

/* 7. SINGLE POST MAIN EYECATCH */
.cps-post-thumb {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 25px auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    background: #030712 !important;
}

.cps-post-thumb img {
    width: 100% !important;
    height: auto !important;
    max-height: 480px !important;
    object-fit: cover !important;
    display: block !important;
}

/* 8. GLOBAL IMAGE STRETCH SAFETY NET */
.post-list-thumb img,
.thumb-image img,
.widget_recent_entries img {
    object-fit: cover !important;
}




/* ==============================================================================
   ⚡ CYBER ARTICLE CONTAINER - COMPLETE DARK RETHEME (REMOVE ALL WHITE BG) ⚡
   ============================================================================== */

/* 1. 記事・固定ページの外枠コンテナ (.cps-post-box) */
.cps-post-box,
.article_style1 .cps-post-box,
.article_style2 .cps-post-box,
#onecolumn .cps-post-box,
#onecolumn960lp .cps-post-box {
    background: rgba(15, 23, 42, 0.92) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.55), 0 0 20px rgba(56, 189, 248, 0.08) !important;
    overflow: hidden !important;
    padding: 30px !important;
    color: #cbd5e1 !important;
}

@media (max-width: 767px) {
    .cps-post-box,
    .article_style1 .cps-post-box,
    .article_style2 .cps-post-box {
        padding: 16px 14px !important;
        border-radius: 12px !important;
    }
}

/* 2. 記事本体 (.cps-post) */
.cps-post,
.page .cps-post,
.single .cps-post {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 3. 記事ヘッダー (.cps-post-header) */
.article_style1 .cps-post-header,
.cps-post .cps-post-header {
    background: rgba(11, 19, 43, 0.8) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 12px !important;
    padding: 24px 20px !important;
    margin-bottom: 25px !important;
    box-shadow: inset 0 0 20px rgba(0, 242, 254, 0.06) !important;
}

/* 4. 記事タイトル (.cps-post-title) */
.cps-post .cps-post-header .cps-post-title,
.cps-post-title,
.page .cps-post-title,
.single .cps-post-title {
    font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.45 !important;
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.25) !important;
    border-bottom: none !important;
    margin-bottom: 12px !important;
}

/* 5. 記事メタ情報 (.cps-post-meta, 日付など) */
.cps-post .cps-post-header .cps-post-meta,
.cps-post-meta,
.cps-post-date,
.cps-post-date-box {
    color: #94a3b8 !important;
    font-family: 'Chakra Petch', monospace !important;
    font-size: 0.85rem !important;
}
.cps-post-meta a,
.cps-post-meta .writer {
    color: #38bdf8 !important;
}

/* 6. アイキャッチ画像 (.cps-post-thumb) */
.cps-post-thumb {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 25px auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    background: #030712 !important;
}

/* 7. 本文コンテナ (.cps-post-main, .entry-content) */
.cps-post-main-box,
.cps-post-main,
.entry-content,
.page .cps-post-main,
.single .cps-post-main {
    background: transparent !important;
    color: #cbd5e1 !important;
    line-height: 1.85 !important;
    font-size: 0.96rem !important;
}

.cps-post-main p,
.entry-content p,
.page .cps-post-main p,
.single .cps-post-main p {
    color: #cbd5e1 !important;
    line-height: 1.85 !important;
    margin-bottom: 20px !important;
}

.cps-post-main h2,
.entry-content h2,
.page .cps-post-main h2,
.single .cps-post-main h2 {
    color: #00f2fe !important;
    font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif !important;
    font-weight: 800 !important;
    border-bottom: 2px solid rgba(0, 242, 254, 0.35) !important;
    background: transparent !important;
    padding-bottom: 8px !important;
    margin: 40px 0 20px 0 !important;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.3) !important;
}

.cps-post-main h3,
.entry-content h3,
.page .cps-post-main h3,
.single .cps-post-main h3 {
    color: #38bdf8 !important;
    font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif !important;
    font-weight: 700 !important;
    border-left: 3px solid #38bdf8 !important;
    background: transparent !important;
    padding-left: 12px !important;
    margin: 30px 0 16px 0 !important;
}

/* 8. SNSシェアボタン周辺の余白調整 */
.sns-top, .sns {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 20px 0 !important;
}

/* 9. パンくずリスト */
#breadcrumb {
    background: transparent !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
}
#breadcrumb a {
    color: #38bdf8 !important;
}



/* ==============================================================================
   ⚡ CYBER BLOCKQUOTE & COMMENT BOX DARK RETHEME (FIX WHITE BG & CONTRAST) ⚡
   ============================================================================== */

/* 1. 引用・AIコメントボックス本体 (blockquote) */
.cps-post-main blockquote,
blockquote,
.entry-content blockquote {
    position: relative !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-left: 4px solid #00f2fe !important;
    border-radius: 12px !important;
    padding: 22px 28px !important;
    margin: 25px 0 !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.45), inset 0 0 15px rgba(0, 242, 254, 0.05) !important;
    box-sizing: border-box !important;
}

/* 2. blockquote 内の文字色・段落 */
.cps-post-main blockquote p,
blockquote p,
.entry-content blockquote p {
    color: #e2e8f0 !important;
    line-height: 1.85 !important;
    font-size: 0.98rem !important;
    margin-bottom: 12px !important;
}

.cps-post-main blockquote p:last-child,
blockquote p:last-child,
.entry-content blockquote p:last-child {
    margin-bottom: 0 !important;
}

/* 3. blockquote 内の強調太字 (strong) */
.cps-post-main blockquote strong,
blockquote strong,
.entry-content blockquote strong {
    color: #00f2fe !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.3) !important;
}

/* 4. JIN の引用クォーテーションマーク (アイコン) のサイバー調調整 */
.cps-post-main blockquote:before,
blockquote:before {
    color: #00f2fe !important;
    opacity: 0.18 !important;
    font-size: 2.2rem !important;
    top: 10px !important;
    left: 14px !important;
}

.cps-post-main blockquote:after,
blockquote:after {
    color: #00f2fe !important;
    opacity: 0.18 !important;
    font-size: 2.2rem !important;
    bottom: 10px !important;
    right: 14px !important;
}

/* 5. JIN のその他のボックス系ショートコード（概念ボックス・注意ボックス等）のダーク化 */
.concept-box,
.concept-box1,
.concept-box2,
.concept-box3,
.concept-box4,
.concept-box5,
.concept-box6,
.comment-box,
.sp-block {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 10px !important;
    color: #cbd5e1 !important;
    padding: 18px 22px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.concept-box p,
.comment-box p {
    color: #cbd5e1 !important;
}



/* ==========================================================================
   ⚡ HIGH-END CYBER GLOBAL HEADER & MENU ENHANCEMENT ⚡
   ========================================================================== */
#header-box {
    background: rgba(6, 9, 19, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.28) !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.8) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    padding: 10px 0 !important;
}

#header {
    max-width: 1400px !important;
    width: 95% !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    padding: 0 !important;
}

/* Site Info / Header Title: 崩れ・変な改行を完全阻止 & サイバーグラデーション */
#header #site-info,
#site-info {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
}

#header #site-info .tn-logo-size,
#site-info .tn-logo-size,
#site-info .sp-logo-size {
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
}

#site-info a {
    font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-decoration: none !important;
    font-size: clamp(0.95rem, 1.35vw, 1.18rem) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
    background: linear-gradient(135deg, #ffffff 40%, #7dd3fc 75%, #00f2fe 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 16px rgba(0, 242, 254, 0.45)) !important;
    transition: all 0.3s ease !important;
}

#site-info a::before {
    content: "⚡" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.2), rgba(234, 179, 8, 0.2)) !important;
    border: 1px solid rgba(0, 242, 254, 0.5) !important;
    border-radius: 8px !important;
    color: #00f2fe !important;
    font-size: 1.1rem !important;
    -webkit-text-fill-color: #00f2fe !important;
    box-shadow: 0 0 14px rgba(0, 242, 254, 0.4) !important;
    flex-shrink: 0 !important;
}

#site-info a:hover {
    filter: drop-shadow(0 0 24px rgba(0, 242, 254, 0.8)) !important;
    transform: scale(1.01) !important;
}

/* Global Nav (`#drawernav3`) - 全アイテム統一ガラスカプセルデザイン */
#drawernav3 {
    margin: 0 !important;
    float: none !important;
    flex: 0 1 auto !important;
}

#drawernav3 nav.fixed-content {
    width: auto !important;
}

#drawernav3 ul.menu-box {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}

#drawernav3 ul.menu-box li.menu-item {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    height: auto !important;
    line-height: normal !important;
    border: none !important;
}

#drawernav3 ul.menu-box li.menu-item a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 14px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 20px !important;
    color: #cbd5e1 !important;
    font-size: 0.83rem !important;
    font-weight: 700 !important;
    font-family: 'Chakra Petch', 'Noto Sans JP', sans-serif !important;
    letter-spacing: 0.4px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

/* JINのデフォルト下線・疑似要素を完全無効化 */
#drawernav3 ul.menu-box li.menu-item a::after,
#drawernav3 ul.menu-box li.menu-item a::before {
    display: none !important;
    content: none !important;
}

/* 各メニューごとのマイクロアイコン */
#drawernav3 ul.menu-box li.menu-item-59 a::before {
    display: inline-block !important;
    content: "🏠" !important;
    font-size: 0.85rem !important;
}
#drawernav3 ul.menu-box li.menu-item-60 a::before {
    display: inline-block !important;
    content: "📈" !important;
    font-size: 0.85rem !important;
}
#drawernav3 ul.menu-box li.menu-item-61 a::before {
    display: inline-block !important;
    content: "👥" !important;
    font-size: 0.85rem !important;
}
#drawernav3 ul.menu-box li.menu-item-62 a::before {
    display: inline-block !important;
    content: "⚡" !important;
    font-size: 0.85rem !important;
}
#drawernav3 ul.menu-box li.menu-item-63 a::before {
    display: inline-block !important;
    content: "🎯" !important;
    font-size: 0.85rem !important;
}

/* ホバーエフェクト：ネオングロー & リフト */
#drawernav3 ul.menu-box li.menu-item a:hover {
    background: rgba(0, 242, 254, 0.2) !important;
    border-color: #00f2fe !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* カレントページ（現在地）のアクティブスタイル */
#drawernav3 ul.menu-box li.current-menu-item a {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.28), rgba(16, 185, 129, 0.2)) !important;
    border: 1px solid rgba(0, 242, 254, 0.7) !important;
    color: #00f2fe !important;
    font-weight: 800 !important;
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.4) !important;
}

/* ホーム画面上では menu-item-60(運用日報・実績) を通常ピルとして表示 */
body.home #drawernav3 ul.menu-box li.menu-item-60 a {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    font-weight: 700 !important;
}
body.home #drawernav3 ul.menu-box li.menu-item-60 a:hover {
    background: rgba(0, 242, 254, 0.2) !important;
    border-color: #00f2fe !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* レスポンシブ対応 */
@media (max-width: 1160px) {
    #drawernav3 ul.menu-box {
        gap: 6px !important;
    }
    #drawernav3 ul.menu-box li.menu-item a {
        padding: 0 10px !important;
        font-size: 0.78rem !important;
    }
}
@media (max-width: 860px) {
    #header {
        flex-direction: column !important;
        gap: 12px !important;
    }
    #drawernav3 ul.menu-box {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}
@media (max-width: 767px) {
    #header #site-info,
    #site-info {
        max-width: 90% !important;
        margin: 0 auto !important;
    }
    #site-info a {
        white-space: normal !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .sp-menu-box {
        background: #070b14 !important;
        border-right: 1px solid rgba(56, 189, 248, 0.3) !important;
    }
    .sp-menu-box .menu-box li a {
        color: #e2e8f0 !important;
        border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
    }
}


/* ==========================================================================
   Cyber Contact Form Premium Styles (CF7)
   ========================================================================== */
.cyber-contact-lead {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 15, 29, 0.95) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-left: 4px solid #00f2fe !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 32px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 242, 254, 0.08) !important;
}
.cyber-badge-glow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(0, 242, 254, 0.1) !important;
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
    color: #00f2fe !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    margin-bottom: 14px !important;
}
.cyber-badge-glow .pulse-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: #00f2fe !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #00f2fe !important;
    animation: cyberPulse 2s infinite !important;
    display: inline-block !important;
}
@keyframes cyberPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(0, 242, 254, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 242, 254, 0); }
}
.cyber-contact-lead .lead-title {
    color: #f1f5f9 !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    line-height: 1.6 !important;
}
.cyber-contact-lead .lead-desc {
    color: #94a3b8 !important;
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
    margin-bottom: 0 !important;
}

/* Contact Form 7 Cyber Container */
.wpcf7-form {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.75) 0%, rgba(10, 15, 29, 0.9) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 16px !important;
    padding: 36px 32px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 242, 254, 0.05) !important;
    backdrop-filter: blur(12px) !important;
}
.cyber-form-group {
    margin-bottom: 24px !important;
}
.cyber-form-label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    color: #e2e8f0 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.03em !important;
}
.cyber-req-badge {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
}
.cyber-opt-badge {
    background: rgba(148, 163, 184, 0.15) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}
.wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}
.cyber-input,
.cyber-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(8, 14, 26, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 8px !important;
    color: #f8fafc !important;
    font-size: 0.95rem !important;
    padding: 14px 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.cyber-input::placeholder,
.cyber-textarea::placeholder {
    color: #475569 !important;
}
.cyber-input:focus,
.cyber-textarea:focus {
    outline: none !important;
    border-color: #00f2fe !important;
    background: rgba(10, 22, 40, 0.95) !important;
    box-shadow: 0 0 18px rgba(0, 242, 254, 0.35), inset 0 0 8px rgba(0, 242, 254, 0.08) !important;
}
.cyber-textarea {
    min-height: 160px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

/* Submit Button */
.cyber-submit-wrap {
    text-align: center !important;
    margin-top: 32px !important;
}
.cyber-submit-btn {
    background: linear-gradient(135deg, #00f2fe 0%, #0072ff 100%) !important;
    color: #050b14 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    padding: 14px 52px !important;
    border: none !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(0, 242, 254, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    letter-spacing: 0.05em !important;
    display: inline-block !important;
}
.cyber-submit-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 30px rgba(0, 242, 254, 0.65) !important;
    color: #ffffff !important;
}
.cyber-submit-btn:active {
    transform: translateY(1px) scale(0.98) !important;
}

.wpcf7-spinner {
    margin-left: 12px !important;
    vertical-align: middle !important;
}
.wpcf7-response-output {
    margin-top: 24px !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    font-size: 0.92rem !important;
    border: 1px solid transparent !important;
    text-align: center !important;
}
.wpcf7 form.sent .wpcf7-response-output {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
    color: #34d399 !important;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    color: #f87171 !important;
}
.wpcf7-not-valid-tip {
    color: #f87171 !important;
    font-size: 0.8rem !important;
    margin-top: 6px !important;
}


/* ==========================================================================
   Hero Log Jump CTA & Smooth Scroll
   ========================================================================== */
html {
    scroll-behavior: smooth !important;
}
.cyber-log-jump-link {
    color: #00f2fe !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}
.cyber-log-jump-link:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px #00f2fe !important;
}
.cyber-log-jump-link .jump-arrow {
    display: inline-block !important;
    font-size: 0.8rem !important;
    margin-left: 2px !important;
    animation: bounceDown 1.5s infinite ease-in-out !important;
}

.cyber-hero-action-row {
    margin: 16px 0 24px 0 !important;
    display: flex !important;
    justify-content: center !important;
}
.cyber-hero-btn-log {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.15) 0%, rgba(79, 172, 254, 0.2) 100%) !important;
    border: 1px solid rgba(0, 242, 254, 0.5) !important;
    color: #00f2fe !important;
    padding: 10px 24px !important;
    border-radius: 30px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 4px 20px rgba(0, 242, 254, 0.25), inset 0 0 12px rgba(0, 242, 254, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.cyber-hero-btn-log:hover {
    background: linear-gradient(135deg, #00f2fe 0%, #0072ff 100%) !important;
    color: #050b14 !important;
    border-color: #00f2fe !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 30px rgba(0, 242, 254, 0.6) !important;
}
.cyber-hero-btn-log .pulse-radar {
    width: 8px !important;
    height: 8px !important;
    background-color: #00f2fe !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #00f2fe !important;
    animation: radarPulse 1.8s infinite !important;
}
.cyber-hero-btn-log:hover .pulse-radar {
    background-color: #050b14 !important;
    box-shadow: none !important;
}
.cyber-hero-btn-log .btn-arrow-down {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    animation: bounceDown 1.5s infinite ease-in-out !important;
}
@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}
@keyframes radarPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.8); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(0, 242, 254, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 242, 254, 0); }
}


/* ==========================================================================
   Cyber Chart Multi-Timeframe Tabs Styles
   ========================================================================== */
.cyber-chart-tabs {
    display: inline-flex !important;
    background: rgba(10, 15, 29, 0.9) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 20px !important;
    padding: 3px !important;
    gap: 4px !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}
.cyber-chart-tab {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    padding: 4px 14px !important;
    border-radius: 16px !important;
    font-size: 0.8rem !important;
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
}
.cyber-chart-tab:hover {
    color: #f8fafc !important;
    background: rgba(56, 189, 248, 0.15) !important;
}
.cyber-chart-tab.active {
    background: linear-gradient(135deg, #00f2fe 0%, #0072ff 100%) !important;
    color: #050b14 !important;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.5) !important;
}