/* Cabeçalho da página */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 24px;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.86rem;
    color: var(--dim);
}

/* A dica de onde se avalia aparece uma vez, aqui, e não em cada cartão. */
.rating-hint {
    display: block;
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--dim);
}

/* Secções */
.src-section { padding-bottom: clamp(38px, 5vw, 60px); }

.src-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.src-section-head svg { width: 17px; height: 17px; color: var(--ash); flex: none; }
.src-section-head span {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bone);
    white-space: nowrap;
}
.src-section-head .rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--edge), transparent);
}

/* Grelha de cartões */
.src-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.src-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--edge-soft);
    border-radius: var(--r);
    background: var(--slab);
    transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.src-card:hover {
    border-color: var(--edge);
    background: var(--slab-2);
    transform: translateY(-3px);
}
/* As verificadas ganham um filete de luz em cima. É o único sinal de que */
.src-card.verified { position: relative; }
.src-card.verified::before {
    content: "";
    position: absolute;
    inset: -1px 16px auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--edge-lit), transparent);
}

.src-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.src-name {
    font-family: var(--display);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #fff;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    border: 1px solid var(--edge);
    color: var(--ash);
}
.badge-verified { background: var(--bone); border-color: var(--bone); color: var(--void); }

.src-desc {
    font-size: 0.9rem;
    color: var(--ash);
    line-height: 1.55;
    flex: 1;
}

.src-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--edge-soft);
}

/* Avaliação */
.src-rating {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-family: var(--mono);
    white-space: nowrap;
}
.rating-num { font-size: 0.95rem; color: var(--bone); }
.rating-count { font-size: 10.5px; color: var(--dim); letter-spacing: 0.05em; }
.src-rating.none {
    font-size: 10.5px;
    letter-spacing: 0.07em;
    color: var(--dim);
}

/* Botões do cartão */
.copy-btn, .btn-soon, .btn-na {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.copy-btn svg, .btn-soon svg { width: 15px; height: 15px; flex: none; }

.copy-btn {
    border: 1px solid var(--edge);
    color: var(--bone);
    background: rgba(255, 255, 255, 0.025);
    transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease);
}
.copy-btn:hover { border-color: var(--edge-lit); background: rgba(255, 255, 255, 0.07); transform: translateY(-1px); }
/* Copiado: inverte por uns segundos. Sem verde — a inversão já diz tudo. */
.copy-btn.copied { background: var(--bone); border-color: var(--bone); color: var(--void); }

.btn-soon, .btn-na {
    border: 1px dashed var(--edge);
    color: var(--dim);
    font-weight: 500;
    cursor: default;
}

/* Esqueleto enquanto as avaliações chegam */
.card-skeleton {
    padding: 20px;
    border: 1px solid var(--edge-soft);
    border-radius: var(--r);
    background: var(--slab);
}
.skel {
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(255,255,255,0.035) 25%, rgba(255,255,255,0.075) 50%, rgba(255,255,255,0.035) 75%);
    background-size: 300% 100%;
    animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -150% 0; }
}

/* Aviso de copiado */
.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 200;
    padding: 11px 20px;
    border-radius: 100px;
    background: var(--bone);
    color: var(--void);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9);
    transform: translate(-50%, 22px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s, transform 0.28s var(--ease), visibility 0.28s;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
    .skel { animation: none; }
}
.src-grid { gap: 18px; grid-template-columns: repeat(auto-fill,minmax(min(100%,280px),1fr)); }
.src-card { padding: 24px; background: linear-gradient(145deg,#17171c,#0d0d10); border-color: var(--edge); }
.src-card:hover { border-color: #64615c; }
.src-desc { line-height: 1.7; }
.copy-btn { min-height: 44px; }
.src-foot { flex-wrap: wrap; gap: 12px; }
.src-name { overflow-wrap: anywhere; }