/* ===== 服务页 ===== */
.services-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

.svc-hero {
    text-align: center;
    padding: 9rem 0 2rem;
}
.svc-hero h1 {
    font-size: 2.2rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
}
.svc-hero p {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.6;
}

/* ===== 服务卡片网格 ===== */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.svc-war-wrap {
    grid-column: 1 / -1;
}

/* ===== 通用卡片基础 ===== */
.svc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 24px;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}
.svc-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-card-hover, rgba(32,201,151,0.25));
    transform: translateY(-4px);
}

/* 标签 — 保持低调，不抢内容 */
.svc-tags {
    display: flex;
    gap: 6px;
}
.svc-tag {
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.svc-tag-tool { color: #60a5fa; background: rgba(96,165,250,0.08); }
.svc-tag-explore { color: #94a3b8; background: rgba(148,163,184,0.08); }
.svc-badge {
    font-size: 0.6rem;
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.svc-badge-live { color: #fff; background: linear-gradient(135deg, #34d399, #10b981); }
.svc-badge-soon { color: #fff; background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.svc-badge-plan { color: var(--text-muted); background: rgba(95,181,147,0.1); }

/* 卡片内容 — 突出名称和描述 */
.svc-card-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}
.svc-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.svc-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary, var(--text-primary));
    line-height: 1.6;
    flex: 1;
    opacity: 0.75;
}

/* 底部操作 */
.svc-card-action {
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 600;
    margin-top: 16px;
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== Featured 卡片（已上线服务） ===== */
.svc-card-featured {
    grid-column: 1 / -1;
    padding: 28px 32px;
}

.svc-feat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.svc-feat-layout {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.svc-feat-left {
    flex: 1;
    min-width: 0;
}

.svc-feat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.svc-feat-header .svc-card-icon {
    font-size: 1.8rem;
    margin-bottom: 0;
}
.svc-feat-header .svc-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0;
}

.svc-feat-left .svc-card-desc {
    flex: none;
    margin-bottom: 20px;
    font-size: 0.88rem;
}

/* 特性标签列表 */
.svc-feat-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.svc-feat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(32,201,151,0.06);
    border: 1px solid rgba(32,201,151,0.12);
    border-radius: 10px;
    transition: background-color 0.25s, border-color 0.25s;
}
.svc-feat-item:hover {
    background: rgba(32,201,151,0.1);
    border-color: rgba(32,201,151,0.25);
}
.svc-feat-item i {
    font-size: 0.85rem;
    color: var(--accent);
    width: 16px;
    text-align: center;
}
.svc-feat-text {
    display: flex;
    flex-direction: column;
}
.svc-feat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.03em;
}
.svc-feat-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Featured 操作按钮 */
.svc-feat-action {
    flex-shrink: 0;
    align-self: flex-end;
}
.svc-card-featured .svc-card-action {
    opacity: 0;
    transition: opacity 0.3s;
    padding: 10px 20px;
    border: 1px solid rgba(32,201,151,0.25);
    border-radius: 10px;
    font-size: 0.82rem;
    white-space: nowrap;
}
.svc-card-featured:hover .svc-card-action {
    opacity: 1;
}

/* ===== Compact 卡片（规划中服务） ===== */

/* 卡片顶部标签行 */
.svc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.svc-card-compact {
    cursor: default;
    opacity: 0.55;
}
.svc-card-compact:hover {
    transform: none;
    background: var(--bg-card);
    border-color: var(--border);
}

/* ===== 加载 & 空状态 ===== */
.svc-loading, .svc-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

/* ===== 底部 ===== */
.svc-footer {
    text-align: center;
    padding: 4rem 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .svc-hero h1 { font-size: 1.6rem; }
    .svc-feat-layout { flex-direction: column; align-items: flex-start; }
    .svc-feat-action { align-self: flex-end; }
    .asm-headline { flex-direction: column; gap: 18px; }
    .asm-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .asm-strip { grid-template-columns: 1fr 1fr; }
    .asm-main { padding: 28px 20px; }
    .asm-stats { gap: 18px; }
    .asm-reward { padding: 18px 20px; }
    .asm-tiers { display: none; }
}
@media (max-width: 480px) {
    .svc-grid { grid-template-columns: 1fr; }
    .svc-hero h1 { font-size: 1.3rem; }
    .svc-card-featured { padding: 24px 20px; }
    .svc-feat-features { gap: 8px; }
    .asm-main { padding: 22px 16px; }
    .asm-strip { grid-template-columns: 1fr; }
    .asm-footer { flex-direction: column; gap: 16px; align-items: flex-start; }
    .asm-cta { align-self: stretch; justify-content: center; }
    .asm-reward { padding: 16px; }
    .asm-reward-inner { flex-direction: column; align-items: flex-start; }
    .asm-reward-btn { align-self: flex-start; }
}


/* ==========================================================
   测评中心 V3 — Editorial 风格（独立样式块）
   ========================================================== */

/* 容器 */
.asm-card {
    grid-column: 1 / -1;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden;
    border: 1px solid rgba(32,201,151,0.12) !important;
    background: var(--bg-card) !important;
}
.asm-card:hover {
    background: var(--bg-card-hover) !important;
    border-color: rgba(32,201,151,0.28) !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(32,201,151,0.08);
}

/* 顶部装饰线 */
.asm-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent) 20%, #e8b931 50%, var(--accent) 80%, transparent);
    opacity: .35;
}

/* 主区域 */
.asm-main {
    padding: 32px 36px 28px;
    position: relative;
}

/* 顶栏 */
.asm-topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px;
}
.asm-topbar-right { display: flex; align-items: center; gap: 10px; }
.asm-free {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px;
    background: rgba(232,185,49,0.06);
    border: 1px solid rgba(232,185,49,0.18);
    border-radius: 6px;
    font-size: .66rem; font-weight: 600; color: #e8b931;
    letter-spacing: .02em;
    animation: asmPulse 3s ease infinite;
}
.asm-free i { font-size: .58rem; }
@keyframes asmPulse {
    0%,100% { border-color: rgba(232,185,49,0.18); }
    50% { border-color: rgba(232,185,49,0.4); }
}

/* 标题区 */
.asm-headline {
    display: flex; gap: 28px;
    margin-bottom: 24px;
}
.asm-headline-left { flex: 1; min-width: 0; }
.asm-title-row {
    display: flex; align-items: flex-start; gap: 16px;
    margin-bottom: 14px;
}
.asm-emoji { font-size: 2rem; margin-top: 2px; flex-shrink: 0; line-height: 1; }
.asm-title-col {}
.asm-title {
    font-size: 1.8rem; font-weight: 900;
    letter-spacing: .04em; line-height: 1.1;
    color: var(--text-primary);
}
.asm-subtitle {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: .58rem; color: var(--text-muted);
    letter-spacing: .2em; margin-top: 5px; font-weight: 400;
}

.asm-desc {
    font-size: .88rem; color: var(--text-secondary, var(--text-primary));
    line-height: 1.8; opacity: .65;
    margin-bottom: 16px;
}

.asm-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.asm-chip {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: .58rem; padding: 3px 10px; border-radius: 3px;
    font-weight: 500; letter-spacing: .03em;
}
.asm-chip-g { color: #34d399; background: rgba(52,211,153,.06); border: 1px solid rgba(52,211,153,.1); }
.asm-chip-v { color: #a78bfa; background: rgba(167,139,250,.06); border: 1px solid rgba(167,139,250,.1); }
.asm-chip-b { color: #60a5fa; background: rgba(96,165,250,.06); border: 1px solid rgba(96,165,250,.1); }
.asm-chip-p { color: #f472b6; background: rgba(244,114,182,.06); border: 1px solid rgba(244,114,182,.1); }
.asm-chip-a { color: #fbbf24; background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.1); }
.asm-chip-r { color: #f87171; background: rgba(248,113,113,.06); border: 1px solid rgba(248,113,113,.1); }

/* 右侧面板 */
.asm-sidebar {
    width: 170px; flex-shrink: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; text-align: center;
    padding: 20px 16px;
    border: 1px solid rgba(32,201,151,.08);
    border-radius: 12px;
    background: rgba(32,201,151,.02);
}
.asm-side-emojis { font-size: 1.8rem; letter-spacing: 6px; }
.asm-side-text { font-size: .78rem; color: var(--text-secondary, var(--text-primary)); line-height: 1.7; font-weight: 500; opacity: .7; }
.asm-side-sub {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: .5rem; color: var(--text-muted);
    opacity: .4; letter-spacing: .08em;
}

/* Features 条 */
.asm-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 24px;
}
.asm-strip-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px;
    background: rgba(255,255,255,.015);
    border: 1px solid rgba(255,255,255,.03);
    border-radius: 8px;
    transition: background .25s, border-color .25s;
}
.asm-strip-item:hover { background: rgba(32,201,151,.03); border-color: rgba(32,201,151,.1); }
.asm-strip-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; font-size: .72rem; flex-shrink: 0;
}
.asm-si-v { background: rgba(167,139,250,.08); color: #a78bfa; }
.asm-si-g { background: rgba(52,211,153,.08); color: #34d399; }
.asm-si-p { background: rgba(244,114,182,.08); color: #f472b6; }
.asm-si-b { background: rgba(96,165,250,.08); color: #60a5fa; }
.asm-strip-label { font-size: .72rem; font-weight: 600; color: var(--text-primary); letter-spacing: .01em; }
.asm-strip-desc { font-size: .56rem; color: var(--text-muted); margin-top: 1px; line-height: 1.35; }

/* 底栏 */
.asm-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(32,201,151,.08);
}
.asm-stats { display: flex; gap: 28px; }
.asm-stat-val {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 1rem; font-weight: 500; letter-spacing: .02em;
}
.asm-stat-unit { font-size: .55rem; opacity: .45; margin-left: 1px; font-weight: 400; }
.asm-stat-label {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: .5rem; color: var(--text-muted);
    margin-top: 2px; letter-spacing: .06em;
}
.asm-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 28px;
    border: 1px solid rgba(32,201,151,.2);
    border-radius: 8px;
    color: var(--accent); font-size: .8rem; font-weight: 600;
    letter-spacing: .03em; background: transparent;
    cursor: pointer; transition: all .25s;
}
.asm-cta:hover { background: rgba(32,201,151,.06); border-color: rgba(32,201,151,.35); }


/* ==========================================================
   分享赚收益 — 金色条
   ========================================================== */

.asm-reward {
    padding: 20px 36px;
    position: relative;
    background: linear-gradient(105deg, #0e0c04 0%, #100e06 40%, #0b0a04 100%);
    border-top: 1px solid rgba(232,185,49,.1);
}
.asm-reward::before {
    content: '';
    position: absolute; top: 0; left: 0; bottom: 0; width: 50%;
    background: radial-gradient(ellipse at 0% 50%, rgba(232,185,49,.03), transparent 80%);
    pointer-events: none;
}
.asm-reward-inner {
    display: flex; align-items: center; gap: 16px;
    position: relative; z-index: 1;
}
.asm-reward-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: rgba(232,185,49,.06);
    border: 1px solid rgba(232,185,49,.16);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0;
}
.asm-reward-body { flex: 1; min-width: 0; }
.asm-reward-title {
    font-size: .82rem; font-weight: 600; color: #fef3c7;
    letter-spacing: .02em; margin-bottom: 3px;
}
.asm-reward-title i { color: #e8b931; margin-right: 5px; font-size: .68rem; }
.asm-reward-desc { font-size: .68rem; color: rgba(253,230,138,.38); line-height: 1.6; }

.asm-tiers { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.asm-tier {
    width: 30px; height: 30px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: .66rem; font-weight: 500;
    border: 1px solid; transition: transform .2s;
}
.asm-tier:hover { transform: scale(1.15); }
.asm-tier-1 { color: #78716c; background: rgba(120,113,108,.04); border-color: rgba(120,113,108,.1); }
.asm-tier-2 { color: #fcd34d; background: rgba(252,211,77,.04); border-color: rgba(252,211,77,.12); }
.asm-tier-3 { color: #fb923c; background: rgba(251,146,60,.04); border-color: rgba(251,146,60,.12); }
.asm-tier-4 { color: #e8b931; background: linear-gradient(135deg, rgba(232,185,49,.08), rgba(232,185,49,.03)); border-color: rgba(232,185,49,.2); box-shadow: 0 0 10px rgba(232,185,49,.06); }
.asm-tier-sep { color: rgba(232,185,49,.15); font-size: .35rem; }

.asm-reward-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 18px;
    background: rgba(232,185,49,.06);
    border: 1px solid rgba(232,185,49,.16);
    border-radius: 7px;
    color: #fcd34d; font-size: .68rem; font-weight: 600;
    letter-spacing: .02em; cursor: pointer; white-space: nowrap;
    flex-shrink: 0; transition: all .25s;
}
.asm-reward-btn:hover { background: rgba(232,185,49,.12); border-color: rgba(232,185,49,.3); color: #fef3c7; }
.asm-reward-btn i { font-size: .52rem; }