/* ==========================================================================
   Changelog page
   ========================================================================== */
#changelog2 {
    direction: rtl;
    text-align: right;
    padding: 18px 16px 24px 16px;
    font-size: 13px;
}

#changelog2 * { box-sizing: border-box; }

/* Timeline --------------------------------------------------------------- */
.cle-timeline {
    position: relative;
    padding-right: 9px;
    border-right: 2px solid #33292380;
}

.cle-day { margin-bottom: 18px; }
.cle-day:last-child { margin-bottom: 4px; }

.cle-day-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
    position: relative;
}

.cle-day-dot {
    position: absolute;
    right: -15px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e09740;
    box-shadow: 0 0 0 3px rgba(224, 151, 64, 0.18);
}

.cle-day-date {
    font-size: 14px;
    font-weight: 700;
    color: #e09740;
}

.cle-day-relative {
    font-size: 11px;
    color: #8b8069;
}

/* Entries ---------------------------------------------------------------- */
.cle-entries {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(51, 41, 35, 0.42);
    border: 1px solid #33292390;
    border-radius: 6px;
    overflow: hidden;
}

.cle-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    line-height: 1.7;
}
.cle-entry:last-child { border-bottom: none; }
.cle-entry:hover { background: rgba(0, 0, 0, 0.14); }

.cle-icon {
    display: block;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border-radius: 3px;
    border: 1px solid #4a3f33;
    background-color: #241d17;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
a.cle-icon:hover { border-color: #a97a2e; }

.cle-text {
    flex: 1;
    min-width: 0;
    color: #cfc4ab;
    word-wrap: break-word;
}

.cle-state {
    font-size: 10px;
    padding: 0 6px;
    border-radius: 3px;
    margin-left: 5px;
    line-height: 17px;
    display: inline-block;
    vertical-align: 1px;
}

.cle-state-fixed   { background: rgba(74, 138, 74, 0.22); color: #79c179; }
.cle-state-added   { background: rgba(58, 118, 180, 0.22); color: #74aee6; }
.cle-state-changed { background: rgba(190, 145, 50, 0.22); color: #dcb057; }
.cle-state-removed { background: rgba(168, 62, 62, 0.22); color: #dd8080; }

/* Load more -------------------------------------------------------------- */
.cle-more-wrap {
    text-align: center;
    margin-top: 16px;
}

.cle-more {
    padding: 8px 26px;
    border-radius: 6px;
    border: 1px solid #6b5636;
    background: linear-gradient(to bottom, #4a3a24, #33291c);
    color: #e0d4bc;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.cle-more:hover { border-color: #a97a2e; color: #ffe9c4; }
.cle-more:disabled { opacity: 0.55; cursor: default; }

.cle-more-done {
    display: inline-block;
    font-size: 12px;
    color: #7d735f;
}

/* Empty ------------------------------------------------------------------ */
.cle-empty {
    text-align: center;
    padding: 50px 20px;
    color: #8b8069;
}

.cle-empty-icon {
    font-size: 34px;
    color: #4a3f33;
    margin-bottom: 8px;
}

.cle-empty p { margin: 0; }

/* Small screens ---------------------------------------------------------- */
@media (max-width: 640px) {
    #changelog2 { padding: 14px 10px 20px 10px; }
}