#guides-list-widget {
    font-family: "Inter", sans-serif;
    background: #15110d;
    color: #ece4d3;
    padding: 24px;
    border-radius: 4px;
    margin: 0 auto;
    max-width: 900px;
    border: 1px solid rgba(201, 162, 39, 0.16);
}
 
#guides-list-widget * { box-sizing: border-box; }
 
.gl-header {
    text-align: center;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(201, 162, 39, 0.16);
}
 
.gl-header h1 {
    font-family: "Cinzel", serif;
    font-size: 1.7em;
    font-weight: 600;
    color: #ece4d3;
    margin: 0 0 8px;
}
.gl-header p { color: #948c7a; font-size: 0.9em; margin: 0; }
 
.gl-container { display: flex; flex-direction: column; gap: 12px; }
 
.gl-card {
    background: #1b1611;
    border: 1px solid rgba(201, 162, 39, 0.16);
    border-radius: 3px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
 
.gl-card:hover {
    transform: translateY(-2px);
    border-color: #ab8226;
}
 
.gl-info { display: flex; align-items: center; gap: 14px; }
 
.gl-icon {
    width: 42px;
    height: 42px;
    background: #0b0908;
    border: 1px solid rgba(201, 162, 39, 0.16);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e0b84a;
    flex-shrink: 0;
}
 
.gl-title-wrapper { display: flex; flex-direction: column; }
.gl-title { font-weight: 600; color: #ece4d3; font-size: 1.02em; }
 
.gl-meta { display: flex; align-items: center; gap: 12px; }
 
.gl-level-badge {
    background: rgba(201, 162, 39, 0.12);
    color: #e0b84a;
    border: 1px solid rgba(201, 162, 39, 0.3);
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 0.82em;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
 
.gl-arrow { color: #948c7a; transition: transform 0.2s ease, color 0.2s ease; }
.gl-card:hover .gl-arrow { color: #e0b84a; transform: translateX(4px); }
 
.gl-footer { margin-top: 24px; text-align: center; font-size: 0.82em; color: #948c7a; }
 
@media (max-width: 640px) {
    .gl-card { flex-direction: column; align-items: flex-start; gap: 14px; }
    .gl-meta { width: 100%; justify-content: space-between; }
}