:root {
    --bg: #14110d;
    --panel: #1f1a14;
    --panel2: #2a231a;
    --rim: #b88f47;
    --gold: #e8c470;
    --cream: #f0e4c8;
    --muted: #a99d82;
    --danger: #8c1d1d;
}

html, body { background: var(--bg); color: var(--cream); font-size: 15px; }
a { color: var(--gold); }
a:hover { color: #fff1c9; }

.rl-nav {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    padding: 10px 20px; background: linear-gradient(#2b0d0d, #1a0909); border-bottom: 2px solid var(--rim);
}
.rl-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; text-decoration: none; }
.rl-brand img { width: 30px; height: 30px; border-radius: 6px; }
.rl-brand span { color: var(--muted); font-weight: 400; }
.rl-links { display: flex; gap: 18px; flex: 1; }
.rl-links a { text-decoration: none; color: var(--cream); }
.rl-links a:hover { color: var(--gold); }
.rl-user { display: flex; gap: 10px; align-items: center; }
.rl-main { padding: 20px; max-width: 1500px; margin: 0 auto; }

h1, h2, h3, h4 { color: var(--gold); }
.text-muted, .rl-muted { color: var(--muted) !important; }

.rl-card {
    background: var(--panel); border: 1px solid var(--rim); border-radius: 8px; padding: 16px; margin-bottom: 16px;
}
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.rl-tile {
    display: block; background: var(--panel2); border: 1px solid #4a3c26; border-radius: 6px; padding: 12px; text-decoration: none; color: var(--cream);
}
.rl-tile:hover { border-color: var(--gold); color: var(--cream); }
.rl-tile b { color: var(--gold); display: block; }
.rl-tile small { color: var(--muted); }
.rl-badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: #6b4d14; color: #fff; margin-left: 6px; }
.rl-badge.red { background: var(--danger); }

.table { --bs-table-bg: transparent; --bs-table-color: var(--cream); --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-striped-color: var(--cream); --bs-table-hover-bg: rgba(232,196,112,.08); --bs-table-hover-color: var(--cream); font-size: 13px; }
.table th { color: var(--gold); white-space: nowrap; border-color: #4a3c26; }
.table td { border-color: #2f271c; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.form-control, .form-select {
    background: #0f0d0a; color: var(--cream); border: 1px solid #5a4a30;
}
.form-control:focus, .form-select:focus { background: #0f0d0a; color: #fff; border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(232,196,112,.2); }
.form-label { color: var(--muted); font-size: 13px; margin-bottom: 2px; }

.btn-gold { background: #8c5c14; border: 1px solid var(--rim); color: #fff; }
.btn-gold:hover { background: #a8701c; color: #fff; }
.btn-red { background: var(--danger); border: 1px solid #c04040; color: #fff; }
.btn-red:hover { background: #a82424; color: #fff; }
.btn-outline-secondary { color: var(--cream); border-color: #6a5a40; }

.rl-login { max-width: 380px; margin: 8vh auto; text-align: center; }
.rl-login img { width: 96px; height: 96px; border-radius: 16px; margin-bottom: 10px; }

pre.rl-diff { background: #0f0d0a; border: 1px solid #4a3c26; padding: 8px; font-size: 12px; white-space: pre-wrap; color: var(--cream); }
.rl-old { color: #ff9a8a; }
.rl-item { display: inline-flex; align-items: center; gap: 5px; }
.rl-item img { width: 22px; height: 22px; border: 1px solid #5a4a30; }
.rl-new { color: #8fe08a; }
