/* =============================================================================
 * 墨趣文具 · 前台亮色主题（Sunny Stationery）
 * -----------------------------------------------------------------------------
 * 作用域：仅 .xph-front（前台 body 上由 layout.html 注入）。
 * 后台 admin / 商家 merchant 不引入本文件、无此 class，视觉完全不受影响。
 *
 * 原则：只重写取值，不改任何类名与结构（与 style.css 顶部契约一致）。
 *       先重写设计令牌，再用 .xph-front 前缀覆盖 style.css / home.css /
 *       member.css / terms.css 中的硬编码深色规则。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. 亮色设计令牌（前台全部后代自动继承）
 * ------------------------------------------------------------------------ */
.xph-front {
  color-scheme: light;

  /* 底色层：暖纸白 → 浅蓝灰 */
  --bg-deep:  #ffffff;
  --bg:       #FFFDF8;
  --bg-soft:  #F4F7FB;
  --card:     #FFFFFF;
  --card-hi:  #FFFFFF;

  /* 玻璃面板（亮底上用半透明白） */
  --glass:    rgba(255, 255, 255, .72);
  --glass-hi: rgba(255, 255, 255, .92);

  /* 描边 */
  --border:    #ECECF1;
  --border-hi: rgba(255, 107, 74, .55);

  /* 文字 */
  --text:   #1F2430;
  --text-2: #4B5563;
  --muted:  #8A93A3;

  /* 主题色：暖珊瑚 / 晴空蓝 / 阳光琥珀 */
  --primary:      #FF6B4A;
  --primary-dark: #E2553A;
  --primary-2:    #3DA5FF;
  --accent:       #FFB020;
  --accent-dark:  #E09000;
  --ok:           #18A957;
  --err:          #E5484D;
  --warn:         #E58A00;

  /* 渐变 */
  --grad-primary: linear-gradient(135deg, #FF6B4A 0%, #FF9A3D 52%, #FFB020 100%);
  --grad-accent:  linear-gradient(135deg, #3DA5FF 0%, #36C5A0 100%);
  --grad-surface: linear-gradient(160deg, rgba(255,107,74,.08) 0%, rgba(61,165,255,.05) 46%, rgba(255,255,255,0) 100%);

  /* 圆角（更亲和） */
  --radius-sm: 12px;
  --radius:    16px;
  --radius-lg: 22px;

  /* 阴影（轻落、柔） */
  --shadow:       0 12px 34px rgba(31, 36, 48, .10);
  --shadow-soft:  0 4px 18px rgba(31, 36, 48, .08);
  --glow:         0 0 26px rgba(255, 107, 74, .30);
  --glow-soft:    0 0 40px rgba(255, 107, 74, .14);
  --glow-accent:  0 0 26px rgba(255, 176, 32, .28);
}

/* ---------------------------------------------------------------------------
 * 2. 页面底色与暖色光斑（替换暗色网格）
 * ------------------------------------------------------------------------ */
body.xph-front {
  color: var(--text);
  background-color: var(--bg);
}
body.xph-front::before {
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(255, 107, 74, .10), transparent 60%),
    radial-gradient(820px 520px at 90% 0%, rgba(61, 165, 255, .10), transparent 62%),
    radial-gradient(760px 520px at 50% 112%, rgba(255, 176, 32, .08), transparent 66%);
  background-size: auto;
}

/* 滚动条（亮） */
.xph-front ::-webkit-scrollbar-track { background: #EEF1F6; }
.xph-front ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 107, 74, .5), rgba(61, 165, 255, .5));
  border: 2px solid #EEF1F6;
}
.xph-front ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #FF6B4A, #3DA5FF); }
.xph-front ::selection { background: rgba(255, 107, 74, .22); color: #1F2430; }

/* ---------------------------------------------------------------------------
 * 3. 顶栏 / 页脚（白底 + 柔阴影 + 暖色描边）
 * ------------------------------------------------------------------------ */
.xph-front .topbar {
  background: rgba(255, 253, 248, .82);
  border-bottom: 1px solid var(--border);
}
.xph-front .topbar::after {
  background: linear-gradient(90deg, transparent, rgba(255, 107, 74, .7), rgba(61, 165, 255, .7), transparent);
  opacity: .6;
}
.xph-front .logo {
  background: linear-gradient(96deg, #FF6B4A 0%, #FF9A3D 60%, #FFB020 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #FF6B4A;
}
.xph-front .logo small { -webkit-text-fill-color: var(--muted); color: var(--muted); }

.xph-front .site-footer {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
  border-top: 1px solid var(--border);
}
.xph-front .site-footer::before {
  background: linear-gradient(90deg, transparent, rgba(255, 107, 74, .5), rgba(61, 165, 255, .45), transparent);
}

/* 粘性页脚：内容高度不足时，页脚始终固定在浏览器窗口底部 */
.xph-front {
  display: flex;
  flex-direction: column;
}
.xph-front > .container {
  flex: 1 0 auto;
  width: 100%;
}

/* ---------------------------------------------------------------------------
 * 4. 卡片 / 玻璃面（统一白底）
 * ------------------------------------------------------------------------ */
.xph-front .card,
.xph-front .product,
.xph-front .glass,
.xph-front .stat,
.xph-front .reco-card,
.xph-front .feature,
.xph-front .cat-card,
.xph-front .address-card,
.xph-front .terms-doc,
.xph-front .card-item,
.xph-front .pay-channel,
.xph-front .jump-box,
.xph-front .detail,
.xph-front .member-sidebar {
  background: #FFFFFF;
  border-color: var(--border);
}

/* ---------------------------------------------------------------------------
 * 5. 商品卡 / 详情图集（浅底突出真实商品图）
 * ------------------------------------------------------------------------ */
.xph-front .product .cover { background-color: #F2F4F8; }
.xph-front .product .cover::after { background: linear-gradient(180deg, transparent, rgba(31, 36, 48, .05)); }
.xph-front .product .cover-ph::after { color: rgba(31, 36, 48, .28); }

.xph-front .detail .gallery {
  background: radial-gradient(circle at 50% 40%, rgba(61, 165, 255, .06), transparent 68%), #F4F7FB;
  border-color: var(--border);
}
.xph-front .detail-thumbs .th { background-color: #F2F4F8; border-color: var(--border); }
.xph-front .detail-thumbs .th.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(255, 107, 74, .5), 0 0 18px rgba(255, 107, 74, .22);
}

.xph-front .reco-card .thumb { background-color: #F2F4F8; border-color: var(--border); }
.xph-front .reco-card .thumb-ph::before { color: rgba(31, 36, 48, .26); }

/* ---------------------------------------------------------------------------
 * 6. 表单（亮底）
 * ------------------------------------------------------------------------ */
.xph-front input[type=text],
.xph-front input[type=password],
.xph-front input[type=number],
.xph-front input[type=email],
.xph-front input[type=tel],
.xph-front input[type=search],
.xph-front input[type=date],
.xph-front input[type=url],
.xph-front select,
.xph-front textarea {
  background: #FFFFFF;
  border-color: var(--border);
  color: var(--text);
}
.xph-front input:hover, .xph-front select:hover, .xph-front textarea:hover { border-color: rgba(31, 36, 48, .28); }
.xph-front input:focus, .xph-front select:focus, .xph-front textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255, 107, 74, .14), var(--glow-soft);
}
.xph-front select option { background: #FFFFFF; color: var(--text); }
.xph-front input::placeholder, .xph-front textarea::placeholder { color: #97A0AE; }

/* 首页商品墙搜索条：home.css 用 .goods-search input 覆盖，需要更高 specificity */
.xph-front .goods-search select,
.xph-front .goods-search input[type="text"] {
  background: #FFFFFF;
  border-color: rgba(31, 36, 48, .18);
  color: var(--text);
}
.xph-front .goods-search select:focus,
.xph-front .goods-search input[type="text"]:focus {
  background: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 74, .14), var(--glow-soft);
}

/* ---------------------------------------------------------------------------
 * 7. 按钮（亮底 hover 用暖色而非暗底白字）
 * ------------------------------------------------------------------------ */
.xph-front .btn { color: var(--text); background: var(--glass-hi); }
.xph-front .btn:hover {
  background: rgba(255, 107, 74, .10);
  color: #C2410C;
  border-color: var(--border-hi);
}
.xph-front .btn-ghost:hover { background: rgba(255, 107, 74, .08); }
.xph-front .btn-ghost-light {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(31, 36, 48, .20);
  color: #1F2430;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.xph-front .btn-ghost-light:hover {
  background: #FFFFFF;
  border-color: var(--primary);
  color: #C2410C;
}

/* ---------------------------------------------------------------------------
 * 8. 分类矩阵 / 特色条 hover 柔影
 * ------------------------------------------------------------------------ */
.xph-front .cat-card:hover {
  box-shadow: 0 12px 30px rgba(31, 36, 48, .10), 0 0 24px color-mix(in srgb, var(--cat-color) 26%, transparent);
}
.xph-front .feature::after,
.xph-front .card::before,
.xph-front .stat::after,
.xph-front .terms-doc::before,
.xph-front .detail::before {
  background: linear-gradient(90deg, transparent, rgba(255, 107, 74, .5), rgba(61, 165, 255, .45), transparent);
}

/* ---------------------------------------------------------------------------
 * 9. 标签（亮底可读）
 * ------------------------------------------------------------------------ */
.xph-front .tag-gray   { background: rgba(120,130,150,.10); color: #5A6577; border-color: rgba(120,130,150,.25); }
.xph-front .tag-blue   { background: rgba(61,165,255,.12);  color: #1F6FB2; border-color: rgba(61,165,255,.32); }
.xph-front .tag-green  { background: rgba(24,169,87,.12);   color: #137A3E; border-color: rgba(24,169,87,.30); }
.xph-front .tag-orange { background: rgba(255,176,32,.14);  color: #A85C00; border-color: rgba(255,176,32,.34); }
.xph-front .tag-red    { background: rgba(229,72,77,.12);   color: #B4272C; border-color: rgba(229,72,77,.32); }
.xph-front .tag-yellow { background: rgba(229,138,0,.14);   color: #9A5A00; border-color: rgba(229,138,0,.32); }

/* 商品详情页内部硬编码深色的亮色覆盖（detail.html 内联样式） */
.xph-front .spec-grid,
.xph-front .shop-line {
  background: #FFFFFF;
  border-color: var(--border);
}
.xph-front .spec-grid .sp { border-bottom-color: var(--border); }
.xph-front .p-tags .t {
  color: #1F6FB2;
  background: rgba(61, 165, 255, .12);
  border-color: rgba(61, 165, 255, .32);
}
.xph-front .p-price-row .save {
  color: #A85C00;
  background: rgba(255, 176, 32, .14);
  border-color: rgba(255, 176, 32, .34);
}

/* ---------------------------------------------------------------------------
 * 10. 表格（亮）
 * ------------------------------------------------------------------------ */
.xph-front .table th { background: rgba(61, 165, 255, .08); color: var(--text); }
.xph-front .table tr:hover td { background: rgba(255, 107, 74, .05); }

/* 分页 hover（暖色） */
.xph-front .pagination li a:hover { color: #C2410C; background: rgba(255, 107, 74, .12); border-color: var(--border-hi); }

/* ---------------------------------------------------------------------------
 * 11. Toast / 弹层（layer.js，亮底）
 * ------------------------------------------------------------------------ */
.xph-front .layui-layer-msg {
  background: rgba(255, 255, 255, .98) !important;
  border: 1px solid var(--border-hi) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

/* ---------------------------------------------------------------------------
 * 12. Hero 轮播（浅底深字 + 左侧浅色安全区）
 * ------------------------------------------------------------------------ */
.xph-front .hero { background: #F4F7FB; }
.xph-front .hero-viewport { background: #F4F7FB; }
.xph-front .hero-overlay {
  background: linear-gradient(90deg, rgba(255,253,248,.94) 0%, rgba(255,253,248,.82) 32%, rgba(255,253,248,.34) 60%, rgba(255,253,248,0) 84%);
}
.xph-front .hero-overlay::before {
  opacity: .4;
  background-image:
    linear-gradient(rgba(31,36,48,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,36,48,.04) 1px, transparent 1px);
}
.xph-front .hero-overlay::after { background: linear-gradient(180deg, transparent, rgba(255,253,248,.85)); }

.xph-front .hero-title { background: none; -webkit-text-fill-color: #15192B; color: #15192B; text-shadow: none; }
.xph-front .hero-sub { color: rgba(31, 36, 48, .72); }
.xph-front .hero-tag {
  color: #C2410C;
  background: rgba(255, 107, 74, .12);
  border-color: rgba(255, 107, 74, .40);
  box-shadow: 0 0 18px rgba(255, 107, 74, .16);
}
.xph-front .hero-tag::before { background: var(--primary); box-shadow: 0 0 10px var(--primary); }

.xph-front .hero-nav {
  border-color: rgba(31, 36, 48, .18);
  background: rgba(255, 255, 255, .78);
  color: #1F2430;
}
.xph-front .hero-nav:hover { background: rgba(255, 107, 74, .16); border-color: var(--primary); box-shadow: var(--glow); color: #C2410C; }
.xph-front .hero-dot { background: rgba(31, 36, 48, .22); }
.xph-front .hero-dot.is-active { background: var(--grad-primary); box-shadow: 0 0 14px rgba(255, 107, 74, .55); }

/* ---------------------------------------------------------------------------
 * 13. 会员中心（member.css 硬编码暗色覆盖）
 * ------------------------------------------------------------------------ */
.xph-front .member-sidebar { background: #FFFFFF; }
.xph-front .member-sidebar .sb-title {
  color: #1F2430;
  background: linear-gradient(135deg, rgba(255, 107, 74, .14), rgba(61, 165, 255, .12));
}
.xph-front .member-sidebar .menu li a:hover {
  background: rgba(255, 107, 74, .08);
  color: #C2410C;
  border-left-color: rgba(255, 107, 74, .5);
}
.xph-front .member-sidebar .menu li a.active {
  background: rgba(255, 107, 74, .12);
  color: #C2410C;
  border-left-color: var(--primary);
  box-shadow: inset 0 0 22px rgba(255, 107, 74, .08);
}
.xph-front .points-summary {
  color: #1F2430;
  background:
    radial-gradient(circle at 82% 18%, rgba(61, 165, 255, .28), transparent 58%),
    linear-gradient(135deg, rgba(255, 107, 74, .22) 0%, rgba(255, 154, 61, .24) 55%, rgba(61, 165, 255, .26) 100%),
    #FFFFFF;
  border: 1px solid rgba(255, 107, 74, .3);
  box-shadow: var(--glow-soft), var(--shadow-soft);
}
.xph-front .points-summary .value { text-shadow: 0 0 30px rgba(255, 107, 74, .4); }
.xph-front .feedback-list .fb-content { background: #F4F7FB; color: var(--text-2); }
.xph-front .feedback-list .fb-reply {
  color: #C2410C;
  background: rgba(255, 107, 74, .08);
  border-color: rgba(255, 107, 74, .28);
}
.xph-front .avatar-preview {
  background: #F2F4F8 center/cover no-repeat;
  border-color: rgba(255, 107, 74, .45);
  color: var(--primary);
}

/* 个人中心首页头部信息卡（member/index.html 内联样式硬编码暗色） */
.xph-front .member-header {
  color: var(--text);
  background:
    radial-gradient(circle at 88% 14%, rgba(61, 165, 255, .18), transparent 58%),
    radial-gradient(circle at 4% 94%, rgba(255, 107, 74, .12), transparent 54%),
    linear-gradient(135deg, rgba(61, 165, 255, .10) 0%, rgba(255, 107, 74, .08) 54%, rgba(255, 176, 32, .10) 100%),
    #FFFFFF;
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}
.xph-front .member-header::after {
  background-image:
    linear-gradient(rgba(31, 36, 48, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 36, 48, .04) 1px, transparent 1px);
}
.xph-front .member-header .avatar {
  background: #F2F4F8;
  border-color: rgba(255, 107, 74, .45);
  box-shadow: 0 0 22px rgba(255, 107, 74, .18);
}
.xph-front .member-header .avatar:not(.has-avatar) {
  color: var(--primary);
  text-shadow: none;
}
.xph-front .member-header .stats .num {
  color: var(--primary);
  text-shadow: none;
}
.xph-front .member-order-quick .head h2::before {
  box-shadow: 0 0 10px rgba(255, 107, 74, .45);
}
.xph-front .member-order-quick .quick-item:hover {
  background: rgba(255, 107, 74, .08);
  border-color: rgba(255, 107, 74, .25);
  color: var(--primary);
  box-shadow: 0 0 22px rgba(255, 107, 74, .12);
}
.xph-front .member-order-quick .quick-item .icn {
  filter: drop-shadow(0 0 8px rgba(255, 107, 74, .25));
}
.xph-front .cart-summary {
  border-color: rgba(61, 165, 255, .25);
  background: rgba(61, 165, 255, .06);
}
.xph-front .cart-summary .cart-icn {
  filter: drop-shadow(0 0 10px rgba(61, 165, 255, .30));
}
.xph-front .cart-summary a:hover {
  text-shadow: 0 0 12px rgba(61, 165, 255, .45);
}
.xph-front .mini-grid .mini-item { background: #FFFFFF; }

/* ---------------------------------------------------------------------------
 * 14. 条款页（terms.css 硬编码暗色覆盖）
 * ------------------------------------------------------------------------ */
.xph-front .terms-head h1 { background: none; -webkit-text-fill-color: #15192B; color: #15192B; }
.xph-front .terms-warn { color: #7A4A00; background: rgba(255, 176, 32, .10); border-color: rgba(255, 176, 32, .30); }
.xph-front .terms-warn em { color: #A85C00; }
.xph-front .terms-doc code { background: rgba(61, 165, 255, .10); color: #1F6FB2; }

/* ---------------------------------------------------------------------------
 * 15. 购物车（cart/index.html 内联样式硬编码暗色）
 * ------------------------------------------------------------------------ */
.xph-front .cart-group .gh {
  background: linear-gradient(135deg, rgba(61, 165, 255, .10), rgba(255, 107, 74, .06));
}
.xph-front .cart-group .gh .badge {
  color: #1F6FB2;
  background: rgba(61, 165, 255, .14);
  border-color: rgba(61, 165, 255, .32);
}
.xph-front .cart-group .gfoot {
  background: #FFFFFF;
  border-top-color: var(--border);
}
.xph-front .cart-prod .thumb {
  background-color: #FFFFFF;
}