.control-plane-overview { position:relative; }
.cp-grid,.cp-resource-grid,.cp-pack-grid,.cp-roadmap { display:grid; gap:1rem; }
.cp-grid { grid-template-columns:repeat(4,1fr); }
.cp-card,.cp-resource,.cp-pack-grid a,.cp-roadmap>div { display:flex; flex-direction:column; gap:.7rem; padding:1.35rem; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--panel) 92%,transparent); box-shadow:inset 0 0 25px color-mix(in srgb,var(--cyan) 4%,transparent); }
.cp-card { min-height:250px; border-top:2px solid var(--cyan); }
.cp-card-cyan { border-top-color:var(--cyan); }.cp-card-pink { border-top-color:var(--pink); }.cp-card-green { border-top-color:var(--acid); }.cp-card-orange { border-top-color:var(--orange); }
.cp-index,.cp-code-label { color:var(--muted); font:700 .56rem var(--mono); letter-spacing:.12em; }
.cp-pack-commands { margin-top:1rem; padding:1rem; border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 75%,var(--bg)); }.cp-pack-command-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin-top:.8rem; }.cp-pack-command { display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-width:0; padding:.55rem .65rem; background:var(--bg); border:1px solid var(--line); }.cp-pack-command code { min-width:0; flex:1; overflow-wrap:anywhere; color:var(--acid); font:.62rem/1.4 var(--mono); transition:color .2s; }.cp-pack-command:hover { border-color:var(--cyan); }.cp-pack-command:hover code { color:var(--cyan); }.copy-pack-command { flex:none; margin-left:auto; padding:.42rem .58rem; color:var(--bg); background:var(--cyan); border:1px solid var(--cyan); box-shadow:0 0 .7rem color-mix(in srgb,var(--cyan) 25%,transparent); font:800 .55rem var(--mono); letter-spacing:.08em; cursor:pointer; }.copy-pack-command:hover,.copy-pack-command:focus-visible { color:var(--bg); background:var(--acid); border-color:var(--acid); box-shadow:0 0 .8rem color-mix(in srgb,var(--acid) 35%,transparent); outline:none; }
.cp-card h3 { margin:0; font-size:1.2rem; }.cp-card p,.cp-resource span,.cp-pack-grid span,.cp-roadmap p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.55; }.cp-card code,.cp-resource code { margin-top:auto; color:var(--acid); font:.56rem var(--mono); }
.cp-flow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.8rem; margin-top:2rem; padding:1rem; border-block:1px solid var(--line); color:var(--cyan); font:700 .58rem var(--mono); letter-spacing:.1em; }.cp-flow i { color:var(--pink); font-style:normal; }
.cp-mod-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; }.cp-code { padding:1.2rem; border:1px solid var(--line); border-radius:10px; background:#05070d; overflow:auto; }.cp-code pre { margin:1rem 0 0; color:var(--white); font:.66rem/1.65 var(--mono); }.cp-code pre code { color:var(--cyan); }.cp-list { display:grid; gap:.6rem; }.cp-list>div { display:grid; grid-template-columns:2rem 1fr; gap:.7rem; align-items:start; padding:.9rem; border:1px solid var(--line); border-radius:8px; background:var(--panel); }.cp-list b { color:var(--pink); font:700 .8rem var(--mono); }.cp-list span { color:var(--muted); font-size:.8rem; }.cp-list strong { color:var(--white); }
.cp-resource-grid { grid-template-columns:repeat(4,1fr); }.cp-resource { min-height:190px; border-top:2px solid var(--cyan); }.cp-resource:nth-child(2){border-top-color:var(--pink)}.cp-resource:nth-child(3){border-top-color:var(--acid)}.cp-resource:nth-child(4){border-top-color:var(--orange)}.cp-resource b,.cp-pack-grid b { color:var(--white); font:700 .9rem var(--mono); }.cp-resource span { min-height:72px; }
.cp-pack-grid { grid-template-columns:repeat(3,1fr); margin-top:1rem; }.cp-pack-grid a { border-left:2px solid var(--purple); transition:transform .2s,border-color .2s; }.cp-pack-grid a:hover { transform:translateY(-3px); border-color:var(--cyan); }
.cp-roadmap { grid-template-columns:repeat(4,1fr); }.cp-roadmap>div { min-height:220px; border-top:2px solid var(--purple); }.cp-roadmap span { color:var(--pink); font:700 .65rem var(--mono); }.cp-roadmap b { font-size:1rem; }
.cp-install { display:grid; grid-template-columns:.8fr 1.2fr; gap:1rem; align-items:center; margin-top:1rem; padding:1.3rem; border:1px solid var(--cyan); background:color-mix(in srgb,var(--cyan) 5%,var(--panel)); }.cp-install h3 { margin:.55rem 0; }.cp-install p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.55; }.cp-install pre { margin:0; padding:1rem; overflow:auto; border:1px solid var(--line); background:#05070d; color:var(--cyan); font:.68rem/1.65 var(--mono); }.cp-install .c { color:var(--muted); }
.signal-section { border-block:1px solid var(--line); background:color-mix(in srgb,var(--panel) 26%,transparent); }.signal-toolbar { display:flex; justify-content:space-between; gap:1rem; margin:1rem 0; padding:.8rem 1rem; border:1px solid var(--line); color:var(--muted); font:700 .58rem var(--mono); letter-spacing:.1em; }.signal-toolbar a { color:var(--cyan); }.signal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.signal-card { display:flex; flex-direction:column; gap:.7rem; min-height:260px; padding:1.25rem; border:1px solid var(--line); border-top:2px solid var(--cyan); background:var(--panel); cursor:pointer; text-align:left; transition:transform .2s, border-color .2s, box-shadow .2s; }.signal-card:hover,.signal-card:focus-visible { transform:translateY(-5px); border-color:var(--white); box-shadow:0 0 1.8rem color-mix(in srgb,var(--cyan) 20%,transparent); outline:none; }.signal-pink { border-top-color:var(--pink); }.signal-acid { border-top-color:var(--acid); }.signal-purple { border-top-color:var(--purple); }.signal-orange { border-top-color:var(--orange); }.signal-red { border-top-color:var(--red); }.signal-meta { color:var(--cyan); font:800 .72rem var(--mono); letter-spacing:.12em; }.signal-pink .signal-meta { color:var(--pink); }.signal-acid .signal-meta { color:var(--acid); }.signal-purple .signal-meta { color:var(--purple); }.signal-orange .signal-meta { color:var(--orange); }.signal-red .signal-meta { color:var(--red); }.signal-card h3 { margin:0; font:800 1.05rem/1.25 var(--display); }.signal-card p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.6; }.signal-card code { margin-top:auto; overflow-wrap:anywhere; color:var(--acid); font:.62rem var(--mono); }.signal-footer { display:flex; justify-content:space-between; gap:.5rem; padding-top:.7rem; border-top:1px solid var(--line); color:var(--muted); font:800 .62rem var(--mono); }.signal-footer a { color:var(--cyan); }.signal-error { grid-column:1/-1; color:var(--red); }
.update-detail-meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-bottom:1rem; border-bottom:1px solid var(--line); }.update-detail-meta time { color:var(--white); font:800 .95rem var(--mono); letter-spacing:.08em; }.update-badges { display:flex; flex-wrap:wrap; gap:.4rem; }.update-detail-summary { font-size:1rem; }.update-detail-command { display:grid; gap:.4rem; margin-top:1rem; padding:1rem; border:1px solid var(--line); background:var(--bg); }.update-detail-command span { color:var(--cyan); font:800 .58rem var(--mono); letter-spacing:.14em; }.update-command-line { display:flex; align-items:center; gap:.8rem; }.update-command-line code { flex:1; color:var(--acid); font:.72rem/1.5 var(--mono); overflow-wrap:anywhere; }.copy-command { flex:none; padding:.45rem .6rem; color:var(--cyan); background:transparent; border:1px solid var(--cyan); font:800 .58rem var(--mono); letter-spacing:.08em; cursor:pointer; }.copy-command:hover { color:var(--bg); background:var(--cyan); }
.schema-status { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:1rem 0 1.3rem; padding:.8rem 1rem; border:1px solid var(--line); background:var(--glass); color:var(--muted); font:.65rem var(--mono); }.schema-status strong { color:var(--white); font-weight:800; }.schema-status b { color:var(--cyan); }.schema-status a { margin-left:auto; color:var(--cyan); text-decoration:none; font-weight:800; }.schema-status a:hover { color:var(--acid); }
@media (max-width:1000px) { .cp-grid,.cp-resource-grid,.cp-roadmap { grid-template-columns:repeat(2,1fr); }.cp-pack-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) { .cp-grid,.cp-resource-grid,.cp-pack-grid,.cp-roadmap,.cp-mod-grid,.cp-install,.signal-grid,.cp-pack-command-grid { grid-template-columns:1fr; }.cp-flow { justify-content:flex-start; line-height:1.8; }.signal-toolbar { align-items:flex-start; flex-direction:column; } }