.dev-access-shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 5rem; }
.dev-access-header, .dev-matrix-heading, .dev-preview-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dev-access-header { margin-bottom: 1rem; }
.dev-access-header h1, .dev-matrix-heading h2 { margin: 0.2rem 0; }
.dev-access-header nav { display: flex; gap: 1rem; }
.dev-preview-panel { margin-bottom: 1rem; }
.dev-preview-panel label { display: grid; gap: 0.3rem; min-width: 12rem; }
.dev-preview-panel select { padding: 0.55rem; }
.dev-preview-banner { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 1px solid #d4b765; background: rgba(212,183,101,.12); border-radius: .5rem; }
.dev-preview-banner button { margin-left: .7rem; }
.dev-matrix-wrap { overflow: auto; }
.dev-matrix { width: 100%; border-collapse: collapse; min-width: 760px; }
.dev-matrix th, .dev-matrix td { padding: .65rem; border-top: 1px solid rgba(255,255,255,.12); text-align: center; }
.dev-matrix th:first-child, .dev-matrix td:first-child { text-align: left; position: sticky; left: 0; background: #171a18; }
.dev-matrix small { display: block; opacity: .7; margin-top: .2rem; max-width: 22rem; }
.dev-feature-matrix tr[data-tool-group-start="true"] td { border-top-color: rgba(212,183,101,.45); }
.dev-feature-label { padding-left: 1.4rem !important; }
.dev-feature-label strong::before { content: "↳ "; opacity: .55; }
.dev-tool-shortcuts { display: flex; flex-wrap: wrap; gap: .6rem; }
.dev-tool-shortcuts a { padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.15); border-radius: .4rem; text-decoration: none; }
.dev-tool-shortcuts a[aria-disabled="true"] { opacity: .4; pointer-events: none; }
@media (max-width: 700px) {
  .dev-access-header, .dev-matrix-heading, .dev-preview-panel { align-items: stretch; flex-direction: column; }
}