:root {
    --cs-bg: #f5f6fa;
    --cs-surface: #ffffff;
    --cs-surface-2: #f0f1f8;
    --cs-border: #e4e6f0;
    --cs-border-hover: #c8cbdf;
    --cs-text-primary: #1e2140;
    --cs-text-muted: #8b90b0;
    --cs-text-dim: #c2c5d8;
    --cs-accent: #5b6ef5;
    --cs-ok: #10b981;
    --cs-pending: #f59e0b;
    --cs-rejected: #ef4444;
    --cs-info: #3b82f6;
    --cs-font: 'DM Sans', sans-serif;
    --cs-font-mono: 'DM Mono', monospace;
    --cs-radius: 6px;
    --cs-radius-sm: 6px;
    --cs-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --cs-shadow-hover: 0 4px 12px rgba(0,0,0,.08);
}

.remarks-list {
    list-style: none;
}

.remarks-list li {
    padding: 12px 5px;
    margin-bottom: 10px;
    background-color: #f8f9fa;
    border-left: 4px solid #007bff;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .remarks-list li .js-removeal-btn {
        margin-bottom: -3px !important;
        margin-left: -3px !important;
        color: red;
    }

    .remarks-list li a {
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

        .remarks-list li a svg {
            display: block;
        }

    .remarks-list li:hover {
        background-color: #e9ecef;
        transform: translateX(5px);
        }

.cs-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    unicode-bidi: normal;
}

.cs-item {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding: .2rem .3rem;
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: .2rem;
    box-shadow: var(--cs-shadow);
    transition: box-shadow .18s, border-color .18s, transform .18s;
    cursor: pointer;
    opacity: 0;
    animation: cs-fadein .3s ease forwards;
    margin-bottom: 0.27rem;
}

@supports (animation-delay: calc(sibling-index() * 1s)) {
    .cs-item {
        animation-delay: calc(sibling-index() * 0.20s);
    }

    table tbody tr {
        --row-index: sibling-index();
    }

    table tbody tr {
        transition: opacity 0.3s ease, transform 0.02s ease;
        transition-delay: calc(var(--row-index, 0) * 0.02s);
    }

    .timeline-item {
        transition: opacity 0.3s ease, transform 0.3s ease;
        transition-delay: calc(sibling-index() * 0.08s);
    }

    @starting-style {
        table tbody tr,
        .timeline-item {
            opacity: 0;
            transform: translateY(5px);
        }
    }
}
    .cs-item:hover {
        border-color: var(--cs-border-hover);
        box-shadow: var(--cs-shadow-hover);
        transform: translateX(3px);
    }

    /*.cs-item:nth-child(1) {
        animation-delay: .04s;
    }

    .cs-item:nth-child(2) {
        animation-delay: .08s;
    }

    .cs-item:nth-child(3) {
        animation-delay: .12s;
    }

    .cs-item:nth-child(4) {
        animation-delay: .16s;
    }

    .cs-item:nth-child(5) {
        animation-delay: .20s;
    }

    .cs-item:nth-child(6) {
        animation-delay: .24s;
    }

    .cs-item:nth-child(7) {
        animation-delay: .28s;
    }*/

@keyframes cs-fadein {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cs-day {
    font-size: .58rem;
    font-family: var(--cs-font-mono);
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--cs-accent);
    background: rgba(91,110,245,.07);
    border: 1px solid rgba(91,110,245,.15);
    border-radius: var(--cs-radius-sm);
    text-align: center;
    padding: .22rem .28rem;
    line-height: 1.2;
}

.cs-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    overflow: hidden;
}

.cs-remark {
    font-size: .7rem;
    font-weight: 500;
    color: var(--cs-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-requester {
    font-size: .6rem;
    color: var(--cs-info);
    display: flex;
    align-items: center;
    gap: .28rem;
}

    .cs-requester::before {
        content: '';
        display: inline-block;
        width: .30rem;
        height: .30rem;
        border-radius: 50%;
        background: var(--cs-pending);
        flex-shrink: 0;
    }

.cs-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

    .cs-status svg {
        width: .78rem;
        height: .78rem;
    }

.cs-status--approved {
    background: rgba(16,185,129,.1);
    color: var(--cs-ok);
    border: 1px solid rgba(16,185,129,.22);
}

.cs-status--pending {
    background: rgba(245,158,11,.1);
    color: var(--cs-pending);
    border: 1px solid rgba(245,158,11,.22);
}

.cs-status--rejected {
    background: rgba(239,68,68,.08);
    color: var(--cs-rejected);
    border: 1px solid rgba(239,68,68,.2);
}

.cs-status--info {
    background: rgba(59,130,246,.08);
    color: var(--cs-info);
    border: 1px solid rgba(59,130,246,.2);
}