/* ============================================================
   网站后期维护页 - 独有样式
   布艺配饰风 · 错落网格 / 仪表盘 / 套餐对比
   ============================================================ */

/* ---------- Banner 定制 ---------- */
.mt-banner { position: relative; overflow: hidden; }
/* 同心圆轨道装饰：仪表盘意象 */
.mt-orbit {
    position: absolute; width: 460px; height: 460px; border-radius: 50%;
    border: 1.5px dashed var(--sage); opacity: .35;
    top: -160px; right: -120px; z-index: 0;
}
.mt-orbit.o2 {
    width: 280px; height: 280px; border-color: var(--lotus);
    top: -60px; right: -40px; opacity: .3;
}
.mt-banner .pb-grid { position: relative; z-index: 2; }

.mt-banner h1 em { font-style: normal; color: var(--sage-deep); position: relative; }
.mt-banner h1 em::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 10px;
    background: var(--lotus-soft); z-index: -1; border-radius: 6px;
}

/* banner 内嵌数据 */
.mt-banner-stat { display: flex; gap: 32px; margin-top: 30px; flex-wrap: wrap; }
.bs-item { display: flex; flex-direction: column; }
.bs-item strong { font-family: var(--f-serif); font-size: 1.7rem; color: var(--lotus-deep); font-weight: 600; }
.bs-item span { font-size: .82rem; color: var(--ink-mute); letter-spacing: 1px; }

/* ---------- 维护项目：错落网格 ---------- */
.mt-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.mt-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 34px 30px 30px; position: relative; box-shadow: var(--shadow-sm);
    transition: transform .4s, box-shadow .4s; overflow: hidden;
}
/* 错落：第 2、5 张下移，制造自由聚散感 */
.mt-card:nth-child(2) { transform: translateY(34px); }
.mt-card:nth-child(5) { transform: translateY(34px); }
.mt-card:hover { transform: translateY(-10px); box-shadow: var(--shadow); }
.mt-card:nth-child(2):hover, .mt-card:nth-child(5):hover { transform: translateY(24px); }

/* 缝线角落序号 */
.mt-corner {
    position: absolute; top: 18px; right: 22px; font-family: var(--f-serif);
    font-size: 1.5rem; color: var(--cream-3); font-weight: 600; letter-spacing: 1px;
}
.mt-ic {
    width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
    background: var(--lotus-soft); margin-bottom: 22px;
}
.mt-card:nth-child(even) .mt-ic { background: var(--sage-soft); }
.mt-ic svg { width: 30px; height: 30px; }
.mt-card h3 { margin-bottom: 10px; }
.mt-card p { font-size: .92rem; margin-bottom: 18px; }
.mt-tag {
    display: inline-block; font-size: .76rem; letter-spacing: 1px; color: var(--lotus-deep);
    background: var(--cream-2); padding: 5px 14px; border-radius: 2px 12px 12px 2px;
    border: 1px dashed var(--lotus);
}
.mt-card:nth-child(even) .mt-tag { color: var(--sage-deep); border-color: var(--sage); }

/* ---------- 仪表盘监控 ---------- */
.mt-dash-sec { background: var(--cream-2); }
.mt-dash-sec .adv-head { margin-bottom: 46px; }
/* 实时状态徽标 */
.mt-live {
    display: inline-flex; align-items: center; gap: 8px; font-size: .84rem;
    color: var(--sage-deep); background: var(--white); padding: 8px 16px;
    border-radius: 30px; box-shadow: var(--shadow-sm); letter-spacing: 1px;
}
.mt-live .dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--sage-deep);
    animation: pulse 1.8s infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(147,171,132,.5); }
    50% { box-shadow: 0 0 0 7px rgba(147,171,132,0); }
}

.mt-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* 单个仪表盘 */
.gauge-item { text-align: center; }
.gauge {
    position: relative; width: min(230px, 78%); aspect-ratio: 1; margin: 0 auto 18px;
}
/* 外环：conic-gradient 画弧 */
.gauge-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(var(--c) 0 var(--fill), var(--cream-3) var(--fill) 360deg);
    box-shadow: var(--shadow-sm);
}
/* 刻度：repeating-conic + radial 遮罩成窄环 */
.gauge-tick {
    position: absolute; inset: 0; border-radius: 50%;
    background: repeating-conic-gradient(var(--ink-mute) 0 1.5deg, transparent 1.5deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 56% 62%, transparent 62%);
            mask: radial-gradient(circle, transparent 0 56%, #000 56% 62%, transparent 62%);
    opacity: .35;
}
/* 内圈：遮出环宽 + 放数值 */
.gauge-inner {
    position: absolute; inset: 18%; border-radius: 50%; background: var(--cream);
    display: grid; place-items: center; box-shadow: inset 0 2px 10px rgba(74,69,64,.08);
}
.gauge-val { font-family: var(--f-serif); font-size: 2.1rem; font-weight: 600; color: var(--ink); line-height: 1; }
.gauge-val small { font-size: .85rem; color: var(--ink-mute); margin-left: 2px; }
.gauge-lbl { font-size: .8rem; color: var(--ink-mute); margin-top: 6px; letter-spacing: 2px; }
/* 指针：自底端中心旋转 */
.gauge-needle {
    position: absolute; left: 50%; bottom: 50%; width: 4px; height: 36%;
    margin-left: -2px; border-radius: 4px; z-index: 3;
    background: linear-gradient(var(--ink), var(--c));
    transform-origin: 50% 100%;
    transform: rotate(var(--needle));
    transition: transform 1s ease;
}
.gauge-hub {
    position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
    margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ink);
    z-index: 4; box-shadow: 0 0 0 4px var(--cream);
}
.gauge-cap { font-size: .9rem; color: var(--ink-soft); margin-bottom: 8px; }
.gauge-status {
    display: inline-block; font-size: .76rem; letter-spacing: 1px; color: var(--sage-deep);
    background: var(--sage-soft); padding: 4px 14px; border-radius: 20px;
}

/* 图例 */
.mt-legend {
    display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
    margin-top: 46px; padding: 20px 28px; background: var(--white);
    border: 1px dashed var(--line); border-radius: var(--radius);
}
.lg-item { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-soft); }
.lg-dot { width: 12px; height: 12px; border-radius: 50%; }
.lg-dot.sage { background: var(--sage-deep); }
.lg-dot.lotus { background: var(--lotus-deep); }
.lg-dot.mute { background: var(--cream-3); }
.lg-note { margin-left: auto; font-size: .8rem; color: var(--ink-mute); }

/* ---------- 套餐对比表 ---------- */
.mt-cmp-sec { background: var(--cream-2); }
.mt-compare {
    display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1fr;
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.cmp-row { display: contents; }
/* 每一格 */
.mt-compare > div > div {
    padding: 18px 22px; border-bottom: 1px solid var(--line); font-size: .92rem; color: var(--ink-soft);
    display: flex; align-items: center;
}
.cmp-feat {
    font-weight: 500; color: var(--ink); background: var(--cream-2);
}
/* 推荐列高亮底色 */
.mt-compare > div > .hl {
    background: var(--lotus-soft); color: var(--ink);
    position: relative;
}
/* 表头 */
.cmp-head > div {
    font-family: var(--f-serif); font-size: 1.15rem; color: var(--ink); font-weight: 600;
    border-bottom: 2px dashed var(--line); background: var(--white); justify-content: center;
    padding: 26px 18px; position: relative;
}
.cmp-head .cmp-feat { background: var(--cream-3); justify-content: flex-start; }
.cmp-head .hl { background: linear-gradient(180deg, var(--lotus-soft), var(--white)); }
.cmp-badge {
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    background: var(--lotus-deep); color: var(--white); font-size: .7rem; letter-spacing: 2px;
    padding: 4px 14px; border-radius: 0 0 8px 8px; font-family: var(--f-sans); font-weight: 500;
}
/* 价格行 */
.cmp-price > div { padding: 24px 22px; border-bottom: none; }
.cmp-price .cur { font-family: var(--f-serif); font-size: 1.2rem; color: var(--lotus-deep); font-weight: 600; vertical-align: top; }
.cmp-price div:not(.cmp-feat) { font-family: var(--f-serif); font-size: 1.9rem; color: var(--ink); font-weight: 600; }
.cmp-price .hl { color: var(--lotus-deep); }
.cmp-price small { font-size: .8rem; color: var(--ink-mute); font-family: var(--f-sans); font-weight: 400; margin-left: 4px; }
/* CTA 行 */
.cmp-cta > div { padding: 22px; border-bottom: none; justify-content: center; background: var(--cream-2); }
.cmp-cta > .cmp-feat { background: var(--cream-3); }
.cmp-cta .btn { padding: 10px 22px; font-size: .88rem; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
    .mt-grid { grid-template-columns: repeat(2, 1fr); }
    .mt-card:nth-child(3) { transform: translateY(34px); }
    .mt-card:nth-child(2), .mt-card:nth-child(5) { transform: none; }
    .mt-card:nth-child(3):hover { transform: translateY(24px); }
    .mt-gauges { grid-template-columns: 1fr; gap: 44px; }
    .mt-compare { grid-template-columns: 1fr; }
    /* 对比表横向转纵向：每行变卡片 */
    .cmp-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border-bottom: 1px solid var(--line); }
    .cmp-head { display: none; }
    .mt-compare > div > div { padding: 14px 12px; font-size: .86rem; justify-content: center; text-align: center; }
    .cmp-feat { grid-column: 1 / -1; background: var(--cream-3); justify-content: flex-start; font-size: .9rem; }
    .mt-legend .lg-note { margin-left: 0; width: 100%; }
}
@media (max-width: 620px) {
    .mt-grid { grid-template-columns: 1fr; }
    .mt-card:nth-child(n) { transform: none; }
    .mt-banner-stat { gap: 22px; }
    .bs-item strong { font-size: 1.4rem; }
    .cmp-row { grid-template-columns: 1fr 1fr; }
    .cmp-row > div:nth-child(1) { grid-column: 1 / -1; }
    .gauge { width: min(200px, 86%); }
    .gauge-val { font-size: 1.8rem; }
}