/* =========================================================
   全局统一设计系统（mall 前端）
   与首页「魔众」风格对齐：统一商品卡片、配色变量、区块观感。
   全站前台经 layout/head 引入，位于 frontend.css / h5.css 之后。
   ========================================================= */

/* 配色与间距变量：全站前台共享（首页 home-mall.css 也使用） */
body.frontend-body {
    --xm-accent: var(--primary, #0831cb);
    --xm-price: #e6a23c;
    --xm-line: #eceff3;
    --xm-gap: 18px;
}

/* ---------- 商品卡片（首页 / 商城列表共用） ---------- */
.xm-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--xm-line);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.xm-card:hover {
    transform: translateY(-4px);
    border-color: rgba(8, 49, 203, .3);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
}
.xm-card__media { position: relative; display: block; padding: 18px 18px 4px; }
.xm-card__media img { display: block; width: 100%; height: 170px; object-fit: contain; transition: transform .35s ease; }
.xm-card:hover .xm-card__media img { transform: scale(1.05); }
.xm-card__badges {
    position: absolute;
    left: 12px;
    top: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.xm-badge { font-style: normal; font-size: 11px; line-height: 1; font-weight: 600; padding: 4px 7px; border-radius: 4px; color: #fff; }
.xm-badge--auto { background: var(--xm-accent); }
.xm-badge--new { background: #16a34a; }
.xm-badge--rec { background: #f59e0b; }

.xm-card__body { display: flex; flex-direction: column; flex: 1; padding: 8px 16px 16px; }
.xm-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
    font-size: 14px;
    line-height: 1.5;
    color: #252b36;
}
.xm-card__title:hover { color: var(--xm-accent); }
.xm-card__code { margin: 6px 0 0; font-size: 12px; color: #9aa3b2; }
.xm-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; }
.xm-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; min-width: 0; }
.xm-card__price strong { font-size: 19px; font-weight: 800; line-height: 1; color: var(--xm-price); }
.xm-card__price del { font-size: 12px; color: #a6adba; }
.xm-card__promo {
    font-style: normal;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 3px;
    background: #fdece9;
    color: var(--xm-price);
}
.xm-card__cart {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(232, 69, 44, .45);
    border-radius: 50%;
    background: #fff;
    color: var(--xm-price);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.xm-card__cart:hover { background: var(--xm-price); color: #fff; transform: translateY(-1px); }
.xm-card__cart:disabled { opacity: .5; cursor: default; }
.xm-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    color: #9aa3b2;
}
.xm-card__tag--auto { color: #0ea5a4; }

/* ---------- 列表栅格（商城列表页复用首页观感，不做隐藏） ---------- */
.product-grid { gap: var(--xm-gap); }

/* ---------- 滚动渐显（可被任意区块使用） ---------- */
.xm-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.xm-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .xm-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 通用外壳对齐：让内页区块更接近首页白卡观感 ---------- */
.page-wrap { padding-top: 28px; }

.section-title { letter-spacing: .01em; }
.section-title::before { border-radius: 3px; background: var(--xm-accent); }

/* 服务市场 / 任务大厅 卡片：统一强调色与圆角观感 */
.svc-card { border-radius: 12px; }
.task-hall-card { border-radius: 12px; }
.task-hall-card__price { color: var(--xm-price); font-weight: 800; }
.task-hall-card__go { color: var(--xm-accent); }
.task-hall-card:hover { border-color: rgba(8, 49, 203, .3); box-shadow: 0 12px 28px rgba(15, 23, 42, .12); }

.svc-card__foot strong { color: var(--xm-price); }

/* 会员中心：面板与快捷入口统一 */
.panel-card { border-radius: 12px; }
.member-shortcut { border-radius: 12px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.member-shortcut:hover { transform: translateY(-3px); border-color: rgba(8, 49, 203, .3); box-shadow: 0 10px 24px rgba(15, 23, 42, .1); }
.member-shortcut strong { color: #1f2937; }
.order-preview { border-radius: 10px; }

/* ---------- 暗色主题 ---------- */
html[data-theme="dark"] .xm-card,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .member-shortcut,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .svc-card,
html[data-theme="dark"] .task-hall-card {
    background: #171c2d;
    border-color: #2a3145;
}
html[data-theme="dark"] .xm-card__title,
html[data-theme="dark"] .member-shortcut strong { color: #e8ecf5; }
html[data-theme="dark"] .xm-card__cart { background: #1e2438; }

/* ---------- 响应式：卡片图片高度 ---------- */
@media (max-width: 900px) {
    .xm-card__media img { height: 148px; }
}
@media (max-width: 560px) {
    .xm-card__media { padding: 14px 14px 2px; }
    .xm-card__media img { height: 128px; }
    .xm-card__body { padding: 8px 12px 14px; }
    .xm-card__title { font-size: 13px; min-height: 39px; }
    .xm-card__price strong { font-size: 16px; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   服务市场 / 任务大厅 卡片：图文版式（类型色封面带）
   ========================================================= */
.svc-card__cover,
.task-hall-card__cover {
    position: relative;
    overflow: hidden;
    height: 118px;
    margin: -18px -18px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #1c4de0);
}
.svc-card__cover::after,
.task-hall-card__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(140px 90px at 82% 12%, rgba(255, 255, 255, .22), transparent 60%);
}
.svc-card__cover-mark,
.task-hall-card__cover-mark {
    position: relative;
    z-index: 1;
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    opacity: .94;
}
/* 服务市场按类型着色 */
.svc-card--website .svc-card__cover { background: linear-gradient(135deg, #0831cb, #2563eb); }
.svc-card--miniapp .svc-card__cover { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.svc-card--seo .svc-card__cover { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.svc-card--design .svc-card__cover { background: linear-gradient(135deg, #be185d, #ec4899); }
.svc-card--ops .svc-card__cover { background: linear-gradient(135deg, #0369a1, #0ea5e9); }
.svc-card--operate .svc-card__cover { background: linear-gradient(135deg, #b45309, #f59e0b); }
.svc-card--other .svc-card__cover { background: linear-gradient(135deg, #475569, #94a3b8); }
/* 任务大厅：域/站 + 可能的服务子类型 */
.task-hall-card--domain .task-hall-card__cover { background: linear-gradient(135deg, #0831cb, #2563eb); }
.task-hall-card--website .task-hall-card__cover { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.task-hall-card--svc-website .task-hall-card__cover { background: linear-gradient(135deg, #0831cb, #2563eb); }
.task-hall-card--svc-miniapp .task-hall-card__cover { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.task-hall-card--svc-seo .task-hall-card__cover { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.task-hall-card--svc-design .task-hall-card__cover { background: linear-gradient(135deg, #be185d, #ec4899); }
.task-hall-card--svc-ops .task-hall-card__cover { background: linear-gradient(135deg, #0369a1, #0ea5e9); }
.task-hall-card--svc-operate .task-hall-card__cover { background: linear-gradient(135deg, #b45309, #f59e0b); }
.task-hall-card--svc-other .task-hall-card__cover { background: linear-gradient(135deg, #475569, #94a3b8); }

/* 任务大厅卡片改为竖向图文（封面在上，价格信息在底） */
.task-hall-card { flex-direction: column; align-items: stretch; min-height: 0; overflow: hidden; }
.task-hall-card__aside {
    flex: none;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    text-align: left;
}
.task-hall-card__go { width: auto; }

html[data-theme="dark"] .svc-card__cover,
html[data-theme="dark"] .task-hall-card__cover { filter: saturate(.9) brightness(1.05); }

/* =========================================================
   会员中心 · 仪表盘深化（统一品牌观感）
   ========================================================= */
.member-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    margin-bottom: 20px;
    border-radius: 14px;
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(440px 180px at 100% 0%, rgba(34, 211, 238, .28), transparent 60%),
        linear-gradient(135deg, #06102c 0%, #0a1f5c 45%, #0831cb 100%);
    box-shadow: var(--shadow-lg);
}
.member-hero__avatar {
    flex: 0 0 auto;
    width: 66px; height: 66px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    text-transform: uppercase;
}
.member-hero__info { flex: 1; min-width: 0; }
.member-hero__name { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.member-hero__badge {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
}
.member-hero__sub { margin-top: 6px; font-size: 13px; opacity: .82; }
.member-hero__balance {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    text-align: right;
}
.member-hero__balance .muted { color: rgba(255, 255, 255, .72); }
.member-hero__balance strong { font-size: 26px; font-weight: 800; line-height: 1.1; }
.member-hero__recharge {
    margin-top: 8px;
    background: #fff !important;
    color: var(--xm-accent) !important;
    border-radius: 999px;
    padding: 7px 22px;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease;
}
.member-hero__recharge:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .2); }

/* 数据概览：图标化 */
.stat-box { position: relative; overflow: hidden; }
.stat-box__ico { position: absolute; right: 14px; top: 14px; font-size: 20px; opacity: .85; }
.stat-box .num { color: var(--xm-accent); }
.stat-box__hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* 快捷入口：图标块 */
.member-shortcut { flex-direction: row; align-items: center; gap: 12px; }
.member-shortcut__ico {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    background: rgba(8, 49, 203, .08);
}
.member-shortcut__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.member-shortcut strong { color: #1f2937; }
.member-shortcut span { font-size: 12px; color: var(--text-muted); }
html[data-theme="dark"] .member-shortcut__ico { background: rgba(79, 123, 240, .18); }

/* 区块标题：右侧更多 */
.section-title--more { display: flex; align-items: center; justify-content: space-between; }
.section-title--more a { font-size: 13px; font-weight: 600; color: var(--xm-accent); text-decoration: none; }

/* 最近订单预览 */
.order-preview:last-child { border-bottom: 0; padding-bottom: 0; }
.order-preview strong { color: #1f2937; }
.order-preview .muted { font-size: 12px; }

/* =========================================================
   购物车（统一橙色价格 + 品牌结算按钮）
   ========================================================= */
.cart-table td { vertical-align: middle; }
.cart-table .price { color: var(--xm-price); font-weight: 800; font-size: 15px; white-space: nowrap; }
.cart-product { display: flex; align-items: center; gap: 12px; }
.cart-product img { flex: 0 0 auto; }
.cart-product a { color: #1f2937; font-weight: 600; text-decoration: none; }
.cart-product a:hover { color: var(--xm-accent); }
.cart-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
.cart-foot .price-lg { color: var(--xm-price); }
.cart-foot .btn-primary {
    border-radius: 999px; padding: 12px 32px; font-size: 15px; font-weight: 800;
    box-shadow: 0 12px 26px rgba(8, 49, 203, .22);
}
.cart-foot .btn-primary:hover { box-shadow: 0 16px 32px rgba(8, 49, 203, .3); }
html[data-theme="dark"] .cart-product a,
html[data-theme="dark"] .order-preview strong { color: #e8ecf5; }

/* 会员端表格价格统一橙色 */
.member-table .price { color: var(--xm-price); font-weight: 700; white-space: nowrap; }

/* 会员子页空态：主按钮间距 */
.member-empty .btn-primary { margin-top: 4px; }

/* 价格统一橙色（全局工具类 + 会员区） */
.price { color: var(--xm-price); }
.price-lg { color: var(--xm-price); font-weight: 800; }
.recharge-balance-num { color: var(--xm-price); font-weight: 800; }
.lic-result dd .price, .lic-result--ok .price { color: var(--xm-price); }
.recharge-preset.is-active { border-color: var(--xm-accent); color: var(--xm-accent); background: rgba(8,49,203,.08); }

/* =========================================================
   发布 / 编辑表单：分区卡片（不破坏 form-grid-2 栅格）
   ========================================================= */
.task-hall-form-card .form-section { display: contents; }
.form-section__title {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0 2px;
    font-size: 14px; font-weight: 800; color: var(--xm-accent);
}
.form-section:first-of-type .form-section__title { margin-top: 0; }
.form-section__title::before {
    content: ''; width: 4px; height: 15px; border-radius: 2px; background: var(--xm-accent);
}
.form-section__hint { grid-column: 1 / -1; margin: -2px 0 6px; font-size: 12px; color: var(--text-muted); }

/* =========================================================
   登录 / 注册：品牌渐变与首页统一
   ========================================================= */
.auth-brand {
    background:
        radial-gradient(360px 200px at 100% 0%, rgba(34, 211, 238, .26), transparent 60%),
        linear-gradient(135deg, #06102c 0%, #0a1f5c 45%, #0831cb 100%);
}
.auth-tabs a.is-active { color: var(--xm-accent); }
.auth-submit { background: var(--xm-accent); box-shadow: 0 12px 28px rgba(8, 49, 203, .24); }
.auth-submit:hover { box-shadow: 0 16px 32px rgba(8, 49, 203, .3); }