/* =========================================================
   KEEYNET LIVE FABRIC V1.1
   ========================================================= */

.kc-lf-shell {
  position: relative;

  margin: 14px 0 18px;

  padding: 15px 19px 13px;

  overflow: hidden;

  border: 1px solid var(--line, #dce3ea);
  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--surface, #fff) 97%,
        var(--accent, #2563eb) 3%
      ),
      var(--surface, #fff)
    );
}


.kc-lf-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}


.kc-lf-heading-main {
  min-width: 0;
}


.kc-lf-eyebrow {
  color: var(--muted, #64748b);

  font-size: 7.5px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: .11em;
}


.kc-lf-title-row {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-top: 5px;
}


.kc-lf-title-row h2 {
  margin: 0;

  color: var(--text, #111827);

  font-size: 14px;
  line-height: 1.2;
  font-weight: 580;
}


.kc-lf-state-badge {
  padding: 2px 5px;

  border: 1px solid
    color-mix(
      in srgb,
      #16a34a 35%,
      transparent
    );

  border-radius: 999px;

  color: #16a34a;

  font-size: 6.5px;
  font-weight: 650;
  letter-spacing: .06em;
}


.kc-lf-heading p {
  margin: 5px 0 0;

  color: var(--muted, #64748b);

  font-size: 9.5px;
  line-height: 1.45;
}


.kc-lf-control-stack {
  display: flex;
  gap: 7px;
  align-items: center;
}


.kc-lf-view-switch,
.kc-lf-scene-switch {
  display: inline-flex;

  padding: 2px;

  border: 1px solid var(--line, #dce3ea);
  border-radius: 7px;

  background: var(--surface, #fff);
}


.kc-lf-view-switch button,
.kc-lf-scene-switch button {
  min-height: 26px;

  padding: 0 9px;

  border: 0;
  border-radius: 5px;

  background: transparent;
  color: var(--muted, #64748b);

  font: inherit;
  font-size: 8.5px;

  cursor: pointer;
}


.kc-lf-view-switch button.active,
.kc-lf-scene-switch button.active {
  background:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 9%,
      var(--surface, #fff)
    );

  color: var(--accent, #2563eb);

  font-weight: 600;
}


.kc-lf-scene-switch.muted {
  opacity: .48;
}


.kc-lf-message {
  margin-top: 9px;

  color: var(--muted, #64748b);

  font-size: 9px;
}


.kc-lf-statbar {
  display: flex;
  align-items: center;
  gap: 15px;

  min-height: 32px;

  margin-top: 10px;

  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--line, #dce3ea) 70%,
      transparent
    );

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--line, #dce3ea) 70%,
      transparent
    );
}


.kc-lf-statbar > div {
  display: flex;
  align-items: center;
  gap: 5px;
}


.kc-lf-statbar strong {
  color: var(--text, #111827);

  font-size: 9px;
  font-weight: 620;
}


.kc-lf-statbar small {
  color: var(--muted, #64748b);

  font-size: 8px;
}


.kc-lf-stat-divider {
  width: 1px;
  height: 13px;

  background:
    var(--line, #dce3ea);
}


.kc-lf-dot,
.kc-lf-legend i {
  display: inline-block;

  width: 6px;
  height: 6px;

  border-radius: 50%;
}


.kc-lf-dot.online,
.kc-lf-legend i.online {
  background: #16a34a;
}


.kc-lf-dot.offline,
.kc-lf-legend i.offline {
  background: #dc2626;
}


.kc-lf-dot.disabled,
.kc-lf-legend i.disabled {
  background: #d97706;
}


.kc-lf-view[hidden] {
  display: none !important;
}


/* =========================================================
   LIVE STAGE
   ========================================================= */

.kc-lf-stage {
  position: relative;

  height: 340px;

  margin-top: 9px;

  overflow: hidden;

  border-radius: 8px;

  background:
    radial-gradient(
      circle at 50% 49%,
      color-mix(
        in srgb,
        var(--accent, #2563eb) 7%,
        transparent
      ),
      transparent 37%
    );

  cursor: grab;

  touch-action: none;
}


.kc-lf-stage.dragging {
  cursor: grabbing;
}


.kc-lf-stage.static-mode {
  cursor: default;
}


.kc-lf-links {
  position: absolute;
  inset: 0;

  z-index: 3;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


.kc-lf-link {
  stroke:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 42%,
      var(--line, #dce3ea)
    );

  stroke-width: 1.2;

  vector-effect:
    non-scaling-stroke;

  opacity: .47;

  transition:
    all .18s ease;
}


.kc-lf-link.offline {
  stroke: #dc2626;

  stroke-dasharray:
    5 7;

  opacity: .22;
}


.kc-lf-link.disabled {
  stroke: #d97706;

  stroke-dasharray:
    4 7;

  opacity: .23;
}


.kc-lf-link.unknown {
  stroke-dasharray:
    3 6;

  opacity: .3;
}


.kc-lf-link.selected {
  stroke:
    var(--accent, #2563eb);

  stroke-width: 2.1;

  opacity: .95;
}


.kc-lf-grid-plane {
  position: absolute;

  z-index: 1;

  top: 51%;
  left: 50%;

  width: 76%;
  height: 190px;

  transform-origin:
    center center;

  border: 1px solid
    color-mix(
      in srgb,
      var(--accent, #2563eb) 13%,
      var(--line, #dce3ea)
    );

  border-radius: 50%;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 34px,
      color-mix(
        in srgb,
        var(--line, #dce3ea) 45%,
        transparent
      ) 35px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 23px,
      color-mix(
        in srgb,
        var(--line, #dce3ea) 45%,
        transparent
      ) 24px
    );

  opacity: .5;

  transition:
    transform .12s ease;
}


.kc-lf-core {
  position: absolute;

  z-index: 50;

  top: 50%;
  left: 50%;

  width: 170px;
  height: 112px;

  transform:
    translate(-50%, -50%);

  display: grid;
  place-items: center;

  pointer-events: none;
}


.kc-lf-core-ring {
  position: absolute;

  border: 1px solid
    color-mix(
      in srgb,
      var(--accent, #2563eb) 37%,
      transparent
    );

  border-radius: 50%;
}


.kc-lf-core-ring.outer {
  width: 155px;
  height: 78px;

  opacity: .28;
}


.kc-lf-core-ring.inner {
  width: 128px;
  height: 63px;

  opacity: .48;
}


.kc-lf-core-body {
  position: relative;
  z-index: 2;

  display: grid;
  justify-items: center;

  min-width: 119px;

  padding: 11px 14px 10px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--accent, #2563eb) 32%,
      var(--line, #dce3ea)
    );

  border-radius: 10px;

  background:
    color-mix(
      in srgb,
      var(--surface, #fff) 95%,
      var(--accent, #2563eb) 5%
    );

  box-shadow:
    0 9px 22px
    color-mix(
      in srgb,
      var(--accent, #2563eb) 9%,
      transparent
    );
}


.kc-lf-core-body > span {
  color: var(--accent, #2563eb);

  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .14em;
}


.kc-lf-core-body > strong {
  margin-top: 3px;

  color: var(--text, #111827);

  font-size: 10.5px;
  font-weight: 600;
}


.kc-lf-core-body > small {
  margin-top: 2px;

  color: var(--muted, #64748b);

  font-size: 7px;
}


.kc-lf-core-security {
  display: flex;
  gap: 3px;

  margin-top: 7px;
}


.kc-lf-core-security b {
  padding: 2px 4px;

  border: 1px solid
    var(--line, #dce3ea);

  border-radius: 3px;

  color: var(--muted, #64748b);

  font-size: 5.8px;
  font-weight: 550;
}


.kc-lf-device {
  --lf-device-scale: 1;

  position: absolute;

  z-index: 20;

  display: flex;
  align-items: center;
  gap: 7px;

  width: 132px;

  padding: 7px 8px;

  transform:
    translate(-50%, -50%)
    scale(
      var(--lf-device-scale)
    );

  border: 1px solid
    var(--line, #dce3ea);

  border-radius: 7px;

  background:
    color-mix(
      in srgb,
      var(--surface, #fff) 97%,
      var(--accent, #2563eb) 3%
    );

  box-shadow:
    0 5px 13px
    color-mix(
      in srgb,
      #000 5%,
      transparent
    );

  color: var(--text, #111827);

  font: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    left .11s linear,
    top .11s linear,
    border-color .15s ease,
    box-shadow .15s ease;
}


.kc-lf-device:hover,
.kc-lf-device.selected {
  border-color:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 48%,
      var(--line, #dce3ea)
    );

  box-shadow:
    0 8px 20px
    color-mix(
      in srgb,
      var(--accent, #2563eb) 10%,
      transparent
    );
}


.kc-lf-device > i {
  position: absolute;

  top: 6px;
  right: 6px;

  width: 5px;
  height: 5px;

  border-radius: 50%;
}


.kc-lf-device.online > i {
  background: #16a34a;
}


.kc-lf-device.offline > i {
  background: #dc2626;
}


.kc-lf-device.disabled > i {
  background: #d97706;
}


.kc-lf-device.unknown > i {
  background: #94a3b8;
}


.kc-lf-device-platform {
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  width: 27px;
  height: 27px;

  border-radius: 6px;

  background:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 7%,
      var(--surface, #fff)
    );

  color: var(--accent, #2563eb);
}


.kc-lf-device-platform svg {
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.5;
}


.kc-lf-device-copy {
  display: grid;
  gap: 2px;

  min-width: 0;
}


.kc-lf-device-copy strong {
  overflow: hidden;

  color: var(--text, #111827);

  font-size: 8.8px;
  font-weight: 570;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.kc-lf-device-copy small {
  overflow: hidden;

  color: var(--muted, #64748b);

  font-size: 6.8px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.kc-lf-stage-controls {
  position: absolute;

  z-index: 90;

  top: 8px;
  right: 8px;

  display: flex;
  align-items: center;
  gap: 8px;
}


.kc-lf-scene-helper {
  color: var(--muted, #64748b);

  font-size: 7px;
}


.kc-lf-camera-buttons {
  display: flex;

  padding: 2px;

  border: 1px solid
    var(--line, #dce3ea);

  border-radius: 6px;

  background:
    color-mix(
      in srgb,
      var(--surface, #fff) 94%,
      transparent
    );
}


.kc-lf-camera-buttons button {
  min-width: 25px;
  min-height: 24px;

  padding: 0 7px;

  border: 0;
  border-radius: 4px;

  background: transparent;
  color: var(--muted, #64748b);

  font: inherit;
  font-size: 7.5px;

  cursor: pointer;
}


.kc-lf-camera-buttons button:hover {
  background:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 8%,
      transparent
    );

  color: var(--accent, #2563eb);
}


.kc-lf-more {
  position: absolute;

  z-index: 70;

  bottom: 8px;
  left: 50%;

  transform:
    translateX(-50%);

  padding: 4px 7px;

  border: 1px solid
    var(--line, #dce3ea);

  border-radius: 5px;

  background:
    var(--surface, #fff);

  color:
    var(--accent, #2563eb);

  font: inherit;
  font-size: 7px;
  font-weight: 550;

  cursor: pointer;
}


.kc-lf-legend {
  position: absolute;

  z-index: 80;

  right: 5px;
  bottom: 5px;

  display: flex;
  gap: 9px;
}


.kc-lf-legend span {
  display: flex;
  align-items: center;
  gap: 4px;

  color: var(--muted, #64748b);

  font-size: 6.7px;
}


.kc-lf-empty {
  position: absolute;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  display: grid;
  justify-items: center;
  gap: 5px;

  text-align: center;
}


.kc-lf-empty strong {
  color: var(--text, #111827);

  font-size: 11px;
  font-weight: 570;
}


.kc-lf-empty span {
  color: var(--muted, #64748b);

  font-size: 8.5px;
}


/* =========================================================
   SECURITY VIEW
   ========================================================= */

.kc-lf-security-flow {
  display: grid;

  grid-template-columns:
    1fr auto 1fr auto 1fr auto 1fr;

  align-items: center;
  gap: 10px;

  min-height: 215px;

  margin-top: 12px;
}


.kc-lf-security-flow article {
  position: relative;

  min-height: 135px;

  padding: 12px 11px;

  border-top: 2px solid
    color-mix(
      in srgb,
      var(--accent, #2563eb) 55%,
      transparent
    );

  border-bottom: 1px solid
    var(--line, #dce3ea);
}


.kc-lf-sec-index {
  position: absolute;

  top: 8px;
  right: 7px;

  color: var(--muted, #64748b);

  font-size: 6.5px;
}


.kc-lf-sec-icon {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  margin-bottom: 16px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--accent, #2563eb) 28%,
      var(--line, #dce3ea)
    );

  border-radius: 7px;

  background:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 6%,
      var(--surface, #fff)
    );

  color:
    var(--accent, #2563eb);

  font-size: 6.5px;
  font-weight: 700;
}


.kc-lf-security-flow strong {
  display: block;

  color: var(--text, #111827);

  font-size: 9px;
  font-weight: 580;
}


.kc-lf-security-flow p {
  margin: 5px 0 0;

  color: var(--muted, #64748b);

  font-size: 7.5px;
  line-height: 1.45;
}


.kc-lf-sec-arrow {
  color:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 65%,
      var(--muted, #64748b)
    );

  font-size: 14px;
}


.kc-lf-security-boundary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;

  padding: 9px 0;

  border-top: 1px solid
    var(--line, #dce3ea);
}


.kc-lf-security-boundary > div:first-child {
  display: grid;
  gap: 2px;
}


.kc-lf-security-boundary span {
  color: var(--muted, #64748b);

  font-size: 6.5px;
}


.kc-lf-security-boundary strong {
  color: var(--text, #111827);

  font-size: 9px;
  font-weight: 560;
}


.kc-lf-security-tags {
  display: flex;
  gap: 5px;
}


.kc-lf-security-tags span {
  padding: 3px 6px;

  border: 1px solid
    var(--line, #dce3ea);

  border-radius: 999px;

  color: var(--text, #111827);

  font-size: 7px;
}


/* =========================================================
   DEVICE DETAIL
   ========================================================= */

.kc-lf-device-detail {
  margin-top: 4px;
  padding-top: 11px;

  border-top: 1px solid
    var(--line, #dce3ea);
}


.kc-lf-device-detail[hidden] {
  display: none !important;
}


.kc-lf-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}


.kc-lf-detail-head > div {
  display: grid;
  gap: 4px;
}


.kc-lf-detail-head strong {
  color: var(--text, #111827);

  font-size: 10px;
  font-weight: 580;
}


.kc-lf-detail-head button {
  border: 0;
  background: transparent;

  color: var(--muted, #64748b);

  font-size: 17px;

  cursor: pointer;
}


.kc-lf-detail-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 20px;

  margin-top: 8px;
}


.kc-lf-detail-grid > div {
  display: grid;
  gap: 3px;

  min-width: 0;

  padding: 6px 0;

  border-bottom: 1px solid
    color-mix(
      in srgb,
      var(--line, #dce3ea) 70%,
      transparent
    );
}


.kc-lf-detail-grid span {
  color: var(--muted, #64748b);

  font-size: 7px;
}


.kc-lf-detail-grid strong {
  overflow: hidden;

  color: var(--text, #111827);

  font-size: 8px;
  font-weight: 550;

  text-overflow: ellipsis;
}


.kc-lf-detail-grid .online {
  color: #16a34a;
}


.kc-lf-detail-grid .offline {
  color: #dc2626;
}


.kc-lf-detail-grid .disabled {
  color: #d97706;
}


.kc-lf-detail-grid .mono {
  font-family:
    "Roboto Mono",
    ui-monospace,
    monospace;
}


.kc-lf-path-summary {
  margin-top: 10px;
}


.kc-lf-path-summary > span {
  color: var(--muted, #64748b);

  font-size: 6.5px;
  font-weight: 650;
  letter-spacing: .07em;
}


.kc-lf-path-summary > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;

  margin-top: 6px;
}


.kc-lf-path-summary b {
  padding: 3px 6px;

  border: 1px solid
    var(--line, #dce3ea);

  border-radius: 5px;

  color: var(--text, #111827);

  font-size: 7px;
  font-weight: 550;
}


.kc-lf-path-summary i {
  color: var(--accent, #2563eb);

  font-style: normal;
  font-size: 8px;
}


.kc-lf-path-summary p {
  max-width: 770px;

  margin: 7px 0 0;

  color: var(--muted, #64748b);

  font-size: 7.5px;
  line-height: 1.45;
}


/* =========================================================
   SAMPLE TOPOLOGIES
   ========================================================= */

.kc-lf-examples {
  margin-top: 16px;
  padding-top: 14px;

  border-top: 1px solid
    var(--line, #dce3ea);
}


.kc-lf-examples-heading h3 {
  margin: 4px 0 0;

  color: var(--text, #111827);

  font-size: 18px;
  font-weight: 650;
}


.kc-lf-examples-heading p {
  margin: 4px 0 0;

  color: var(--muted, #64748b);

  font-size: 12px;
}


.kc-lf-example-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px, 1fr)
    );

  gap: 16px;

  margin-top: 14px;

  padding-bottom: 3px;
}


.kc-lf-example {
  min-width: 0;

  padding: 16px;

  border: 1px solid
    var(--line, #dce3ea);

  border-radius: 10px;

  background:
    color-mix(
      in srgb,
      var(--surface, #fff) 98%,
      var(--accent, #2563eb) 2%
    );
}


.kc-lf-example-top {
  display: grid;
  gap: 4px;
}


.kc-lf-example-top span {
  color: var(--muted, #64748b);

  font-size: 10px;
  font-weight: 650;
  letter-spacing: .07em;
}


.kc-lf-example-top strong {
  color: var(--text, #111827);

  font-size: 14px;
  font-weight: 620;
}


.kc-lf-example-svg {
  width: 100%;
  height: 150px;

  margin-top: 8px;
}


.kc-lf-example-svg .node,
.kc-lf-example-svg .connector,
.kc-lf-example-svg .lan,
.kc-lf-example-svg .cloud {
  fill:
    color-mix(
      in srgb,
      var(--surface, #fff) 94%,
      var(--accent, #2563eb) 6%
    );

  stroke:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 30%,
      var(--line, #dce3ea)
    );

  stroke-width: 1;
}


.kc-lf-example-svg .connector {
  fill:
    color-mix(
      in srgb,
      var(--surface, #fff) 91%,
      var(--accent, #2563eb) 9%
    );
}


.kc-lf-example-svg .lan {
  fill:
    color-mix(
      in srgb,
      var(--surface, #fff) 96%,
      #64748b 4%
    );
}


.kc-lf-example-svg .core {
  fill:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 10%,
      var(--surface, #fff)
    );

  stroke:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 42%,
      var(--line, #dce3ea)
    );

  stroke-width: 1;
}


.kc-lf-example-svg .path {
  fill: none;

  stroke:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 52%,
      var(--line, #dce3ea)
    );

  stroke-width: 1.4;
}


.kc-lf-example-svg text {
  fill: var(--text, #111827);

  font-family:
    Inter,
    system-ui,
    sans-serif;

  font-size: 10px;
}


.kc-lf-example-svg text.sub {
  fill: var(--muted, #64748b);

  font-size: 8px;
}


.kc-lf-example p {
  margin: 8px 0 0;

  color: var(--muted, #64748b);

  font-size: 11.5px;
  line-height: 1.5;
}


/* =========================================================
   QUICKSTART (add device + copyable commands)
   ========================================================= */

.kc-lf-quickstart {
  margin-top: 20px;
  padding: 18px 20px;

  border: 1px solid
    var(--line, #dce3ea);

  border-radius: 12px;

  background:
    color-mix(
      in srgb,
      var(--surface, #fff) 97%,
      var(--accent, #2563eb) 3%
    );
}


.kc-lf-quickstart-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  flex-wrap: wrap;
}


.kc-lf-quickstart-heading h3 {
  margin: 4px 0 0;

  color: var(--text, #111827);

  font-size: 16px;
  font-weight: 650;
}


.kc-lf-quickstart-heading p {
  margin: 4px 0 0;

  color: var(--muted, #64748b);

  font-size: 12px;
}


.kc-lf-quickstart-heading .primary-action {
  flex: none;
  white-space: nowrap;
}


.kc-lf-quickstart-steps {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px, 1fr)
    );

  gap: 14px;

  margin-top: 16px;
}


.kc-lf-quickstart-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}


.kc-lf-quickstart-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;
  flex: none;

  border-radius: 50%;

  background:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 14%,
      var(--surface, #fff)
    );

  color: var(--accent, #2563eb);

  font-size: 11.5px;
  font-weight: 700;
}


.kc-lf-quickstart-step strong {
  display: block;
  margin-bottom: 6px;

  color: var(--text, #111827);

  font-size: 12.5px;
  font-weight: 620;
}


.kc-lf-command {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 7px 8px 7px 10px;

  border: 1px solid
    var(--line, #dce3ea);

  border-radius: 7px;

  background: var(--surface, #fff);
}


.kc-lf-command code {
  flex: 1;
  min-width: 0;

  overflow-x: auto;
  white-space: nowrap;

  color: var(--text, #111827);

  font-family:
    "Roboto Mono",
    ui-monospace,
    monospace;

  font-size: 11px;
}


.kc-lf-command button {
  flex: none;

  padding: 4px 10px;

  border: 1px solid
    var(--line, #dce3ea);

  border-radius: 6px;

  background:
    var(--surface-soft, #f5f7fa);

  color: var(--text, #111827);

  font-size: 11px;
  font-weight: 600;

  cursor: pointer;
}


.kc-lf-command button:hover {
  background:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 10%,
      var(--surface, #fff)
    );
}


.kc-lf-command button:disabled {
  color: var(--accent, #2563eb);
  cursor: default;
}


@media (max-width: 640px) {

  .kc-lf-quickstart-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .kc-lf-quickstart-heading .primary-action {
    width: 100%;
  }

}


/* =========================================================
   LIVE ACTIVITY LOGS
   ========================================================= */

.kc-lf-activity {
  margin-top: 20px;
  padding-top: 16px;

  border-top: 1px solid
    var(--line, #dce3ea);
}


.kc-lf-activity-heading h3 {
  margin: 4px 0 0;

  color: var(--text, #111827);

  font-size: 16px;
  font-weight: 650;
}


.kc-lf-activity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;

  margin-top: 12px;
}


.kc-lf-activity-empty {
  margin: 0;
  padding: 10px 0;

  color: var(--muted, #64748b);

  font-size: 12.5px;
}


.kc-lf-activity-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;

  padding: 9px 12px;

  border: 1px solid
    var(--line, #dce3ea);

  border-radius: 8px;

  background: var(--surface, #fff);

  cursor: pointer;

  text-align: left;
}


.kc-lf-activity-row:hover {
  background:
    color-mix(
      in srgb,
      var(--accent, #2563eb) 6%,
      var(--surface, #fff)
    );
}


.kc-lf-activity-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--text, #111827);

  font-size: 12.5px;
  font-weight: 600;
}


.kc-lf-activity-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  color: var(--muted, #64748b);

  font-size: 11px;
  font-weight: 600;

  white-space: nowrap;
}


.kc-lf-activity-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;

  background: #64748b;
}


.kc-lf-activity-state.online i {
  background: #16a34a;
}


.kc-lf-activity-state.offline i {
  background: #dc2626;
}


.kc-lf-activity-state.disabled i {
  background: #d97706;
}


.kc-lf-activity-time {
  color: var(--muted, #64748b);

  font-size: 11px;
  white-space: nowrap;
}


@media (max-width: 560px) {

  .kc-lf-activity-row {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 4px;
  }

}


/* =========================================================
   SUGGEST (Cloud Fabric CTA)
   ========================================================= */

.kc-lf-suggest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;

  margin-top: 20px;
  padding: 16px 20px;

  border: 1px solid
    var(--line, #dce3ea);

  border-radius: 12px;

  background:
    color-mix(
      in srgb,
      var(--surface, #fff) 95%,
      var(--accent, #2563eb) 5%
    );
}


.kc-lf-suggest h3 {
  margin: 4px 0 0;

  color: var(--text, #111827);

  font-size: 15px;
  font-weight: 640;
}


.kc-lf-suggest p {
  margin: 4px 0 0;

  color: var(--muted, #64748b);

  font-size: 12px;

  max-width: 46ch;
}


.kc-lf-suggest .quiet-button {
  flex: none;
  white-space: nowrap;
}


/* =========================================================
   FOOTER
   ========================================================= */

.kc-lf-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  margin-top: 11px;
  padding-top: 8px;

  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--line, #dce3ea) 65%,
      transparent
    );

  color: var(--muted, #64748b);

  font-size: 6.8px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .kc-lf-example-grid {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(220px, 1fr)
      );
  }

}


@media (max-width: 800px) {

  .kc-lf-heading {
    display: grid;
  }

  .kc-lf-control-stack {
    justify-content: flex-start;
  }

  .kc-lf-security-flow {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .kc-lf-sec-arrow {
    display: none;
  }

}


@media (max-width: 700px) {

  .kc-lf-shell {
    padding: 13px 12px;
  }

  .kc-lf-control-stack {
    flex-wrap: wrap;
  }

  .kc-lf-stage {
    height: auto;

    min-height: 250px;

    padding:
      55px 0 22px;
  }

  .kc-lf-grid-plane,
  .kc-lf-links {
    display: none;
  }

  .kc-lf-core {
    position: relative;

    top: auto;
    left: auto;

    margin:
      0 auto 18px;

    transform: none;
  }

  .kc-lf-device {
    position: relative;

    top: auto !important;
    left: auto !important;

    width: 100%;

    margin: 6px 0;

    transform: none !important;
  }

  .kc-lf-stage-controls {
    top: 7px;
    left: 7px;
    right: 7px;

    justify-content:
      space-between;
  }

  .kc-lf-more,
  .kc-lf-legend {
    position: relative;

    right: auto;
    bottom: auto;
    left: auto;

    transform: none;
  }

  .kc-lf-more {
    display: block;

    margin:
      10px auto;
  }

  .kc-lf-legend {
    justify-content:
      center;

    margin-top: 10px;
  }

  .kc-lf-security-flow {
    grid-template-columns: 1fr;
  }

  .kc-lf-detail-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .kc-lf-security-boundary,
  .kc-lf-footer {
    display: grid;
  }

}