/* 签到金币 + 装扮商城：签到卡 / 商品网格 / 头像框 / 聊天气泡皮肤 / 动态卡片框。
   款式即样式：[data-frame] 头像框画在头像元素上（box-shadow 描边环），
   dm-bubble--* 气泡皮肤、mo-card--* 卡片框与实际佩戴共用同一套类名。 */

/* ---------- 导航金币徽章 ---------- */
.coin-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--accent-deep, var(--accent));
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff);
  text-decoration: none; white-space: nowrap;
  transition: background .15s;
}
.coin-chip:hover { background: color-mix(in srgb, var(--accent) 22%, #fff); }

/* ---------- 签到卡 ---------- */
.ck-card {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 22px;
}
.ck-side { min-width: 150px; }
.ck-label { font-size: 12.5px; color: var(--muted); }
.ck-coins {
  font-size: 28px; font-weight: 800; color: var(--accent-deep, var(--accent));
  font-family: var(--serif); line-height: 1.3;
}
.ck-streak { font-size: 12.5px; color: var(--muted); }
.ck-main { flex: 1; min-width: 220px; }
.ck-hint { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.ck-done { font-size: 15px; font-weight: 700; color: var(--accent-deep, var(--accent)); margin-bottom: 6px; }
.ck-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 34px; border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: .2em; color: #fff;
  background: var(--accent, #db580f);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform .15s, box-shadow .15s;
}
.ck-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 50%, transparent); }
.ck-btn:disabled { opacity: .55; cursor: default; }

/* ---------- 装扮商品网格 ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.shop-card {
  position: relative;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.shop-pv {
  display: grid; place-items: center;
  min-height: 118px; padding: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, #fff), #fff);
  border-bottom: 1px solid var(--rule);
}
.shop-pv-av {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 20px; font-weight: 700;
  border: 2px solid #fff;
}
/* 预览以自己为例：头像框 = 自己的头像 + 昵称 */
.shop-pv-frame {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.shop-pv-name {
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--muted);
}
/* 气泡 = 自己发的一条消息（右侧自己气泡 + 自己的头像） */
.shop-pv-msg { max-width: 100%; }
.shop-pv-msg .dm-msg-av {
  width: 30px; height: 30px; font-size: 12px; border-radius: 6px;
}
.shop-pv-bubble {
  max-width: 180px; font-family: var(--kai); font-size: 13px;
}
/* 卡片框 = 自己发的一条动态（迷你 mo-card，结构与真实卡片一致） */
.shop-pv-card {
  width: 100%; max-width: 200px;
  padding: 10px 12px; font-size: 12.5px; font-weight: 600;
}
.shop-pv-card .mo-head { gap: 8px; }
.shop-pv-card .mo-avatar { width: 26px; height: 26px; font-size: 11px; border-width: 1px; }
.shop-pv-card .mo-name { font-size: 12px; }
.shop-pv-card .mo-time { font-size: 10px; }
.shop-pv-text {
  margin: 2px 0 0;
  font-family: var(--kai); font-size: 11.5px; color: var(--ink);
}
.shop-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.shop-info b { font-size: 15px; }
.shop-info p { margin: 0; font-size: 12.5px; color: var(--muted); min-height: 2.6em; }
.shop-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: auto; padding-top: 8px;
}
.shop-price {
  font-size: 14px; font-weight: 800; color: var(--accent-deep, var(--accent));
  font-family: var(--serif);
}
.shop-btn {
  appearance: none; cursor: pointer;
  display: inline-block;
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #fff;
  background: var(--accent, #db580f); border: 1px solid transparent;
  text-decoration: none;
  transition: opacity .15s;
}
.shop-btn:disabled { opacity: .5; cursor: default; }
.shop-acts { display: flex; align-items: center; gap: 6px; }
.shop-btn--ghost {
  color: var(--accent-deep, var(--accent));
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  border-color: color-mix(in srgb, var(--accent) 35%, #fff);
}
.shop-wearing {
  position: absolute; top: 10px; right: 10px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: var(--accent, #db580f);
}
body.page-shop main { position: relative; z-index: 1; margin-top: -30px; }
body.page-shop .site-head {
  background: rgba(255, 255, 255, var(--nav-opacity));
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* 管理表单里的款式预览块 */
.dc-preview {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  background: var(--paper-3);
  border: 1px dashed var(--rule);
  border-radius: 10px;
}
.dc-preview .tip { margin: 0; }

/* ---------- 试穿预览横幅（?try=kind:style 时浮动在页面底部） ---------- */
.try-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 999px;
  background: #23262e; color: #fff;
  font-size: 13px; line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.try-bar-buy {
  flex: none;
  padding: 4px 14px; border-radius: 999px;
  background: var(--accent, #db580f); color: #fff;
  font-weight: 700; text-decoration: none;
}
.try-bar button {
  flex: none;
  appearance: none; cursor: pointer;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: transparent; color: #fff; font-size: 12.5px;
}
.try-bar button:hover { background: rgba(255, 255, 255, .12); }

/* ---------- 头像框（[data-frame] + box-shadow 描边环，img / 兜底 span 通用） ---------- */
img[data-frame="gold"], span[data-frame="gold"] {
  box-shadow:
    0 0 0 2px var(--paper, #fff),
    0 0 0 4px #e8b64c,
    0 2px 8px rgba(232, 182, 76, .45);
}
img[data-frame="aurora"], span[data-frame="aurora"] {
  box-shadow:
    0 0 0 2px var(--paper, #fff),
    0 0 0 4px #35d6c3,
    0 0 12px 4px rgba(130, 90, 255, .5);
}
img[data-frame="sakura"], span[data-frame="sakura"] {
  box-shadow:
    0 0 0 2px var(--paper, #fff),
    0 0 0 4px #f5a3c7,
    0 0 10px 3px rgba(245, 163, 199, .5);
}
img[data-frame="galaxy"], span[data-frame="galaxy"] {
  box-shadow:
    0 0 0 2px var(--paper, #fff),
    0 0 0 4px #5b6cff,
    0 0 14px 4px rgba(91, 108, 255, .55);
}

/* ---------- 聊天气泡皮肤（dm-bubble--*，自己/对方消息都按佩戴者上色） ----------
   两组选择器：带 .dm-msg 前缀的压过 dm.css 的 .dm-msg.mine .dm-bubble 底色，
   不带前缀的给商城预览用。 */
.dm-bubble.dm-bubble--cream,
.dm-msg .dm-bubble.dm-bubble--cream {
  background: #fff6dd; border-color: #f2ddb0; color: #7a5c2e;
}
.dm-bubble.dm-bubble--cream::before,
.dm-msg .dm-bubble.dm-bubble--cream::before { border-right-color: #fff6dd; }
.dm-msg.mine .dm-bubble.dm-bubble--cream::before {
  border-right-color: transparent; border-left-color: #fff6dd;
}

.dm-bubble.dm-bubble--mint,
.dm-msg .dm-bubble.dm-bubble--mint {
  background: #e2f7ee; border-color: #a8ddc6; color: #2c6e54;
}
.dm-bubble.dm-bubble--mint::before,
.dm-msg .dm-bubble.dm-bubble--mint::before { border-right-color: #e2f7ee; }
.dm-msg.mine .dm-bubble.dm-bubble--mint::before {
  border-right-color: transparent; border-left-color: #e2f7ee;
}

.dm-bubble.dm-bubble--soda,
.dm-msg .dm-bubble.dm-bubble--soda {
  background: #ffe8d6; border-color: #f5c39a; color: #b45a2b;
}
.dm-bubble.dm-bubble--soda::before,
.dm-msg .dm-bubble.dm-bubble--soda::before { border-right-color: #ffe8d6; }
.dm-msg.mine .dm-bubble.dm-bubble--soda::before {
  border-right-color: transparent; border-left-color: #ffe8d6;
}

.dm-bubble.dm-bubble--starry,
.dm-msg .dm-bubble.dm-bubble--starry {
  background: linear-gradient(135deg, #2b3a67, #4a5b9e);
  border-color: #3a4b8c; color: #eef1ff;
}
.dm-bubble.dm-bubble--starry::before,
.dm-msg .dm-bubble.dm-bubble--starry::before { border-right-color: #3d4f8f; }
.dm-msg.mine .dm-bubble.dm-bubble--starry::before {
  border-right-color: transparent; border-left-color: #3d4f8f;
}

/* ---------- 动态卡片框（mo-card--*） ----------
   装饰重点在卡头横幅（头像 + 昵称 + 时间那一条）：皮肤把卡头铺成主题横幅，
   出血到卡片圆角边缘；整卡保留淡淡底纹呼应，正文可读性不受影响。 */
.mo-card.mo-card--cream {
  background: linear-gradient(180deg, #fffdf5, #fdf4de);
  border-color: #ecd9ae;
}
.mo-card.mo-card--film {
  border: 3px solid #2c313a; border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 5px #f0e6ca, 0 10px 26px rgba(30, 35, 50, .18);
}
.mo-card.mo-card--galaxy {
  background:
    radial-gradient(circle at 12% 18%, rgba(91, 108, 255, .14) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 30%, rgba(91, 108, 255, .12) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 78%, rgba(91, 108, 255, .1) 0 2px, transparent 3px),
    linear-gradient(180deg, #f6f8ff, #e9edff);
  border: 2px solid #7c89d9;
  box-shadow: 0 6px 22px rgba(90, 105, 220, .22);
}
.mo-card.mo-card--candy {
  background: repeating-linear-gradient(45deg, #fff 0 12px, #ffeef4 12px 24px);
  border-color: #f7a8c4;
}

/* 卡头横幅出血：按所在容器的内边距对齐（动态流卡片 / 详情页 / 移动端 / 商城预览） */
.mo-card:is(.mo-card--cream, .mo-card--film, .mo-card--galaxy, .mo-card--candy) > .mo-head {
  position: relative;
  margin: -16px -18px 14px;
  padding: 12px 18px;
  border-radius: 13px 13px 0 0;
}
.mo-detail:is(.mo-card--cream, .mo-card--film, .mo-card--galaxy, .mo-card--candy) > .mo-head {
  margin: -20px -22px 16px;
  padding: 14px 22px;
}
@media (max-width: 640px) {
  .mo-card:is(.mo-card--cream, .mo-card--film, .mo-card--galaxy, .mo-card--candy) > .mo-head {
    margin: -14px -14px 12px;
    padding: 11px 14px;
    border-radius: 11px 11px 0 0;
  }
  .mo-detail:is(.mo-card--cream, .mo-card--film, .mo-card--galaxy, .mo-card--candy) > .mo-head {
    margin: -16px -15px 13px;
    padding: 12px 15px;
  }
}

/* 卡头横幅视觉：奶油纸 / 胶片 / 星河 / 糖果 */
.mo-card.mo-card--cream > .mo-head {
  background: linear-gradient(180deg, #fdf4de, #fff8e8);
  border-bottom: 1px solid #ecd9ae;
}
.mo-card.mo-card--film > .mo-head {
  background: #2c313a;
  border-bottom: 2px solid #f0e6ca;
  border-radius: 6px 6px 0 0;
}
.mo-card.mo-card--film .mo-name { color: #fff; }
.mo-card.mo-card--film .mo-time { color: #c9cdd6; }
.mo-card.mo-card--film .mq-caret { color: #fff; }
.mo-card.mo-card--galaxy > .mo-head {
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 255, 255, .35) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 62% 70%, rgba(255, 255, 255, .28) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 85% 25%, rgba(255, 255, 255, .3) 0 1.5px, transparent 2.5px),
    linear-gradient(120deg, #3b4380, #5b6cff);
}
.mo-card.mo-card--galaxy .mo-name { color: #fff; }
.mo-card.mo-card--galaxy .mo-time { color: #dfe4ff; }
.mo-card.mo-card--galaxy .mq-caret { color: #fff; }
.mo-card.mo-card--candy > .mo-head {
  background: repeating-linear-gradient(45deg, #ffeef4 0 10px, #fff5d9 10px 20px);
  border-bottom: 1px solid #f7a8c4;
}

/* 商城/管理页的小预览：内边距更小，横幅出血同步收紧（放最后压过通用出血规则） */
.shop-pv-card.mo-card:is(.mo-card--cream, .mo-card--film, .mo-card--galaxy, .mo-card--candy) > .mo-head {
  margin: -10px -12px 8px;
  padding: 8px 12px;
  border-radius: 9px 9px 0 0;
}
.shop-pv-card.mo-card.mo-card--film > .mo-head { border-radius: 5px 5px 0 0; }