/* Link is an account-owned device relationship, not a simulated network map. */
.cosmos-link { --nexus-cyan:var(--cosmos-signal); --nexus-green:var(--cosmos-positive); --connected-cyan:var(--cosmos-signal); --connected-danger:var(--cosmos-negative); --connected-muted:var(--cosmos-muted); }
.cosmos-link-view { max-width:1160px; margin:auto; color:var(--cosmos-paper); }
.cosmos-link-view button,.cosmos-link-view input,.cosmos-link-view a { font:inherit; }
.cosmos-link-view button { min-height:44px; cursor:pointer; color:var(--cosmos-paper); background:var(--cosmos-panel); border:1px solid var(--cosmos-line); border-radius:var(--cosmos-radius-control); padding:10px 15px; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:background var(--cosmos-instant),border-color var(--cosmos-instant); }
.cosmos-link-view button:hover { background:var(--cosmos-raised); border-color:var(--cosmos-line-strong); }
.cosmos-link-view :is(button,a,input):focus-visible { outline:2px solid var(--cosmos-signal); outline-offset:4px; }
.cosmos-link-view button:disabled { opacity:.55; cursor:wait; }
.cosmos-link-view a { color:var(--cosmos-sky); text-decoration:none; }
.cosmos-link-view a:hover { text-decoration:underline; }
.cosmos-link-view p { color:var(--cosmos-muted); line-height:1.65; }
.cosmos-link-view svg { flex-shrink:0; }
.cosmos-link-nav { display:flex; align-items:center; gap:26px; border-bottom:1px solid var(--cosmos-line); overflow:auto; scrollbar-width:thin; margin-bottom:42px; }
.cosmos-link-nav a { display:inline-flex; align-items:center; gap:7px; min-height:48px; white-space:nowrap; font-size:13px; color:var(--cosmos-muted); border-bottom:2px solid transparent; }
.cosmos-link-nav [aria-current] { color:var(--cosmos-paper); border-color:var(--cosmos-signal); }
.cosmos-link-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:36px; }
.cosmos-link-heading h2 { font-size:clamp(32px,4.2vw,56px); line-height:1.06; letter-spacing:-.05em; font-weight:530; margin:16px 0; }
.cosmos-link-heading>div>p:last-child { font-size:14px; margin:0; }
.cosmos-link-heading>button { flex-shrink:0; border-color:var(--cosmos-line-strong); }
.cosmos-link-toolbar { display:flex; align-items:center; gap:18px; min-height:56px; border-block:1px solid var(--cosmos-line); font-size:12px; color:var(--cosmos-muted); }
.cosmos-link-toolbar>button { margin-left:auto; border:0; background:none; }
.cosmos-link .connected-transport { display:inline-flex; gap:7px; white-space:nowrap; font-size:11px; }
.cosmos-link .connected-transport b { display:inline; }
.cosmos-link-topology { display:grid; grid-template-columns:minmax(220px,.85fr) minmax(0,1.5fr); gap:70px; padding:40px 0 48px; position:relative; }
.cosmos-link-topology>[data-link-own] { text-align:center; position:relative; min-width:0; padding:16px 0; }
.cosmos-link-topology>[data-link-own]::after { content:''; position:absolute; height:1px; background:linear-gradient(90deg,var(--cosmos-line-strong),var(--cosmos-signal),var(--cosmos-line)); width:54px; left:calc(100% + 8px); top:50%; }
.cosmos-link-silhouette { position:relative; margin:35px auto 28px; height:135px; display:grid; place-items:center; color:var(--cosmos-soft); }
.cosmos-link-silhouette::before { content:''; position:absolute; width:190px; height:130px; border:1px solid var(--cosmos-line); border-radius:50%; transform:rotate(-20deg); }
.cosmos-link-silhouette::after { content:''; position:absolute; width:5px; height:5px; background:var(--cosmos-faint); border-radius:50%; left:calc(50% + 83px); top:25px; }
.cosmos-link-silhouette[data-presence=online]::after { background:var(--cosmos-signal); box-shadow:0 0 15px #8ad7df55; }
.cosmos-link-silhouette svg { position:relative; background:var(--cosmos-void); z-index:1; padding:8px; }
.cosmos-link-topology h3 { font-size:21px; line-height:1.35; font-weight:550; margin:0 0 9px; overflow-wrap:anywhere; }
.cosmos-link-topology [data-link-own]>p:not(.cosmos-label) { font-size:13px; margin:0; text-transform:capitalize; }
.cosmos-link-topology [data-link-own]>small { color:var(--cosmos-muted); display:block; margin-top:7px; font-size:12px; }
.cosmos-link-topology [data-connected-rename-self] { margin-top:24px; background:none; }
.cosmos-link-peers { align-self:center; min-width:0; }
.cosmos-link-peers>header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:12px; }
.cosmos-link-peers h3 { font-size:14px; margin:0; white-space:nowrap; }
.cosmos-link-peers label { display:flex; align-items:center; gap:8px; color:var(--cosmos-muted); max-width:175px; min-width:0; }
.cosmos-link-peers input { width:100%; min-width:0; color:var(--cosmos-paper); background:transparent; border:0; border-bottom:1px solid var(--cosmos-line); padding:9px 0; font-size:13px; }
.cosmos-link-view .cosmos-link-device { width:100%; display:grid; grid-template-columns:42px minmax(0,1fr) auto 16px; gap:15px; background:none; border:0; border-bottom:1px solid var(--cosmos-line); border-radius:0; padding:22px 0; text-align:left; }
.cosmos-link-view .cosmos-link-device:hover { background:#a9cee908; }
.cosmos-link-device-mark { color:var(--cosmos-sky); }
.cosmos-link-device strong { display:block; font-size:15px; font-weight:550; overflow-wrap:anywhere; }
.cosmos-link-device small { display:block; font-size:11px; line-height:1.6; color:var(--cosmos-muted); overflow-wrap:anywhere; }
.cosmos-link-device small:first-of-type { margin-top:5px; }
.cosmos-link-presence { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--cosmos-muted); }
.cosmos-link-presence i { width:5px; height:5px; border-radius:50%; background:var(--cosmos-faint); }
.cosmos-link-presence[data-presence=online] { color:var(--cosmos-signal); }
.cosmos-link-presence[data-presence=online] i { background:currentColor; }
.cosmos-link-empty { padding:30px 0; text-align:left; }
.cosmos-link-empty strong { font-size:15px; font-weight:500; }
.cosmos-link-empty p { font-size:13px; margin:8px 0 0; max-width:400px; }
.cosmos-link-loading { color:var(--cosmos-muted); padding:35px 0; font-size:13px; }
.cosmos-link-continuity,.cosmos-link-history { border-top:1px solid var(--cosmos-line); padding:30px 0; }
.cosmos-link-continuity>header,.cosmos-link-history>header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; }
.cosmos-link-view header .cosmos-label { font-size:10px; letter-spacing:.17em; }
.cosmos-link-continuity h3,.cosmos-link-history h3 { font-size:25px; font-weight:500; margin:8px 0 0; letter-spacing:-.025em; }
.cosmos-link-continuity>header>p,.cosmos-link-history>header>a { font-size:12px; }
.cosmos-link-history>header>a { display:flex; gap:9px; align-items:center; }
.cosmos-link-resume { display:grid; grid-template-columns:32px minmax(0,1fr) auto 36px; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--cosmos-line); }
.cosmos-link-resume>span { color:var(--cosmos-sky); }
.cosmos-link-resume strong,.cosmos-link-history li strong { font-size:14px; font-weight:550; overflow-wrap:anywhere; }
.cosmos-link-resume p { font-size:12px; margin:5px 0; }
.cosmos-link-resume small,.cosmos-link-history li small { font-size:11px; color:var(--cosmos-muted); }
.cosmos-link-resume>a { display:flex; align-items:center; min-height:44px; gap:9px; font-size:13px; }
.cosmos-link-view [data-link-dismiss] { padding:8px; border:0; background:none; }
.cosmos-link-history ol { padding:0; margin:0; list-style:none; }
.cosmos-link-history li { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:16px; border-bottom:1px solid var(--cosmos-line); padding:18px 0; }
.cosmos-link-history li>span:first-child { color:var(--cosmos-muted); }
.cosmos-link-history li p { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:12px; margin:6px 0; overflow-wrap:anywhere; }
.cosmos-link-beam-phase { display:flex; align-items:center; gap:9px; min-height:44px; border:0; background:transparent; font:inherit; font-size:12px; color:var(--cosmos-muted); text-align:right; max-width:155px; cursor:pointer; }
.cosmos-link-beam-phase:hover { text-decoration:underline; }
.cosmos-link-beam-phase:focus-visible { outline:2px solid var(--cosmos-signal); outline-offset:4px; }
.cosmos-link-beam-phase[data-phase=accepted] { color:var(--cosmos-positive); }
.cosmos-link-beam-phase[data-phase=pending] { color:var(--cosmos-sky); }
.cosmos-link-view .cosmos-link-help { font-size:12px; color:var(--cosmos-muted); }
.cosmos-link-view [role=alert] { color:var(--cosmos-negative); font-size:13px; overflow-wrap:anywhere; }
.cosmos-link-view [data-link-message] { color:var(--cosmos-positive); font-size:13px; }
.cosmos-link-dialog { color:var(--cosmos-paper); background:var(--cosmos-night); border:1px solid var(--cosmos-line-strong); border-radius:var(--cosmos-radius-panel); padding:26px; width:min(540px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:auto; box-shadow:var(--cosmos-shadow); }
.cosmos-link-dialog::backdrop { background:#02050dce; }
.cosmos-link-dialog>header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:24px; }
.cosmos-link-dialog h2 { font-size:23px; font-weight:550; margin:0; letter-spacing:-.03em; }
.cosmos-link-dialog [data-link-close] { background:none; border:0; padding:8px; }
.cosmos-link-dialog p { font-size:14px; }
.cosmos-link-dialog label { display:block; font-size:13px; }
.cosmos-link-dialog input:not([type=checkbox]) { display:block; width:100%; color:var(--cosmos-paper); background:var(--cosmos-void); border:1px solid var(--cosmos-line-strong); border-radius:var(--cosmos-radius-control); min-height:46px; padding:10px 12px; margin:9px 0 20px; }
.cosmos-link-dialog .cosmos-link-check { display:flex; align-items:flex-start; gap:12px; line-height:1.6; margin:20px 0; }
.cosmos-link-check input { width:20px; height:20px; flex-shrink:0; accent-color:var(--cosmos-signal); }
.cosmos-link-check small { display:block; color:var(--cosmos-muted); font-size:12px; }
.cosmos-link-dialog form>button { width:100%; background:var(--cosmos-signal); color:var(--cosmos-void); }
.cosmos-link-detail-mark { display:flex; gap:20px; align-items:center; }
.cosmos-link-detail-mark>svg { color:var(--cosmos-sky); }
.cosmos-link-detail-mark p { margin:6px 0; font-size:12px; }
.cosmos-link-capabilities { display:flex; flex-wrap:wrap; gap:7px 16px; margin:24px 0; color:var(--cosmos-soft); font-size:12px; }
.cosmos-link-capabilities span::before { content:'·'; color:var(--cosmos-signal); margin-right:6px; }
.cosmos-link-detail-actions { display:flex; flex-wrap:wrap; gap:10px; border-top:1px solid var(--cosmos-line); padding-top:20px; margin-top:24px; }
.cosmos-link-detail-actions+.cosmos-link-help { margin-top:18px; }
.cosmos-link-view [data-device-forget],.cosmos-link-view [data-link-confirm-forget] { color:var(--cosmos-negative); }
.cosmos-link-confirm { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.cosmos-link-pair { display:flex; align-items:center; gap:24px; margin:25px 0; }
.cosmos-link-pair .connected-share-qr { display:flex; flex-direction:column; align-items:flex-start; gap:8px; flex-shrink:0; width:150px; margin:0; }
.cosmos-link-pair .connected-share-qr svg { width:150px; height:150px; border-radius:0; box-shadow:none; }
.cosmos-link-pair .connected-share-qr span { font-size:11px; }
.cosmos-link-pair ol { font-size:13px; line-height:1.6; color:var(--cosmos-soft); padding-left:20px; }
.cosmos-link-pair li { padding:6px 0; }
@media(max-width:1000px) { .cosmos-link-topology { gap:32px; grid-template-columns:minmax(200px,.8fr) minmax(0,1.5fr); } .cosmos-link-topology>[data-link-own]::after { width:22px; left:calc(100% + 4px); } .cosmos-link-view .cosmos-link-device { gap:10px; grid-template-columns:32px minmax(0,1fr) auto; } .cosmos-link-device>svg:last-child { display:none; } }
@media(max-width:650px) {
  .cosmos-link-nav { gap:22px; margin-bottom:27px; }
  .cosmos-link-heading { display:block; margin-bottom:25px; }
  .cosmos-link-heading>button { margin-top:20px; }
  .cosmos-link-heading h2 { font-size:36px; }
  .cosmos-link-heading>div>p:last-child { font-size:13px; }
  .cosmos-link-toolbar { gap:12px; font-size:11px; }
  .cosmos-link-topology { display:block; padding:22px 0 30px; }
  .cosmos-link-topology>[data-link-own] { display:grid; grid-template-columns:66px minmax(0,1fr); gap:5px 17px; text-align:left; padding:10px 0 25px; margin-bottom:24px; border-bottom:1px solid var(--cosmos-line); }
  .cosmos-link-topology [data-link-own]>.cosmos-label { grid-column:2; margin:0 0 5px; }
  .cosmos-link-topology [data-link-own]>:is(h3,p:not(.cosmos-label),small,button) { grid-column:2; margin:0; justify-self:start; }
  .cosmos-link-topology [data-link-own]>h3 { font-size:18px; }
  .cosmos-link-topology>[data-link-own]::after { display:none; }
  .cosmos-link-silhouette { grid-column:1; grid-row:1/5; height:85px; margin:0; align-self:center; }
  .cosmos-link-silhouette svg { width:70px; height:70px; }
  .cosmos-link-silhouette::before { width:82px; height:65px; }
  .cosmos-link-silhouette::after { left:calc(50% + 36px); top:22px; width:4px; height:4px; }
  .cosmos-link-topology [data-connected-rename-self] { margin-top:15px; }
  .cosmos-link-view .cosmos-link-device { padding:20px 0; }
  .cosmos-link-continuity>header,.cosmos-link-history>header { display:block; }
  .cosmos-link-history>header>a { margin-top:15px; min-height:44px; }
  .cosmos-link-resume { grid-template-columns:24px minmax(0,1fr) 30px; gap:12px; }
  .cosmos-link-resume>a { grid-column:2; grid-row:2; }
  .cosmos-link-resume>button { grid-column:3; grid-row:1; }
  .cosmos-link-history li { gap:10px; grid-template-columns:24px minmax(0,1fr); }
  .cosmos-link-beam-phase { grid-column:2; text-align:left; max-width:none; }
  .cosmos-link-dialog { padding:20px; }
  .cosmos-link-dialog h2 { font-size:21px; }
  .cosmos-link-pair { flex-direction:column; gap:12px; align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce) { .cosmos-link-view * { transition:none!important; animation:none!important; } }

/* Real device presence forms the topology; the route line only connects it. */
.cosmos-link-view {
  max-width: 1320px;
  padding-inline: clamp(18px, 3vw, 44px);
}
.cosmos-link-nav {
  margin-bottom: 0;
  border-bottom-color: #b8d2dc2b;
}
.cosmos-link-nav a {
  min-height: 60px;
  font-size: .86rem;
}
.cosmos-link-heading {
  position: relative;
  isolation: isolate;
  min-height: 320px;
  align-items: end;
  overflow: hidden;
  margin: 0 calc(-1 * clamp(18px, 3vw, 44px));
  padding: 45px clamp(28px, 5vw, 75px);
  background: #dfe8e5;
  color: #102127;
}
.cosmos-link-heading::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -6%;
  top: 8%;
  width: 65%;
  height: 72%;
  border-top: 1px solid #466b7485;
  border-bottom: 1px solid #466b7438;
  border-radius: 50%;
  transform: rotate(-21deg);
  pointer-events: none;
}
.cosmos-link-heading::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: 14%;
  top: 31%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #315d67;
  box-shadow: 0 0 0 9px #315d671c, 0 0 0 30px #315d6709;
}
.cosmos-link-heading .cosmos-label { color: #48676c; }
.cosmos-link-heading h2 {
  max-width: 800px;
  margin-block: 18px 22px;
  font-size: clamp(3.8rem, 6vw, 7rem);
  line-height: .93;
  font-weight: 480;
  letter-spacing: -.065em;
  color: #102127;
}
.cosmos-link-heading > div > p:last-child {
  color: #365058;
  font-size: 1rem;
  line-height: 1.55;
}
.cosmos-link-heading > button {
  min-height: 50px;
  padding-inline: 20px;
  border: 0;
  background: #102b34;
  color: #f2f4ee;
  font-weight: 650;
}
.cosmos-link-heading > button:hover {
  background: #244854;
  color: #fff;
}
.cosmos-link-toolbar {
  min-height: 70px;
  border-top: 0;
  border-bottom-color: #b8d2dc2b;
  font-size: .83rem;
}
.cosmos-link-topology {
  grid-template-columns: minmax(230px, .82fr) minmax(0, 1.7fr);
  gap: clamp(35px, 6vw, 95px);
  padding-block: 52px 80px;
}
.cosmos-link-topology > [data-link-own] {
  min-height: 335px;
  padding: 26px;
  text-align: left;
  background: radial-gradient(ellipse at 70% 24%, #37677b24, transparent 60%), #111d24;
}
.cosmos-link-topology > [data-link-own]::after {
  width: clamp(35px, 6vw, 95px);
  left: 100%;
  top: 39%;
  background: linear-gradient(90deg, #a8d2e6bb, #a8d2e640);
}
.cosmos-link-silhouette {
  justify-items: start;
  margin: 14px 0 28px;
  height: 145px;
}
.cosmos-link-silhouette::before {
  left: 19px;
  top: 25px;
  width: 170px;
  height: 92px;
  border: 0;
  border-left: 1px solid #a8d2e69c;
  border-top: 1px solid #a8d2e69c;
  border-radius: 0;
  transform: skew(-12deg);
}
.cosmos-link-silhouette::after {
  left: 182px;
  top: 21px;
  background: #aabdc4;
}
.cosmos-link-silhouette[data-presence=online]::after {
  background: #a8d2e6;
  box-shadow: 0 0 0 7px #a8d2e622, 0 0 25px #a8d2e6a3;
}
.cosmos-link-silhouette svg {
  margin-left: 15px;
  background: none;
}
.cosmos-link-topology h3 {
  font-size: clamp(1.45rem, 2vw, 2.25rem);
  line-height: 1.08;
}
.cosmos-link-peers {
  align-self: start;
}
.cosmos-link-peers > header {
  margin: 10px 0 25px;
}
.cosmos-link-peers h3 {
  font-size: 1.35rem;
}
.cosmos-link-view .cosmos-link-device {
  min-height: 100px;
  padding-block: 22px;
  border-bottom-color: #b8d2dc2b;
  transition: padding-left 160ms ease, background 160ms ease;
}
.cosmos-link-view .cosmos-link-device:hover,
.cosmos-link-view .cosmos-link-device:focus-visible {
  padding-left: 12px;
  background: #a8d2e609;
}
.cosmos-link-topology:has(.cosmos-link-device:is(:hover,:focus-visible)) > [data-link-own]::after {
  background: linear-gradient(90deg, #a8d2e645, #d8f7f0, #a8d2e645);
  background-size: 200% 100%;
  box-shadow: 0 0 14px #a8d2e65c;
  animation: cosmos-link-packet 900ms ease-out 1;
}
@keyframes cosmos-link-packet { from { background-position: 100% 0; } to { background-position: 0 0; } }
.cosmos-link-device strong {
  font-size: 1rem;
}
.cosmos-link-device small,
.cosmos-link-presence {
  font-size: .77rem;
}
.cosmos-link-continuity,
.cosmos-link-history {
  padding-block: 44px;
  border-top-color: #b8d2dc2b;
}
.cosmos-link-continuity h3,
.cosmos-link-history h3 {
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -.04em;
}
.cosmos-link-resume,
.cosmos-link-history li {
  min-height: 83px;
  border-bottom-color: #b8d2dc25;
}
.cosmos-link-dialog {
  border-radius: 5px;
  background: #111d24;
}
@media (max-width: 650px) {
  .cosmos-link-view { padding-inline: 16px; }
  .cosmos-link-heading {
    min-height: 0;
    margin-inline: -16px;
    padding: 34px 22px 30px;
  }
  .cosmos-link-heading h2 { max-width: 12ch; margin-block: 16px 19px; font-size: clamp(2.35rem, 9.5vw, 4rem); }
  .cosmos-link-heading > div > p:last-child { font-size: .91rem; }
  .cosmos-link-heading::before { width: 95%; right: -44%; opacity: .6; }
  .cosmos-link-heading::after { right: 9%; top: 18%; }
  .cosmos-link-heading > button { margin-top: 20px; }
  .cosmos-link-topology {
    display: block;
    padding-block: 30px 50px;
  }
  .cosmos-link-topology > [data-link-own] {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 5px 15px;
    min-height: 0;
    padding: 22px 17px;
    margin-bottom: 35px;
    border: 0;
  }
  .cosmos-link-silhouette {
    grid-column: 1;
    grid-row: 1 / 5;
    height: 82px;
    margin: 0;
  }
  .cosmos-link-silhouette::before {
    left: 4px;
    top: 17px;
    width: 65px;
    height: 55px;
  }
  .cosmos-link-silhouette::after { left: 67px; top: 14px; }
  .cosmos-link-silhouette svg { margin: 0; }
  .cosmos-link-peers > header { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cosmos-link-view .cosmos-link-device:hover,
  .cosmos-link-view .cosmos-link-device:focus-visible { padding-left: 0; }
  .cosmos-link-topology > [data-link-own]::after { animation: none!important; }
}