/* ==========================================================
   心岛统一卡背 CSS — 双层边框 + 四角 + 中轴 + 圆环 + 菱形
   适合任意尺寸容器，全百分比自适应
   ========================================================== */

.card-back-css {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #faf6f8 0%, #f4eef3 50%, #eee8f3 100%);
  box-shadow:
    0 0 0 1px rgba(126,102,138,.35) inset,
    0 0 0 1px rgba(255,255,255,.92);
}

.card-back-css::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0 10%, transparent 22%);
  pointer-events: none;
}

/* 双层边框 */
.cb-frame-o {
  position: absolute; inset: 8%; border-radius: 14%;
  border: 0.8px solid rgba(126,102,138,.82);
}
.cb-frame-i {
  position: absolute; inset: 18%; border-radius: 10%;
  border: 0.6px solid rgba(170,148,180,.58);
}

/* 四角 */
.cb-corner {
  position: absolute; width: 26%; height: 26%;
  border: 0.8px solid rgba(126,102,138,.82); opacity: .88;
}
.ctl { left: 7%; top: 7%; border-right: none; border-bottom: none; border-radius: 30% 0 0 0; }
.ctr { right: 7%; top: 7%; border-left: none; border-bottom: none; border-radius: 0 30% 0 0; }
.cbl { left: 7%; bottom: 7%; border-right: none; border-top: none; border-radius: 0 0 0 30%; }
.cbr { right: 7%; bottom: 7%; border-left: none; border-top: none; border-radius: 0 0 30% 0; }

/* 中轴 */
.cb-axis {
  position: absolute; left: 50%; top: 16%; bottom: 16%;
  width: 0.6px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(170,148,180,.58) 16%, rgba(126,102,138,.82) 50%, rgba(170,148,180,.58) 84%, transparent);
}

/* 圆环 */
.cb-orbit {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%;
}
.cb-orbit-1 { width: 60%; height: 60%; border: 0.8px solid rgba(126,102,138,.82); }
.cb-orbit-2 { width: 42%; height: 42%; border: 0.6px solid rgba(170,148,180,.58); }

/* 菱形 */
.cb-dia {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg);
}
.cb-dia-o {
  width: 18%; height: 18%;
  border: 0.8px solid rgba(126,102,138,.82);
  background: rgba(255,255,255,.06);
}
.cb-dia-i {
  width: 9%; height: 9%;
  border: 0.6px solid rgba(202,184,168,.58);
}

/* 小尺寸适配（< 80px） */
@media (max-width:80px) {
  .cb-frame-o { border-width: 0.5px; }
  .cb-frame-i { border-width: 0.4px; }
  .cb-corner { border-width: 0.5px; }
  .cb-axis { width: 0.4px; }
  .cb-orbit-1 { border-width: 0.5px; }
  .cb-orbit-2 { border-width: 0.4px; }
  .cb-dia-o { border-width: 0.5px; }
  .cb-dia-i { border-width: 0.4px; }
}