/* ============================================================================
   B2 ThePlate Skin —— 皮肤覆盖样式
   套用 ThePlate 设计系统到 B2 PRO 的真实 DOM / 类名。
   加载顺序由 functions.php 保证排在父主题所有前台 CSS 之后。
   只改外观，不改功能。深色模式复用 B2 自带的 html.b2dark 类。

   想换主色：改下面 --tp-accent / --tp-secondary 两个值即可（全站联动）。
   ============================================================================ */

/* ---------- 设计 Token（浅色，默认） ---------- */
:root{
  --tp-accent:#6B5EE8;
  --tp-accent-hover:#8272EF;
  --tp-accent-light:rgba(107,94,232,.13);
  --tp-secondary:#22D3EE;

  --tp-bg:#F3F5FF;
  --tp-surface:#FFFFFF;
  --tp-elevated:#FAFBFF;
  --tp-hover:#EEF1FF;
  --tp-border:#E3E7F5;
  --tp-border-hi:#C6CEE8;

  --tp-text:#0C1130;
  --tp-sub:#4A5280;
  --tp-muted:#9BA3CA;

  --tp-radius:12px;
  --tp-radius-sm:8px;
  --tp-shadow:0 8px 32px rgba(12,17,48,.08);
  --tp-shadow-hi:0 12px 40px rgba(12,17,48,.14);

  --tp-rose:#FB7185;
  --tp-amber:#F59E0B;
  --tp-emerald:#10B981;

  /* —— 接管 B2 自带变量：让父主题原生的 var(--b2color)/var(--b2radius) 规则
        自动跟随 ThePlate 配色与圆角（这是覆盖面最广、最安全的一招） —— */
  --b2color:var(--tp-accent);
  --b2radius:var(--tp-radius);
  --b2light:rgba(107,94,232,.04);
  --b2lightcolor:rgba(107,94,232,.18);
}

/* ---------- 深色（复用 B2 自带 html.b2dark） ---------- */
html.b2dark{
  --tp-bg:#07091A;
  --tp-surface:#0E1124;
  --tp-elevated:#151830;
  --tp-hover:#1C2042;
  --tp-border:#1D2244;
  --tp-border-hi:#2C3368;

  --tp-text:#DCE2FF;
  --tp-sub:#6472B0;
  --tp-muted:#384070;

  --tp-shadow:0 8px 32px rgba(0,0,0,.5);
  --tp-shadow-hi:0 12px 40px rgba(0,0,0,.6);

  --b2light:rgba(107,94,232,.10);
  --b2lightcolor:rgba(107,94,232,.28);
}

/* ============================================================================
   1. 全局：底色 / 文字 / 字体
   ============================================================================ */
body{
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei UI",system-ui,sans-serif !important;
  background:var(--tp-bg) !important;
  color:var(--tp-text);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
a:hover{ color:var(--tp-accent); }
::selection{ background:rgba(107,94,232,.28); }

/* B2 圆角工具类统一到 ThePlate 圆角 */
.b2-radius,
.b2-radius img{ border-radius:var(--tp-radius) !important; }

/* ============================================================================
   2. 顶部导航 .header / .site-header-in
   ============================================================================ */
.header,
.site-header-in{
  background:color-mix(in srgb, var(--tp-surface) 88%, transparent) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid var(--tp-border);
}
/* 顶部菜单项 hover / 当前态 */
.top-menu a,
.b2-menu a{ color:var(--tp-sub); border-radius:var(--tp-radius-sm); transition:.15s; }
.top-menu a:hover,
.b2-menu a:hover{ color:var(--tp-accent); background:var(--tp-accent-light); }
.top-menu .current-menu-item > a,
.top-menu .current_page_item > a{ color:var(--tp-accent); }

/* 顶部搜索框 / 登录按钮容器 */
.header .login-button button{
  background:var(--tp-accent-light) !important;
  color:var(--tp-accent) !important;
  border-radius:var(--tp-radius-sm);
}

/* ============================================================================
   3. 卡片 / 容器面板 .box .widget .b2-widget-box .modal-content .gujia
   ============================================================================ */
.box,
.widget,
.b2-widget-box,
.modal-content,
.gujia,
.pay-box-content,
.content-show-roles,
.b2-single-content{
  background:var(--tp-surface) !important;
  border:1px solid var(--tp-border) !important;
  border-radius:var(--tp-radius) !important;
  box-shadow:var(--tp-shadow) !important;
}
/* 悬浮态：抬升 + 高亮边框（仅可点的卡） */
.box:hover,
.b2-widget-products .box:hover{
  border-color:var(--tp-border-hi) !important;
  box-shadow:var(--tp-shadow-hi) !important;
}

/* 小工具标题 */
.widget-title,
.b2-widget-box-title{ color:var(--tp-text); }

/* ============================================================================
   4. 按钮 .button / button（父主题以行内样式上色，这里用 !important 接管）
   ============================================================================ */
.button,
button,
input[type="submit"]{
  background:var(--tp-accent) !important;
  border:1px solid var(--tp-accent) !important;
  border-radius:var(--tp-radius-sm) !important;
  color:#fff;
  font-weight:500;
  transition:background .15s, box-shadow .15s, transform .12s;
}
.button:hover,
button:hover,
input[type="submit"]:hover{
  background:var(--tp-accent-hover) !important;
  border-color:var(--tp-accent-hover) !important;
}
.button:active,
button:active{ transform:translateY(1px); }

/* 次级 / 幽灵按钮（B2 常用 .empty / .none 风格保持透明） */
.button.empty,
button.empty,
.header .login-button button.empty{
  background:transparent !important;
  color:var(--tp-accent) !important;
  border:1.5px solid var(--tp-border-hi) !important;
}
.button.empty:hover,
button.empty:hover{ border-color:var(--tp-accent) !important; }

/* ============================================================================
   5. 表单 input / textarea / select
   ============================================================================ */
input,
textarea,
select,
.login-form-item input{
  background:var(--tp-elevated) !important;
  border:1px solid var(--tp-border) !important;
  border-radius:var(--tp-radius-sm) !important;
  color:var(--tp-text) !important;
}
input::placeholder,
textarea::placeholder{ color:var(--tp-muted); }
input:focus,
textarea:focus,
select:focus{
  border-color:var(--tp-accent) !important;
  box-shadow:0 0 0 3px var(--tp-accent-light);
  outline:none;
}

/* ============================================================================
   6. 资源 / 商城卡片  .shop-normal-item-in / .shop-title / 价格
   ============================================================================ */
.shop-normal-item-in{
  background:var(--tp-surface) !important;
  border:1px solid var(--tp-border) !important;
  border-radius:var(--tp-radius) !important;
  box-shadow:var(--tp-shadow);
  transition:border-color .15s, box-shadow .15s, transform .2s;
}
.shop-normal-item-in:hover{
  border-color:var(--tp-border-hi) !important;
  box-shadow:var(--tp-shadow-hi);
  transform:translateY(-3px);
}
.shop-title a{ color:var(--tp-text); font-weight:600; }
.shop-title a:hover{ color:var(--tp-accent); }

/* 价格：当前价 / 会员价 用强调色，划线价用 muted */
.shop-item-normal-price,
.shop-item-picked,
.shop-item-u-price.shop-item-picked b,
.shop-single-price .price{ color:var(--tp-accent) !important; }
.shop-item-delete,
.shop-item-d-price{ color:var(--tp-muted) !important; }

/* 库存 / 已售 / 人气 行 */
.shop-normal-item-count{ color:var(--tp-muted); }
.shop-normal-item-count b{ color:var(--tp-sub); }

/* 单品详情购买区块 */
.shop-single-data,
.shop-buy-box,
.post-pay-type,
.post-carts-list-row{
  background:var(--tp-surface) !important;
  border:1px solid var(--tp-border) !important;
  border-radius:var(--tp-radius) !important;
}
/* 选中的付费档（B2 用 .picked 标记当前选择） */
.post-pay-type .picked,
.cpay-tab .picked,
.pay-type .picked{
  border-color:var(--tp-accent) !important;
  background:var(--tp-accent-light) !important;
  color:var(--tp-accent) !important;
}

/* ============================================================================
   7. 文章流 / 列表  .post-meta / .entry-content / .news-item-date
   ============================================================================ */
.post-meta,
.post-info{ color:var(--tp-muted); }
.entry-content{ color:var(--tp-text); }
.entry-content a{ color:var(--tp-accent); }

/* B2 文章日期角标（父主题硬编码了品牌蓝边框/底色，这里改掉） */
.news-item-date{ border:1px solid var(--tp-accent) !important; }
.news-item-date p span:last-child{ background:var(--tp-accent) !important; }

/* 标签 / 徽章 */
.tag,
.b2-tag,
.stamp{ border-radius:100px; }

/* 头像统一圆形 + 细边 */
.avatar{ border-radius:50%; }

/* ============================================================================
   8. 分页 / 加载更多 / 选项卡
   ============================================================================ */
.ajax-pager,
.ajax-pager a{
  border-radius:var(--tp-radius-sm);
  border-color:var(--tp-border) !important;
  color:var(--tp-sub);
}
.ajax-pager a:hover,
.ajax-pager .current{
  background:var(--tp-accent) !important;
  border-color:var(--tp-accent) !important;
  color:#fff !important;
}
/* 选中态文字/图标统一强调色 */
.picked,
.text.picked,
.d-weight button.picked.text,
.comment-type button.picked i{ color:var(--tp-accent) !important; }

/* ============================================================================
   9. 幻灯片箭头 / 滚动条等细节
   ============================================================================ */
.flickity-prev-next-button{
  background:var(--tp-surface) !important;
  border:1px solid var(--tp-border) !important;
  box-shadow:var(--tp-shadow);
}
.flickity-prev-next-button .flickity-button-icon{ fill:var(--tp-sub); }

/* ============================================================================
   10. 页脚 .site-footer
   ============================================================================ */
.site-footer{
  background:#13182B !important;
  border-top:1px solid rgba(255,255,255,.06);
  color:#aab2c4;
}
.site-footer a{ color:#aab2c4; }
.site-footer a:hover{ color:var(--tp-accent); }
.site-footer h3,
.site-footer .footer-title{ color:#fff; }

/* ============================================================================
   11. 弹窗 / 浮层（登录框、消息等）
   ============================================================================ */
.modal-content{ box-shadow:0 24px 60px rgba(12,17,48,.22) !important; }
.qmsg{ border-radius:var(--tp-radius-sm) !important; }

/* ============================================================================
   12. 杂项收尾：强调色链接、引用块、代码块
   ============================================================================ */
blockquote{
  border-left:3px solid var(--tp-accent);
  background:var(--tp-elevated);
  border-radius:var(--tp-radius-sm);
}
.entry-content pre,
.entry-content code{
  background:var(--tp-elevated);
  border:1px solid var(--tp-border);
  border-radius:var(--tp-radius-sm);
}