.sg-icon { flex-shrink: 0; vertical-align: -.13em; color: inherit; --sg-detail: var(--accent); }
.btn-primary .sg-icon, .nav-btn.active .sg-icon { --sg-detail: currentColor; }
.gh-ic .sg-icon { width: 30px; height: 30px; }
.quick-card-icon .sg-icon { width: calc(var(--ui-tile-thumb, 40px) * .75); height: calc(var(--ui-tile-thumb, 40px) * .75); }
.quick-card-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: var(--ui-tile-thumb, 40px); min-height: var(--ui-tile-thumb, 40px); color: var(--text); }
.quick-card-icon:has(.sg-tile-photo) { padding: 0; background: #0D0C0B; border-radius: 9px; overflow: hidden; }
.sg-tile-photo { display: block; width: var(--ui-tile-thumb, 44px); height: var(--ui-tile-thumb, 44px); object-fit: cover; }
.nav-icon .sg-icon { display: block; }
/* Ілюстрація розділу нижча, ніж 2:1 картинки: угорі сторінки мають бути її справи, а не заставка. */
.sg-art { position: relative; z-index: 1; margin: 0 0 14px; overflow: hidden; border-radius: 12px; background: #0D0C0B; aspect-ratio: 2.6; }
.sg-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.sg-art::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.3) 42%, transparent 65%); pointer-events: none; }
.sg-art-copy { position: absolute; z-index: 1; left: 16px; right: 56%; top: 50%; transform: translateY(-50%); }
.sg-art-copy h2 { margin: 0; font-size: clamp(18px, 5.1vw, 26px); line-height: 1.12; letter-spacing: -.5px; font-weight: 750; color: #F3E9D6; }
.sg-art-copy p { margin: 8px 0 0; font-size: 12px; line-height: 1.3; color: #CEBFAB; }
.sg-art-home { margin-bottom: 14px; }
.sg-logo { display: block; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; }
.loading-screen .sg-logo { width: 104px; height: 104px; flex-basis: 104px; margin: 0 auto 20px; border-radius: 0; }
/* На світлому тлі кремовий бюст без кола зникає — там лишається лого в чорному колі. */
[data-theme="light"] .loading-screen .sg-logo { content: url("/static/brand/logo.webp?v=sg-20261104-1"); width: 92px; height: 92px; flex-basis: 92px; border-radius: 50%; }
.header-left { min-width: 0; }
.header-left .sg-logo { margin-right: 2px; }
@media (max-width: 359px) {
  .header-left .sg-logo { width: 24px; height: 24px; flex-basis: 24px; }
  .sg-art { margin-bottom: 16px; border-radius: 10px; }
}
/* Телефон боком: висоти ледве вистачає на шапку й навігацію, заставка забрала б половину екрана. */
@media (max-height: 500px) and (orientation: landscape) { .sg-art { display: none; } }