

.ab-hero {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 40px);
    align-items: center; margin-bottom: 16px; border-radius: 20px; overflow: hidden;
    background: var(--bg-section); border: 1px solid var(--border);
}
@media (max-width: 900px) { .ab-hero { grid-template-columns: minmax(0, 1fr); } }


.ab-photo { margin: 0; padding: 18px 0 6px 10px; align-self: stretch; display: grid; place-items: center;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--text-main) 9%, transparent), transparent); }
.ab-photo img { width: 100%; max-width: 560px; height: auto; display: block; }
.ab-hero-text { padding: 26px 30px 26px 0; }
@media (max-width: 900px) { .ab-hero-text { padding: 0 26px 22px; } }
.ab-kicker {
    display: block; padding-left: 24px; font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
    background: linear-gradient(currentColor, currentColor) left center / 14px 1px no-repeat;
}
.ab-hero-text h3 { margin: 10px 0 0; font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.ab-version { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0 !important; font: 500 12px var(--mono) !important; color: var(--text-muted) !important; }
.ab-version b { color: var(--text-main); font-weight: 600; }
.ab-version span + span::before, .ab-version b + span::before { content: "/"; margin-right: 14px; color: var(--border-hover); }
.ab-hero-text p { margin: 14px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.ab-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ab-actions .st-btn { gap: 9px; }
.ab-actions .uic { width: 17px; height: 17px; }
.ab-actions .st-btn--primary { color: #fff; }
.ab-actions .st-btn--primary .uic { stroke: #fff; --uic-ac: #fff; }


.ab-specs { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.ab-specs li { display: grid; gap: 2px; padding: 14px 20px; }
.ab-specs li + li { border-left: 1px solid var(--border); }
.ab-specs b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-main); }
.ab-specs span { font: 500 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 700px) { .ab-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-specs li:nth-child(3) { border-left: 0; } }


.ab-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .ab-cards { grid-template-columns: minmax(0, 1fr); } }

.ab-kv { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--border); }
.ab-kv li {
    display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: baseline;
    padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text-dim);
}
.ab-kv b {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.ab-kv span { overflow-wrap: anywhere; }
.ab-path { font-size: 12px; color: var(--text-muted); }

.st-credits .ab-link { color: var(--accent-text); text-decoration: none; }
.st-credits .ab-link:hover { text-decoration: underline; }


#tab-about .st-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 16px; margin-top: 16px; }
