/**
 * Cosmetics Components v2 - 独立组件样式
 * 命名空间: .cc-cosmetics
 * 要求: 不污染全局选择器，独立 z-index 层级
 */

@font-face{font-family:"CC Coiny";font-style:normal;font-weight:400;font-display:block;src:url("/styles/ciphercn/fonts/cc-coiny-latin.woff2") format("woff2")}
@font-face{font-family:"CC Kuaile";font-style:normal;font-weight:400;font-display:block;src:url("/data/ciphercn/username-fonts/zcool-kuaile.ttf") format("truetype")}
@font-face{font-family:"CC Qingke";font-style:normal;font-weight:400;font-display:block;src:url("/data/ciphercn/username-fonts/zcool-qingke-huangyou.ttf") format("truetype")}
@font-face{font-family:"CC Mashan";font-style:normal;font-weight:400;font-display:block;src:url("/data/ciphercn/username-fonts/ma-shan-zheng.ttf") format("truetype")}
@font-face{font-family:"CC Liujian";font-style:normal;font-weight:400;font-display:block;src:url("/data/ciphercn/username-fonts/liu-jian-mao-cao.ttf") format("truetype")}
@font-face{font-family:"CC Longcang";font-style:normal;font-weight:400;font-display:block;src:url("/data/ciphercn/username-fonts/long-cang.ttf") format("truetype")}
@font-face{font-family:"CC Zhimang";font-style:normal;font-weight:400;font-display:block;src:url("/data/ciphercn/username-fonts/zhi-mang-xing.ttf") format("truetype")}

.cc-cosmetics-font-guard .username[data-user-id]:not([data-cc-font-ready]) {
  visibility: hidden !important;
}

/* ============================================================================
   基础变量和命名空间
   ============================================================================ */
.cc-cosmetics-card-container,
.cc-cosmetics-online-banner-container,
.cc-cosmetics-profile-container,
.cc-cosmetics-loadout-container {
  --cc-cosmetic-a: #55edf4;
  --cc-cosmetic-b: #8b5cf6;
  --cc-cosmetic-c: #f05bd7;
  --cc-cosmetic-speed: 4400ms;
  --cc-cosmetic-intensity: 0.72;
}

/* ============================================================================
   用户名片组件 (UserCardView)
   ============================================================================ */
.cc-cosmetics-card {
  position: relative;
  isolation: isolate;
  width: 322px;
  overflow: hidden;
  color: #f5f3ff;
  background: linear-gradient(180deg, #17112d 0%, #100d21 58%, #0d0b18 100%);
  border: 1px solid rgba(151, 90, 255, .68);
  border-radius: 16px;
  box-shadow: 0 22px 58px rgba(3, 3, 12, .64), 0 0 0 1px rgba(89, 224, 236, .08);
}

.cc-cosmetics-floating-card {
  position: fixed;
  z-index: 2147483000;
  width: 322px;
  max-width: calc(100vw - 16px);
  pointer-events: auto;
}

.cc-cosmetics-floating-card .cc-cosmetics-card {
  width: 100%;
  max-height: calc(100vh - 16px);
  overflow-x: hidden;
  overflow-y: auto;
}

.cc-cosmetics-card .card-cover {
  position: relative;
  z-index: 2;
  height: 150px;
  background: radial-gradient(circle at 72% 20%, rgba(166, 104, 255, .72), transparent 38%), linear-gradient(135deg, #27316b, #331967 55%, #15122d);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 1px solid rgba(192, 157, 255, .18);
}

.cc-cosmetics-card .card-cover:after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 7, 22, .05), rgba(11, 8, 30, .46));
  content: "";
}

.cc-cosmetics-card .card-top-actions {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 7px;
}

.cc-cosmetics-card .card-icon-btn {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  color: #fff !important;
  text-decoration: none !important;
  background: rgba(19, 15, 45, .76);
  border: 1px solid rgba(222, 211, 255, .24);
  border-radius: 50%;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .26);
  font: 800 15px/1 system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.cc-cosmetics-card .card-icon-btn:hover,
.cc-cosmetics-card .card-icon-btn:focus-visible {
  color: #fff !important;
  background: rgba(111, 76, 197, .94);
  border-color: rgba(255, 255, 255, .58);
  outline: none;
}

.cc-cosmetics-card .card-icon-btn.is-loading { cursor: wait; opacity: .72; }

.cc-cosmetics-card .card-icon-btn--friend { font-size: 19px; }
.cc-cosmetics-card .card-icon-btn--more { font-size: 15px; letter-spacing: 1px; }
.cc-cosmetics-card .card-menu { position: absolute; top: 52px; right: 10px; z-index: 12; min-width: 142px; padding: 6px; background: rgba(18, 14, 39, .98); border: 1px solid rgba(196, 170, 255, .32); border-radius: 10px; box-shadow: 0 14px 30px rgba(0, 0, 0, .38); backdrop-filter: blur(12px); }
.cc-cosmetics-card .card-menu[hidden] { display: none; }
.cc-cosmetics-card .card-menu a { display: block; padding: 9px 10px; color: #eee9fb !important; border-radius: 7px; font-size: 11px; text-decoration: none !important; }
.cc-cosmetics-card .card-menu a:hover, .cc-cosmetics-card .card-menu a:focus-visible { color: #fff !important; background: rgba(126, 97, 219, .45); outline: none; }

.cc-cosmetics-card .card-content {
  position: relative;
  z-index: 3;
  padding: 0 16px 16px;
  background: linear-gradient(180deg, rgba(23, 14, 60, .74), rgba(12, 10, 25, .94));
}

.cc-cosmetics-card .card-avatar {
  position: relative;
  z-index: 4;
  width: 88px;
  height: 88px;
  /* Align the cover bottom with the avatar's vertical midpoint. */
  margin: -44px auto 10px;
  padding: 3px;
  background: #141027;
  border: 3px solid rgba(177, 126, 255, .92);
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .38);
}

.cc-cosmetics-card .card-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cc-cosmetics-avatar-frame { position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; z-index: 2; background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; }
.cc-cosmetics-card .card-presence { position: absolute; right: 1px; bottom: 5px; z-index: 3; width: 17px; height: 17px; background: #7b8195; border: 4px solid #141027; border-radius: 50%; }
.cc-cosmetics-card .card-presence.is-online { background: #37d982; }

.cc-cosmetics-card .card-identity { margin-bottom: 12px; text-align: left; }
.cc-cosmetics-card .card-identity-username { display: block; overflow: hidden; color: #fff !important; font-size: 20px; font-weight: 800; line-height: 1.25; text-decoration: none !important; text-overflow: ellipsis; white-space: nowrap; }
.cc-cosmetics-card .card-identity-meta { display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.cc-cosmetics-card .card-identity-uid { color: #b8b2ce; font: normal 11px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; letter-spacing: 0 !important; }
.cc-cosmetics-card .card-status { display: inline-flex; align-items: center; gap: 5px; color: #c9c3da; font-size: 11px; }
.cc-cosmetics-card .card-status i { width: 7px; height: 7px; background: #7b8195; border-radius: 50%; }
.cc-cosmetics-card .card-status i.is-online { background: #37d982; box-shadow: 0 0 8px rgba(55, 217, 130, .65); }

.cc-cosmetics-card .card-identity-groups { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; margin-top: 8px; }
.cc-cosmetics-card .card-group-badge { padding: 4px 8px; color: #ded8ef; background: rgba(92, 70, 140, .3); border: 1px solid rgba(183, 155, 238, .22); border-radius: 999px; font-size: 10px; font-weight: 750; }
.cc-cosmetics-card .card-group-badge.is-super-admin,
.cc-cosmetics-card .card-group-badge.is-admin { color: #ffe39a; border-color: rgba(255, 197, 89, .38); }
.cc-cosmetics-card .card-group-badge.is-svip { color: #e4c1ff; border-color: rgba(205, 133, 255, .42); }
.cc-cosmetics-card .card-group-badge.is-vip { color: #7cf2ea; border-color: rgba(86, 227, 217, .4); }

.cc-cosmetics-card .card-about,
.cc-cosmetics-card .card-community { margin-top: 10px; padding: 11px 12px; color: #d8d3e4; background: rgba(31, 24, 54, .78); border: 1px solid rgba(178, 151, 226, .15); border-radius: 10px; }
.cc-cosmetics-card .card-about > strong,
.cc-cosmetics-card .card-community > strong { display: block; color: #f2effa; font-size: 11px; }
.cc-cosmetics-card .card-about p { display: -webkit-box; overflow: hidden; margin: 7px 0; color: #c3bdd1; font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cc-cosmetics-card .card-about a { color: #cbb7ff !important; font-size: 10px; text-decoration: none !important; }
.cc-cosmetics-card .card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.cc-cosmetics-card .card-stats span { padding: 7px 4px; color: #9790a9; text-align: center; background: rgba(9, 8, 20, .34); border-radius: 7px; font-size: 9px; }
.cc-cosmetics-card .card-stats b { display: block; margin-bottom: 2px; color: #fff; font-size: 13px; }

.cc-cosmetics-card .card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.cc-cosmetics-card .card-message { display: flex; align-items: center; gap: 7px; position: relative; margin-top: 12px; padding: 6px; background: rgba(54, 43, 80, .9); border: 1px solid rgba(183, 159, 224, .25); border-radius: 10px; }
.cc-cosmetics-card .card-message input { min-width: 0; flex: 1; padding: 8px 9px; color: #fff; background: transparent; border: 0; outline: none; font: 11px/1.2 inherit; }
.cc-cosmetics-card .card-message input::placeholder { color: #a9a1be; }
.cc-cosmetics-card .card-message button { flex: 0 0 auto; padding: 8px 12px; color: #fff; background: linear-gradient(110deg, #43d5e4, #7d69ef); border: 0; border-radius: 7px; font-size: 11px; font-weight: 800; cursor: pointer; }
.cc-cosmetics-card .card-message button:hover { filter: brightness(1.08); }
.cc-cosmetics-card .card-message button:disabled { cursor: wait; opacity: .65; }
.cc-cosmetics-card .card-message-status { position: absolute; right: 8px; bottom: -17px; color: #a9a1be; font-size: 9px; pointer-events: none; }
.cc-cosmetics-card .card-message--self { justify-content: center; color: #aaa1be; font-size: 10px; }
.cc-cosmetics-card .card-action-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 12px; color: #eae5f4 !important; text-decoration: none !important; background: rgba(50, 39, 77, .88); border: 1px solid rgba(183, 159, 224, .22); border-radius: 9px; font-size: 11px; font-weight: 750; cursor: pointer; }
.cc-cosmetics-card .card-action-btn--primary { color: #fff !important; background: linear-gradient(115deg, #7456e8, #4ecfe1); border-color: rgba(137, 236, 245, .48); }
.cc-cosmetics-card .card-action-btn:hover { filter: brightness(1.1); }

.ccCosmeticsCardEdge { position: absolute; inset: 0; z-index: 7; box-sizing: border-box; background: none !important; border: 12px solid transparent; border-image-slice: 18%; border-image-width: 14px; border-image-outset: 0; border-image-repeat: stretch; border-radius: 15px; opacity: .9; pointer-events: none; }
.ccCosmeticsEntranceFx { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 15px; pointer-events: none; opacity: var(--cc-cosmetic-intensity, .72); }

/* ============================================================================
   在线横幅组件 (OnlineBannerView)
   ============================================================================ */
.cc-cosmetics-online-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #1a1b1e;
  overflow: hidden;
}

/* 背景氛围层 (星雾/光点) */
.cc-cosmetics-online-banner .online-banner-bg-fx {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  opacity: 0.3;
  pointer-events: none;
}

.cc-cosmetics-online-row {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
}

.cc-cosmetics-online-row > :not(.online-banner-bg-fx) {
  position: relative;
  z-index: 1;
}

.cc-cosmetics-online-row .online-banner-bg-fx {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: var(--cc-cosmetic-intensity, .72);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}

.cc-cosmetics-avatar-host {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.cc-cosmetics-online-row .cc-cosmetics-avatar-frame,
.cc-cosmetics-profile-container .cc-cosmetics-avatar-frame {
  z-index: 3;
}

.cc-cosmetics-profile-container .ccProfileHandle {
  color: #8994a8 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  animation: none !important;
}

.cc-cosmetics-profile-container .ccProfileAddFriend.cc-profile-friend-adapted {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(100, 232, 239, .42);
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease, opacity .16s ease;
}
.cc-cosmetics-profile-container .ccProfileAddFriend.cc-profile-friend-adapted:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cc-cosmetics-profile-container .ccProfileAddFriend.cc-profile-friend-adapted[data-friend-status="friend"] { color: #092119 !important; background: linear-gradient(110deg, #55e1a5, #43c7d7) !important; }
.cc-cosmetics-profile-container .ccProfileAddFriend.cc-profile-friend-adapted[data-friend-status="outgoing"] { color: #241803 !important; background: linear-gradient(110deg, #ffd36a, #e99c45) !important; }
.cc-cosmetics-profile-container .ccProfileAddFriend.cc-profile-friend-adapted[data-friend-status="incoming"] { color: #071b24 !important; background: linear-gradient(110deg, #65e8ef, #7390ff) !important; }
.cc-cosmetics-profile-container .ccProfileAddFriend.cc-profile-friend-adapted.is-loading { cursor: wait; opacity: .72; transform: none; }
.cc-cosmetics-profile-container .ccProfileAddFriend.cc-profile-friend-adapted[aria-disabled="true"] { color: #aab3c2 !important; background: #263047 !important; border-color: rgba(147, 164, 192, .25); cursor: not-allowed; opacity: .7; transform: none; }

/* 真实内容层 */
.cc-cosmetics-online-banner .online-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* 真实头像 */
.cc-cosmetics-online-banner .online-banner-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.cc-cosmetics-online-banner .online-banner-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.cc-cosmetics-online-banner .online-banner-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #43b581;
  border: 2px solid #1a1b1e;
  border-radius: 50%;
}

/* 真实用户信息 */
.cc-cosmetics-online-banner .online-banner-info {
  flex: 1;
  min-width: 0;
}

.cc-cosmetics-online-banner .online-banner-username {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.15s;
}

.cc-cosmetics-online-banner .online-banner-username:hover {
  color: var(--cc-cosmetic-a, #55edf4);
}

.cc-cosmetics-online-banner .online-banner-groups {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.cc-cosmetics-online-banner .online-banner-group-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   用户主页组件 (UserProfileView)
   ============================================================================ */
.cc-cosmetics-profile {
  max-width: 800px;
  margin: 0 auto;
}

.cc-cosmetics-profile .profile-header {
  text-align: center;
  margin-bottom: 24px;
}

.cc-cosmetics-profile .profile-avatar {
  position: relative;
  width: 128px;
  height: 128px;
  margin: 0 auto;
}

.cc-cosmetics-profile .profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.cc-cosmetics-profile .profile-identity {
  text-align: center;
  margin-bottom: 20px;
}

.cc-cosmetics-profile .profile-identity-username {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

/* UID - 保持清晰可见 */
.cc-cosmetics-profile .profile-identity-uid {
  font-size: 14px;
  color: #b0b3b8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: normal;
}

.cc-cosmetics-profile .profile-identity-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.cc-cosmetics-profile .profile-group-badge {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
}

.cc-cosmetics-profile .profile-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}

.cc-cosmetics-profile .profile-action-btn {
  padding: 10px 24px;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.cc-cosmetics-profile .profile-action-btn--primary {
  background: var(--cc-cosmetic-a, #55edf4);
  border-color: var(--cc-cosmetic-a, #55edf4);
  color: #000000;
}

.cc-cosmetics-profile .profile-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.cc-cosmetics-profile .profile-bio,
.cc-cosmetics-profile .profile-stats,
.cc-cosmetics-profile .profile-cosmetics {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.cc-cosmetics-profile .profile-stats {
  display: flex;
  gap: 32px;
  justify-content: center;
}

.cc-cosmetics-profile .profile-stat {
  text-align: center;
}

.cc-cosmetics-profile .profile-stat-label {
  display: block;
  font-size: 12px;
  color: #b0b3b8;
  margin-bottom: 4px;
}

.cc-cosmetics-profile .profile-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}

/* ============================================================================
   装扮展示组件 (CosmeticsLoadoutView)
   ============================================================================ */
.cc-cosmetics-loadout {
  display: grid;
  gap: 12px;
}

.cc-cosmetics-loadout-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.cc-cosmetics-loadout-item-preview {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.cc-cosmetics-loadout-item-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cc-cosmetics-loadout-item-placeholder {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.3);
}

.cc-cosmetics-loadout-item-type {
  font-size: 11px;
  color: #b0b3b8;
  margin-bottom: 4px;
}

.cc-cosmetics-loadout-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.cc-cosmetics-loadout-btn {
  padding: 6px 16px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  cursor: pointer;
}

.cc-cosmetics-loadout-empty {
  text-align: center;
  padding: 32px;
  color: #b0b3b8;
}

.cc-cosmetics-loadout-link {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 20px;
  background: var(--cc-cosmetic-a, #55edf4);
  color: #000000;
  text-decoration: none;
  border-radius: 6px;
}

/* ============================================================================
   响应式和 prefers-reduced-motion
   ============================================================================ */
@media (max-width: 640px) {
  .cc-cosmetics-card {
    width: 100%;
    max-width: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ccCosmeticsEntranceFx,
  .online-banner-bg-fx {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   Procedural roseveil pack
   The reference GIFs are decomposed into independent CSS layers. No flattened
   screenshot/GIF is mounted over a user, avatar or card.
   ============================================================================ */
/* --- 在线横幅: 星夜雾背景 (SVG 内含月牙/星云漂移/星点闪烁的 SMIL 动画)。
   叠加 CSS 雾光漂移增强层次；不使用整图覆盖头像/用户名。--- */
.cc-cosmetics-online-row .online-banner-bg-fx[data-cc-theme="roseveil"],
.cc-cosmetics-online-banner .online-banner-bg-fx[data-cc-theme="roseveil"] {
  background: url("/styles/ciphercn/cosmetics/roseveil-cover.svg") center/cover no-repeat;
  opacity: 1;
}
.cc-cosmetics-online-row .online-banner-bg-fx[data-cc-theme="roseveil"]:before,
.cc-cosmetics-online-banner .online-banner-bg-fx[data-cc-theme="roseveil"]:before {
  position: absolute; inset: -12%; content: "";
  background: radial-gradient(ellipse at 24% 60%, rgba(214, 190, 255, .28), transparent 42%), radial-gradient(ellipse at 74% 34%, rgba(255, 244, 222, .22), transparent 40%);
  animation: ccRoseveilCloud 7s ease-in-out infinite alternate; mix-blend-mode: screen;
}
/* 左侧渐隐, 保证真实头像/用户名可读 */
.cc-cosmetics-online-row .online-banner-bg-fx[data-cc-theme="roseveil"]:after,
.cc-cosmetics-online-banner .online-banner-bg-fx[data-cc-theme="roseveil"]:after {
  position: absolute; inset: 0; content: "";
  background: linear-gradient(90deg, rgba(24, 22, 40, .88) 0%, rgba(24, 22, 40, .42) 34%, transparent 62%);
}

/* --- 头像框: 静态玫瑰花环 (星点闪烁由 SVG SMIL 提供)，只保留柔和辉光呼吸，不旋转 --- */
.cc-cosmetics-avatar-frame[data-cc-theme="roseveil"] {
  background: url("/styles/ciphercn/cosmetics/roseveil-avatar.svg") center/contain no-repeat !important;
  top: -18px; right: -18px; bottom: -18px; left: -18px;
  border: 0 !important; border-radius: 0; padding: 0; box-shadow: none;
  filter: drop-shadow(0 0 7px rgba(248, 234, 255, .9));
  animation: ccRoseveilBreathe 3.6s ease-in-out infinite alternate;
}
.cc-cosmetics-avatar-frame[data-cc-theme="roseveil"]:before,
.cc-cosmetics-avatar-frame[data-cc-theme="roseveil"]:after { display: none; content: none; }

/* --- 名片边框: 上下两条玫瑰藤蔓横带 (SVG 内星点闪烁)，中心透明，辉光呼吸 --- */
.cc-cosmetics-card--roseveil-edge { overflow: visible !important; }
.ccCosmeticsCardEdge[data-cc-theme="roseveil"] {
  inset: -24px -22px !important; border: 0 !important; border-image: none !important;
  background: url("/styles/ciphercn/cosmetics/roseveil-edge.svg") center/100% 100% no-repeat !important;
  border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 0 9px rgba(240, 222, 255, .6));
  animation: ccRoseveilBreathe 4.4s ease-in-out infinite alternate;
}
.ccCosmeticsCardEdge[data-cc-theme="roseveil"]:before,
.ccCosmeticsCardEdge[data-cc-theme="roseveil"]:after { display: none; content: none; }

/* --- 名片内部特效: 淡紫雾光缓慢漂移 + 微星闪，不遮挡内容 --- */
.ccCosmeticsEntranceFx[data-cc-theme="roseveil"] { background: none !important; opacity: .8; }
.ccCosmeticsEntranceFx[data-cc-theme="roseveil"]:before {
  position: absolute; inset: -25%; content: "";
  background: radial-gradient(ellipse at 22% 62%, rgba(226, 204, 255, .3), transparent 30%), radial-gradient(ellipse at 78% 30%, rgba(190, 158, 250, .24), transparent 32%), radial-gradient(ellipse at 52% 86%, rgba(255, 246, 228, .18), transparent 28%);
  animation: ccRoseveilCloud 5.6s ease-in-out infinite alternate; mix-blend-mode: screen;
}
.ccCosmeticsEntranceFx[data-cc-theme="roseveil"]:after {
  position: absolute; inset: 0; content: "";
  background: radial-gradient(circle at 16% 22%, #fff 0 1px, transparent 2.2px), radial-gradient(circle at 44% 74%, #f4e6ff 0 1px, transparent 2.2px), radial-gradient(circle at 84% 30%, #fff 0 1px, transparent 2.2px), radial-gradient(circle at 66% 56%, #fdf3ff 0 1px, transparent 2px);
  animation: ccRoseveilTwinkle 2.2s ease-in-out infinite alternate; opacity: .85;
}
@keyframes ccRoseveilBreathe { from { filter: drop-shadow(0 0 5px rgba(240, 222, 255, .45)) brightness(.97); } to { filter: drop-shadow(0 0 12px rgba(248, 236, 255, .85)) brightness(1.06); } }
@keyframes ccRoseveilTwinkle { from { opacity: .3; transform: scale(.985); } to { opacity: 1; transform: scale(1.02); } }
@keyframes ccRoseveilCloud { from { transform: translate3d(-3%, 2%, 0) scale(.96); opacity: .55; } to { transform: translate3d(3%, -2%, 0) scale(1.05); opacity: .95; } }