/*==============================================================================
     🎨 MASTER SYSTEM VISUAL DESIGN STYLESHEET CONSOLE DECK
==============================================================================*/

/* GLOBAL MASTER LAYOUT REALIGNMENT CONSTRAINTS */
.kod-hub-opaque-canvas {
    float: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    border-radius: 20px !important;
    padding: 25px !important;
    background: rgba(255, 255, 255, 0.87) !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3), -2px -2px 5px rgba(173,216,230,0.5) !important;
    box-sizing: border-box !important;
}

.kod-hub-header-wrapper {
    margin: 0 0 25px 0 !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* TOP LEVEL ADMINISTRATIVE EXECUTIVE NAVIGATION BAR */
.kod-hub-admin-flex-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(86,120,184,0.15) !important;
    margin-bottom: 20px !important;
}

.kod-hub-admin-right-pool {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* 1. KEEP YOUR EXISTING BASE STRIPS AS THEY ARE */
.kod-hub-nav-reset-btn {
    background: none !important;
    border: none !important;
    color: #e0ebfc !important;  /*      #e0ebfc     */
    cursor: pointer !important;
    font-weight: 600 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    transition: color 0.5s ease !important; /* Optional: Makes the color change smooth */
}

/* 2. THE FIX: Remove the trailing "button" word and add !important */
.kod-hub-nav-reset-btn:hover {
    color: #5678B8 !important;
}

.kod-hub-nav-anchor-link {
    color: #5678B8 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: color 0.5s ease !important; /* Optional: Makes the color change smooth */
}
.kod-hub-nav-anchor-link:hover{
    color: #DBE5F1 !important;
}
/* PREMIUM GATEWAY BEVEL ACTION BUTTONS */
.kod-hub-btn-premium {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-image: linear-gradient(to bottom, #2ea44f 0%, #22863a 100%) !important;
    border: 1px solid rgba(9,9,9,0.15) !important;
    border-radius: 4px !important;
    color: white !important;
    font-family: inherit !important;
    font-weight: bold !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    text-decoration: none !important;
    box-shadow: 1px -1px 0 rgba(255,255,255,0.4) inset, 0 2px 4px rgba(0,0,0,0.1) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
    transition: box-shadow 0.2s ease !important;
}

.kod-hub-btn-premium:hover {
    box-shadow: 1px -1px 0 rgba(255,255,255,0.4) inset, 0 0 12px rgba(46,164,79,0.6) !important;
}

.kod-hub-btn-coffee {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-image: linear-gradient(to bottom, #965a38 0%, #703f23 100%) !important;
    border: 1px solid rgba(9,9,9,0.15) !important;
    border-radius: 4px !important;
    color: white !important;
    font-family: inherit !important;
    font-weight: bold !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    text-decoration: none !important;
    box-shadow: 1px -1px 0 rgba(255,255,255,0.4) inset, 0 2px 4px rgba(0,0,0,0.1) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
    transition: box-shadow 0.2s ease !important;
}

.kod-hub-btn-coffee:hover {
    box-shadow: 1px -1px 0 rgba(255,255,255,0.4) inset, 0 0 12px rgba(150,90,56,0.6) !important;
}

/* SKEUOMORPHIC 3D CALENDAR WIDGET & NEWS TICKER TRACK */
.kod-hub-ticker-panel-row {
    display: flex !important;
    align-items: center !important;
    background: rgba(255,255,255,0.5) !important;
    border: 1px solid rgba(86,120,184,0.25) !important;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.05) inset !important;
    border-radius: 8px !important;
    padding: 6px 15px !important;
    margin-bottom: 25px !important;
    gap: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kod-hub-3d-calendar-widget {
    width: 52px !important;
    height: 52px !important;
    background: #DBE5F1 !important;
    border-radius: 6px !important;
    border: 1px solid rgba(86,120,184,0.4) !important;
    box-shadow: 0 3px 5px rgba(0,0,0,0.15), 0 -2px 0 #5678B8 inset !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.kod-hub-calendar-top-tab {
    background: linear-gradient(to bottom, #5678B8 0%, #43629b 100%) !important;
    color: white !important;
    font-size: 9px !important;
    font-weight: bold !important;
    text-align: center !important;
    padding: 2px 0 !important;
    letter-spacing: 0.05em !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.2) !important;
}

.kod-hub-calendar-bottom-page {
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-family: 'Calibri Bold', Arial, sans-serif !important;
    font-weight: bold !important;
    color: darkblue !important;
    text-shadow: 1px 1px 0 white !important;
    line-height: 1 !important;
}

/* HORIZONTAL NEWSLETTER SUBSCRIPTION CORE STRIP */
.kod-hub-subscribe-strip-bar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    background: rgba(219,229,241,0.4) !important;
    border: 1px solid rgba(86,120,184,0.25) !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kod-hub-subscribe-title-label {
    font-weight: bold !important;
    color: darkblue !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

.kod-hub-input-icon-wrapper {
    position: relative !important;
    flex: 1 1 200px !important;
}

.kod-hub-input-icon-marker {
    position: absolute !important;
    left: 10px !important;
    top: 6px !important;
    font-size: 13px !important;
    color: #718096 !important;
    opacity: 0.6 !important;
}

.kod-hub-subscribe-input-field {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 28px !important;
    padding: 4px 10px 4px 28px !important;
    font-size: 12px !important;
    border: 1px solid rgba(86,120,184,0.3) !important;
    border-radius: 4px !important;
    outline: none !important;
    background: rgba(255,255,255,0.9) !important;
    color: darkblue !important;
}

.kod-hub-subscribe-input-field:focus {
    border-color: #5678B8 !important;
    box-shadow: 0 0 6px rgba(86,120,184,0.2) !important;
}

.kod-hub-subscribe-trigger-btn {
    background-image: linear-gradient(to bottom, #5678B8 0%, #43629b 100%) !important;
    border: 1px solid rgba(9,9,9,0.15) !important;
    border-radius: 4px !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 12px !important;
    padding: 0 16px !important;
    height: 28px !important;
    cursor: pointer !important;
    box-shadow: 1px -1px 0 rgba(255,255,255,0.3) inset !important;
    font-family: inherit !important;
    transition: box-shadow 0.2s ease !important;
}

.kod-hub-subscribe-trigger-btn:hover {
    box-shadow: 1px -1px 0 rgba(255,255,255,0.3) inset, 0 0 12px rgba(86,120,184,0.6) !important;
}

/* FIXED MULTI-TIER 4-BADGES ANALYTICS DECK ROW */
.kod-hub-4-badges-analytics-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 25px !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kod-hub-analytics-badge-box {
    flex: 1 1 220px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(219,229,241,0.5) !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(86,120,184,0.2) !important;
    box-sizing: border-box !important;
}

.kod-hub-analytics-details-node h4 {
    margin: 0 !important;
    color: darkblue !important;
    font-size: 13px !important;
    font-family: Arial, sans-serif !important;
}

.kod-hub-analytics-details-node p {
    margin: 2px 0 0 0 !important;
    color: #5678B8 !important;
    font-size: 11px !important;
    font-weight: bold !important;
}

/* VERCEL HIGH-VISIBILITY INTERACTIVE HIGH-LIGHTERS */
.kod-hub-vercel-tabs-row {
    display: flex !important;
    gap: 5px !important;
    margin-bottom: 25px !important;
    border-bottom: 2px solid rgba(86,120,184,0.15) !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
}

.kod-hub-vercel-tabs-row .tab-btn {
    background: none !important;
    border: none !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #718096 !important;
    cursor: pointer !important;
    position: relative !important;
    font-family: inherit !important;
    transition: color 0.2s ease !important;
}

.kod-hub-vercel-tabs-row .tab-btn.active-tab {
    color: #5678B8 !important;
}

.kod-hub-vercel-tabs-row .tab-btn.active-tab::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 15% !important;
    width: 70% !important;
    height: 3px !important;
    background-color: #5678B8 !important;
    border-radius: 4px !important;
    box-shadow: 0 0 8px rgba(86,120,184,0.8) !important;
}

.responsive-grid article.tool-glass-card:hover {
    transform: translateY(-2px) !important;
    border-color: #5678B8 !important;
    box-shadow: 0 6px 15px rgba(86,120,184,0.15) !important;
}

/* INLINE COFFEE STEAM VECTOR KEYFRAMES ENGINE */
@keyframes kodCoffeeSteamRiseMoveAnimation {
    0% {
        transform: translateY(0) scaleX(1);
        opacity: 0.25;      /*   0   */
    }
    15% {
        opacity: 0.75;      /*   0.5   */
    }
    50% {
        transform: translateY(-5px) scaleX(1.2);
        opacity: 0.55;      /*   0.3   */
    }
    100% {
        transform: translateY(-10px) scaleX(0.8);
        opacity: 0.25;      /*   0   */
    }
}
/*==============================================================================
 *               Hacker News Ticker Bar        
/*==============================================================================*/
/* 1. CONTAINER TRACK: Holds the fade gradient layout masks */
.kod-hub-ticker-text-track {
    flex-grow: 1 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    position: relative !important;
    height: 36px !important; /* Fixed baseline height */
    display: flex !important;
    align-items: center !important;
    margin-left: 15px !important; /* Safety distance from your calendar */
    box-sizing: border-box !important;
    background: transparent !important;
}

/* 2. TICKER TEXT ENVELOPE: Handles the smooth endless scrolling physics */
#TickerContentBC53593748 {
    display: inline-block !important;
    white-space: nowrap !important;
    padding-left: 100% !important; /* Pushes text starting off-screen right */
    animation: modern-ticker-loop 275s linear infinite !important; /* Your chosen readable speed */
    color: rgb(79, 129, 189) !important;
    font-weight: bold !important;
    text-shadow: rgb(255, 255, 255) 1px 1px 0px, rgb(184, 204, 228) -1px -1px 0px !important;
    
    /* Safely ensures flexbox grids do not compress text track width to 0px */
    flex-shrink: 0 !important;
}

/* 5. SMOOTH CSS KEYFRAMES MATRIX */
@keyframes modern-ticker-loop {
    0% {
        transform: translateX(0%) !important;
    }
    100% {
        transform: translateX(-100%) !important;
    }
}

/* 3. HOVER CONTROL: Pauses text smoothly when a user hovers to click a story link */
#TickerContentBC53593748:hover {
    animation-play-state: paused !important;
}

/* 4. LINK STYLES: Direct typography controls */
#TickerContentBC53593748 a {
    color: rgb(79, 129, 189) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

#TickerContentBC53593748 a:hover {
    color: #5678B8 !important;
    text-decoration: underline !important;
}

/* 5. SMOOTH CSS KEYFRAMES MATRIX */
@keyframes modern-ticker-loop {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}
/*==============================================================================
 *        🎮 METHOD B: CINEMATIC CARD HIGHLIGHT INTERACTION SIGNATURE
/*==============================================================================*/
/* 1. INTERACTION TARGET STATE: Triggered dynamically by home-script.js */
.tool-glass-card.kod-card-interaction-glow-pulse {
    position: relative !important;
    z-index: 10 !important;
    animation: kodCinematicGlowPulse 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* 2. HIGH-SPEED COMPOUND HARDWARE-ACCELERATED KEYFRAMES */
@keyframes kodCinematicGlowPulse {
    0% {
        transform: scale(1);
        border-color: rgba(86, 120, 184, 0.3) !important;
        box-shadow: 0 0 0 rgba(86, 120, 184, 0) !important;
    }
    12% {
        transform: scale(1.035); /* Subtle smooth geometric pop */
        border-color: #5678B8 !important; /* Highlights your primary theme color */
        box-shadow: 0 0 30px rgba(86, 120, 184, 0.8), 
                    0 0 15px rgba(86, 120, 184, 0.4) !important; /* Deep layered neon aura */
    }
    30% {
        transform: scale(1.02);
        border-color: #5678B8 !important;
        box-shadow: 0 0 20px rgba(86, 120, 184, 0.6), 
                    0 0 10px rgba(86, 120, 184, 0.3) !important; /* Gentle continuous glow rhythm */
    }
    50% {
        transform: scale(1.03);
        border-color: #5678B8 !important;
        box-shadow: 0 0 28px rgba(86, 120, 184, 0.75), 
                    0 0 12px rgba(86, 120, 184, 0.35) !important; /* Secondary breath effect */
    }
    100% {
        transform: scale(1); /* Gracefully settles back to native layout boundaries */
        border-color: rgba(86, 120, 184, 0.3) !important;
        box-shadow: 0 0 0 rgba(86, 120, 184, 0) !important;
    }
}


/* =============================================================================
// 💎 MASTER DISCOVERY GRID SYSTEM & UNICODE SYMMETRICAL CARDS - V7
// ============================================================================= */

/* 1. THE MAIN DISCOVERY PANEL WRAPPER CONTAINER */
.kod-discovery-workspace-deck {
    margin-bottom: 35px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    padding: 24px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(86, 120, 184, 0.25) !important;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.02) inset !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kod-discovery-heading-label {
    font-size: 13px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    color: darkblue !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.05em !important;
}

/* 🔑 THE ADAPTIVE MOSAIC GRID ENGINE: Hard-locked to 4 columns on widescreen viewports */
.kod-discovery-flex-canvas {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 🪐 UNIFIED RECTANGULAR DISCOVERY UTILITY CARD */
.kod-discovery-rectangular-chip {
    background: #ffffff !important;
    border: 1px solid rgba(86, 120, 184, 0.3) !important;
    border-radius: 12px !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 16px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
    position: relative !important; /* Establishes coordinate space boundaries for top-right absolute positioning */
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.kod-discovery-rectangular-chip:hover {
    transform: translateY(-4px) !important;
    border-color: #5678B8 !important;
    box-shadow: 0 8px 24px rgba(86, 120, 184, 0.18) !important;
}

/* 🔄 VISUAL AXIS CONTEXT: Left column wrappers */
.kod-discovery-top-identity-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 12px !important;
}

.kod-discovery-avatar-icon-mark {
    font-size: 28px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.kod-discovery-meta-profile {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    padding-right: 70px !important; /* Expanded defense buffer padding to guarantee text never clips behind your new top-right unicodes */
    box-sizing: border-box !important;
}

/* 🔠 BIGGER, BOLDER TITLE SYSTEM SECTOR */
.kod-discovery-tool-title-heading {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: darkblue !important;
    font-family: 'Calibri Bold', Arial, sans-serif !important;
    line-height: 1.2 !important;
}

/* =============================================================================
// 👑 TOP RIGHT CORNER PURE MINIMALIST FLOATING UNICODE EMBLEMS DECK
// ============================================================================= */
.kod-discovery-top-right-unicode-emblem {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #4a5568 !important; /* Neutral elegant charcoal font color tracking */
    font-family: 'Consolas', monospace !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    z-index: 5 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Specific enlarged font sizing scale for the primary native emoji icon triggers */
.kod-discovery-top-right-unicode-emblem span {
    font-size: 15px !important;
    line-height: 1 !important;
}

/* =============================================================================
// 🎨 EQUAL SIZE BALANCED TECHNICAL LABELS MULTI-COLUMNS
// ============================================================================= */
.kod-discovery-technical-pills-row {
    display: grid !important;
    /* 🔑 THE SYMMETRY FIX: Hard-locks the sub-row into exactly 2 equal fractional columns */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
}

.kod-discovery-meta-pill-badge {
    background: rgba(219, 229, 241, 0.6) !important;
    border: 1px solid rgba(86, 120, 184, 0.25) !important;
    border-radius: 4px !important;
    padding: 4px 2px !important;
    font-size: 10px !important;
    font-family: monospace !important;
    color: #5678B8 !important;
    font-weight: 600 !important;
    text-align: center !important; /* Centers contents inside equal space envelopes */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kod-discovery-action-anchor-trigger {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #5678B8 !important;
    text-decoration: none !important;
    font-weight: bold !important;
    border: 1px solid rgba(86, 120, 184, 0.25) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    background: rgba(219, 229, 241, 0.4) !important;
    font-family: sans-serif !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.kod-discovery-action-anchor-trigger:hover {
    background: #5678B8 !important;
    color: #ffffff !important;
    border-color: #5678B8 !important;
}

/* =============================================================================
📱 BREAKPOINT CSS MEDIA QUERIES FOR ELASTIC SCALING
============================================================================= */
@media (max-width: 1024px) {
    .kod-discovery-flex-canvas {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .kod-discovery-flex-canvas {
        grid-template-columns: 1fr !important;
    }
}
/* =============================================================================
// 📬 PREMIUM HORIZONTAL SUBSCRIBE STRIP BAR CLASS MATRIX
// ============================================================================= */
.kod-hub-subscribe-strip-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(86, 120, 184, 0.25) !important;
    margin-bottom: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kod-hub-subscribe-title-label {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: darkblue !important;
    font-family: 'Calibri Bold', Arial, sans-serif !important;
    letter-spacing: 0.03em !important;
}

.kod-hub-input-icon-wrapper {
    position: relative !important;
    flex: 1 1 220px !important;
    min-width: 180px !important;
}

.kod-hub-input-icon-marker {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    pointer-events: none !important;
    line-height: 1 !important;
}

.kod-hub-subscribe-input-field {
    width: 100% !important;
    height: 36px !important;
    box-box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid rgba(86, 120, 184, 0.3) !important;
    border-radius: 6px !important;
    padding: 0 12px 0 35px !important; /* Extra left padding to make room for icon */
    font-size: 13px !important;
    color: darkblue !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.kod-hub-subscribe-input-field:focus {
    border-color: #5678B8 !important;
    box-shadow: 0 0 0 3px rgba(86, 120, 184, 0.15) !important;
}

.kod-hub-subscribe-trigger-btn {
    height: 36px !important;
    padding: 0 20px !important;
    background-image: linear-gradient(to bottom, #5678B8 0%, #43629b 100%) !important;
    border: 1px solid rgba(9, 9, 9, 0.15) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 1px -1px 0px rgba(255, 255, 255, 0.3) inset !important;
    transition: transform 0.1s ease, filter 0.2s ease !important;
    white-space: nowrap !important;
}

.kod-hub-subscribe-trigger-btn:active {
    transform: scale(0.98) !important;
}

.newsletter-feedback-wrapper {
    display: block !important;
    width: 100% !important;
    margin-top: -4px !important;
    font-size: 12px !important;
    font-family: 'Consolas', monospace !important;
    font-weight: bold !important;
}
.kod-svg-steam-line {
    animation: kodCoffeeSteamRiseMoveAnimation 2s infinite linear;
    transform-origin: bottom center;
}
.kod-steam-line-2 {
    animation-delay: 0.6s;
}
.kod-steam-line-3 {
    animation-delay: 1.2s;
}
#pinned-workspace-deck{
    display: none;
    margin-bottom: 30px;
    background: rgba(255,255,255,0.5);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(86,120,184,0.25);
}
#pinned-flex-canvas{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
#pinned-workspace{
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    color: #4a5568;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
#global-magnifier-icon{
    position: absolute;
    left: 15px;
    top: 6px;
    font-size: 16px;
}
#global-command-search{
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(86,120,184,0.4);
    border-radius: 8px;
    padding: 12px 100px 12px 42px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    color: darkblue;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
#global-command-search-shortcut{
    position: absolute;
    right: 5px;
    top: 3.5px;
    background: rgba(86,120,184,0.1);
    border: 1px solid rgba(86,120,184,0.2);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    color: #5678B8;
    font-family: monospace;
}
.kod-hub-badge-emblem{
    font-size: 26px;
}
.kod-hub-badge-hd{
    margin:0;
    color:darkblue;
    font-size:14px;
}
.kod-hub-badge-p{
    margin:2px 0 0 0;
    color:#5678B8;
    font-size:12px;
    font-weight:bold;
}
.kod-hub-article{
    background: white;
    border: 1px solid rgba(86,120,184,0.3);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.kod-hub-card-category-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.card-category-tag{
    background: rgba(86,120,184,0.1);
    color: #5678B8;
    border: 1px solid rgba(86,120,184,0.2);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: sans-serif;
}
.maintenance-corner-badge{
    font-size: 16px;
    line-height: 1;
    cursor: not-allowed;
}
.pin-action-star{
    background: none;
    border: none;
    color: #a0aec0;
    cursor: pointer;
    font-size: 22px;
    padding: 0;
    line-height: 1;
    font-family: inherit;
}
.tool-heading-row{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.tool-avatar-icon{
    font-size: 26px;
    line-height: 1;
}
.tool-card-title{
    margin: 0;
    color: darkblue;
    font-family: 'Calibri Bold', Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.3;
}
.card-metric-badges-strip{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.technical-metric-badge-under-maintenance{
    background: #fed7d7;
    border: 1px solid #feb2b2;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-family: monospace;
    color: #c53030;
    font-weight: 600;
}
.technical-metric-badge{
    background: rgba(219,229,241,0.6);
    border: 1px solid rgba(86,120,184,0.25);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-family: monospace;
    color: #5678B8;
    font-weight: 600;
}
.div-card-cached-rating{
    margin-bottom: 16px;
}
.launch-studio-btn-offline-for-improvements{
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #718096;
    border: 1px solid rgba(9,9,9,0.15);
    border-radius: 6px;
    color: #e2e8f0;
    text-align: center;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: not-allowed;
    text-decoration: none;
    font-family: inherit;
}
#search-fallback-box{
    display: none;
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    border: 2px dashed rgba(86,120,184,0.3);
    border-radius: 8px;
    color: #718096;
    font-size: 14px;
    background: rgba(255,255,255,0.5);
}
/* =============================================================================
// ⚡ FINAL PROVEN ENGINE: STRONG HIGH-CONTRAST TEXT CORES
// ============================================================================= */
.launch-studio-btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(9, 9, 9, 0.15) !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    
    /* 🪐 STRONG CORES TYPOGRAPHY UPGRADE */
    font-weight: 700 !important; /* Increased from 600 to make colors pop */
    letter-spacing: 0.3px !important; /* Subtle spacing adjustment for bold characters */
    
    text-decoration: none !important;
    font-family: inherit !important;
    text-align: center !important;
    cursor: pointer !important;
    position: relative !important; 
    overflow: hidden !important;
    
    /* CORE THEME BACKGROUND: Original layout colors kept safe */
    background: #5678B8 !important; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), 1px 1px 0px rgba(255,255,255,0.3) inset !important;
    
    text-shadow: none !important;
    color: transparent !important; 
    
    /* Hardware accelerated transition pacing for the button lifting motion */
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.25s ease, 
                background-color 0.25s ease !important;
}

/* THE PROGRESSIVE TEXT FILL OVERLAY VECTOR DECK */
.launch-studio-btn::after {
    content: "Launch Studio ➔" !important; 
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    
    /* Match parent font properties to map text lines correctly */
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    
    /* Pure white color segment explicitly switches to warm yellow */
    color: transparent !important;
    background-image: linear-gradient(to right, #FFFFFF 50%, #FFD300 50%) !important; 
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    
    -webkit-background-clip: text !important;
    background-clip: text !important;
    
    /* Slowed to 0.85s with a progressive deceleration easing curve */
    transition: background-position 2.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 2 !important;
}

/* ELEVATION HOVER STATE MIX (Matches your Glass Cards mechanics) */
.launch-studio-btn:hover {
    transform: translateY(-2px) !important;
    background-color: #43629b !important; 
    box-shadow: 0 6px 15px rgba(86,120,184,0.25), 1px 1px 0px rgba(255,255,255,0.2) inset !important;
}

/* TRIGGER THE SLOW LEFT-TO-RIGHT GRADIENT COLOR TRANSFER DECK */
.launch-studio-btn:hover::after {
    background-position: -100% 0% !important;
}

/* PRESS ACTION DEFLATION TRACK */
.launch-studio-btn:active {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
/* =============================================================================
   🚀 ARTICLE CARD GRID PHASE 3: ENGINEERING ROADMAP SANDBOX (UPCOMING MODULES)
   ============================================================================= */

/* 1. STANDALONE HORIZONTAL ROADMAP SECTION CONTAINER GRID */
.kod-roadmap-staging-header-canvas {
    margin: 3.5rem 0 2.5rem 0 !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: opacity 0.25s ease, transform 0.25s ease, height 0.25s ease !important;
}

.kod-roadmap-staging-title-row {
    color: darkblue !important;
    font-family: 'Calibri Bold', Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 18px !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
}

.kod-roadmap-grid-wall {
    display: grid !important;
    /* Hard-locked structure template for clean display layouts */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. THE BLUEPRINT COMPONENT: GRAPH PAPER TEXTURE & DASHED ISOLATION BORDER */
.kod-card-upcoming-blueprint {
    position: relative !important;
    overflow: hidden !important; /* Locks our absolute diagonal crimson ribbon internally */
    cursor: help !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 2.2rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 200px !important;
    
    /* 🎨 PURE REPEATING LINEAR GRAPHPAPER GRAPH TEXTURE DECK */
    background-image: 
        linear-gradient(rgba(14, 165, 233, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, 0.05) 1px, transparent 1px) !important;
    background-size: 12px 12px !important;
    
    /* 📐 TECH BLUE DASHED STRUCTURAL BORDER LINES */
    border: 2px dashed rgba(14, 165, 233, 0.5) !important;
    
    /* Neon specularity ambient focus drop shadow */
    box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.04), 
                0 0 0 1px rgba(14, 165, 233, 0.05) !important;
                
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Elegant blueprint lift ring on mouse hover */
.kod-card-upcoming-blueprint:hover {
    border-color: #0ea5e9 !important;
    border-style: dashed !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 24px -6px rgba(14, 165, 233, 0.22), 
                0 0 0 1px rgba(14, 165, 233, 0.15),
                0 0 20px rgba(14, 165, 233, 0.08) inset !important;
}

/* Typography adjustment bounds */
.kod-card-upcoming-blueprint .tool-card-title {
    color: #0369a1 !important;
    font-family: 'Calibri Bold', Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

/* 📋 3. CRIMSON RED DIAGONAL ALPHA CORNER RIBBON ACCENT EMBLEM */
.kod-blueprint-alpha-ribbon {
    position: absolute !important;
    top: 12px !important;
    right: -28px !important;
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important; /* High-intensity crimson red alpha tone */
    color: #ffffff !important;
    font-family: 'Consolas', monospace !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 3px 30px !important;
    transform: rotate(45deg) !important; /* Absolute 45-degree corner layout tilt tilt */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    letter-spacing: 0.12em !important;
    z-index: 5 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3) !important;
}

/* 📦 4. PROGRESS TIMELINE RAIL TRACK & PROGRESSIVE PULSE GLOW */
.kod-blueprint-timeline-profile {
    margin-top: auto !important; /* Forces layout bars smoothly down to footer base edge */
    padding-top: 1.8rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.kod-blueprint-timeline-label-strip {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-family: 'Consolas', monospace !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    color: #0369a1 !important;
}

.kod-blueprint-progress-bar-rail {
    width: 100% !important;
    height: 8px !important;
    background: rgba(14, 165, 233, 0.08) !important; /* Empty channel rail track slot */
    border: 1px solid rgba(14, 165, 233, 0.15) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.kod-blueprint-progress-bar-fill-pulse {
    height: 100% !important;
    background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%) !important; /* Energetic tech-blue fill tracking bar */
    border-radius: 20px !important;
    animation: kodBlueprintPulseGlow 2s infinite ease-in-out !important; /* Handles continuous soft ambient glowing loop thread */
}

@keyframes kodBlueprintPulseGlow {
    0% { opacity: 0.85; }
    50% { opacity: 1; filter: brightness(115%); }
    100% { opacity: 0.85; }
}