.component-detail-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(24px,4vw,56px);display:grid}.component-details{font-family:var(--font-body);max-width:var(--container-width,1440px);padding-block:32px 64px}.component-detail-summary{min-width:0}.component-details .component-detail-summary h1{font-size:var(--public-page-title-size);overflow-wrap:anywhere;margin-block:16px 8px}.component-family{color:var(--color-primary);border:1px solid var(--eng-border);border-radius:999px;align-items:center;gap:8px;padding:8px 14px;display:inline-flex}.component-mpn{opacity:.8;text-align:start;overflow-wrap:anywhere;margin-block:12px 20px;font-size:1.05rem;font-weight:700}.component-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-block:24px;display:grid}.component-facts>div{border:1px solid var(--eng-border);background:var(--eng-surface);border-radius:14px;min-width:0;padding:14px 16px}.component-facts dt{color:var(--eng-muted);margin-bottom:6px;font-size:.875rem}.component-facts dd{overflow-wrap:anywhere;font-weight:600}.component-spec-panel{border:1px solid var(--dashboard-border);color:var(--dashboard-heading);background:var(--dashboard-surface);border-radius:24px;margin-bottom:20px;padding:24px}.component-spec-fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;display:grid}.component-spec-field{border:1px solid var(--dashboard-border);border-radius:16px;flex-direction:column;gap:8px;min-width:0;padding:16px;display:flex}.component-spec-field input,.component-spec-field select{border:1px solid var(--dashboard-border);width:100%;min-height:44px;color:var(--dashboard-heading);background:var(--dashboard-surface);border-radius:10px;padding:10px 12px;font-size:1rem}.component-spec-field :disabled{opacity:.65}.component-spec-save{background:var(--dashboard-primary);color:#fff;cursor:pointer;border-radius:12px;min-height:44px;padding:10px 20px;font-weight:700}.component-spec-save:disabled{opacity:.5;cursor:not-allowed}.component-spec-panel :focus-visible,.component-details :focus-visible{outline:3px solid var(--color-primary,var(--dashboard-primary));outline-offset:3px}@media (prefers-reduced-motion:no-preference){.component-detail-hero{animation:.3s ease-out both component-arrive}.component-facts>div{transition:transform .18s ease-out}.component-facts>div:hover{transform:translateY(-2px)}}@keyframes component-arrive{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width:800px){.component-detail-hero{grid-template-columns:minmax(0,1fr)}}@media (max-width:420px){.component-facts{grid-template-columns:minmax(0,1fr)}.component-spec-panel{padding:16px}}