.connection-reference-panel { margin:20px 0; }
.connection-reference-panel > .panel-heading { margin-bottom:10px; }
.connection-reference-panel > p { color:var(--muted); font-size:12px; line-height:1.7; margin:0 0 20px; max-width:850px; }
.cg-loading { font-size:12px; line-height:1.7; color:var(--muted); }
.cg-picker { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; padding:16px; border:1px solid #dde7dc; border-radius:7px; background:#f5f8f3; }
.cg-picker > label { display:flex; flex:1; flex-direction:column; gap:8px; max-width:600px; font-size:11px; font-weight:600; color:#61775c; }
.cg-picker select { width:100%; min-width:0; padding:10px; background:#fff; color:#355731; border:1px solid #d2dfca; border-radius:5px; font:12px var(--sans); }
.cg-picker > a { flex:none; font-size:11px; padding:10px 0; }
.cg-profile { padding:22px 4px 0; }
.cg-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cg-heading h3 { font-size:18px; letter-spacing:-.025em; margin:5px 0 0; }
.cg-category { font:10px var(--mono); color:#869277; }
.cg-status { display:inline-block; flex:none; border-radius:20px; padding:5px 9px; font-size:10px; font-weight:500; }
.cg-statuses { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:230px; }
.cg-status--complete { background:#e8f3e8; color:#3d7245; }
.cg-status--simulation { background:#edf2f7; color:#4a6c87; }
.cg-status--development { background:#f8f0e4; color:#966b40; }
.cg-summary { font-size:12px; line-height:1.7; color:#77856b; margin:12px 0; }
.cg-reference-note { font-size:11px; color:#707c60; background:#f4f7ef; border-left:2px solid #bdccab; border-radius:3px; padding:10px 12px; line-height:1.7; }
.cg-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; margin:21px 0; }
.cg-columns h4 { margin:0 0 10px; color:#627847; font-size:11px; font-weight:600; }
.cg-columns ul { padding-left:17px; margin:0; color:#849174; font-size:11px; line-height:1.85; }
.cg-columns li + li { margin-top:5px; }
.cg-scope { padding:13px 15px; border:1px solid #e3eadb; border-radius:5px; background:#fcfdfb; }
.cg-scope > strong { font-size:11px; color:#6a7e53; }
.cg-scope p { font-size:11px; line-height:1.85; color:#869278; margin:6px 0 0; }
.cg-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:18px; }
.cg-actions > a { font-size:11px; color:#587745; }
.connection-guide-disclosure { margin:16px 0; padding:14px; background:#fbfcf9; border:1px solid #e1e8d9; border-radius:7px; }
.connection-guide-disclosure > summary { cursor:pointer; font-size:12px; color:#6d8256; font-weight:600; }
.connection-guide-disclosure[open] > summary { margin-bottom:15px; }
.connection-guide-disclosure .cg-picker { flex-direction:column; align-items:stretch; gap:8px; }
.connection-guide-disclosure .cg-picker > label { max-width:none; }
.connection-guide-disclosure .cg-picker > a { padding:0; }
.connection-guide-disclosure .cg-columns { grid-template-columns:1fr; gap:17px; }
.device-reference-link { margin:10px 0 0; font-size:11px; line-height:1.7; color:var(--muted); }
.device-reference-link a { color:#6a7d50; text-decoration:underline; }
@media(max-width:800px) { .cg-columns { grid-template-columns:1fr; gap:20px; } .cg-picker { flex-direction:column; align-items:stretch; gap:10px; padding:13px; } .cg-picker > label { max-width:none; } .cg-picker > a { padding:0; } .cg-heading { align-items:flex-start; } .cg-heading h3 { font-size:17px; } .cg-status { font-size:9px; } }
@media(max-width:800px) { .cg-statuses { max-width:100px; } }

.cg-status--pilot { color:#805718; background:#fff1d4; }
.cg-progress { margin:18px 0; max-width:680px; }
.cg-progress label { display:block; color:#627847; font-size:11px; font-weight:600; margin-bottom:8px; }
.cg-progress progress { width:100%; height:8px; accent-color:#3e7b57; }
.cg-progress p { font-size:11px; line-height:1.8; color:#77856b; }