.surface-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; }
.surface-card.primary { border-top: 3px solid var(--brand); }
.surface-card.success { border-top: 3px solid #2da77f; }
.surface-card.attention { border-top: 3px solid #d59b2e; }
.surface-card.danger { border-top: 3px solid #c55369; }
.surface-card h3 { margin: 0 0 8px; font-size: 15px; }
.surface-card p { margin: 6px 0; }
.surface-card p, .surface-card li { overflow-wrap: anywhere; }
.surface-card ul { margin: 8px 0 0; padding-left: 20px; }
.surface-card li + li { margin-top: 7px; }
.lead { font-size: 17px; font-weight: 700; line-height: 1.4; }
.muted { color: var(--muted); }
dl { display: grid; gap: 8px; margin: 10px 0 0; }
dl div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
dt { color: var(--muted); } dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.technical { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; }
.technical summary { min-height: 44px; padding: 11px 14px; cursor: pointer; font-weight: 700; }
.technical div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); }
.technical code { color: #526077; }
.loading-card, .unavailable-project { margin: 20px; padding: 28px; border: 1px dashed #b5bfd0; border-radius: var(--radius); background: var(--surface); }
.unavailable-project { max-width: 620px; }
.unavailable-project h1 { margin: 8px 0; }