.rq {
    color: #e7c08c;
    font: 13px/1.46 Tahoma, Arial, sans-serif;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .56)),
        url('/images/lp8-body.jpg') center top repeat-y,
        #000;
    padding: 16px;
}

.rq__head,
.rq__detail {
    background: rgba(54, 23, 11, .94);
    border: 1px solid rgba(176, 104, 40, .45);
    border-left: 3px solid rgba(215, 138, 58, .62);
    padding: 16px 18px;
    margin-bottom: 14px;
}

.rq__head {
    display: grid;
    grid-template-columns: minmax(260px, .6fr) minmax(420px, 1fr);
    gap: 22px;
    align-items: end;
}

.rq__icons {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.rq__icons img,
.rq__filter-title img,
.rq__quest-icon {
    width: 26px;
    height: 26px;
    object-fit: cover;
    vertical-align: middle;
}

.rq__head h2,
.rq__title h2 {
    margin: 0;
    color: #ffe4a5;
    font-size: 24px;
    line-height: 1.1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .7);
}

.rq__head p,
.rq__title p { margin: 8px 0 0; color: #d7ab6b; }

.rq__filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 8px;
    align-items: center;
}

.rq__filter-title {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffe4a5;
    font-weight: 700;
}

.rq__filters [data-rq-select] { grid-column: span 2; }
.rq__filters select,
.rq__filters input {
    width: 100%;
    min-width: 0;
    height: 28px;
    color: #f1d9a6;
    background: rgba(25, 8, 3, .95);
    border: 1px solid rgba(176, 104, 40, .56);
    border-radius: 0;
    padding: 0 8px;
}

.rq__grid {
    display: grid;
    grid-template-columns: 1fr;
    background: rgba(21, 8, 4, .44);
}

.rq__quest-card {
    min-height: 52px;
    display: grid;
    grid-template-columns: 38px minmax(220px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    color: #e7c08c;
    text-decoration: none;
    border: 0;
    border-bottom: 1px solid rgba(180, 126, 62, .28);
    background: transparent;
}

.rq__quest-card:hover { background: rgba(255, 209, 119, .12); text-decoration: none; }
.rq__quest-card b { color: #ffe4a5; font-size: 14px; }
.rq__quest-card span { color: #d1a064; font-size: 12px; }

.rq__flags,
.rq__meta { display: flex; flex-wrap: wrap; gap: 5px; }
.rq__flags i,
.rq__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    background: rgba(255, 219, 160, .08);
    color: #e5be85;
    padding: 0 7px;
    font-style: normal;
    font-size: 12px;
}

.rq__title {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(166, 87, 30, .35);
}
.rq__title a { color: #ffd685; }
.rq__meta { margin-top: 10px; }

.rq__tree { display: flex; flex-direction: column; gap: 0; }
.rq__node {
    position: relative;
    padding-left: min(calc(var(--depth) * 18px), 126px);
    max-width: 100%;
}
.rq__node::before {
    content: "";
    position: absolute;
    left: min(calc(var(--depth) * 18px), 126px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(169, 103, 39, .35);
}
.rq__node-main {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0 10px 10px;
    border: 0;
    border-bottom: 1px solid rgba(177, 112, 48, .28);
    background: transparent;
}
.rq__npc {
    width: 52px;
    height: 52px;
    object-fit: cover;
    background: #2c1308;
}
.rq__npc--empty { display: block; background: #d5b978 url('/images/achievement_icon.gif') center/28px 28px no-repeat; }
.rq__node-title { display: flex; gap: 8px; align-items: baseline; color: #ffe4a5; font-size: 16px; font-weight: 700; }
.rq__node-title span { color: #d3a367; font-size: 12px; }
.rq__npc-name { color: #d5a55f; font-size: 12px; }
.rq__text { margin-top: 8px; color: #e7c08c; overflow-wrap: anywhere; }

.rq__awards,
.rq__restrictions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.rq__restrictions > b { color: #ffd685; text-transform: lowercase; }
.rq__restriction { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rq__restriction em,
.rq__restriction > span,
.rq__artifact,
.rq__money {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    background: rgba(255, 219, 160, .06);
    color: #e7c08c;
    padding: 2px 6px;
    font-style: normal;
}
.rq__restriction em { color: #ffd685; font-weight: 700; }
.rq__artifact { text-decoration: none; color: #d50000; }
.rq__artifact:hover { color: #a80000; text-decoration: underline; }
.rq__artifact--take,
.rq__artifact--need,
.rq__money--take { color: #9b230d; }
.rq__artifact img { width: 28px; height: 28px; object-fit: cover; }
.rq__artifact--inline { min-height: 26px; padding: 1px 5px; vertical-align: middle; }
.rq__artifact--inline img { width: 22px; height: 22px; }
.rq__amount { color: #2f1908; font-weight: 700; }
.rq__next { display: inline-flex; margin-top: 9px; color: #1d4f8c; font-size: 13px; }

#artifact_alt { color: #2b1408; font: 12px/1.25 Arial, sans-serif; }
#artifact_alt .aa-table,
#artifact_alt .aa-table-t { color: #3a1a08; }
#artifact_alt .aa-table { width: 300px !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
#artifact_alt .aa-table-t { background: #f7d19f; }
#artifact_alt .aa-table-t,
#artifact_alt .aa-table-t td,
#artifact_alt .aa-table-t div,
#artifact_alt .aa-table-t span,
#artifact_alt .aa-table-t b { color: #3a1a08 !important; }
#artifact_alt .aa-table-t .red,
#artifact_alt .aa-table-t .redd,
#artifact_alt .aa-table-t b.red,
#artifact_alt .aa-table-t .red b { color: #c01800 !important; }
#artifact_alt .aa-table-t a { color: #8b1600 !important; }

.rq__empty { color: #d7ab6b; padding: 18px; background: rgba(21, 8, 4, .44); }

@media (max-width: 900px) {
    .rq__head { grid-template-columns: 1fr; }
    .rq__filters { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
    .rq__quest-card { grid-template-columns: 38px 1fr; }
}
@media (max-width: 760px) {
    .rq { padding: 10px; }
    .rq__filters { grid-template-columns: 1fr; }
    .rq__filters [data-rq-select] { grid-column: auto; }
    .rq__node { padding-left: min(calc(var(--depth) * 10px), 50px); }
    .rq__node::before { left: min(calc(var(--depth) * 10px), 50px); }
    .rq__node-main { grid-template-columns: 42px minmax(0, 1fr); }
    .rq__npc { width: 42px; height: 42px; }
}