#app .forum-lab-page {
  min-height: 65vh;
  background: #f4f6f8;
  color: #1f2937;
}

#app .lab-catalog { min-height: 0; padding-block: 14px 16px; background: transparent; }
#app .lab-catalog .lab-catalog-slogan { margin: 0 0 14px; color: #1f2937; }
#app .lab-catalog-slogan .lab-slogan-emphasis { color: #d94e1d; }
#app .lab-catalog-group + .lab-catalog-group { margin-top: 12px; }
#app .lab-catalog .course-theme { display: flex; border-left: 4px solid #ff7849; }
#app .lab-catalog .course-theme h2 { margin: 0; }
#app .lab-catalog .course-theme span { color: #64748b; font-size: 13px; }
#app .lab-catalog .course-grid { display: grid; row-gap: 8px; }

#app .lab-catalog .course-card {
  grid-template-columns: 44px minmax(0, 1fr) clamp(86px, 11vw, 132px);
  padding-block: 6px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  border: 1px solid #e0e7ef;
}

#app .lab-catalog .course-card:is(:hover, :focus-visible) { border-color: #ff9b78; }
#app .lab-catalog .course-card .course-icon { display: grid; place-items: center; height: 44px; background: #fff0e9; color: #bd5026; }
#app .lab-catalog .course-copy small { white-space: normal; }
#app .lab-catalog .course-copy p { color: #64748b; }
#app .lab-entry-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
#app .lab-entry-preview { display: block; width: min(100%, 112px); height: 48px; min-width: 0; }
#app .lab-entry-arrow { color: #64748b; font-size: 24px; text-align: right; }

#app .lab-detail-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px 0;
}

#app .lab-detail-heading h1 { margin: 0; font-size: clamp(20px, 2vw, 26px); }
#app .lab-catalog-back {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #e0e7ef;
  border-radius: 8px;
  background: #fff;
  color: #9b3d1b;
  text-decoration: none;
}

#app .forum-lab-detail .lab-content { padding-top: 10px; }
#app .forum-lab-detail .lab-content > :is(.intro, .category-tabs, .experiment-tabs, .lab-footer) { display: none; }

@media (max-width: 520px) {
  #app .lab-catalog .course-card { grid-template-columns: 32px minmax(0, 1fr) clamp(56px, 18vw, 88px); }
  #app .lab-entry-end { gap: 3px; }
  #app .lab-entry-preview { height: 34px; }
  #app .lab-detail-heading { padding-inline: 0; }
}

.lab-catalog-heading { position:relative; }
.lab-suggestion-entry,.lab-suggestion-dialog button { font:inherit; font-size:14px; cursor:pointer; border:1px solid #ffd5c5; border-radius:8px; padding:8px 12px; color:#9c380f; background:#fff1eb; }
.lab-suggestion-entry { position:absolute; top:0; right:0; }
.lab-suggestion-entry:hover,.lab-suggestion-dialog button:hover { background:#ffe3d7; }
.lab-suggestion-dialog { box-sizing:border-box; width:min(460px,calc(100% - 24px)); max-height:calc(100% - 24px); padding:20px; border:1px solid #dce4ed; border-radius:14px; color:#192b40; background:#fff; box-shadow:0 16px 48px #172b4133; }
.lab-suggestion-dialog::backdrop { background:#172b4177; }
.lab-suggestion-dialog header,.lab-suggestion-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lab-suggestion-dialog h2 { font-size:20px; margin:0; }
.lab-suggestion-dialog p { font-size:14px; color:#526478; margin:8px 0 16px; }
.lab-suggestion-dialog label { display:grid; gap:6px; margin-bottom:14px; font-size:14px; }
.lab-suggestion-dialog [hidden] { display:none; }
.lab-suggestion-dialog input,.lab-suggestion-dialog textarea { box-sizing:border-box; width:100%; border:1px solid #cbd6e1; border-radius:8px; padding:9px; font:inherit; font-size:16px; }
.lab-suggestion-dialog textarea { resize:vertical; }
.lab-suggestion-footer { font-size:14px; }
.lab-suggestion-footer button { flex-shrink:0; }
@media (max-width:700px) {
  .lab-catalog-heading { display:grid; justify-items:center; gap:4px; margin-bottom:10px; }
  .lab-suggestion-entry { position:static; }
}

.lab-extension { max-width:1440px; margin:auto; padding:12px 20px 18px; }
.lab-extension-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px, 280px); gap:14px; align-items:start; }
.lab-extension-panel { min-width:0; padding:14px 16px; border:1px solid #dde5ee; border-radius:12px; background:#fff; color:#172b41; }
.lab-extension-header { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; justify-content:space-between; }
.lab-extension h2 { margin:0; font-size:17px; line-height:1.45; }
.lab-extension-header span, .lab-extension-metrics dt { color:#526478; font-size:13px; }
.lab-extension-legend { display:flex; gap:4px 14px; flex-wrap:wrap; margin:8px 0 5px; color:#526478; font-size:13px; }
.lab-extension-legend span { display:inline-flex; align-items:center; gap:5px; }
.lab-extension-legend span::before { content:''; width:13px; height:3px; background:var(--series); border-radius:2px; }
.lab-extension canvas { display:block; width:100%; height:clamp(215px,44vh,410px); }
.lab-extension-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:8px 0 10px; }
.lab-extension-metrics div { background:#f6f8fa; border-radius:8px; padding:7px 9px; }
.lab-extension-metrics dd { margin:2px 0 0; font-size:16px; font-weight:650; overflow-wrap:anywhere; }
.lab-extension-actions { display:flex; flex-wrap:wrap; gap:8px; }
.lab-extension button, .lab-extension select { font:inherit; font-size:14px; padding:7px 11px; border:1px solid #dce4ec; border-radius:7px; background:#fff; color:inherit; }
.lab-extension button { cursor:pointer; }
.lab-extension [data-play] { background:#b94720; border-color:#b94720; color:#fff; }
.lab-extension-controls label { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 8px; margin-top:14px; font-size:14px; }
.lab-extension-controls input { width:100%; min-height:25px; grid-column:1/-1; margin:0; accent-color:#bd481e; }
.lab-extension-controls output { color:#9c380f; font-variant-numeric:tabular-nums; }
.lab-extension-notes { display:none; margin-top:12px; }
.lab-notes-open .lab-extension-notes { display:block; }
.lab-extension-notes p { margin:5px 0 0; color:#526478; font-size:14px; line-height:1.65; }
@media (max-width:720px) {
  .lab-extension { padding:10px 0 14px; }
  .lab-extension-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  .lab-extension-panel { padding:11px; }
  .lab-extension canvas { height:250px; }
  .lab-extension-metrics { gap:4px; }
  .lab-extension-metrics div { padding:6px; }
  .lab-extension-metrics dt { font-size:12px; }
  .lab-extension-metrics dd { font-size:14px; }
}