.kdl-cli-card {
    --ink: #f7fbff;
    --muted: #b4c0d3;
    --cyan: #61d9ee;
    --blue: #2878FF;
    --violet: #7a73ff;
    --pink: #f0a8ff;

    position: relative;
    width: 288px;
    height: 190px;
    padding: 20px;
    overflow: hidden;
    border-radius: 8px;
    background:
      radial-gradient(118px 92px at 10% 10%, rgba(0, 188, 224, .12), transparent 72%),
      radial-gradient(144px 108px at 90% 18%, rgba(122, 115, 255, .12), transparent 74%),
      linear-gradient(135deg, #12141D 0%, #16233A 54%, #1B2944 100%);
    color: var(--ink);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    isolation: isolate;
  }

  /* 浅色方案同款：一小段流光沿卡片边缘巡游 */
  .kdl-cli-border-flow {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    padding: 1.25px;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .kdl-cli-border-flow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 176%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(0deg);
    background: conic-gradient(
      from 0deg,
      transparent 0deg 196deg,
      rgba(97, 217, 238, 0) 196deg,
      rgba(97, 217, 238, .16) 214deg,
      rgba(97, 217, 238, .40) 234deg,
      rgba(40, 120, 255, .92) 258deg,
      rgba(122, 115, 255, .92) 286deg,
      rgba(240, 168, 255, .36) 316deg,
      rgba(240, 168, 255, .10) 338deg,
      rgba(240, 168, 255, 0) 352deg,
      transparent 352deg 360deg
    );
    filter: blur(.12px) drop-shadow(0 0 3px rgba(103, 139, 245, .18));
    animation: kdlBorderOrbit 5.6s linear infinite;
    will-change: transform;
  }

  .kdl-cli-ambient {
    position: absolute;
    inset: -28%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 18% 28%, rgba(0, 188, 224, .18) 0 12%, transparent 34%),
      radial-gradient(circle at 80% 22%, rgba(122, 115, 255, .16) 0 14%, transparent 38%),
      radial-gradient(circle at 62% 82%, rgba(40, 120, 255, .14) 0 15%, transparent 40%),
      radial-gradient(circle at 90% 70%, rgba(198, 145, 243, .09) 0 10%, transparent 32%);
    filter: blur(22px);
    opacity: .74;
    transform: translate3d(0,0,0) scale(1.02);
    animation: kdlBgFlow 10.5s ease-in-out infinite alternate;
  }

  .kdl-cli-head,
  .kdl-cli-desc,
  .kdl-cli-terminal,
  .kdl-cli-footer,
  .kdl-cli-spark {
    position: relative;
    z-index: 2;
  }

  .kdl-cli-head {
    display: flex;
    align-items: center;
    min-height: 24px;
  }

  .kdl-cli-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.2px;
  }

  .kdl-cli-new {
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    background: linear-gradient(100deg, rgba(0, 188, 224, .95), rgba(40, 120, 255, .96), rgba(122, 115, 255, .96));
    color: rgba(255,255,255,.98);
    font-size: 10px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: .5px;
  }

  .kdl-cli-new::before {
    content: "✦";
    font-size: 10px;
    line-height: 1;
    color: rgba(255,255,255,.96);
  }

  .kdl-cli-spark {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 42px;
    height: 34px;
    pointer-events: none;
  }

  .kdl-cli-spark-main,
  .kdl-cli-spark-mini,
  .kdl-cli-spark-dot {
    position: absolute;
    display: block;
    line-height: 1;
  }

  .kdl-cli-spark-main {
    right: 0;
    top: 0;
    font-size: 23px;
    background: linear-gradient(135deg, #68c9f2 0%, #6d8ff6 52%, #9b82ef 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: kdlSparkMain 3.6s ease-in-out infinite;
  }

  .kdl-cli-spark-mini {
    left: 5px;
    bottom: 4px;
    font-size: 9px;
    color: #74baf3;
    animation: kdlSparkMini 3.6s ease-in-out .9s infinite;
  }

  .kdl-cli-spark-dot {
    right: 3px;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #9b86ef;
    box-shadow: 0 0 0 3px rgba(155,134,239,.07);
    animation: kdlSparkDot 3.6s ease-in-out 1.8s infinite;
  }

  .kdl-cli-desc {
    margin-top: 8px;
    max-width: 220px;
    color: var(--muted);
    font-size: 12px;
    line-height: 18px;
  }

  .kdl-cli-desc strong {
    color: #eef4ff;
    font-weight: 650;
  }

  .kdl-cli-terminal {
    position: relative;
    height: 42px;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    background:
      radial-gradient(112px 58px at 92% 0%, rgba(99, 151, 255, .11), transparent 72%),
      linear-gradient(180deg, rgba(31, 48, 75, .82) 0%, rgba(26, 40, 66, .88) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }

  .kdl-cli-terminal::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -34%;
    width: 24%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transform: skewX(-16deg);
    opacity: 0;
    pointer-events: none;
    animation: kdlTerminalSheen 6.4s ease-in-out infinite;
  }

  .kdl-cli-terminal-line {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .34s ease, transform .34s ease;
    pointer-events: none;
  }

  .kdl-cli-terminal-line.is-active {
    opacity: 1;
    transform: translateY(0);
  }

  .kdl-cli-prompt {
    flex: 0 0 auto;
    color: #4dd1f2;
    font: 700 13px/1 Consolas, Menlo, Monaco, monospace;
  }

  .kdl-cli-terminal-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #eef4ff;
    font-size: 13px;
    line-height: 20px;
    font-weight: 520;
    letter-spacing: .02px;
  }

  .kdl-cli-cursor {
    flex: 0 0 2px;
    width: 2px;
    height: 15px;
    border-radius: 2px;
    background: #7ea2ff;
    box-shadow: 0 0 6px rgba(120, 153, 255, .24);
    animation: kdlBlink 1s steps(1,end) infinite;
  }

  .kdl-cli-footer {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kdl-cli-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5b9aff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    background: transparent;
    border: 0;
    text-decoration: none;
  }

  .kdl-cli-arrow {
    font-size: 16px;
    line-height: 1;
    transition: transform 150ms linear 75ms;
  }

  .kdl-cli-cta:hover .kdl-cli-arrow {
    transform: translateX(3px);
  }

  @keyframes kdlBorderOrbit {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  @keyframes kdlBgFlow {
    0% { transform: translate3d(-3%, -2%, 0) scale(1.02) rotate(-1deg); opacity: .60; }
    45% { transform: translate3d(4%, 1%, 0) scale(1.07) rotate(.6deg); opacity: .80; }
    100% { transform: translate3d(-1%, 5%, 0) scale(1.05) rotate(1.4deg); opacity: .68; }
  }

  @keyframes kdlSparkMain {
    0%, 100% { opacity: .48; transform: translateY(0) scale(.90) rotate(-3deg); }
    50% { opacity: .9; transform: translateY(-1px) scale(1.05) rotate(2deg); }
  }

  @keyframes kdlSparkMini {
    0%, 100% { opacity: .22; transform: scale(.72) rotate(-8deg); }
    50% { opacity: .82; transform: scale(1.06) rotate(8deg); }
  }

  @keyframes kdlSparkDot {
    0%, 100% { opacity: .18; transform: translate(0,0) scale(.7); }
    50% { opacity: .78; transform: translate(-2px,-2px) scale(1.05); }
  }

  @keyframes kdlTerminalSheen {
    0%, 62% { left: -34%; opacity: 0; }
    67% { opacity: .42; }
    82% { left: 112%; opacity: 0; }
    100% { left: 112%; opacity: 0; }
  }

  @keyframes kdlBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .kdl-cli-border-flow::before,
    .kdl-cli-ambient,
    .kdl-cli-spark-main,
    .kdl-cli-spark-mini,
    .kdl-cli-spark-dot,
    .kdl-cli-terminal::after,
    .kdl-cli-cursor {
      animation: none;
    }
    .kdl-cli-terminal-line,
    .kdl-cli-arrow {
      transition: none;
    }
  }

.kdl-cli-card *, .kdl-cli-card *::before, .kdl-cli-card *::after { box-sizing: border-box; }
.kdl-cli-card:focus-visible { outline: 2px solid #2878ff; outline-offset: 4px; }