:root {
    --npc-spotlight-panel: rgba(14, 17, 21, 0.96);
    --npc-spotlight-soft: rgba(255, 255, 255, 0.045);
    --npc-spotlight-border: rgba(255, 255, 255, 0.11);
    --npc-spotlight-muted: #9ba2ad;
    --npc-spotlight-gold: #c6a45f;
}

.npc-spotlight-panel {
    border: 1px solid var(--npc-spotlight-border);
    border-radius: 18px;
    background: var(--npc-spotlight-panel);
    overflow: hidden;
}

.npc-spotlight-panel--standalone { margin-top: 12px; }
.npc-spotlight-panel__head { padding: 11px 13px; border-bottom: 1px solid var(--npc-spotlight-border); }
.npc-spotlight-panel__head h2 { margin: 2px 0; font-size: .95rem; }
.npc-spotlight-panel__head p { margin: 0; color: var(--npc-spotlight-muted); font-size: .72rem; }
.npc-spotlight-kicker { color: var(--npc-spotlight-gold); font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.npc-spotlight-grid { padding: 9px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.npc-spotlight-grid--compact { grid-template-columns: 1fr; }
.npc-spotlight-grid--district { padding: 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.npc-spotlight-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 9px;
    align-items: start;
    padding: 9px;
    border: 1px solid var(--npc-spotlight-border);
    border-radius: 12px;
    background: radial-gradient(circle at 100% 0%, rgba(198,164,95,.07), transparent 60%), var(--npc-spotlight-soft);
    box-shadow: inset 0 1px rgba(255,255,255,.03);
    transition: border-color .18s ease, transform .18s ease;
}
.npc-spotlight-card:hover { border-color: rgba(198,164,95,.28); transform: translateY(-1px); }
.npc-spotlight-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(198,164,95,.28);
    background: #0a0d12;
    box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06);
}
.npc-spotlight-card__copy { min-width: 0; display: grid; gap: 2px; }
.npc-spotlight-card__copy strong { font-size: .8rem; color: #f1f1f1; }
.npc-spotlight-card__copy small { color: var(--npc-spotlight-gold); font-size: .58rem; text-transform: uppercase; letter-spacing: .09em; }
.npc-spotlight-card__copy span { color: #c7ccd2; font-size: .7rem; }
.npc-spotlight-card__copy p { margin: 3px 0 0; color: var(--npc-spotlight-muted); font-size: .68rem; line-height: 1.4; }
.npc-spotlight-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.npc-spotlight-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid var(--npc-spotlight-border);
    background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
    color: #ececec;
    font-size: .66rem;
    font-weight: 700;
    transition: border-color .18s ease, color .18s ease;
}
.npc-spotlight-card__button:hover { border-color: rgba(198,164,95,.42); color: #fff; }

@media (max-width: 680px) {
    .npc-spotlight-grid { grid-template-columns: 1fr; }
    .npc-spotlight-card { grid-template-columns: 40px minmax(0,1fr); }
    .npc-spotlight-card__avatar { width: 40px; height: 40px; border-radius: 10px; }
}
.npc-spotlight-card__identity{display:block;width:max-content;color:inherit;text-decoration:none}.npc-spotlight-card__identity:hover .npc-spotlight-card__avatar{border-color:rgba(198,164,95,.58);box-shadow:0 0 18px rgba(198,164,95,.12)}.npc-spotlight-card__copy strong a{color:inherit;text-decoration:none}.npc-spotlight-card__copy strong a:hover{color:#e9d49a}