.olim-rank-page { background: #f6f3ee; }
.olim-rank-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 22px;
}
.olim-rank-kode, .olim-rank-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #ece7df;
    border-radius: 999px;
    min-height: 52px;
    padding: 0 16px;
    box-shadow: 0 1px 2px rgba(40, 30, 20, 0.04);
}
.olim-rank-kode { flex: 0 0 280px; }
.olim-rank-kode span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff4ea;
    color: transparent;
    position: relative;
    flex: none;
}
.olim-rank-kode span::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px solid #e07a2f;
}
.olim-rank-kode select, .olim-rank-search input {
    border: 0;
    background: transparent;
    width: 100%;
    font-size: 15px;
    color: #2c241c;
    outline: none;
}
.olim-rank-search { flex: 1; color: #b0a89e; }
.olim-rank-head h2 { margin: 0; font-size: 28px; color: #241c16; }
.olim-rank-head p { margin: 4px 0 14px; color: #8d847a; }
.olim-rank-cols, .olim-rank-row {
    display: grid;
    grid-template-columns: 52px minmax(220px, 1.4fr) minmax(180px, 1fr) 72px 90px;
    gap: 12px;
    align-items: center;
}
.olim-rank-cols {
    padding: 0 18px 8px;
    color: #b0a89e;
    font-size: 13px;
}
.olim-rank-item {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(40, 30, 20, 0.04);
}
.olim-rank-item.is-top-1 { background: #fff8e8; }
.olim-rank-item.is-top-2 { background: #f3f7ff; }
.olim-rank-item.is-top-3 { background: #fff4ec; }
.olim-rank-row {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 14px 18px;
    cursor: pointer;
}
.olim-rank-no {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f1ec;
    color: #8a8178;
    font-weight: 700;
}
.is-top-1 .olim-rank-no { background: #f5c451; color: #fff; }
.is-top-2 .olim-rank-no { background: #7ea2e8; color: #fff; }
.is-top-3 .olim-rank-no { background: #e7a06a; color: #fff; }
.olim-rank-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.olim-rank-person strong, .olim-rank-person small { display: block; }
.olim-rank-person strong { color: #2a2118; font-size: 15px; }
.olim-rank-person small { color: #8d847a; font-size: 13px; }
.olim-rank-person em {
    font-style: normal;
    margin-left: 6px;
    background: #efe8df;
    color: #8a5a32;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
}
.olim-rank-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f6d7b8;
    color: #8a4b22;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: none;
}
.olim-rank-angka { display: flex; gap: 10px; font-size: 13px; }
.olim-rank-angka .is-benar { color: #1f9d55; }
.olim-rank-angka .is-salah { color: #d64545; }
.olim-rank-angka .is-kosong { color: #9aa0a6; }
.olim-rank-bar {
    display: flex;
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: #eeeae4;
    margin-top: 6px;
}
.olim-rank-bar i { display: block; height: 100%; }
.olim-rank-bar .is-benar { background: #2fbe6a; }
.olim-rank-bar .is-salah { background: #e15b5b; }
.olim-rank-bar .is-kosong { background: #d9d4cc; }
.olim-rank-persen { color: #6f675f; font-weight: 600; }
.olim-rank-skor { font-size: 22px; font-weight: 700; color: #241c16; white-space: nowrap; }
.olim-rank-skor i { font-size: 12px; color: #b0a89e; margin-left: 6px; }
.olim-rank-detail { padding: 0 18px 14px 82px; }
.olim-rank-detail dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0; }
.olim-rank-detail dt { color: #8d847a; font-size: 12px; }
.olim-rank-detail dd { margin: 0; color: #2a2118; font-weight: 600; }
.olim-rank-empty, .olim-rank-none { color: #8d847a; padding: 24px 0; }
@media (max-width: 900px) {
    .olim-rank-toolbar { flex-direction: column; align-items: stretch; }
    .olim-rank-kode { flex-basis: auto; }
    .olim-rank-cols { display: none; }
    .olim-rank-row { grid-template-columns: 40px 1fr; }
    .olim-rank-hasil, .olim-rank-persen, .olim-rank-skor { grid-column: 2; }
    .olim-rank-detail { padding-left: 18px; }
    .olim-rank-detail dl { grid-template-columns: 1fr; }
}