/* ── Dashboard layout ── */
.dash-page{display:flex;flex-direction:column;padding-top:var(--nh);height:100vh;overflow:hidden}
.pagebar{display:grid;grid-template-columns:246px minmax(0,1fr) 340px;gap:12px;align-items:baseline;padding:8px 20px 0}
.pagebar h1{margin:0;font-size:16px;font-weight:700;letter-spacing:-.02em;text-align:center}
.pagebar p{margin:0;font-size:11.5px;color:var(--txm);text-align:center}
.pagebar .spacer{display:block}
.dash-subtitle{text-align:center;padding:4px 20px 0}
.dash-subtitle h1{margin:0;font-size:15px;font-weight:700;letter-spacing:-.02em}
.dash-subtitle p{margin:1px 0 0;font-size:11px;color:var(--txm)}
.stage{flex:1;min-height:0;padding:8px 20px 14px;display:flex;flex-direction:column}
.dash{flex:1;min-height:0;display:grid;grid-template-columns:246px minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr);gap:12px;position:relative}
.dash.no-side{grid-template-columns:260px minmax(0,1fr)}

/* ── Shared atoms ── */
.sec-lbl{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--txm)}
.mchip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;background:var(--bge);color:var(--txm);font-size:10px;font-weight:600;white-space:nowrap}
.mono{font-family:'DM Mono',monospace}
.dim{color:var(--txm)}
.card{background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:9px}
.sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:all .3s ease}
.sdot.green{background:var(--gr);box-shadow:0 0 0 3px var(--grb)}
.sdot.yellow{background:var(--ye);box-shadow:0 0 0 3px var(--yeb);animation:pd 2.4s ease-in-out infinite}
.sdot.red{background:var(--re);box-shadow:0 0 0 3px var(--reb);animation:pd 1.3s ease-in-out infinite}
.sdot.unknown{background:var(--unk);box-shadow:0 0 0 3px var(--unkb)}
@keyframes pd{0%,100%{opacity:1}50%{opacity:.35}}
.st-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:10.5px;font-weight:700;background:var(--unkb);color:var(--unk);white-space:nowrap}
.st-chip.sm{padding:3px 9px;font-size:9.5px;line-height:1.35}
.st-chip .st-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.st-chip.green{background:var(--grb);color:var(--gr)}
.st-chip.yellow{background:var(--yeb);color:var(--ye)}
.st-chip.red{background:var(--reb);color:var(--re)}
.st-chip.red .st-dot{animation:pd 1.2s ease-in-out infinite}
.tone-green{color:var(--gr)}.tone-yellow{color:var(--ye)}.tone-red{color:var(--re)}.tone-unknown{color:var(--unk)}
.tone-gr{color:var(--gr)}.tone-ye{color:var(--ye)}.tone-re{color:var(--re)}

/* ── Segmented control ── */
.seg{display:flex;gap:2px;padding:3px;background:var(--bge);border-radius:10px}
.seg button{flex:1;padding:6px 8px;border:none;background:transparent;color:var(--txm);font-size:11px;font-weight:600;border-radius:7px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.seg button:hover:not(.on){color:var(--tx);background:color-mix(in srgb,var(--tx) 6%,transparent)}
.seg button.on{background:var(--bgc);color:var(--tx);box-shadow:0 1px 4px rgba(0,0,0,.16),0 0 0 1px var(--bo)}
.seg.sm button{padding:5px 11px}
.seg.sm.icons button{padding:5px 9px}

/* ── NPick dropdown ── */
.npick{position:relative;display:inline-block}
.npick.wide{display:block;width:100%}
.npick-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 11px;border-radius:10px;border:1px solid var(--bo);background:var(--bgc);color:var(--tx);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .18s ease}
.npick-btn:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--bo))}
.npick.open .npick-btn{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 15%,transparent)}
.npick.open .npick-btn svg{transform:rotate(180deg)}
.npick-btn svg{flex-shrink:0;color:var(--txm);transition:transform .2s ease}
.npick-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.npick-pop{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;max-height:260px;overflow-y:auto;padding:5px;border-radius:12px;border:1px solid var(--bo);background:var(--bgc);box-shadow:0 18px 40px rgba(0,0,0,.32);animation:popIn .16s cubic-bezier(.2,1,.3,1)}
@keyframes popIn{from{opacity:0;transform:translateY(-5px) scale(.985)}}
.npick-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--tx2);font:inherit;font-size:12.5px;font-weight:600;text-align:left;cursor:pointer;transition:all .14s ease;white-space:nowrap}
.npick-opt:hover{background:var(--bge);color:var(--tx);transform:translateX(2px)}
.npick-opt.on{background:color-mix(in srgb,var(--ac) 12%,transparent);color:var(--ac)}

/* ── Rail (left sidebar) ── */
.rail{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}
.rail>*{flex-shrink:0}
.live-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.live-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:var(--grb);color:var(--gr);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.live-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gr) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.next-poll{font-size:10px}
.flabel{display:flex;flex-direction:column;gap:4px;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--txm)}
.rchips{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.rchip{flex:1 1 auto;min-width:0;padding:7px 10px;border-radius:7px;border:1px solid var(--bo);background:transparent;color:var(--tx2);font-size:11px;font-weight:700;cursor:pointer;transition:all .18s ease;white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis}
.rchip:hover:not(.on){border-color:var(--ac);color:var(--ac);transform:translateY(-1px)}
.rchip.on{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 3px 10px color-mix(in srgb,var(--ac) 32%,transparent)}
.mini{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 11px;border-radius:8px;border:1px solid var(--bo);background:var(--bge);color:var(--tx2);font-size:11px;font-weight:600;cursor:pointer;transition:all .18s ease}
.mini:hover{border-color:var(--ac);color:var(--ac);transform:translateY(-1px)}
.mini:active{transform:scale(.97)}
.mini.wide{width:100%}
.poll-btn.polling{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,var(--bge));color:var(--ac);pointer-events:none}
.poll-btn.polling svg{animation:spin .7s linear infinite}
.poll-btn.polling .poll-label{animation:pollPulse 1.2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pollPulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ── Health ring ── */
.health-body{display:flex;align-items:center;gap:12px}
.ring-wrap{position:relative;width:98px;height:98px;flex-shrink:0}
.ring{width:100%;height:100%}
.ring-seg{transition:stroke-dasharray .8s cubic-bezier(.4,0,.2,1),stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}
.ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.ring-mid b{font-size:22px;font-weight:700;font-family:'DM Mono',monospace;letter-spacing:-.02em;line-height:1}
.ring-mid span{font-size:7px;text-transform:uppercase;letter-spacing:.06em;color:var(--txm);font-weight:700;margin-top:3px}
.health-list{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.hl{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--tx2);font-size:11px;font-weight:600;cursor:pointer;transition:all .18s ease;text-align:left}
.hl b{margin-left:auto;color:var(--tx);font-size:12px}
.hl:hover{background:var(--bge);transform:translateX(2px)}
.hl.on{background:var(--bge);border-color:color-mix(in srgb,var(--ac) 35%,transparent);color:var(--tx)}
.kpi-inline{display:flex;align-items:baseline;gap:8px;padding-top:8px;border-top:1px solid var(--bos)}
.kpi-inline b{font-size:18px;font-weight:700;font-family:'DM Mono',monospace;margin-left:auto}
.kpi-inline .dim{font-size:10px}

/* ── Needs attention ── */
.card.grow{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.card.grow .attn{flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
.rail .card>.sec-lbl,.rail .card>.flabel{text-align:center}
.attn{display:flex;flex-direction:column;gap:4px}
.attn-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;border:1px solid var(--bo);background:var(--bge);cursor:pointer;text-align:left;font-size:11px;color:var(--tx2);animation:rowIn .3s cubic-bezier(.4,0,.2,1) both;transition:all .18s ease}
.attn-row:hover{transform:translateX(2px);border-color:color-mix(in srgb,var(--ac) 32%,var(--bo))}
.attn-row.red{border-left:2px solid var(--re)}
.attn-row.yellow{border-left:2px solid var(--ye)}
.attn-name{display:flex;flex-direction:column;min-width:0;color:var(--tx);font-weight:600}
.attn-name em{font-style:normal;font-size:9.5px;color:var(--txm);font-family:'DM Mono',monospace}
.attn-up{margin-left:auto;font-size:11px}
.attn-ok{display:flex;align-items:center;gap:8px;padding:8px;border-radius:9px;background:var(--grb);color:var(--gr);font-size:11px;font-weight:600}
.attn-row:nth-child(n+3){display:none}

/* ── Environment bars ── */
.card.envcard{display:flex;flex-direction:column;gap:7px;flex:0 0 auto}
.envbars{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.envbar{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:8px 10px;border-radius:9px;border:1px solid var(--bo);background:transparent;cursor:pointer;transition:all .18s ease}
.envbar:hover{border-color:color-mix(in srgb,var(--ac) 35%,var(--bo));transform:translateY(-1px)}
.envbar.on{background:var(--bge);border-color:var(--ac)}
.envbar-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:11px;color:var(--tx);width:100%}
.envbar-top .dim{font-size:10px}
.envbar-track{height:5px;border-radius:3px;background:color-mix(in srgb,var(--tx) 9%,transparent);overflow:hidden;width:100%}
.envbar-track i{display:block;height:100%;border-radius:3px;background:var(--gr);transition:width .7s cubic-bezier(.4,0,.2,1)}
.envbar.yellow .envbar-track i{background:var(--ye)}
.envbar.red .envbar-track i{background:var(--re)}

/* ── Board (center) ── */
.board{background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);padding:13px 14px;display:flex;flex-direction:column;gap:10px;min-height:0;position:relative;overflow:hidden;container:board / inline-size}
.board::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 45%,var(--gr)))}
.board-hd{display:flex;align-items:center;justify-content:center;gap:12px;flex-shrink:0}
.board-hd.centered{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px}
.board-lead{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:0}
.board-lead h2{margin:0;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.board-tools{display:flex;align-items:center;gap:8px;min-width:0;flex:0 0 auto}
.board-hd.centered .seg.views{margin-left:0;flex:0 0 auto}
.seg.views{margin-left:6px}
.seg.views button{padding:5px 12px;font-size:11.5px;white-space:nowrap}
.search{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px solid var(--bo);background:var(--bge);color:var(--txm);transition:all .18s ease}
.search:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 14%,transparent)}
.search input{border:none;background:transparent;outline:none;color:var(--tx);font-size:11.5px;font-family:inherit;width:130px}
.search svg{flex-shrink:0}
.board-tools .search{min-width:0;flex:0 1 168px;padding:5px 9px}
.board-tools .search input{min-width:0;width:100%}
.board-hd.centered .board-tools .search{flex:0 1 168px;min-width:118px;max-width:168px}
.board-hd.centered .board-tools .search input{min-width:0;width:100%}
@container board (max-width:760px){.board-hd.centered .board-tools .search{display:none}}
.panel-btn{display:none;align-items:center;height:30px;padding:0 13px;border-radius:8px;border:1px solid var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac);font-size:11.5px;font-weight:700;cursor:pointer;transition:all .18s ease;white-space:nowrap}
.panel-btn:hover{background:var(--ac);color:#fff;transform:translateY(-1px)}
.panel-btn svg{flex-shrink:0}
.panel-btn .pbl{margin-left:2px}
@media(max-width:1000px){.panel-btn .pbl{display:none}.panel-btn{padding:6px 9px}}

/* ── Board scroll area ── */
.board-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 13px;scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .3s ease;display:flex;flex-direction:column}
.board-scroll:hover,.board-scroll.scrolling{scrollbar-color:color-mix(in srgb,var(--tx) 26%,transparent) transparent}
.board-scroll::-webkit-scrollbar{width:8px}
.board-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:99px;border:2px solid transparent;background-clip:content-box;transition:background .3s ease}
.board-scroll:hover::-webkit-scrollbar-thumb,.board-scroll.scrolling::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--tx) 26%,transparent);background-clip:content-box}
.board-scroll.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));grid-auto-rows:max-content;gap:9px;align-content:start}
.board-scroll.rows{display:flex;flex-direction:column;gap:2px}
.board-scroll.flat{display:flex;flex-direction:column;padding:2px 14px 14px}
.board-scroll.arch-fill{overflow:hidden}

/* ── Product cards ── */
@keyframes cardIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.pcard{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:13px;border:1px solid var(--bo);background:var(--bge);cursor:pointer;text-align:left;position:relative;overflow:hidden;animation:cardIn .4s cubic-bezier(.4,0,.2,1) both;transition:transform .22s cubic-bezier(.4,0,.2,1),border-color .22s,box-shadow .28s,background .3s}
.pcard.green{background:linear-gradient(150deg,color-mix(in srgb,var(--gr) 9%,var(--bge)),var(--bge) 62%);border-color:color-mix(in srgb,var(--gr) 26%,var(--bo));box-shadow:0 6px 20px color-mix(in srgb,var(--gr) 10%,transparent)}
.pcard.yellow{background:linear-gradient(150deg,color-mix(in srgb,var(--ye) 13%,var(--bge)),var(--bge) 62%);border-color:color-mix(in srgb,var(--ye) 36%,var(--bo));box-shadow:0 6px 22px color-mix(in srgb,var(--ye) 16%,transparent)}
.pcard.red{background:linear-gradient(150deg,color-mix(in srgb,var(--re) 15%,var(--bge)),var(--bge) 62%);border-color:color-mix(in srgb,var(--re) 42%,var(--bo));animation:cardIn .4s cubic-bezier(.4,0,.2,1) both,redGlow 2.6s ease-in-out .4s infinite}
@keyframes redGlow{0%,100%{box-shadow:0 6px 22px color-mix(in srgb,var(--re) 18%,transparent)}50%{box-shadow:0 10px 34px color-mix(in srgb,var(--re) 34%,transparent)}}
.pcard.unknown{background:var(--bge);border-color:var(--bo)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.32)}
.pcard.green:hover{background:linear-gradient(150deg,color-mix(in srgb,var(--gr) 18%,var(--bge)),var(--bge) 70%);border-color:color-mix(in srgb,var(--gr) 55%,var(--bo));box-shadow:0 14px 34px color-mix(in srgb,var(--gr) 22%,transparent)}
.pcard.yellow:hover{background:linear-gradient(150deg,color-mix(in srgb,var(--ye) 24%,var(--bge)),var(--bge) 70%);border-color:color-mix(in srgb,var(--ye) 62%,var(--bo));box-shadow:0 14px 34px color-mix(in srgb,var(--ye) 26%,transparent)}
.pcard.red:hover{background:linear-gradient(150deg,color-mix(in srgb,var(--re) 26%,var(--bge)),var(--bge) 70%);border-color:color-mix(in srgb,var(--re) 68%,var(--bo));box-shadow:0 14px 36px color-mix(in srgb,var(--re) 32%,transparent)}
.pcard:active{transform:translateY(-1px) scale(.995)}
/* ── Muted state ── */
.pcard.muted{opacity:.68;filter:saturate(.35);background:var(--bge)!important;border-style:dashed!important;border-color:color-mix(in srgb,var(--txm) 30%,transparent)!important;box-shadow:none!important}
.pcard.muted:hover{opacity:.82;transform:translateY(-2px)}
.pcard.muted .bars-wrap{opacity:.4}
.pcard-state.mute-state{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txm);padding:4px 8px;border-radius:6px 6px 0 0;margin:-12px -12px 4px;padding:5px 10px;background:color-mix(in srgb,var(--txm) 8%,transparent);border-bottom:1px dashed color-mix(in srgb,var(--txm) 20%,transparent)}
.pcard.muted .pcard-up{text-decoration:line-through;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}

/* ── Downtime / shutdown state ── */
.pcard.dt{opacity:.72;filter:saturate(.2) brightness(.92);background:var(--bge)!important;border-color:color-mix(in srgb,var(--re) 20%,var(--bo))!important;box-shadow:none!important}
.pcard.dt:hover{opacity:.85;transform:translateY(-2px)}
.pcard.dt .bars-wrap{opacity:.3}
.pcard-state.dt-state{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--re);padding:5px 10px;border-radius:6px 6px 0 0;margin:-12px -12px 4px;background:color-mix(in srgb,var(--re) 10%,transparent);border-bottom:1px solid color-mix(in srgb,var(--re) 25%,transparent)}
.pcard.dt .pcard-up{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--re) 50%,transparent)}

/* ── List row muted/downtime ── */
.lrow.muted{opacity:.6;filter:saturate(.3)}
.lrow.muted .lrow-name{text-decoration:line-through;text-decoration-color:color-mix(in srgb,currentColor 30%,transparent)}
.lrow.dt{opacity:.65;filter:saturate(.2)}
.lrow.dt .lrow-name{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--re) 40%,transparent)}
.lrow-state{display:inline-flex;align-items:center;gap:3px;font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:middle}
.lrow-state.mute-tag{color:var(--txm);background:color-mix(in srgb,var(--txm) 12%,transparent)}
.lrow-state.dt-tag{color:var(--re);background:color-mix(in srgb,var(--re) 12%,transparent)}
.pcard-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.pcard-id{display:flex;flex-direction:column;min-width:0;flex:1}
.pcard-name{font-size:13px;font-weight:700;color:var(--tx);line-height:1.2;overflow-wrap:anywhere}
.pcard-env{font-size:9.5px;color:var(--txm);font-family:'DM Mono',monospace;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.pcard-mid{display:flex;align-items:baseline;gap:9px}
.pcard-up{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1}
.pcard-reason{font-size:10.5px;color:var(--tx2);line-height:1.35;flex:1}
.group-pill{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;line-height:1.35;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border:1px solid color-mix(in srgb,var(--ac) 38%,transparent);background:color-mix(in srgb,var(--ac) 12%,transparent);color:var(--ac)}

/* ── Light mode card overrides ── */
body.light .pcard.green{background:linear-gradient(150deg,color-mix(in srgb,var(--gr) 12%,#fff),#fff 68%)}
body.light .pcard.yellow{background:linear-gradient(150deg,color-mix(in srgb,var(--ye) 16%,#fff),#fff 68%)}
body.light .pcard.red{background:linear-gradient(150deg,color-mix(in srgb,var(--re) 14%,#fff),#fff 68%)}
body.light .pcard.green:hover{background:linear-gradient(150deg,color-mix(in srgb,var(--gr) 22%,#fff),#fff 74%);border-color:color-mix(in srgb,var(--gr) 60%,transparent);box-shadow:0 12px 30px color-mix(in srgb,var(--gr) 30%,transparent)}
body.light .pcard.yellow:hover{background:linear-gradient(150deg,color-mix(in srgb,var(--ye) 28%,#fff),#fff 74%);border-color:color-mix(in srgb,var(--ye) 65%,transparent);box-shadow:0 12px 30px color-mix(in srgb,var(--ye) 34%,transparent)}
body.light .pcard.red:hover{background:linear-gradient(150deg,color-mix(in srgb,var(--re) 26%,#fff),#fff 74%);border-color:color-mix(in srgb,var(--re) 62%,transparent);box-shadow:0 12px 30px color-mix(in srgb,var(--re) 32%,transparent)}

/* ── List/rows view ── */
@keyframes rowIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.lrow{display:grid;grid-template-columns:minmax(0,1.5fr) 70px 108px 70px 74px minmax(140px,1.6fr);gap:10px;align-items:center;padding:6px 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--tx2);font-size:11.5px;cursor:pointer;text-align:left;animation:rowIn .3s cubic-bezier(.4,0,.2,1) both;transition:all .18s ease}
.lrow:hover:not(.hd){background:var(--bge);border-color:color-mix(in srgb,var(--ac) 25%,transparent);transform:translateX(2px)}
.lrow.hd{position:sticky;top:0;z-index:1;background:color-mix(in srgb,var(--bgc) 95%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--bo);border-radius:0;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--txm);cursor:default;animation:none}
.lrow-name{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .bar{height:13px}
.empty{padding:30px;text-align:center;color:var(--txm);font-size:12px;font-style:italic;grid-column:1/-1}

/* ── Uptime bars ── */
@keyframes barIn{from{opacity:0;transform:scaleY(.2)}to{opacity:.9;transform:none}}
.bars-wrap{position:relative}
.bars-wrap.compact .bar{height:12px}
.bars{display:grid;grid-template-columns:repeat(24,1fr);gap:2px}
.bar{height:22px;border-radius:3px;background:var(--unk);opacity:.92;animation:barIn .45s cubic-bezier(.4,0,.2,1) both;transition:transform .16s cubic-bezier(.34,1.4,.64,1),filter .16s ease,box-shadow .16s ease}
.bar.hot{transform:scaleY(1.25);filter:brightness(1.3);opacity:1}
.bar.green{background:var(--gr)}.bar.green.hot{box-shadow:0 0 10px color-mix(in srgb,var(--gr) 70%,transparent)}
.bar.yellow{background:var(--ye)}.bar.yellow.hot{box-shadow:0 0 10px color-mix(in srgb,var(--ye) 75%,transparent)}
.bar.red{background:var(--re)}.bar.red.hot{box-shadow:0 0 12px color-mix(in srgb,var(--re) 80%,transparent)}
.bar.unknown{background:var(--unk);opacity:.4}
.bars-lbl{display:flex;justify-content:space-between;font-size:9px;color:var(--txm);margin-top:4px;font-family:'DM Mono',monospace}
.live-now{display:inline-flex;align-items:center;gap:4px}
.live-now i{width:5px;height:5px;border-radius:50%;background:var(--gr);animation:ping 1.8s ease-out infinite}
.live-now.yellow i{background:var(--ye);animation:pingY 1.8s ease-out infinite}
.live-now.red i{background:var(--re);animation:pingR 1.4s ease-out infinite}
.live-now.unknown i{background:var(--unk);animation:none}
@keyframes pingY{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ye) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes pingR{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--re) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ── Bar tooltip (portal) ── */
.bar-tip{position:fixed;transform:translate(-50%,-100%);z-index:400;min-width:190px;max-width:250px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--bgc) 96%,transparent);backdrop-filter:blur(10px);border:1px solid var(--bo);box-shadow:0 14px 34px rgba(0,0,0,.42);pointer-events:none;animation:tipIn .16s cubic-bezier(.34,1.4,.64,1)}
@keyframes tipIn{from{opacity:0}to{opacity:1}}
.bar-tip.below{transform:translate(-50%,0)}
.bar-tip.yellow{border-color:color-mix(in srgb,var(--ye) 45%,var(--bo))}
.bar-tip.red{border-color:color-mix(in srgb,var(--re) 50%,var(--bo))}
.bar-tip-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px}
.bar-tip-date{font-size:10.5px;color:var(--tx2);margin-top:1px}
.bar-tip-date b{color:var(--tx);font-weight:600}
.bar-tip-up{font-size:11px;color:var(--tx);margin-top:5px}
.bar-tip-note{font-size:10.5px;color:var(--tx2);margin-top:3px;line-height:1.4}
body.light .bar-tip{background:color-mix(in srgb,#fff 96%,transparent)}

/* ── Side panel ── */
.side{background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative}
.side-tabs{display:flex;gap:0;padding:8px 0 0;border-bottom:1px solid var(--bo);flex-shrink:0}
.side-tabs button{position:relative;flex:1;padding:10px 4px;border:none;background:transparent;color:var(--txm);font-size:10px;font-weight:700;letter-spacing:.08em;cursor:pointer;border-radius:0;transition:all .2s ease;text-align:center;display:flex;align-items:center;justify-content:center}
.side-tabs button:hover{color:var(--tx);background:var(--bge)}
.side-tabs button.on{color:var(--tx)}
.side-tabs button.on::after{content:'';position:absolute;left:20%;right:20%;bottom:-1px;height:2px;border-radius:2px;background:var(--ac);animation:tabIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes tabIn{from{transform:scaleX(.3);opacity:0}to{transform:scaleX(1);opacity:1}}
.side-tabs .side-close{display:none}
.side-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 14px;overflow:hidden}
.inc,.topo-pane{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px}
.panel-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}
.inc-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px}
.side-scrim{display:none}

/* ── Widget cards ── */
.wcard{border:1px solid var(--bo);border-radius:11px;background:var(--bge);padding:13px 14px;display:flex;flex-direction:column;gap:10px;animation:rowIn .32s cubic-bezier(.4,0,.2,1) both;transition:all .2s ease;position:relative;overflow:hidden;text-align:center}
.wcard::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac);opacity:.8}
.wcard.green::after,.wcard.ye::after{background:var(--gr)}.wcard.yellow::after,.wcard.ye::after{background:var(--ye)}.wcard.red::after{background:var(--re)}
.wcard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ac) 30%,var(--bo));box-shadow:0 8px 22px rgba(0,0,0,.24)}
.wcard-hd{display:flex;align-items:center;justify-content:center;position:relative}
.wcard-title{font-size:13px;font-weight:700;text-align:center;flex:1}
.wcard-x{position:absolute;right:0;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--txm);cursor:pointer;padding:2px;border-radius:6px}
.wcard-x:hover{color:var(--re)}
.wcard-foot{display:flex;align-items:center;justify-content:center;gap:14px;font-size:10px}
.wlink{border:none;background:transparent;color:var(--ac);font-size:10px;font-weight:700;cursor:pointer;padding:0}
.wlink:hover{text-decoration:underline}
.wgauge{display:flex;align-items:center;justify-content:center;gap:10px}
.wgauge svg{width:82px;height:46px}
.wgauge-arc{transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
.wgauge b{font-size:17px}
.wkpi{display:flex;align-items:baseline;justify-content:center;gap:8px}
.wkpi b{font-size:22px;font-weight:700;letter-spacing:-.02em}
.wkpi .dim{font-size:10px}

/* ── Topology ── */
.topo-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.topo-who b{font-size:12.5px;font-weight:700;color:var(--tx)}
.topo-who .dim{font-size:9.5px}
.topo-envs{display:flex;gap:4px;flex-wrap:wrap}
.topo-env{padding:4px 11px;border-radius:7px;border:1px solid var(--bo);background:transparent;color:var(--tx2);font-size:10.5px;font-weight:700;cursor:pointer;transition:all .18s ease}
.topo-env:hover{border-color:var(--ac);color:var(--ac)}
.topo-env.on{background:var(--ac);border-color:var(--ac);color:#fff}
.topo{position:relative;flex:1;min-height:0;border:1px solid var(--bo);border-radius:12px;background:var(--bge);overflow:hidden}
.topo-svg{position:absolute;inset:0;width:100%;height:100%}
.topo-edge{stroke:color-mix(in srgb,var(--ac) 78%,transparent);stroke-width:.62;stroke-dasharray:2 2;animation:dash 22s linear infinite,edgeIn .5s ease both;vector-effect:non-scaling-stroke}
.topo-edge.green{stroke:color-mix(in srgb,var(--gr) 85%,transparent)}
.topo-edge.yellow{stroke:color-mix(in srgb,var(--ye) 92%,transparent)}
.topo-edge.red{stroke:var(--re)}
.topo-edge.hot{stroke-width:2.1;opacity:1;stroke-dasharray:none;filter:drop-shadow(0 0 3px currentColor);animation:breathe 1.5s ease-in-out infinite}
@keyframes dash{to{stroke-dashoffset:-60}}
@keyframes edgeIn{from{opacity:0}to{opacity:1}}
@keyframes breathe{0%,100%{opacity:.55;stroke-width:1.5}50%{opacity:1;stroke-width:2.6}}
.topo-node{position:absolute;transform:translate(-50%,-50%);display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px;border-radius:12px;border:1px solid var(--bo);background:var(--bgc);color:var(--tx2);font-size:10.5px;font-weight:600;cursor:pointer;white-space:nowrap;min-width:62px;animation:nodeIn .4s cubic-bezier(.34,1.4,.64,1) both;transition:all .2s ease;z-index:2}
@keyframes nodeIn{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.topo-node:hover{border-color:var(--ac);color:var(--tx);transform:translate(-50%,-50%) scale(1.06)}
.topo-node.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,var(--bgc));color:var(--tx)}
.topo-node.green{box-shadow:0 0 16px color-mix(in srgb,var(--gr) 22%,transparent)}
.topo-node.yellow{box-shadow:0 0 16px color-mix(in srgb,var(--ye) 26%,transparent)}
.topo-node.red{box-shadow:0 0 18px color-mix(in srgb,var(--re) 32%,transparent)}
.topo-ic{width:30px;height:30px;display:grid;place-items:center;color:var(--gr)}
.topo-ic svg{width:100%;height:100%}
.topo-node.yellow .topo-ic{color:var(--ye)}
.topo-node.red .topo-ic{color:var(--re)}
.topo-node.unknown .topo-ic{color:var(--unk)}
.topo-lbl{font-size:9.5px;font-weight:700;letter-spacing:.02em;color:var(--tx2)}
.topo-tiers{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:space-around;padding:0;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txm);opacity:.6;pointer-events:none}
.topo-detail{position:absolute;left:8px;right:8px;bottom:8px;padding:9px 11px;border-radius:10px;background:color-mix(in srgb,var(--bgc) 94%,transparent);backdrop-filter:blur(8px);border:1px solid var(--bo);animation:pop .22s cubic-bezier(.34,1.4,.64,1);z-index:3}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.topo-detail-hd{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700}
.topo-detail-hd button{border:none;background:transparent;color:var(--txm);cursor:pointer;padding:2px}
.topo-detail-hd button:hover{color:var(--re)}
.topo-detail-body{display:flex;flex-direction:column;gap:2px;margin-top:3px;font-size:10.5px;color:var(--tx2)}
.topo-wave{stroke:#fff;stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:.22 .78;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--ac) 75%,transparent));animation:topoWave 2.6s ease-in-out infinite both}
@keyframes topoWave{0%{stroke-dashoffset:.22;opacity:0}18%{opacity:.9}72%{opacity:.55}100%{stroke-dashoffset:-.78;opacity:0}}

/* ── Detail overlay ── */
.hd-back{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:22px;overflow-y:auto;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hd-card{position:relative;width:min(920px,100%);max-height:min(82vh,760px);overflow-y:auto;overflow-x:hidden;padding:22px 24px;border-radius:18px;background:var(--bgc);border:1px solid var(--bo);border-top:3px solid var(--unk);box-shadow:0 28px 70px rgba(0,0,0,.5);margin:auto;flex-shrink:0;animation:hdIn .44s cubic-bezier(.22,1.15,.36,1)}
@keyframes hdIn{from{opacity:0;transform:translateY(26px) scale(.93)}60%{opacity:1}to{opacity:1;transform:none}}
.hd-card.st-green{border-top-color:var(--gr);box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 60px color-mix(in srgb,var(--gr) 16%,transparent)}
.hd-card.st-yellow{border-top-color:var(--ye);box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 60px color-mix(in srgb,var(--ye) 18%,transparent)}
.hd-card.st-red{border-top-color:var(--re);box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 60px color-mix(in srgb,var(--re) 20%,transparent)}
.hd-close{position:absolute;top:14px;right:14px;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--bo);background:var(--bge);color:var(--tx2);cursor:pointer;transition:all .18s ease;z-index:2}
.hd-close:hover{color:var(--re);border-color:var(--re);transform:rotate(90deg)}
.hd-close.static{position:static;flex:0 0 28px}
.hd-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--bo)}
.hd-headline b{display:block;font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:3px;animation:hdNum .45s cubic-bezier(.22,1.1,.36,1)}
@keyframes hdNum{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hd-badges{display:flex;gap:6px;margin-top:8px}
.hd-headline em{font-style:normal;display:block;font-size:11.5px;color:var(--txm);margin-top:8px}
.hd-sub-comp{font-size:.55em;color:var(--txm);font-weight:500}
.hd-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hd-metric{padding:9px 11px;border-radius:10px;background:var(--bge);border:1px solid var(--bo);display:flex;flex-direction:column;gap:2px;animation:rowIn .35s cubic-bezier(.4,0,.2,1) both}
.hd-metric b{font-size:17px;font-weight:700;letter-spacing:-.02em}
.hd-overall{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.hd-sect{display:block;margin-top:16px}
.hd-comps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.hd-comp{padding:10px 12px;border-radius:11px;background:var(--bge);border:1px solid var(--bo);display:flex;flex-direction:column;gap:7px;animation:rowIn .35s cubic-bezier(.4,0,.2,1) both;transition:all .2s ease}
.hd-comp:hover{border-color:color-mix(in srgb,var(--ac) 28%,var(--bo));transform:translateY(-2px)}
.hd-comp-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hd-comp-name{font-size:12px;font-weight:700;font-family:'DM Mono',monospace}
.hd-comp-reason{font-size:10px;color:var(--txm);margin-top:2px}
.hd-comp-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.hd-comp-right b{font-size:12px}

/* ── Picker overlay ── */
.pick-card{position:relative;width:min(420px,100%);max-height:84vh;overflow-y:auto;overflow-x:hidden;padding:20px 22px 22px;border-radius:18px;background:var(--bgc);border:1px solid var(--bo);box-shadow:0 30px 70px rgba(0,0,0,.5);animation:pickIn .42s cubic-bezier(.22,1.15,.36,1)}
@keyframes pickIn{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}}
.pick-card.st-green{border-top:3px solid var(--gr)}.pick-card.st-yellow{border-top:3px solid var(--ye)}.pick-card.st-red{border-top:3px solid var(--re)}
.pick-hd{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
.pick-hd b{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--tx)}
.pick-hd span{font-size:11.5px;color:var(--txm)}
.pick-list{display:flex;flex-direction:column;gap:8px}
.pick-opt{display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:11px 13px;border-radius:11px;border:1px solid var(--bo);background:var(--bge);cursor:pointer;text-align:left;animation:rowIn .32s cubic-bezier(.4,0,.2,1) both;transition:all .2s cubic-bezier(.4,0,.2,1)}
.pick-opt:hover{transform:translateY(-2px);border-color:var(--ac);box-shadow:0 10px 24px color-mix(in srgb,var(--ac) 18%,transparent)}
.pick-opt.all{border-color:color-mix(in srgb,var(--ac) 45%,transparent);background:color-mix(in srgb,var(--ac) 10%,var(--bge))}
.pick-opt-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--tx)}
.pick-opt-sub{font-size:10.5px;color:var(--txm)}

/* ── Gallery overlay ── */
.gal{position:relative;width:min(700px,100%);max-height:86vh;overflow-y:auto;overflow-x:hidden;padding:20px 22px 22px;border-radius:18px;background:var(--bgc);border:1px solid var(--bo);box-shadow:0 28px 70px rgba(0,0,0,.5);animation:hdIn .34s cubic-bezier(.22,1.1,.36,1)}
.gal-hd{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.gal-back{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 11px;border-radius:8px;border:1px solid var(--bo);background:var(--bge);color:var(--tx2);font-size:11px;font-weight:600;cursor:pointer;transition:all .18s ease;flex:0 0 auto;min-width:104px}
.gal-back.ghost{visibility:hidden}
.gal-back:hover{border-color:var(--ac);color:var(--ac)}
.gal-title{flex:1;text-align:center;display:flex;flex-direction:column;gap:2px}
.gal-title b{font-size:16px;font-weight:700}
.gal-title span{font-size:11.5px;color:var(--txm)}
.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gal-item{display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:13px 14px;border-radius:12px;border:1px solid var(--bo);background:var(--bge);color:var(--tx);cursor:pointer;text-align:left;animation:rowIn .3s cubic-bezier(.4,0,.2,1) both;transition:all .2s cubic-bezier(.4,0,.2,1)}
.gal-item:hover{transform:translateY(-3px);border-color:var(--ac);box-shadow:0 12px 28px color-mix(in srgb,var(--ac) 18%,transparent)}
.gal-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac);font-size:11px;font-weight:800;margin-bottom:5px}
.gal-name{font-size:12.5px;font-weight:700}
.gal-desc{font-size:10.5px;color:var(--txm)}
.gal-card{width:min(520px,92vw);max-height:min(72vh,620px)}
.gal-card .gal-hd{flex-direction:column;align-items:flex-start;gap:2px}
.gal-card .gal-hd b{font-size:16px;font-weight:700}
.gal-card .gal-body{display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow-y:auto}

/* ── Reporting ── */
.rep{display:flex;flex-direction:column;gap:14px}
.rep-bar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;row-gap:12px;padding:13px 15px;border-radius:14px;background:var(--bgc);border:1px solid var(--bo)}
.rep-fields{display:flex;align-items:flex-end;gap:10px;flex:1 1 auto;min-width:0;flex-wrap:nowrap}
.rep-fields>.rpick{flex:1 1 96px;min-width:0}
.rep-fields .npick-btn{width:100%}
.rep-actions{display:flex;align-items:flex-end;gap:8px;flex:0 0 auto}
.rep-modes{align-self:center;margin-right:4px}
.rpick{display:flex;flex-direction:column;gap:5px;min-width:0}
.rpick .npick{width:100%}
.rcount{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:color-mix(in srgb,var(--ac) 20%,transparent);color:var(--ac);font-size:10px;font-weight:700}
.rpop{min-width:210px;max-height:280px;overflow-y:auto;padding:6px}
.rpop.narrow{min-width:150px}
.rpop-hd{display:flex;gap:6px;padding:2px 4px 6px;border-bottom:1px solid var(--bos);margin-bottom:4px}
.rpop-hd button{flex:1;padding:4px 6px;border-radius:7px;border:1px solid var(--bo);background:var(--bge);color:var(--tx2);font:inherit;font-size:10.5px;font-weight:700;cursor:pointer;transition:all .18s ease}
.rpop-hd button:hover{color:var(--ac);border-color:var(--ac)}
.rpop-list{display:flex;flex-direction:column;gap:1px}
.rbox{display:grid;place-items:center;width:14px;height:14px;border-radius:4px;border:1px solid var(--bo);background:var(--bg);font-size:9px;font-style:normal;color:var(--ac);flex-shrink:0;transition:all .18s ease}
.rbox.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 16%,transparent)}
.rmenu{position:relative;display:flex;align-items:center}
.rbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;border:1px solid var(--bo);background:var(--bge);color:var(--tx);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .18s ease}
.rbtn:hover{border-color:var(--ac);color:var(--ac);transform:translateY(-1px)}
.rbtn.on{border-color:var(--ac);color:var(--ac)}
.rep-bar .go{padding:8px 14px;border-radius:9px;border:1px solid transparent;background:var(--ac);color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .18s ease;box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 26%,transparent)}
.rep-bar .go:hover{transform:translateY(-1px);filter:brightness(1.06)}
.rep-bar .go:active{transform:scale(.97)}
.rep-bar .go.dirty{animation:goPulse 1.8s ease-in-out infinite}
@keyframes goPulse{0%,100%{box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 26%,transparent)}50%{box-shadow:0 6px 22px color-mix(in srgb,var(--ac) 52%,transparent)}}
.rtable{display:flex;flex-direction:column;gap:3px}
.rrow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.7fr) minmax(120px,1.4fr);gap:12px;align-items:center;padding:9px 13px;border-radius:11px;background:var(--bgc);border:1px solid var(--bo);font-size:12.5px;cursor:pointer;transition:all .18s cubic-bezier(.2,1,.3,1);animation:rowIn .38s cubic-bezier(.2,1,.3,1) both}
.rrow:hover{transform:translateX(2px);border-color:color-mix(in srgb,var(--ac) 42%,var(--bo));background:var(--bge)}
.rrow.hd{background:transparent;border-color:transparent;cursor:default;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--txm);padding-bottom:2px;animation:none}
.rrow.hd:hover{transform:none;background:transparent;border-color:transparent}
.rrow-name{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsec-hd{font-size:14px;font-weight:700;letter-spacing:-.01em;margin-top:4px}
.rkpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.rkpi{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border-radius:13px;background:var(--bgc);border:1px solid var(--bo);animation:rowIn .4s cubic-bezier(.2,1,.3,1) both;transition:transform .2s ease,border-color .2s ease}
.rkpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ac) 35%,var(--bo))}
.rkpi b{font-size:26px;font-weight:700;letter-spacing:-.03em;overflow-wrap:anywhere}
.rkpi em{font-style:normal;font-size:10.5px;color:var(--txm)}

/* ── Compare ── */
.cmp{display:flex;flex-direction:column;gap:14px}
.cmp-bar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:13px 15px;border-radius:14px;background:var(--bgc);border:1px solid var(--bo)}
.cmp-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;flex:1;min-width:260px}
.cmp-pick .sec-lbl{grid-column:1/-1}
.cmp-vs{font-size:11px;font-weight:700;color:var(--txm);padding-bottom:9px}
.cmp-bar .go{padding:9px 20px;border-radius:10px;border:0;background:var(--ac);color:#fff;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .18s ease}
.cmp-bar .go:hover{transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in srgb,var(--ac) 34%,transparent)}
.cmp-bar .go:active{transform:scale(.97)}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmp-col{display:flex;flex-direction:column;gap:9px;padding:15px 16px;border-radius:14px;background:var(--bgc);border:1px solid var(--bo);border-top:3px solid var(--gr);animation:rowIn .45s cubic-bezier(.2,1,.3,1) both;cursor:pointer;transition:transform .2s cubic-bezier(.2,1,.3,1),border-color .2s ease,box-shadow .2s ease}
.cmp-col.yellow{border-top-color:var(--ye)}.cmp-col.red{border-top-color:var(--re)}.cmp-col.unknown{border-top-color:var(--unk)}
.cmp-col:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.22)}
.cmp-col.active{border-color:var(--ac);box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 22%,transparent)}
.cmp-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cmp-hd b{font-size:15px;display:block}
.cmp-hd .dim{font-size:11px}
.cmp-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmp-metric{padding:8px 11px;border-radius:10px;background:var(--bge);display:flex;flex-direction:column;gap:2px}
.cmp-metric b{font-size:15px}
.cmp-comps{display:flex;flex-direction:column;gap:4px}
.cmp-comp{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 9px;border-radius:8px;background:var(--bge)}
.cmp-comp b{margin-left:auto;font-size:11px}
.cmp-reason{font-size:11.5px;color:var(--txm)}
.cmp-cta{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--txm);opacity:0;transition:opacity .2s ease}
.cmp-col:hover .cmp-cta{opacity:1}
.empty-col{display:grid;place-items:center;min-height:220px;color:var(--txm);border:1px dashed var(--bo);border-radius:14px}

/* ── Node breakdown ── */
.nbd{margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--bgc);border:1px solid var(--bo);display:flex;flex-direction:column;gap:7px;animation:nbdIn .34s cubic-bezier(.2,1,.3,1) both}
@keyframes nbdIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.nbd-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.nbd-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.nbd-id b{font-size:15px;letter-spacing:-.01em;overflow-wrap:anywhere}
.nbd-id span{font-size:11px;overflow-wrap:anywhere;line-height:1.35}
.nbd-hd-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nbd-x{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;border:1px solid var(--bo);background:var(--bge);color:var(--tx2);cursor:pointer;transition:all .18s ease}
.nbd-x:hover{color:var(--re);border-color:var(--re);transform:rotate(90deg)}
.nbd-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.nbd-metric{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:10px;background:var(--bge);border:1px solid var(--bos);animation:rowIn .34s cubic-bezier(.2,1,.3,1) both}
.nbd-metric b{font-size:14px;overflow-wrap:anywhere;line-height:1.25}
.nbd-lbl{margin-top:3px}
.nbd-comps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:5px}
.nbd-comp{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:9px;background:var(--bge);border:1px solid var(--bos);font-size:11.5px;animation:rowIn .34s cubic-bezier(.2,1,.3,1) both}
.nbd-comp-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nbd-conns{display:flex;flex-wrap:wrap;gap:5px}
.nbd-conn{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:600;background:var(--bge);border:1px solid var(--bo);color:var(--tx2);transition:all .18s ease}
.nbd-conn:hover{border-color:var(--ac);color:var(--tx)}
.nbd-conn i{width:5px;height:5px;border-radius:50%;background:var(--gr)}
.nbd-conn.yellow i{background:var(--ye)}.nbd-conn.red i{background:var(--re)}.nbd-conn.unknown i{background:var(--unk)}
.nbd-reason{font-size:11.5px;color:var(--txm);line-height:1.5}
.nbd-open{align-self:flex-start;margin-top:2px}

/* ── Architecture ── */
.arch{display:flex;flex-direction:column;gap:9px;flex:0 0 auto;container:arch-wrap / inline-size}
.arch-hd{display:flex;align-items:center;justify-content:center;gap:18px;font-size:13px;padding-top:2px;flex-wrap:wrap}
.arch-hd>span:first-child{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.arch-modes{display:flex;align-items:center;gap:10px}
.arch-split{display:flex;gap:12px;align-items:stretch}
.arch-split .arch-map{flex:1;min-width:0}
.arch-detail.wide{position:static;inset:auto;width:clamp(238px,26%,300px);flex-shrink:0;max-height:none;overflow:visible;align-self:flex-start;padding:0;background:transparent;border:none;box-shadow:none;scrollbar-width:thin;animation:none}
.arch-detail.wide .nbd{margin:0;box-shadow:0 18px 44px rgba(0,0,0,.34)}
.arch-map{position:relative;border-radius:16px;background:var(--bgc);border:1px solid var(--bo);overflow:visible;padding:4px;container:arch-map / inline-size;flex:1 1 auto;min-width:0;min-height:min-content}
.arch-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.arch-edge{fill:none;stroke-width:1.2;opacity:.32;stroke-dasharray:5 4;animation:dash 26s linear infinite,edgeIn .5s ease both}
.arch-edge.green{stroke:var(--gr)}.arch-edge.yellow{stroke:var(--ye);opacity:.6}.arch-edge.red{stroke:var(--re);opacity:.75}
.arch-edge.hot{opacity:1;stroke-width:2;stroke-dasharray:none;animation:breathe3 1.6s ease-in-out infinite}
@keyframes breathe3{0%,100%{opacity:.5;stroke-width:1.5}50%{opacity:1;stroke-width:2.8}}
.arch-flow{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;padding:14px 16px}
.arch-tier{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 5%,transparent),transparent 70%);border:1px solid var(--bos)}
.arch-tier-lbl{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--txm)}
.arch-tier-n{display:grid;place-items:center;width:16px;height:16px;border-radius:5px;background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ac);font-size:9px;font-style:normal;font-weight:800}
.arch-tier-lbl em{margin-left:auto;font-style:normal;font-size:9.5px;color:var(--txm);opacity:.8}
.arch-nodes{display:flex;flex-direction:column;gap:7px;justify-content:center;flex:1;min-width:0}
.arch-tier.wide .arch-nodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:7px;align-content:center}
@container arch-map (max-width:420px){.arch-nodes,.arch-tier.wide .arch-nodes{grid-template-columns:minmax(0,1fr)}}
.anode{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border-radius:11px;border:1px solid var(--bo);background:var(--bge);color:var(--tx);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;text-align:left;transition:all .2s cubic-bezier(.2,1,.3,1);animation:rowIn .4s cubic-bezier(.2,1,.3,1) both}
.anode:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ac) 40%,var(--bo));box-shadow:0 10px 22px rgba(0,0,0,.2)}
.anode.on{border-color:var(--ac);box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 22%,transparent)}
.anode.yellow{border-color:color-mix(in srgb,var(--ye) 40%,var(--bo))}
.anode.red{border-color:color-mix(in srgb,var(--re) 45%,var(--bo))}
.anode-ic{width:20px;height:20px;flex-shrink:0;color:var(--tx2)}
.anode-ic svg{width:100%;height:100%}
.anode.green .anode-ic{color:var(--gr)}.anode.yellow .anode-ic{color:var(--ye)}.anode.red .anode-ic{color:var(--re)}
.anode-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anode-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--gr)}
.anode-dot.yellow{background:var(--ye)}.anode-dot.red{background:var(--re);animation:pulseDot 1.6s ease-in-out infinite}
.anode-dot.unknown{background:var(--unk)}
@keyframes pulseDot{50%{opacity:.35}}
@container arch-wrap (max-width:560px){.arch-split{flex-direction:column}.arch-split .arch-detail.wide{width:auto;max-height:none}}

/* ── Toast ── */
.toast-wrap{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:950}
.toast{display:flex;gap:10px;align-items:flex-start;min-width:240px;max-width:320px;padding:10px 13px;border-radius:12px;background:var(--bgc);border:1px solid var(--bo);box-shadow:0 12px 32px rgba(0,0,0,.35);cursor:pointer;animation:toastIn .3s cubic-bezier(.34,1.4,.64,1)}
@keyframes toastIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.toast-bar{width:3px;align-self:stretch;border-radius:2px;background:var(--gr)}
.toast.warn .toast-bar{background:var(--ye)}.toast.err .toast-bar{background:var(--re)}
.toast-title{font-size:12px;font-weight:700}
.toast-body{font-size:10.5px;color:var(--txm);margin-top:2px}

/* ── Typewriter ── */
.typer{display:inline-flex;align-items:center}
.tcaret{display:none}

/* ── Arrival from history ── */
.pcard.arrived,.lrow.arrived{animation:arrive 2.4s cubic-bezier(.22,1,.36,1)}
@keyframes arrive{0%{transform:scale(1.03);box-shadow:0 0 0 0 color-mix(in srgb,var(--ac) 60%,transparent),0 20px 50px color-mix(in srgb,var(--ac) 40%,transparent)}45%{box-shadow:0 0 0 10px transparent,0 14px 34px color-mix(in srgb,var(--ac) 22%,transparent)}100%{transform:none;box-shadow:none}}
.arrival-banner{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:500;display:flex;align-items:center;gap:10px;padding:9px 10px 9px 14px;border-radius:999px;background:var(--bgc);border:1px solid color-mix(in srgb,var(--ac) 42%,var(--bo));box-shadow:0 18px 44px rgba(0,0,0,.4);font-size:12px;animation:bannerIn .5s cubic-bezier(.22,1.15,.36,1)}
@keyframes bannerIn{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translateX(-50%)}}
.arrival-banner button{padding:5px 12px;border-radius:999px;border:0;background:var(--ac);color:#fff;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .18s ease}
.arrival-banner button:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* ── Responsive: 1320px ── */
@media(max-width:1320px){
  .pagebar{grid-template-columns:232px minmax(0,1fr)}.pagebar .spacer{display:none}
  .dash{grid-template-columns:232px minmax(0,1fr)}
  .side{position:absolute;top:0;right:0;bottom:0;width:340px;z-index:60;box-shadow:0 18px 50px rgba(0,0,0,.4);transform:translateX(calc(100% + 24px));transition:transform .35s cubic-bezier(.4,0,.2,1)}
  .side-open .side{transform:none}
  .side-tabs .side-close{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;align-self:center;margin-bottom:6px;border-radius:7px;border:1px solid var(--bo);background:var(--bge);color:var(--tx2)}
  .side-tabs .side-close:hover{color:var(--re);border-color:var(--re)}
  .panel-btn{display:inline-flex}
  .side-open .side-scrim{display:block;position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:55;animation:fade .2s ease}
}

/* ── Responsive: 900px ── */
@media(max-width:900px){
  .pagebar{grid-template-columns:1fr}
  .dash{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .rail{flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
  .rail .card{min-width:242px;flex-shrink:0}
  .side{width:min(340px,93vw)}
  .hd-top,.hd-comps{grid-template-columns:1fr}
  .cmp-grid{grid-template-columns:1fr}
  .rrow{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.rrow.hd{display:none}
}
@media(max-width:860px){.board-hd.centered{justify-content:center}.board-lead,.board-hd.centered .board-tools{flex:1 1 100%;justify-content:center;flex-wrap:wrap}.arch-split{flex-direction:column}.arch-detail.wide{width:auto;max-height:46%}}

/* ── Responsive: 640px ── */
@media(max-width:640px){
  .stage{padding:8px 12px 12px}
  .board-scroll.grid{grid-template-columns:1fr}
  .lrow{grid-template-columns:minmax(0,1fr) 96px}
  .lrow>span:nth-child(n+4),.lrow .bars{display:none}
  .search input{width:90px}
}

/* ── Height breakpoints ── */
@media(max-height:900px){.rail{gap:8px}.card{padding:10px}.live-row{margin-bottom:-2px}.seg button{padding:5px 7px}.rchip{padding:5px 8px;font-size:10px}.attn-row{padding:5px 7px}.envbar{padding:5px 7px}.card.health .sec-lbl+.health-body{margin-top:-2px}.ring-wrap{width:74px;height:74px}.ring-mid b{font-size:18px}.pcard-reason{min-height:0}}
@media(max-height:760px){.rail .card.envcard{padding:8px 10px;gap:5px}.rail .card.envcard .envbar{padding:4px 7px}}
@media(max-height:640px){.rail .card.grow,.rail .card.envcard{display:none}.ring-wrap{width:62px;height:62px}.ring-mid b{font-size:16px}.hl{padding:3px 7px;font-size:10.5px}.rchip{padding:5px 7px}.mini{padding:6px 10px}.card{padding:9px;gap:7px}}

/* ── Reporting responsive ── */
@media(max-width:1500px){.rkpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.rep-fields{flex-wrap:wrap}.rep-fields>.rpick{flex:1 1 150px}}
@media(max-width:820px){.rkpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Reporting filter bar ── */
.rep-bar{display:flex;align-items:flex-end;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.rep-filters{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.rep-actions{display:flex;gap:6px;flex-shrink:0}
.rep-ms{position:relative}
.rep-ms-btn{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;border:1px solid var(--bo);background:var(--bge);color:var(--tx2);font-size:11.5px;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap}
.rep-ms-btn:hover{border-color:var(--ac);color:var(--ac)}
.rep-ms.open .rep-ms-btn{border-color:var(--ac);color:var(--ac)}
.rep-ms-lbl{max-width:140px;overflow:hidden;text-overflow:ellipsis}
.rep-ms-ct{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac);font-size:10px;font-weight:700}
.rep-ms-pop{display:none;position:absolute;top:100%;left:0;z-index:50;margin-top:4px;min-width:200px;max-height:280px;overflow-y:auto;padding:6px;border-radius:10px;border:1px solid var(--bo);background:var(--bgc);box-shadow:0 12px 36px rgba(0,0,0,.3);animation:pickIn .2s ease}
.rep-ms.open .rep-ms-pop{display:block}
.rep-ms-opt{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;font-size:11.5px;color:var(--tx2);cursor:pointer;transition:background .15s}
.rep-ms-opt:hover{background:var(--bge)}
.rep-ms-opt.dimmed{opacity:.35}
.rep-ms-opt input[type="checkbox"]{accent-color:var(--ac)}
.rep-ms-all{font-weight:700;border-bottom:1px solid var(--bo);padding-bottom:7px;margin-bottom:2px;border-radius:6px 6px 0 0}
.rep-dw{position:relative}
.rep-dw-btn{display:flex;align-items:center;gap:5px;padding:7px 12px;border-radius:9px;border:1px solid var(--bo);background:var(--bge);color:var(--tx2);font-size:11.5px;font-weight:600;cursor:pointer;transition:all .18s}
.rep-dw-btn:hover{border-color:var(--ac);color:var(--ac)}
.rep-dw-pop{display:none;position:absolute;top:100%;right:0;z-index:50;margin-top:4px;min-width:220px;padding:4px 0;border-radius:10px;border:1px solid var(--bo);background:var(--bgc);box-shadow:0 12px 36px rgba(0,0,0,.3);animation:pickIn .2s ease}
.rep-dw.open .rep-dw-pop{display:block}
.rep-dw-group{padding:4px 0}
.rep-dw-group+.rep-dw-group{border-top:1px solid var(--bo)}
.rep-dw-head{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txm);padding:4px 12px}
.rep-dw-item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 12px;border:none;background:transparent;color:var(--tx);font-size:12px;cursor:pointer;text-align:left;transition:background .15s}
.rep-dw-item:hover{background:var(--bge)}
.rep-dw-ico{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:24px;padding:0 5px;border-radius:6px;background:color-mix(in srgb,var(--ac) 12%,var(--bge));color:var(--ac);font-size:9.5px;font-weight:700;font-family:'DM Mono',monospace}
.rep-dw-item:hover .rep-dw-ico{background:color-mix(in srgb,var(--ac) 20%,var(--bge))}
.rep-dw-lbl{display:flex;flex-direction:column;line-height:1.3;font-weight:600}
.rep-dw-lbl em{font-style:normal;font-size:10px;font-weight:400;color:var(--txm)}

/* Report row expand */
.rrow.expandable{cursor:pointer}
.rrow.expandable:hover{background:var(--bge)}
.rrow-chev{display:inline-flex;width:12px;flex-shrink:0;transition:transform .2s ease;color:var(--txm)}
.rrow.rpt-expanded .rrow-chev{transform:rotate(180deg)}
.rrow.comp-row{background:color-mix(in srgb,var(--bge) 60%,var(--bgc))}
.comp-indent{padding-left:20px}
.rrow-reason{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Architecture canvas ── */
.arch-canvas-wrap{display:flex;flex-direction:column;width:100%;height:100%;min-height:360px;border-radius:13px;overflow:hidden;border:1px solid var(--bo);background:var(--bgc)}
.arch-top-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid var(--bo);background:var(--bge);flex-wrap:wrap;gap:6px;flex-shrink:0}
.arch-info{font-size:11px;color:var(--txm)}
.arch-info b{color:var(--tx)}
.arch-controls{display:flex;align-items:center;gap:10px}
.arch-view-pills{display:flex;border-radius:20px;border:1px solid var(--bo);background:var(--bgc);overflow:hidden}
.arch-vpill{padding:4px 14px;font-size:11px;font-weight:600;border:none;background:transparent;color:var(--tx2);cursor:pointer;transition:all .2s}
.arch-vpill.active{background:var(--ac);color:#fff}
.arch-vpill:hover:not(.active){background:var(--bge)}
.arch-zoom-btns{display:flex;gap:3px}
.arch-zbtn{width:28px;height:28px;border-radius:8px;border:1px solid var(--bo);background:var(--bgc);color:var(--tx);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.arch-zbtn:hover{background:var(--bge)}
.arch-canvas-container{flex:1;min-height:0;position:relative;overflow:hidden}
.arch-cv{display:block;cursor:grab;position:absolute;top:0;left:0;width:100%;height:100%;max-height:none}
.arch-cv.dragging{cursor:grabbing}
.arch-detail-panel{position:absolute;top:0;right:-360px;width:340px;height:100%;background:var(--bgc);border-left:1px solid var(--bo);box-shadow:-4px 0 20px rgba(0,0,0,.15);z-index:20;transition:right .35s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.arch-detail-panel.open{right:0}
.adp-hd{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--bo);position:sticky;top:0;background:var(--bgc);z-index:1}
.adp-hd b{font-size:14px;color:var(--tx)}
.adp-close{background:none;border:none;font-size:20px;color:var(--tx2);cursor:pointer;padding:4px 8px;border-radius:8px}
.adp-close:hover{color:var(--re);background:var(--bge)}
.adp-body{padding:14px 16px}
.adp-zone{display:inline-block;padding:3px 10px;border-radius:12px;font-size:10px;font-weight:600;margin-bottom:10px;background:color-mix(in srgb,var(--ac) 12%,var(--bge));color:var(--ac)}
.adp-body p{font-size:12px;line-height:1.7;color:var(--tx2);margin:0}

/* ── Widget integration info ── */
.wint{display:flex;align-items:center;gap:9px}
.wint-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.wint-desc{font-size:9.5px;color:var(--txm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wint-mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}

/* ── Font smoothing ── */
.pcard,.lrow,.attn-row,.envbar,.wcard,.hd-comp,.topo-node,.gal-item,.hl,.mini,.rchip,.seg button,.side-tabs button,.search input,.panel-btn,.rep-ms-btn,.rep-dw-btn,.arch-vpill,.arch-zbtn{-webkit-font-smoothing:antialiased}