/* ==========================================================================
   前台全新设计系统 —— 蓝色 · 大气 · 扁平化
   适用：IDC / 云服务商产品展示场景
   说明：本文件为前台专属，与后台 app.css 完全隔离，互不影响
   ========================================================================== */

/* ------------------------------ 设计变量 ------------------------------ */
:root {
    /* 品牌蓝（主色阶） */
    --brand-50:  #eef4ff;
    --brand-100: #dbe7ff;
    --brand-200: #bcd2ff;
    --brand-300: #8fb4ff;
    --brand-400: #5b8dff;
    --brand-500: #2f6bff;
    --brand-600: #1a56f0;
    --brand-700: #1442c6;
    --brand-800: #103498;
    --brand-900: #0d2871;

    /* 语义色 */
    --c-primary:     var(--brand-600);
    --c-primary-d:   var(--brand-700);
    --c-accent:      #00c2ff;
    --c-accent-d:    #0098cc;
    --c-success:     #12b76a;
    --c-warning:     #f79009;
    --c-danger:      #f04438;

    /* 中性 */
    --ink:        #0c1a2b;
    --ink-2:      #24344a;
    --muted:      #5b6b81;
    --muted-2:    #8494a8;
    --line:       #e2e9f5;
    --line-2:     #eef2f9;
    --bg:         #f4f7fd;
    --bg-soft:    #fafbff;
    --white:      #ffffff;

    /* 形状 */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 18px;
    --radius-xl: 26px;

    /* 阴影（扁平化：克制、柔和） */
    --shadow-xs: 0 1px 2px rgba(12, 26, 43, .05);
    --shadow-sm: 0 2px 8px rgba(12, 26, 43, .06);
    --shadow-md: 0 8px 24px rgba(20, 66, 198, .08);
    --shadow-lg: 0 18px 48px rgba(20, 66, 198, .14);

    /* 动效 */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur: .28s;

    /* 布局 */
    --wrap: 1240px;
    --header-h: 68px;
}

/* ------------------------------ 基础重置 ------------------------------ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-primary); }

img { max-width: 100%; display: block; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--brand-200); color: var(--brand-900); }

/* ------------------------------ 布局容器 ------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 980px; }

.section { padding: 72px 0; }
.section-sm { padding: 48px 0; }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head .eyebrow {
    display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .14em;
    color: var(--c-primary); background: var(--brand-50);
    padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.section-head h2 { font-size: 32px; color: var(--ink); }
.section-head p { margin-top: 12px; color: var(--muted); font-size: 15px; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap-1 { gap: 8px; } .gap-2 { gap: 14px; } .gap-3 { gap: 22px; }
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 32px; }
.mb-1 { margin-bottom: 10px; } .mb-2 { margin-bottom: 20px; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-sm { font-size: 13px; }

/* ------------------------------ 按钮 ------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius-sm);
    font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: all var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--c-primary); color: #fff;
    box-shadow: 0 6px 18px rgba(26, 86, 240, .22);
}
.btn-primary:hover { background: var(--c-primary-d); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26, 86, 240, .3); }

.btn-accent { background: var(--c-accent); color: #fff; }
.btn-accent:hover { background: var(--c-accent-d); color: #fff; transform: translateY(-2px); }

.btn-outline { background: #fff; border-color: var(--line); color: var(--ink-2); }
.btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-2px); }

.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,.24); color: #fff; transform: translateY(-2px); }

.btn-lg { height: 52px; padding: 0 32px; font-size: 16px; border-radius: var(--radius); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* ------------------------------ 卡片 ------------------------------ */
.card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs); transition: all var(--dur) var(--ease);
}
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }

/* ------------------------------ 标签 ------------------------------ */
.tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--brand-50); color: var(--c-primary);
}
.tag-success { background: #e7f8f0; color: var(--c-success); }
.tag-warning { background: #fff6e6; color: var(--c-warning); }
.tag-danger  { background: #feeceb; color: var(--c-danger); }
.tag-dark    { background: rgba(12,26,43,.06); color: var(--ink-2); }

/* ------------------------------ 动效基元 ------------------------------ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pulseRing {
    0% { box-shadow: 0 0 0 0 rgba(26,86,240,.28); }
    70% { box-shadow: 0 0 0 16px rgba(26,86,240,0); }
    100% { box-shadow: 0 0 0 0 rgba(26,86,240,0); }
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* 滚动进入动画：初始隐藏，进入视口后由 JS 加 .in 触发 */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in { animation: fadeUp .7s var(--ease-out) forwards; }

.anim-float { animation: floatY 6s ease-in-out infinite; }

/* 骨架屏微光 */
.skeleton { position: relative; overflow: hidden; background: var(--line-2); }
.skeleton::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    animation: shimmer 1.4s infinite;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ------------------------------ 顶部导航 ------------------------------ */
.site-head {
    position: sticky; top: 0; z-index: 200;
    background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow var(--dur) var(--ease);
}
.site-head.scrolled { box-shadow: var(--shadow-sm); }

.site-head .wrap { height: var(--header-h); display: flex; align-items: center; gap: 28px; }

.logo { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; flex: 0 0 auto; }
.logo-mark {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff; font-size: 17px; box-shadow: 0 6px 16px rgba(26,86,240,.3);
}
.logo:hover { color: var(--ink); }

/* 导航中段由后台分类列表驱动，数量不设上限：
   分类较多时在导航条内部横向滚动，不挤压左侧 logo 与右侧操作区。 */
.nav {
    display: flex; align-items: center; gap: 4px; margin-right: auto;
    min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
    position: relative; padding: 8px 12px; border-radius: var(--radius-sm);
    font-size: 15px; font-weight: 500; color: var(--ink-2);
    white-space: nowrap; flex: 0 0 auto;
}
.nav a:hover { color: var(--c-primary); background: var(--brand-50); }
.nav a.active { color: var(--c-primary); background: var(--brand-50); font-weight: 600; }

.head-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 14px; }
.cart-link:hover { color: var(--c-primary); }
.cart-badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--c-danger); color: #fff; font-size: 11px; font-weight: 700;
    display: inline-grid; place-items: center; line-height: 1;
}

/* ------------------------------ Hero 主视觉 ------------------------------ */
.hero {
    position: relative; overflow: hidden; color: #fff;
    padding: 90px 0 110px;
    background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 45%, #0a3fb0 100%);
    background-size: 200% 200%;
    animation: gradientShift 16s ease infinite;
}
.hero::before {
    content: ""; position: absolute; width: 620px; height: 620px; right: -160px; top: -220px;
    background: radial-gradient(circle, rgba(0,194,255,.38), transparent 62%);
    border-radius: 50%; pointer-events: none;
}
.hero::after {
    content: ""; position: absolute; width: 520px; height: 520px; left: -180px; bottom: -260px;
    background: radial-gradient(circle, rgba(91,141,255,.42), transparent 60%);
    border-radius: 50%; pointer-events: none;
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }

.hero h1 { font-size: 46px; line-height: 1.18; letter-spacing: -.03em; }
.hero h1 .accent { color: #7fdcff; }
.hero .lead { margin-top: 20px; font-size: 17px; line-height: 1.8; color: rgba(255,255,255,.82); max-width: 560px; }
.hero-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero 搜索条 */
.hero-search {
    margin-top: 34px; display: flex; gap: 8px; padding: 8px; max-width: 540px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px; backdrop-filter: blur(10px);
}
.hero-search input {
    flex: 1; height: 42px; padding: 0 18px; border: 0; background: transparent; color: #fff; outline: none;
}
.hero-search input::placeholder { color: rgba(255,255,255,.62); }
.hero-search button {
    height: 42px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
    background: #fff; color: var(--brand-700); font-weight: 700;
    transition: transform var(--dur) var(--ease);
}
.hero-search button:hover { transform: scale(1.04); }

/* 动态数字统计 */
.hero-stats { position: relative; z-index: 2; margin-top: 62px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat-item {
    padding: 20px 18px; border-radius: var(--radius);
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px); text-align: center;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.stat-item:hover { transform: translateY(-5px); background: rgba(255,255,255,.17); }
.stat-num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stat-num .suffix { font-size: 16px; font-weight: 600; margin-left: 2px; opacity: .85; }
.stat-label { margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.75); }

/* Hero 右侧装饰卡片 */
.hero-visual { position: relative; height: 320px; }
.orb {
    position: absolute; border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(4px);
}
.orb-1 { width: 190px; height: 190px; top: 10px; right: 30px; animation: floatY 7s ease-in-out infinite; }
.orb-2 { width: 120px; height: 120px; bottom: 26px; right: 150px; animation: floatY 9s ease-in-out infinite reverse; }
.orb-3 { width: 84px; height: 84px; top: 120px; right: 210px; animation: floatY 11s ease-in-out infinite; }
.orb-inner {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 34px; color: rgba(255,255,255,.9);
}

/* ------------------------------ 四级地域选择器 ------------------------------ */
.region-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; }

.region-level {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 22px; border-bottom: 1px solid var(--line-2);
}
.region-level:last-child { border-bottom: 0; }
.region-level .lv-tag {
    flex: none; width: 58px; padding-top: 3px;
    font-size: 12px; font-weight: 700; color: var(--c-primary); letter-spacing: .04em;
}
.region-opts { display: flex; flex-wrap: wrap; gap: 8px; }

.region-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: var(--bg-soft);
    font-size: 14px; color: var(--ink-2); font-weight: 500;
    transition: all .22s var(--ease);
}
.region-pill:hover { border-color: var(--brand-300); color: var(--c-primary); background: var(--brand-50); transform: translateY(-2px); }
.region-pill.active {
    background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600;
    box-shadow: 0 6px 16px rgba(26,86,240,.26);
}
.region-pill .cnt { font-size: 12px; opacity: .72; }
.region-pill.disabled { opacity: .42; pointer-events: none; }

/* ------------------------------ 产品大类卡片 ------------------------------ */
.type-card {
    position: relative; overflow: hidden; padding: 28px 24px;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    transition: all .3s var(--ease);
}
.type-card::before {
    content: ""; position: absolute; width: 130px; height: 130px; right: -46px; top: -46px;
    border-radius: 50%; background: var(--brand-50); transition: transform .5s var(--ease);
}
.type-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }
.type-card:hover::before { transform: scale(1.9); background: var(--brand-100); }
.type-icon {
    position: relative; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff; font-size: 22px; box-shadow: 0 8px 20px rgba(26,86,240,.28);
}
.type-card h3 { position: relative; margin-top: 16px; font-size: 18px; }
.type-card p { position: relative; margin-top: 8px; color: var(--muted); font-size: 13.5px; min-height: 40px; }
.type-meta { position: relative; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.type-meta .count { color: var(--c-primary); font-weight: 700; }
.type-meta .go { color: var(--muted-2); transition: transform var(--dur) var(--ease); }
.type-card:hover .go { transform: translateX(4px); color: var(--c-primary); }

/* ------------------------------ 产品卡片 ------------------------------ */
.product-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    transition: all .3s var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }

.pc-top { position: relative; padding: 20px 20px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pc-type {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
    background: linear-gradient(135deg, var(--brand-50), var(--brand-100)); color: var(--c-primary); font-size: 20px;
}
.pc-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

.pc-body { padding: 14px 20px 0; flex: 1; }
.pc-title { font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.pc-title:hover { color: var(--c-primary); }
.pc-flag {
    display: inline-block; width: 21px; height: 15px; object-fit: cover;
    border-radius: 2px; vertical-align: -2px; margin-right: 6px; box-shadow: var(--shadow-xs);
}
/* 标题行内联国旗（与品牌 pill 同一行） */
.pc-flag-inline { width: auto; height: 16.5px; margin: 0 0 0 4px; flex-shrink: 0; }
.pc-summary { margin-top: 6px; font-size: 13px; color: var(--muted); min-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 地域行：📍 国家 · 省份 · 城市 [品牌] [分类] —— 紧凑单行，与 pc-head/spec-list/pc-cycle 左右缩进一致 */
.pc-region { margin: 12px 10px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); min-width: 0; box-sizing: border-box; }
.pc-region-icon { color: var(--c-primary); flex: none; width: 16px; text-align: center; font-size: 13px; }
.pc-region-loc { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.pc-region-loc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pc-region .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); flex-shrink: 0; }

/* 分类 Pill：橙色边框 + 浅色背景胶囊，放在品牌缩写后面 */
.cat-pill {
    display: inline-flex; align-items: center; justify-content: center;
    height: 22px; padding: 0 8px;
    background: #FFF7ED; color: #C2410C;
    border: 1px solid #FED7AA; border-radius: 11px;
    font-size: 11px; font-weight: 600;
    max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex-shrink: 0;
}

/* 品牌缩写徽标（浅蓝） */
.brand-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 22px; padding: 0 8px;
    background: #EFF6FF; color: #1D4ED8;
    border: 1px solid #BFDBFE; border-radius: 11px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
}

/* 配置网格：CPU / 内存 / 带宽 / 防御 */
.spec-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.spec-item { padding: 9px 11px; background: var(--bg-soft); }
.spec-item dt { font-size: 11.5px; color: var(--muted-2); }
.spec-item dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 价格区 */
.pc-price {
    margin-top: 14px; padding: 14px 20px; border-top: 1px dashed var(--line);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
}
.price-now { display: flex; align-items: baseline; gap: 2px; color: var(--c-danger); }
.price-now .cur { font-size: 14px; font-weight: 700; }
.price-now .val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.price-now .unit { font-size: 12.5px; color: var(--muted); margin-left: 3px; }
.price-origin { margin-top: 3px; font-size: 12px; color: var(--muted-2); text-decoration: line-through; }

.pc-foot { padding: 0 20px 20px; display: flex; gap: 10px; }
.pc-sold { margin-left: auto; font-size: 12px; color: var(--muted-2); align-self: center; }

/* 产品卡 v2：标题 + 地区 + 规格列表 + 月/年卡 + 立即购买（参考详情卡） */
.pc-head { padding: 18px 18px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pc-head .pc-title { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.pc-head .pc-title a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.pc-head .pc-title a:hover { color: var(--c-primary); }
.tag-soft { background: #FFF7ED; color: #C2410C; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }

.spec-list { list-style: none; margin: 14px 18px 0; padding: 0; }
.spec-list li {
    display: flex; align-items: center; gap: 8px; padding: 7px 0;
    font-size: 13px; border-bottom: 1px dashed var(--line);
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list li > i { color: var(--c-primary); width: 16px; text-align: center; flex: none; font-size: 12.5px; }
.spec-list .spec-bullet { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); display: inline-block; flex: none; margin-left: 5px; }
.spec-list .k { color: var(--muted); min-width: 60px; flex: none; }
.spec-list .v { color: var(--ink); font-weight: 600; flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pc-cycle { padding: 14px 18px 0; display: flex; gap: 8px; }
.cycle-pill {
    flex: 1; text-align: center; padding: 10px 6px; border: 1px solid var(--line); border-radius: 8px;
    background: #F8FAFC; color: var(--muted); text-decoration: none;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    transition: all .2s var(--ease);
}
.cycle-pill .lbl { font-size: 12px; }
.cycle-pill .val { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.cycle-pill:hover { border-color: var(--brand-200); background: #fff; }
.cycle-pill.active { border-color: var(--c-primary); background: #EFF6FF; color: var(--c-primary); }
.cycle-pill.active .val { color: var(--c-primary); }
.cycle-pill.disabled { opacity: 0.45; cursor: not-allowed; }

.pc-buy { margin: 14px 18px 10px; width: calc(100% - 36px); font-weight: 600; flex-shrink: 0; }

/* ------------------------------ 筛选栏 ------------------------------ */
.filter-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; margin-bottom: 20px;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.filter-bar .f-label { font-size: 13px; color: var(--muted); }
.filter-select {
    height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: #fff; font-size: 14px; color: var(--ink-2); cursor: pointer; outline: none;
    transition: border-color var(--dur) var(--ease);
}
.filter-select:focus { border-color: var(--c-primary); }
.filter-bar .spacer { margin-left: auto; }
.result-count { font-size: 13px; color: var(--muted); }
.result-count b { color: var(--c-primary); }

/* 已选条件 chips */
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: var(--brand-50); color: var(--c-primary); font-size: 13px; font-weight: 500;
}
.chip a { color: var(--muted-2); font-size: 12px; }
.chip a:hover { color: var(--c-danger); }
.chip-clear { color: var(--muted); font-size: 13px; }

/* ------------------------------ 周期价格切换 ------------------------------ */
.cycle-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.cycle-tab {
    flex: 1; min-width: 84px; padding: 10px 8px; cursor: pointer; text-align: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
    transition: all .22s var(--ease);
}
.cycle-tab .m { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.cycle-tab .p { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-2); }
.cycle-tab:hover { border-color: var(--brand-300); }
.cycle-tab.active {
    border-color: var(--c-primary); background: var(--brand-50);
    box-shadow: 0 0 0 3px rgba(26,86,240,.09);
}
.cycle-tab.active .m { color: var(--c-primary); }
.cycle-tab.active .p { color: var(--c-primary); font-weight: 600; }
.cycle-tab .save {
    display: block; margin-top: 3px; font-size: 11px; color: var(--c-danger); font-weight: 600;
}
.cycle-tab--ref { cursor: default; background: #f8fafc; border-style: dashed; opacity: .92; }
.cycle-tab--ref:hover { border-color: var(--line); }
.cycle-tab--ref .m { color: var(--muted-2); }
.cycle-tab--ref .p { color: var(--muted-2); }

/* ------------------------------ 产品详情 ------------------------------ */
.detail-layout { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.detail-main { min-width: 0; }
.detail-side { position: sticky; top: calc(var(--header-h) + 20px); }

.buy-card { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.buy-price { display: flex; align-items: baseline; gap: 4px; color: var(--c-danger); }
.buy-price .cur { font-size: 18px; font-weight: 700; }
.buy-price .val { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.buy-price .unit { font-size: 14px; color: var(--muted); }
.buy-total { margin-top: 10px; padding: 12px 14px; background: var(--bg-soft); border-radius: var(--radius-sm); font-size: 14px; color: var(--ink-2); }
.buy-total b { color: var(--c-danger); }

/* 参数表 */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); text-align: left; font-size: 14px; }
.spec-table th { width: 130px; color: var(--muted); font-weight: 500; background: var(--bg-soft); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* 详情页各区块分隔 */
.detail-main .card > h3,
.os-section-label,
.notice-section h3 {
    display: flex; align-items: center; gap: 10px;
    font-size: 17px; font-weight: 700; color: var(--ink-1);
}
.detail-main .card > h3::before,
.os-section-label::before,
.notice-section h3::before {
    content: '';
    width: 4px; height: 18px;
    background: var(--c-primary);
    border-radius: 2px;
}
.detail-main .card > h3 { margin-top: 28px; }
.notice-section h3 { margin-bottom: 14px; }
.os-section-label { padding-top: 0; }
.detail-main .spec-table,
.detail-main .os-section,
.detail-main .buy-fields,
.detail-main .notice-section {
    padding-bottom: 26px;
    margin-bottom: 6px;
    border-bottom: 1px dashed var(--line-2);
}
.detail-main .notice-section:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* 选项卡（详情/评价） */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tab {
    padding: 12px 20px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--dur) var(--ease);
}
.tab:hover { color: var(--c-primary); }
.tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.tab-panel { padding: 24px 0; display: none; animation: fadeIn .35s var(--ease); }
.tab-panel.active { display: block; }

/* ------------------------------ 表单 / 提示（覆盖增强） ------------------------------ */
.form-control {
    width: 100%; height: 44px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
    font-size: 15px; outline: none; transition: all var(--dur) var(--ease);
}
.form-control:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(26,86,240,.1); }
textarea.form-control { height: auto; padding: 12px 14px; }

.alert { padding: 13px 16px; border-radius: var(--radius-sm); font-size: 14px; border: 1px solid transparent; }
.alert-success { background: #e7f8f0; border-color: #a6e9c6; color: #067647; }
.alert-error   { background: #feeceb; border-color: #fda29b; color: #b42318; }
.alert-info    { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-800); }
.alert-warning { background: #fff6e6; border-color: #fcd9a4; color: #b54708; }

/* 分页（覆盖默认） */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: #fff; font-size: 14px; color: var(--ink-2);
    transition: all var(--dur) var(--ease);
}
.pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-2px); }
.pagination .active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 700; }
.pagination .disabled { color: var(--muted-2); background: var(--bg); border-color: transparent; cursor: not-allowed; }

/* 空状态 */
.empty { padding: 70px 20px; text-align: center; color: var(--muted); }
.empty i { font-size: 46px; color: var(--brand-200); margin-bottom: 14px; }

/* ------------------------------ 页脚 ------------------------------ */
/* 深炭灰底 +「品牌联系 ｜ 四组链接」两栏结构：右侧底部两行（友情链接 / 备案）
   与链接列左对齐。配色按参考图逐点取样：底色 #191c22、分隔线 #303339、
   标题 #fff、链接 #5e646e、小字 #a1a7b2、图标 #ccc。 */
.site-foot {
    /* 页脚配色（按参考图逐点取样）—— 想整体调色只改这几个变量 */
    --foot-bg: #191c22;      /* 深炭灰底 */
    --foot-line: #303339;    /* 分隔线 */
    --foot-title: #ffffff;   /* 列标题 / 联系方式 */
    --foot-text: #5e646e;    /* 链接 / 正文 */
    --foot-muted: #a1a7b2;   /* 版权小字 / 地址 */
    --foot-icon: #cccccc;    /* 社交图标 */
    --foot-hover: #ffffff;   /* 链接悬停 */

    margin-top: 0; background: var(--foot-bg); color: var(--foot-text); padding: 58px 0 0;
}

.foot-main { display: flex; align-items: flex-start; }
.foot-brand { flex: 0 0 370px; max-width: 370px; padding-right: 30px; }
.foot-right { flex: 1 1 auto; min-width: 0; }

/* 品牌 */
.foot-logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 19px; font-weight: 800; color: var(--foot-title); letter-spacing: -.02em;
}
.foot-logo-mark {
    width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff; font-size: 16px; flex: none;
}
.foot-slogan { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--foot-muted); max-width: 300px; }

/* 联系方式：标签 + 值两行，值更大更亮（对齐参考图的电话 / 邮箱块） */
.foot-contact { margin-top: 30px; }
.foot-contact-label { font-size: 15px; font-weight: 600; color: var(--foot-title); }
.foot-contact-value { margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--foot-title); letter-spacing: .01em; }
.foot-contact-value a { color: var(--foot-title); }
.foot-contact-sub { font-size: 13px; font-weight: 400; color: var(--foot-muted); }

/* 版权 / 地址 */
.foot-copyright { margin-top: 32px; font-size: 12.5px; line-height: 1.9; color: var(--foot-muted); }

/* 社交图标 */
.foot-social { margin-top: 34px; display: flex; gap: 18px; }
.foot-social a { color: var(--foot-icon); font-size: 23px; line-height: 1; transition: color .16s var(--ease); }
.foot-social a:hover { color: var(--foot-hover); }

/* 四组链接 */
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); }
.foot-col { padding-right: 24px; min-width: 0; }
.foot-title {
    position: relative; padding-bottom: 26px; margin-bottom: 24px;
    font-size: 16px; font-weight: 700; color: var(--foot-title); line-height: 1.2;
}
/* 标题下是「定宽短横线」，不是整列通栏（参考图实测约 160px） */
.foot-title::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 160px; max-width: 100%; height: 1px; background: var(--foot-line);
}
.foot-links li { margin-bottom: 13px; font-size: 13px; line-height: 1.3; }
.foot-links li:last-child { margin-bottom: 0; }
.foot-links a { color: var(--foot-text); transition: color .16s var(--ease); }
.foot-links a:hover { color: var(--foot-hover); }

/* 友情链接行：上下各一条分隔线，与链接列左对齐 */
.foot-friends {
    margin-top: 54px; padding: 26px 0 30px;
    border-top: 1px solid var(--foot-line); border-bottom: 1px solid var(--foot-line);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; font-size: 13px;
}
.foot-friends-label { font-size: 14px; font-weight: 700; color: var(--foot-title); }
.foot-friends a, .foot-friends span { color: var(--foot-text); }
.foot-friends a:hover { color: var(--foot-hover); }

/* 备案 / 版权行：有友情链接行时不再重复画上分隔线 */
.foot-legal {
    margin-top: 54px; padding: 18px 0 44px;
    border-top: 1px solid var(--foot-line);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px;
    font-size: 13px; color: var(--foot-text);
}
.foot-legal span { display: inline-flex; align-items: center; }
.foot-legal i { color: var(--foot-muted); margin-right: 7px; }
.foot-friends + .foot-legal { margin-top: 0; border-top: 0; }

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width: 1080px) {
    .detail-layout { grid-template-columns: 1fr; }
    .detail-side { position: static; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    /* 页脚：品牌列改为整行，四组链接两列 */
    .foot-main { flex-direction: column; }
    .foot-brand { flex: 1 1 auto; max-width: none; padding-right: 0; }
    .foot-right { width: 100%; margin-top: 44px; }
    .foot-cols { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
    .foot-friends, .foot-legal { margin-top: 40px; }
}
@media (max-width: 768px) {
    .hero { padding: 60px 0 70px; }
    .hero h1 { font-size: 31px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .section-head h2 { font-size: 25px; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .nav { display: none; }
    /* 页脚：四组链接保持两列（收成单列会让页脚过长），480px 以下才单列 */
    .foot-cols { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
    .foot-col { padding-right: 16px; }
    .foot-friends, .foot-legal { margin-top: 30px; gap: 8px 18px; }
    .region-level { flex-direction: column; gap: 8px; }
    .region-level .lv-tag { width: auto; }
}
/* 页脚：超窄屏才把四组链接收成单列 */
@media (max-width: 480px) {
    .foot-cols { grid-template-columns: 1fr; row-gap: 28px; }
    .foot-col { padding-right: 0; }
}

/* ==========================================================================
   旧类名桥接层
   把历史 Blade 页面仍在使用的 .container / .card / .badge 等类，
   统一收敛到新的蓝色设计语言，使未逐页重写的页面也保持视觉一致。
   ========================================================================== */
.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.card {
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden;
}
.card-header {
    padding: 14px 18px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
    font-weight: 700; color: var(--ink);
}
.card-body { padding: 18px; }

.breadcrumb { padding: 16px 0 0; font-size: 13px; color: var(--muted); }
.breadcrumb a:hover { color: var(--c-primary); }

.divider { height: 1px; background: var(--line); margin: 16px 0; border: 0; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); text-align: left; font-size: 14px; }
.table th { background: var(--bg-soft); color: var(--muted); font-weight: 600; }
.table tbody tr:hover { background: var(--bg-soft); }

.badge {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600; background: var(--brand-50); color: var(--c-primary);
}
.badge-primary { background: var(--c-primary); color: #fff; }
.badge-success { background: #e7f8f0; color: var(--c-success); }
.badge-warning { background: #fff6e6; color: var(--c-warning); }
.badge-danger  { background: #feeceb; color: var(--c-danger); }
.badge-info    { background: var(--brand-50); color: var(--c-primary); }
.badge-secondary { background: rgba(12,26,43,.06); color: var(--ink-2); }

.form-group { margin-bottom: 16px; }
.form-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }

.text-secondary { color: var(--muted); }
.text-danger { color: var(--c-danger); }
.text-success { color: var(--c-success); }
.text-xs { font-size: 12px; }

.empty-state { padding: 64px 20px; text-align: center; color: var(--muted); }
.empty-state .icon { font-size: 44px; color: var(--brand-200); margin-bottom: 12px; display: block; }

/* 旧工具类补齐（间距与弹性布局） */
.d-flex { display: flex; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.align-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 14px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 14px; }
.mb-3 { margin-bottom: 22px; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 14px; }
.mt-3 { margin-top: 22px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-sm { font-size: 13px; }
.mono { font-family: ui-monospace, Consolas, monospace; }

/* 历史页头/旧 header 隐藏（已由 .site-head 取代） */
.site-header, .site-footer { display: none; }

/* ==========================================================================
   操作系统卡片式分类选择器（Windows/CentOS/Debian/Ubuntu/Fedora/Rocky/AlmaLinux）
   ========================================================================== */
.os-section {
    display: flex; align-items: flex-start; gap: 14px;
    padding-top: 8px;
}
.os-section-label {
    flex: 0 0 auto;
    min-width: 60px;
    font-size: 15px; font-weight: 600; color: var(--ink-1);
    padding-top: 12px;
    white-space: nowrap;
}
.os-card-grid {
    flex: 1;
    display: flex; flex-wrap: wrap;
    gap: 14px;
}
.os-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff;
    padding: 14px 16px;
    cursor: pointer;
    transition: all .2s ease;
    min-width: 0;
    position: relative;
    flex: 1 1 170px;
    max-width: 100%;
}
.os-card:hover {
    border-color: var(--c-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.10);
}
.os-card.active {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18), 0 6px 18px rgba(59, 130, 246, 0.12);
    z-index: 10;
    flex: 2 1 220px;
}
.os-card-main {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
}
.os-card-icon {
    font-size: 22px;
    width: 26px; text-align: center;
    flex-shrink: 0;
}
.os-card-name {
    font-size: 14px; font-weight: 600; color: var(--ink-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-card-version { min-height: 32px; }
.os-card-version select.form-control {
    width: 100%; min-width: 0;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 6px;
    border-color: var(--line);
    background-color: #fff;
}
.os-version-placeholder {
    display: inline-block;
    font-size: 13px; color: var(--muted);
    line-height: 32px;
}

/* ---------- 选型页「公共镜像」：复用上面这套带图标卡片，尺寸收一档 ---------- */
.sel-os-main { flex: 1 1 320px; min-width: 0; display: flex; }
.sel-os-main .os-card-grid { gap: 12px; }
.sel-os-main .os-card { flex: 1 1 148px; padding: 12px 14px; }
.sel-os-main .os-card.active { flex: 1 1 196px; }
.sel-os-main .os-card-icon { font-size: 20px; width: 24px; }
.sel-os-main .os-card-name { font-size: 13.5px; }
.sel-os-main .os-card-version { min-height: 30px; }
.sel-os-main .os-version-placeholder { font-size: 12.5px; line-height: 30px; }
/* 卡片比普通控件高，标签与卡片首行对齐（默认是整行垂直居中） */
.sel-row-os { align-items: start; }
.sel-row-os > .sel-label { padding-top: 12px; }

/* 开通配置：云服务器名 / 密码（分行 + 蓝色主按钮） */
.buy-fields { display: flex; flex-direction: column; gap: 16px; }
.buy-field { display: flex; flex-direction: column; gap: 8px; }
.buy-label { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.field-with-btn { display: flex; align-items: stretch; }
.field-with-btn .form-control {
    flex: 1; min-width: 0;
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    border-right: none;
}
.field-with-btn .btn {
    flex: 0 0 auto; white-space: nowrap;
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    padding: 0 18px;
}
.field-hint { font-size: 12px; color: var(--muted); }

/* 购买须知 */
.notice-section h3 { margin-bottom: 14px; }
.notice-list {
    display: flex; flex-direction: column; gap: 10px;
    color: var(--ink-2); line-height: 1.7;
}
.notice-list li { display: flex; align-items: flex-start; gap: 8px; }
.notice-list li i { margin-top: 4px; flex-shrink: 0; }

@media (max-width: 620px) {
    .os-section { flex-direction: column; gap: 10px; }
    .os-section-label { padding-top: 0; }
    .os-card-grid { gap: 10px; }
    .os-card { flex: 1 1 140px; padding: 10px 12px; }
    .os-card.active { flex: 1 1 100%; }
    .os-card-icon { font-size: 18px; width: 22px; }
    .os-card-name { font-size: 13px; }
}



/* ==========================================================================
   云服务器专区（固定套餐 / 弹性配置 双模式）
   ========================================================================== */
.cloud-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    padding: 36px 38px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #0d2871 0%, #1442c6 52%, #2f6bff 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.cloud-hero::after {
    content: '';
    position: absolute;
    right: -80px; top: -80px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.cloud-hero-copy { position: relative; z-index: 2; }
.cloud-hero .eyebrow {
    display: inline-block;
    font-size: 12px; letter-spacing: .18em; font-weight: 700;
    color: #7fdcff; text-transform: uppercase;
}
.cloud-hero h1 { font-size: 40px; letter-spacing: -.03em; margin-top: 8px; }
.cloud-hero p { margin-top: 14px; font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .86); max-width: 720px; }
.cloud-hero p b { color: #fff; }
.cloud-hero-points { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; color: rgba(255, 255, 255, .9); }
.cloud-hero-points i { color: #7fdcff; margin-right: 5px; }
.cloud-hero-stats { position: relative; z-index: 2; display: flex; gap: 16px; }
.cloud-stat {
    min-width: 108px; padding: 16px 18px; border-radius: var(--radius);
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
    text-align: center; backdrop-filter: blur(6px);
}
.cloud-stat b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.cloud-stat span { font-size: 12.5px; color: rgba(255, 255, 255, .82); }

.cloud-panel { margin-top: 22px; }
.cloud-panel-head { margin-bottom: 18px; }
.cloud-panel-head h2 { font-size: 22px; color: var(--ink); }
.cloud-panel-head p { margin-top: 6px; font-size: 14px; color: var(--muted); }

/* 弹性方案切换（云服务器专区）：复用配置器的「线路卡片」网格视觉 */
.elastic-lines { margin-bottom: 22px; }
.elastic-lines .ec-sec-head { margin-bottom: 14px; }

/* 当前选中的弹性方案：一条信息条 */
.elastic-product-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px; padding: 12px 16px;
    background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--radius);
}
.elastic-product-head h3 { font-size: 16px; color: var(--ink); margin: 0; }
.elastic-product-head p { margin: 0; font-size: 13px; color: var(--muted); }

/* 弹性配置器 */
.elastic-groups { display: flex; flex-direction: column; gap: 18px; }
.elastic-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.elastic-hint { font-size: 12px; color: var(--muted-2); }
.elastic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.elastic-chip {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 9px 14px; cursor: pointer; font-family: inherit;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
    transition: all var(--dur) var(--ease);
}
.elastic-chip .ec-label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.elastic-chip .ec-sub { font-size: 11.5px; color: var(--muted-2); }
.elastic-chip:hover { border-color: var(--brand-300); transform: translateY(-1px); }
.elastic-chip.active { border-color: var(--c-primary); background: var(--brand-50); }
.elastic-chip.active .ec-label, .elastic-chip.active .ec-sub { color: var(--c-primary); }

.elastic-summary { list-style: none; margin: 0; padding: 12px 14px; background: var(--bg-soft); border-radius: var(--radius-sm); }
.elastic-summary li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; }
.elastic-summary li span { color: var(--muted); }
.elastic-summary li b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
    .cloud-hero { grid-template-columns: 1fr; padding: 28px 22px; }
    .cloud-hero h1 { font-size: 30px; }
    .cloud-hero-stats { justify-content: flex-start; }
}

/* ==========================================================================
   云服务器「在线选型」—— 传统 IDC 选型表风格
   左竖排分类标签（规格 / 选型 / 系统信息）+ 行式选项按钮组
   ========================================================================== */
[x-cloak] { display: none !important; }

.sel-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 26px;
    align-items: start;
}

.sel-main { min-width: 0; }

.sel-side { position: sticky; top: 88px; }

/* ---------- 分组块 ---------- */
.sel-block {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.sel-rail {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 22px 0;
    background: #f6f8fc;
    border-right: 1px solid var(--line-2);
}
.sel-rail span {
    writing-mode: vertical-rl;
    letter-spacing: .32em;
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}

.sel-rows { padding: 6px 18px 6px 4px; min-width: 0; }

.sel-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px dashed var(--line-2);
}
.sel-row:last-child { border-bottom: 0; }

.sel-label {
    text-align: right;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
}
.sel-label i { color: var(--muted-2); margin-right: 4px; }

.sel-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

/* ---------- 选项按钮 ---------- */
.sel-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 116px;
    /* 7px + 20px 行高 = 36px，与下拉框 / 输入框等高（对照上级模板的统一控件高度） */
    padding: 7px 18px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink-2);
    font-size: 14px;
    font-family: inherit;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s var(--ease);
}
.sel-opt em { font-style: normal; font-size: 11.5px; opacity: .7; }
.sel-opt:hover { border-color: var(--brand-300); color: var(--c-primary); }
.sel-opt.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    cursor: default;
}
.sel-opt:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 紧贴成组的按钮对（登录方式：设置密码 | 暂不设置） ---------- */
.sel-pair { display: inline-flex; }
.sel-pair > .sel-opt { min-width: 116px; }
.sel-pair > .sel-opt:first-child { border-radius: 2px 0 0 2px; }
.sel-pair > .sel-opt:last-child { border-radius: 0 2px 2px 0; }
/* 第二枚压掉一像素，与前一枚共用同一条边框（视觉上严丝合缝） */
.sel-pair > .sel-opt + .sel-opt { margin-left: -1px; }
/* 选中态是实心蓝底，提到上层盖住共享边框，避免边缘发灰 */
.sel-pair > .sel-opt.active { position: relative; z-index: 1; }

/* ---------- 行内说明文字（占满一行，与控件左对齐） ---------- */
.sel-hint {
    flex: 0 0 100%;
    color: var(--muted-2);
    font-size: 12.5px;
    line-height: 1.7;
}

/* ---------- 等宽格子分段控件（一行平铺 · 选中蓝实心） ---------- */
.sel-seg {
    display: grid;
    grid-template-columns: repeat(var(--seg-cols, 8), minmax(0, 1fr));
    width: 100%;
    border: 1px solid var(--line);
    /* 底边同时由容器与格子给出：选项个数不足一行时（如防御只有 2 档）
       末尾空出的格子没有边框，靠容器底边把方框闭合，避免「缺一角」 */
    border-bottom: 1px solid var(--line);
    border-radius: 2px;
    background: var(--white);
    overflow: hidden;
}

.sel-seg > .sel-opt {
    width: 100%;
    min-width: 0;
    padding: 10px 6px;
    border: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
}
.sel-seg > .sel-opt:last-child { border-right: 0; }
.sel-seg > .sel-opt em { display: block; font-size: 11px; opacity: .85; }
.sel-seg > .sel-opt.active {
    background: var(--c-primary);
    border-right-color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    color: #fff;
}
.sel-seg > .sel-opt.active em { opacity: .9; }
.sel-seg > .sel-opt:not(.active):hover { background: var(--brand-50, #f2f7ff); color: var(--c-primary); }

.sel-note { color: var(--c-warning); font-size: 12.5px; line-height: 1.6; }

/* 一行内的多项控件（下拉 + 提示，或按钮组） */
.sel-optgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- 数值滑块（系统盘 / 数据盘等 step 型附加项） ---------- */
.sel-range-group { gap: 10px; }

.sel-range {
    -webkit-appearance: none;
    appearance: none;
    width: clamp(180px, 40vw, 400px);
    max-width: 100%;
    height: 22px;                 /* 加大可拖动热区，避免只能点中细线 */
    border: 0;
    border-radius: 3px;
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--c-primary), var(--c-primary)),
                      linear-gradient(90deg, var(--line, #dfe6f1), var(--line, #dfe6f1));
    background-repeat: no-repeat, no-repeat;
    background-size: var(--sel-pct, 0%) 8px, 100% 8px;
    background-position: 0 50%, 0 50%;
    cursor: pointer;
    outline: none;
    margin: 0;
}
.sel-range::-webkit-slider-runnable-track { background: transparent; height: 8px; }
.sel-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--c-primary);
    box-shadow: 0 1px 4px rgba(12, 26, 43, .25);
    cursor: grab;
    transition: transform .12s;
}
.sel-range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.08); }
.sel-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--c-primary);
    cursor: grab;
}
.sel-range:focus-visible { box-shadow: 0 0 0 3px var(--brand-100, #dbeafe); }

.sel-range-box {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--brand-400);
    border-radius: 2px;
    background: var(--white);
    overflow: hidden;
}
.sel-range-box .sel-num {
    width: 68px;
    padding: 7px 6px;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font-size: 13.5px;
    font-family: inherit;
    text-align: center;
    outline: none;
}
.sel-range-unit {
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-left: 1px solid var(--line);
    background: var(--bg-soft, #f6f8fc);
    color: var(--muted);
    font-size: 12.5px;
}
.sel-range-price {
    font-style: normal;
    color: var(--c-primary);
    font-size: 13px;
    font-weight: 600;
}
.sel-range-scale { color: var(--muted); font-size: 12px; }

/* 滑块 + 刻度整体（数据盘 / 公网带宽） */
.sel-range-wrap { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.sel-range-cur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 6px 10px;
    border: 1px solid var(--brand-400);
    border-radius: 2px;
    background: var(--white);
    color: var(--c-primary);
    font-size: 13.5px;
    font-weight: 600;
}
.sel-ticks {
    display: flex;
    justify-content: space-between;
    width: clamp(180px, 40vw, 400px);
    max-width: 100%;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.4;
}
.sel-ticks span { white-space: nowrap; }

/* ---------- 数字输入（数值 + 单位 + 上下微调） ---------- */
.sel-num-box {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--brand-400);
    border-radius: 2px;
    background: var(--white);
    overflow: hidden;
}
.sel-num-box .sel-num {
    width: 62px;
    padding: 7px 6px;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font-size: 13.5px;
    font-family: inherit;
    line-height: 20px;          /* 整个框高度对齐 36px（与下拉框 / 按钮一致） */
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}
.sel-num-box .sel-num::-webkit-outer-spin-button,
.sel-num-box .sel-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* select 型滑块（如公网带宽）的当前档位读数 */
.sel-num-box .sel-num-ro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    padding: 7px 6px;
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 20px;
    white-space: nowrap;
}
.sel-num-unit {
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-left: 1px solid var(--line);
    background: var(--bg-soft, #f6f8fc);
    color: var(--muted);
    font-size: 12.5px;
}

/* ---------- 增加一块 / 移除一块 ---------- */
.sel-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--c-primary);
    border-radius: 2px;
    background: var(--c-primary);
    color: #fff;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity .18s var(--ease);
}
.sel-add:hover { opacity: .88; }
.sel-add i { font-size: 12px; }

.sel-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--white);
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    transition: all .18s var(--ease);
}
.sel-del:hover { border-color: var(--c-danger); color: var(--c-danger); }

/* ---------- 下拉 / 输入 ---------- */
.sel-select {
    /* 宽度对齐上级模板：系统类别 220px，系统版本更长故给 280px */
    min-width: 220px;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--brand-400);
    border-radius: 2px;
    background: var(--white);
    color: var(--ink-2);
    font-size: 13.5px;
    font-family: inherit;
}

.sel-input {
    width: 92px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--white);
    color: var(--ink-2);
    font-size: 13.5px;
    font-family: inherit;
    line-height: 20px;          /* 与下拉框 / 按钮统一到 36px 高 */
    text-align: center;
}
.sel-input-wide { width: 200px; text-align: left; }

/* 系统版本下拉：名称更长（如 Windows Server 2012 R2 中文版），比系统类别宽一档 */
.sel-select-ver { min-width: 280px; }

.sel-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--brand-400);
    border-radius: 2px;
    background: var(--white);
    overflow: hidden;
}
.sel-stepper .sel-input { border: 0; border-radius: 0; }
.sel-unit {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-left: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 13.5px;
}
.sel-spin { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.sel-spin button {
    /* 撑满整列：上下两枚按钮等分框高（原来写死 15px，比框矮时右侧会空出一块白） */
    flex: 1 1 auto;
    width: 24px;
    min-height: 15px;
    border: 0;
    background: #f2f5fa;
    color: var(--muted);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sel-spin button:first-child { border-bottom: 1px solid var(--line); }
.sel-spin button:hover { background: var(--brand-50); color: var(--c-primary); }

.sel-help {
    width: 18px;
    height: 18px;
    /* 描边式（对照上级模板）：白底 + 蓝色圆环 + 蓝色问号 */
    border: 1.5px solid var(--brand-500);
    border-radius: 50%;
    background: transparent;
    color: var(--brand-500);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}
.sel-help:hover { background: var(--brand-50); }

/* ---------- 分组之间的灰色分隔带 ---------- */
.sel-sep {
    height: 16px;
    margin: 12px 0;
    border-radius: 4px;
    background: #f1f4fa;
}

/* ---------- 右卡补充 ---------- */
.sel-cur-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--muted);
}
.sel-cur-line i { color: var(--c-primary); }
.sel-cur-line b { margin-left: auto; color: var(--ink); font-size: 13.5px; }

@media (max-width: 980px) {
    .sel-layout { grid-template-columns: minmax(0, 1fr); }
    .sel-side { position: static; }
    .sel-block { grid-template-columns: minmax(0, 1fr); }
    .sel-rail { display: none; }
    .sel-rows { padding: 6px 16px; }
    .sel-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .sel-label { text-align: left; }
    .sel-opt { flex: 1 1 auto; min-width: 0; }
    /* 窄屏：下拉框各占一行铺满；登录方式那一对按钮也整行铺满且保持贴合 */
    .sel-select, .sel-select-ver { width: 100%; min-width: 0; }
    .sel-pair { flex: 1 1 100%; }
    .sel-pair > .sel-opt { flex: 1 1 0; min-width: 0; }
    .sel-seg { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
    .sel-range, .sel-ticks { width: 100%; }
}

/* 详情页 → 在线选型 引导条 */
.sel-cta {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--brand-200);
    background: var(--brand-50);
    border-radius: var(--radius);
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--ink-2);
}
.sel-cta > i { color: var(--c-primary); font-size: 17px; margin-top: 2px; }
.sel-cta b { color: var(--ink); margin-right: 6px; }
.sel-cta a { color: var(--c-primary); font-weight: 600; }

/* ==========================================================================
   会员中心 v2 —— 概览卡 + 数据宫格 + 快捷入口 + 侧边导航（移动端友好）
   覆盖 app.css 中的旧 .user-layout / .user-sidebar / .stat-cards 视觉
   ========================================================================== */
.uc-wrap { max-width: var(--wrap); margin: 0 auto; padding: 22px 16px 64px; }
.uc-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 20px; align-items: start; }
.uc-main { min-width: 0; }

/* ---------- 侧边资料卡 + 导航 ---------- */
.uc-side { position: sticky; top: 88px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; max-height: calc(100vh - 108px); }
.uc-side__top { flex-shrink: 0; padding: 22px 16px 18px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--brand-700), var(--brand-500) 55%, var(--c-accent)); }
.uc-avatar { width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; background: rgba(255, 255, 255, .2); border: 2px solid rgba(255, 255, 255, .65); }
.uc-side__name { font-size: 16px; font-weight: 600; }
.uc-side__meta { margin-top: 3px; font-size: 12px; opacity: .85; }
.uc-side__balance { margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.uc-side__balance b { font-size: 18px; font-weight: 700; }

.uc-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.uc-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.uc-nav a > i { width: 18px; text-align: center; color: var(--muted-2); }
.uc-nav a:hover { background: var(--brand-50); color: var(--brand-600); }
.uc-nav a:hover > i { color: var(--brand-600); }
.uc-nav a.active { background: var(--brand-50); color: var(--brand-600); font-weight: 600; }
.uc-nav a.active > i { color: var(--brand-600); }
.uc-nav__logout { margin: 0; padding: 0; }
.uc-nav__btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; background: none; border-radius: 10px; font-size: 14px; color: var(--ink-2); cursor: pointer; text-align: left; font-family: inherit; }
.uc-nav__btn > i { width: 18px; text-align: center; color: var(--muted-2); }
.uc-nav__btn:hover { background: #fff1f0; color: var(--c-danger); }
.uc-nav__btn:hover > i { color: var(--c-danger); }

/* ---------- 顶部欢迎条 ---------- */
.uc-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.uc-hero h1 { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--ink); }
.uc-hero p { margin: 0; font-size: 13px; color: var(--muted); }
.uc-hero__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 数据宫格 ---------- */
.uc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.uc-stat { display: flex; align-items: center; gap: 13px; padding: 15px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.uc-stat__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.uc-stat__val { font-size: 21px; font-weight: 700; line-height: 1.15; color: var(--ink); }
.uc-stat__label { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.uc-stat__val.is-lg { font-size: 18px; }
.is-blue { background: var(--brand-50); color: var(--brand-600); }
.is-green { background: #e6f7ef; color: var(--c-success); }
.is-orange { background: #fff4e6; color: #d97706; }
.is-cyan { background: #e6f8ff; color: #0891b2; }

/* ---------- 快捷入口 ---------- */
.uc-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.uc-quick a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 15px 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; color: var(--ink-2); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.uc-quick a > i { font-size: 20px; color: var(--brand-600); }
.uc-quick a:hover { transform: translateY(-2px); border-color: var(--brand-200); box-shadow: var(--shadow-sm); color: var(--brand-600); }

/* ---------- 内容卡片 ---------- */
.uc2-card {
    margin-top: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(12,26,43,.04), 0 8px 20px rgba(20,66,198,.05);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.uc2-card + .uc2-card,
.uc2-grid-2 > .uc2-card,
.uc2-grid > .uc2-card {
    margin-top: 14px;
}
.uc2-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(20,66,198,.08);
    border-color: var(--brand-200);
}
.uc2-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 18px; border-bottom: 1px solid var(--line-2); background: linear-gradient(180deg, #fff, var(--bg-soft)); }
.uc2-card__head h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.uc2-card__head h2 > i { color: var(--brand-500); }
.uc2-card__body { padding: 16px 18px; }
.uc2-card__body.is-flush { padding: 0; }

/* ---------- 表格 ---------- */
.uc2-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.uc2-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.uc2-table th { padding: 11px 14px; text-align: left; font-weight: 600; font-size: 12.5px; color: var(--muted); background: var(--bg-soft); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.uc2-table td { padding: 13px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.uc2-table tbody tr:last-child td { border-bottom: 0; }
.uc2-table tbody tr:hover { background: var(--bg-soft); }
.uc2-table .num { font-weight: 600; }
.uc2-table__acts { display: flex; gap: 6px; flex-wrap: wrap; }
/* 实例清单：列较多，窄屏横向滚动而不是挤压换行 */
.uc2-table--wide { min-width: 1180px; }
.uc2-table--wide th, .uc2-table--wide td { white-space: nowrap; }
.uc2-table--wide td.mono { font-size: 12.5px; letter-spacing: .2px; }
.uc2-table__acts .btn { flex: 0 0 auto; }
/* 一键复制按钮 */
.js-copy-row { cursor: pointer; }

/* ---------- 标签 / 状态点 ---------- */
.uc2-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; line-height: 18px; white-space: nowrap; font-weight: 500; }
.uc2-tag.ok { background: #e6f7ef; color: #07774a; }
.uc2-tag.wait { background: #fff4e6; color: #b45309; }
.uc2-tag.err { background: #feeceb; color: var(--c-danger); }
.uc2-tag.gray { background: var(--bg); color: var(--muted); }
.uc2-tag.blue { background: var(--brand-50); color: var(--brand-600); }
.uc2-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.uc2-dot.ok { background: var(--c-success); }
.uc2-dot.wait { background: var(--c-warning); }
.uc2-dot.err { background: var(--c-danger); }
.uc2-dot.off { background: var(--muted-2); }

/* ---------- 筛选 tabs ---------- */
.uc2-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.uc2-tabs::-webkit-scrollbar { display: none; }
.uc2-tabs a { padding: 6px 14px; border-radius: 999px; font-size: 13px; background: var(--bg); color: var(--ink-2); white-space: nowrap; transition: background .2s, color .2s; }
.uc2-tabs a:hover { color: var(--brand-600); }
.uc2-tabs a.on { background: var(--brand-600); color: #fff; }

/* ---------- 键值信息网格 ---------- */
.uc2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.uc2-field { padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.uc2-field .k { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.uc2-field .v { font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-all; }
.uc2-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }

/* ---------- 硬件规格（CPU / 内存 / 硬盘 / 带宽 / IP 数 / 防御） ---------- */
.uc2-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-top: 8px; }
.uc2-spec { position: relative; padding: 11px 14px 11px 40px; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius-sm); }
.uc2-spec > i { position: absolute; left: 13px; top: 13px; font-size: 14px; color: var(--brand-600); opacity: .9; }
.uc2-spec .k { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.uc2-spec .v { font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-all; }
@media (max-width: 520px) { .uc2-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 弹性云详情 · 阿帕云控制台样式（uc-elastic-*） ---------- */
.uc-elastic-head { display:flex; align-items:flex-start; gap:16px; padding:18px 22px;
    background: linear-gradient(135deg, #ffffff 0%, var(--brand-50) 100%);
    border:1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px;
    flex-wrap: wrap; justify-content: space-between; }
.uc-elastic-head__main { display:flex; gap:14px; align-items:flex-start; flex:1 1 auto; min-width:280px; }
.uc-elastic-head__icon { width:42px; height:42px; border-radius:10px; background: var(--brand-100); color: var(--brand-600);
    display:inline-flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.uc-elastic-head__info { min-width:0; }
.uc-elastic-head__title { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600; color:var(--ink); margin-bottom:6px; flex-wrap:wrap; }
.uc-elastic-head__title .mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size:15px; }
.uc-elastic-head__sub { color:var(--muted); font-size:13px; margin-bottom:8px; line-height:1.6; }
.uc-elastic-head__meta { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.uc-elastic-head__meta b { color: var(--ink); font-weight:500; }
.uc-elastic-head__actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.uc-elastic-head__more { position:relative; }
.uc-elastic-head__menu {
    position:absolute; right:0; top:calc(100% + 6px); min-width:160px;
    background: var(--white); border:1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(15,23,42,.12); padding:6px; z-index:30;
    display:flex; flex-direction:column; gap:2px; }
.uc-elastic-head__menu form, .uc-elastic-head__menu a { margin:0; }
.uc-elastic-head__menu button, .uc-elastic-head__menu a {
    display:flex; align-items:center; gap:8px; padding:8px 12px;
    font-size:13px; color:var(--ink); background:transparent; border:none; border-radius: var(--radius-sm);
    cursor:pointer; width:100%; text-align:left; text-decoration:none; transition: background var(--dur) var(--ease); }
.uc-elastic-head__menu button:hover, .uc-elastic-head__menu a:hover { background: var(--bg-soft); }
.uc-elastic-head__menu i { color:var(--brand-600); width:14px; text-align:center; }
.uc-elastic-head__menu .fa-chevron-down.is-flip { transform: rotate(180deg); }
.fa-chevron-down { transition: transform var(--dur) var(--ease); }

.uc-elastic-tabs { display:flex; gap:4px; padding:0 6px;
    border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x:auto; }
.uc-elastic-tab { padding:11px 18px; background:transparent; border:none; cursor:pointer;
    color: var(--muted); font-size:14px; font-weight:500; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 2px solid transparent; margin-bottom:-1px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.uc-elastic-tab:hover { color: var(--ink); }
.uc-elastic-tab.is-active { color: var(--brand-600); border-bottom-color: var(--brand-600); font-weight:600; }
.uc-elastic-tab i { font-size:13px; }

.uc-elastic-pane { display:flex; flex-direction:column; gap:14px; }

.uc-elastic-section { background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding:18px 22px 20px; }
.uc-elastic-section__head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.uc-elastic-section__title { font-size:14px; font-weight:600; color:var(--ink); margin:0 0 12px; display:flex; align-items:center; gap:6px; }
.uc-elastic-section__head .uc-elastic-section__title { margin-bottom:0; }
.uc-elastic-section__title i { color: var(--brand-600); }

.uc-elastic-grid { display:grid; gap:14px 18px; }
.uc-elastic-grid--4x2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uc-elastic-grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uc-elastic-field { padding:11px 14px; background: var(--bg-soft); border:1px solid var(--line-2); border-radius: var(--radius-sm); }
.uc-elastic-field .k { font-size:12px; color: var(--muted); margin-bottom:4px; }
.uc-elastic-field .v { font-size:14px; color: var(--ink); font-weight:500; word-break:break-all; }
.uc-elastic-field .v.mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.uc-elastic-field--password .v { flex-wrap:wrap; }

@media (max-width: 980px) {
    .uc-elastic-grid--4x2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
    .uc-elastic-grid--4x2, .uc-elastic-grid--2x2 { grid-template-columns: repeat(1, minmax(0,1fr)); }
    .uc-elastic-head { padding:14px 16px; }
    .uc-elastic-section { padding:14px 16px 16px; }
}

/* ---------- 续费弹窗 ---------- */
.uc-elastic-modal { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; }
.uc-elastic-modal__backdrop { position:absolute; inset:0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }
.uc-elastic-modal__panel { position:relative; width:100%; max-width:440px; background: var(--white); border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(15,23,42,.18); display:flex; flex-direction:column; overflow:hidden; animation: ucElasticModalIn .18s var(--ease); }
@keyframes ucElasticModalIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: none; } }
.uc-elastic-modal__head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.uc-elastic-modal__head h3 { font-size:15px; font-weight:600; margin:0; display:flex; align-items:center; gap:6px; }
.uc-elastic-modal__head h3 i { color: var(--brand-600); }
.uc-elastic-modal__close { background:transparent; border:none; font-size:22px; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px; }
.uc-elastic-modal__close:hover { color: var(--ink); }
.uc-elastic-modal__body { padding:18px; display:flex; flex-direction:column; gap:10px; }
.uc-elastic-modal__period { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.uc-elastic-modal__period-opt { display:flex; align-items:center; gap:10px; padding:11px 14px; background: var(--bg-soft); border:1px solid var(--line-2); border-radius: var(--radius-sm); cursor:pointer; transition: border-color var(--dur) var(--ease); }
.uc-elastic-modal__period-opt:hover { border-color: var(--brand-300); }
.uc-elastic-modal__period-opt input[type=radio] { accent-color: var(--brand-600); flex:none; }
.uc-elastic-modal__period-name { font-size:14px; font-weight:600; color:var(--ink); flex:1; }
.uc-elastic-modal__period-price { font-size:13px; color: var(--brand-600); font-weight:500; }
.uc-elastic-modal__foot { display:flex; justify-content:flex-end; gap:8px; padding-top:6px; }

/* ---------- 空态 ---------- */
.uc2-empty { padding: 46px 20px; text-align: center; color: var(--muted); }
.uc2-empty > i { font-size: 40px; opacity: .35; margin-bottom: 10px; }
.uc2-empty p { margin: 0 0 12px; font-size: 14px; }

/* ---------- 响应式：平板 ---------- */
@media (max-width: 1080px) {
    .uc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uc-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 响应式：手机 ---------- */
@media (max-width: 900px) {
    .uc-wrap { padding: 14px 12px 40px; }
    .uc-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }

    /* 侧边卡：顶部横条 + 横向滑动导航 */
    .uc-side { position: static; border-radius: var(--radius); }
    .uc-side__top { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; }
    .uc-avatar { width: 44px; height: 44px; font-size: 19px; margin: 0; flex-shrink: 0; }
    .uc-side__who { min-width: 0; flex: 1; }
    .uc-side__name { font-size: 15px; }
    .uc-side__balance { margin-top: 0; padding: 6px 10px; flex-shrink: 0; }
    .uc-side__balance b { font-size: 15px; }
    .uc-nav { flex-direction: row; overflow-x: auto; padding: 8px; gap: 6px; -webkit-overflow-scrolling: touch; }
    .uc-nav::-webkit-scrollbar { display: none; }
    .uc-nav a, .uc-nav__btn { flex: 0 0 auto; padding: 9px 14px; }
    .uc-nav__logout { margin-top: 0; padding-top: 0; border-top: 0; }

    .uc-hero { padding: 15px 16px; border-radius: var(--radius); }
    .uc-hero h1 { font-size: 17px; }
    .uc-hero__acts { width: 100%; }
    .uc-hero__acts .btn { flex: 1; }

    .uc-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .uc-quick a { padding: 12px 4px; font-size: 12px; }
    .uc-quick a > i { font-size: 18px; }

    /* 表格 → 卡片式列表（自动带字段名） */
    .uc-table-scroll { overflow: visible; }
    .uc-table thead { display: none; }
    .uc-table, .uc-table tbody, .uc-table tr, .uc-table td { display: block; width: 100%; }
    .uc-table tr { padding: 10px 4px; border-bottom: 1px solid var(--line-2); }
    .uc-table tr:last-child { border-bottom: 0; }
    .uc-table td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px 12px; border: 0; text-align: right; }
    .uc-table td::before { content: attr(data-label); flex-shrink: 0; font-size: 12.5px; color: var(--muted); }
    .uc-table td:empty { display: none; }
    .uc-table__acts { justify-content: flex-end; }
    .uc-table tbody tr:hover { background: none; }
}

@media (max-width: 480px) {
    .uc-stats { gap: 10px; }
    .uc-stat { padding: 12px; gap: 10px; }
    .uc-stat__icon { width: 38px; height: 38px; font-size: 17px; }
    .uc-stat__val { font-size: 18px; }
    .uc-quick a { font-size: 11.5px; }
    .uc-card__head { padding: 12px 14px; }
    .uc-card__body { padding: 12px 14px; }
    .uc-side__balance span { display: none; }
}

/* ==========================================================================
   会员中心 v3 —— 控制台首页（三栏版式：欢迎条 + 账户概览/待办 + 产品宫格 + 右栏）
   参考 ZUN 云控制台布局，仅用于 dashboard
   ========================================================================== */
[x-cloak] { display: none !important; }

/* ---------- 站点公告条 ---------- */
.uc-notice { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 14px; border: 1px solid #fde68a; background: #fffbeb; border-radius: var(--radius); font-size: 13.5px; color: #92400e; }
.uc-notice > i { flex-shrink: 0; color: #d97706; }
.uc-notice__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-notice__txt a { color: #92400e; }
.uc-notice__txt a:hover { color: #b45309; text-decoration: underline; }
.uc-notice__x { flex-shrink: 0; padding: 2px 4px; border: 0; background: none; color: #b45309; font-size: 13px; cursor: pointer; }

/* ---------- 欢迎条 ---------- */
.uc-hello { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.uc-hello__avatar { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--c-accent)); box-shadow: 0 4px 12px rgba(47, 107, 255, .28); }
.uc-hello__txt { flex: 1; min-width: 0; }
.uc-hello__line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 15px; color: var(--ink); }
.uc-hello__hi { font-size: 13.5px; color: var(--muted); }
.uc-hello__line b { font-weight: 700; }
.uc-hello__id { padding: 1px 8px; border-radius: 999px; background: var(--brand-50); color: var(--brand-600); font-size: 12px; }
.uc-hello__line > i { font-size: 13px; color: var(--muted-2); cursor: help; }
.uc-hello__sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.uc-hello__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 三栏骨架 ---------- */
.uc-cols { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 20px; align-items: start; margin-top: 16px; }
.uc-col-main { min-width: 0; }
.uc-col-side { position: sticky; top: 88px; min-width: 0; }
.uc-col-main > *:first-child, .uc-col-side > *:first-child { margin-top: 0; }

/* ---------- 账户概览 + 待办事项（并排） ---------- */
.uc-duo { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; }
.uc-duo > .uc-card { margin-top: 0; }
.uc-ov__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.uc-ov__num .k { font-size: 12.5px; color: var(--muted); }
.uc-ov__num .v { margin-top: 4px; font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.5px; color: var(--ink); }
.uc-ov__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.uc-todo__row { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-2); }
.uc-todo__row:last-child { border-bottom: 0; }
.uc-todo__row b { min-width: 18px; font-size: 16px; font-weight: 700; color: var(--brand-600); }
.uc-todo__row em { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--brand-600); white-space: nowrap; }
.uc-todo__row:hover { background: var(--bg-soft); }
.uc-todo__row:hover em { text-decoration: underline; }

/* ---------- 已开通产品宫格 ---------- */
.uc-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.uc-svc__item { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--radius); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.uc-svc__item:hover { transform: translateY(-2px); border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.uc-svc__icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--brand-50); color: var(--brand-600); }
.uc-svc__meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.uc-svc__meta b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.uc-svc__badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-danger); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.uc-svc__desc { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.5; color: var(--muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- 卡片右上「更多」 ---------- */
.uc-more { font-size: 12.5px; color: var(--muted); }
.uc-more:hover { color: var(--brand-600); }
.uc-more > i { font-size: 11px; }

/* ---------- 公告列表 ---------- */
.uc-nlist { padding: 4px 0; }
.uc-nlist li { display: flex; align-items: center; gap: 8px; padding: 9px 18px; font-size: 13px; border-bottom: 1px dashed var(--line-2); }
.uc-nlist li:last-child { border-bottom: 0; }
.uc-nlist li::before { content: ''; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--brand-200); }
.uc-nlist li a { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.uc-nlist li a:hover { color: var(--brand-600); }
.uc-nlist li time { flex-shrink: 0; font-size: 11.5px; color: var(--muted-2); }

/* ---------- 侧栏分组导航（v3）：分组标题可折叠 ---------- */
.uc-nav__home { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 6px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--brand-600); background: var(--brand-50); }
.uc-nav__home > i:first-child { width: 18px; text-align: center; }
.uc-nav__home:hover { background: var(--brand-100); }
.uc-nav__ext { margin-left: auto; font-size: 11px; opacity: .55; }
.uc-nav__group { display: flex; flex-direction: column; gap: 2px; }
/* 分组之间：用间距代替分割线，配合深色侧栏显得干净 */
.uc-nav__group + .uc-nav__group { margin-top: 10px; padding-top: 0; border-top: 0; }
.uc-nav__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    margin-bottom: 4px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, .42);
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    transition: color .2s var(--ease);
}
.uc-nav__title:hover { color: rgba(255, 255, 255, .72); }
.uc-nav__title > i { font-size: 10px; opacity: .65; transition: transform .18s var(--ease); }
.uc-nav__title > i.is-collapsed { transform: rotate(-90deg); }
.uc-nav__items { display: flex; flex-direction: column; gap: 2px; }

/* ---------- 响应式：≤900px 侧栏转横向滑动，分组标题自动隐藏 ---------- */
@media (max-width: 900px) {
    .uc-side { max-height: none; }
    .uc-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 6px; }
    /* 分组容器「透明化」：所有菜单项直接参与横排，无需逐个改结构 */
    .uc-nav__group, .uc-nav__items { display: contents; }
    .uc-nav__title { display: none; }
    .uc-nav__group + .uc-nav__group { margin-top: 0; padding-top: 0; border-top: 0; }
    .uc-nav__home { margin-bottom: 0; }
    .uc-nav__ext { display: none; }
}

/* ---------- 会员中心：充值页金额选择 / 支付方式 ---------- */
.uc-balance { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border-radius: var(--radius); color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--brand-500) 60%, var(--c-accent)); }
.uc-balance .k { font-size: 12.5px; opacity: .9; }
.uc-balance .v { font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.uc-amount-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.uc-amount { padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all .16s var(--ease); }
.uc-amount:hover { border-color: var(--brand-400); color: var(--brand-600); }
.uc-amount.on { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-600); box-shadow: inset 0 0 0 1px var(--brand-600); }
.uc-pays { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-pay { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-size: 13.5px; color: var(--ink-2); cursor: pointer; transition: all .16s var(--ease); }
.uc-pay:hover { border-color: var(--brand-400); }
.uc-pay:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-600); font-weight: 600; }
.uc-pay input { margin: 0; accent-color: var(--brand-600); }
.uc-tabs__n { display: inline-block; min-width: 18px; margin-left: 2px; padding: 0 5px; border-radius: 999px; background: rgba(12, 26, 43, .07); font-size: 11px; line-height: 16px; text-align: center; }
.uc-tabs a.on .uc-tabs__n { background: rgba(255, 255, 255, .3); }

/* ---------- 专属客服 ---------- */
.uc-kf__top { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px dashed var(--line); }
.uc-kf__avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--c-accent)); }
.uc-kf__who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uc-kf__who b { font-size: 14px; color: var(--ink); }
.uc-kf__who span { font-size: 12px; color: var(--c-success); }
.uc-kf__list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 12.5px; color: var(--muted); }
.uc-kf__list li > i { width: 15px; text-align: center; color: var(--muted-2); }
.uc-kf__list li a { margin-left: auto; color: var(--brand-600); font-weight: 500; }
.uc-kf__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.uc-kf__acts .btn { flex: 1; }

/* ---------- 手机扫码 ---------- */
.uc-sup .uc-card__body { display: flex; align-items: center; gap: 14px; }
.uc-sup__qr { width: 104px; height: 104px; flex-shrink: 0; padding: 6px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.uc-sup__qr img, .uc-sup__qr canvas { display: block; width: 100% !important; height: 100% !important; }
.uc-sup__txt { min-width: 0; }
.uc-sup__txt b { display: block; font-size: 14px; color: var(--ink); }
.uc-sup__txt p { margin: 5px 0 10px; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* ---------- 响应式：≤1200px 右栏收到底部 ---------- */
@media (max-width: 1200px) {
    .uc-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .uc-col-side { position: static; }
}

/* ---------- 响应式：≤900px 手机 ---------- */
@media (max-width: 900px) {
    .uc-hello { gap: 11px; padding: 14px; border-radius: var(--radius); }
    .uc-hello__avatar { width: 44px; height: 44px; font-size: 18px; }
    .uc-hello__line { font-size: 14px; }
    .uc-hello__acts { width: 100%; }
    .uc-hello__acts .btn { flex: 1; }
    .uc-duo { grid-template-columns: minmax(0, 1fr); }
    .uc-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uc-ov__num .v { font-size: 22px; }
}

@media (max-width: 480px) {
    .uc-svc { grid-template-columns: minmax(0, 1fr); }
    .uc-svc__item { padding: 12px; }
    .uc-ov__num .v { font-size: 20px; }
    .uc-hello__id { display: none; }
    .uc-sup .uc-card__body { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   弹性云服务器 · 下单配置页（ec- 前缀）
   分区式排版：线路 / 可用区 / 实例配置（机型·规格）/ 存储 / 网络带宽 / 镜像 / 管理设置
   ========================================================================== */
.ec-card { padding: 26px; }

/* 分区 */
.ec-sec { padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px dashed var(--line-2); }
.ec-sec--last { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.ec-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.ec-sec-head h3 {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-size: 17px; font-weight: 700; color: var(--ink);
}
.ec-sec-head h3::before {
    content: ''; width: 4px; height: 18px; background: var(--c-primary); border-radius: 2px;
}
.ec-sec-sub { font-size: 12.5px; color: var(--muted-2); }

/* 行：左标签 + 右内容 */
.ec-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.ec-row:last-child { margin-bottom: 0; }
.ec-label {
    flex: 0 0 92px; padding-top: 11px; text-align: right;
    font-size: 14px; color: var(--ink-2); white-space: nowrap;
}
.ec-body { flex: 1 1 auto; min-width: 0; }

/* 行内元素排布 */
.ec-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ec-inline--tight { margin-bottom: 10px; }
.ec-static { display: inline-block; padding-top: 10px; font-size: 14px; color: var(--ink-2); }
.ec-hint { font-size: 12.5px; color: var(--muted-2); line-height: 1.6; }
.ec-md { max-width: 340px; }

/* ---------------- 线路网格 ----------------
   与下方 .ec-model-card 同一套语言：白底细边、12px 圆角、选中蓝底白字。
   卡内两行网格，左信息 / 右信息两端排布，卡高压到约 70px：
     ① 首行：名称（+ 平台缩写徽标）占满整行 —— 线路名不折行、不截断
     ② 次行：价格（左，整卡视觉重心） + 元信息标签（右，右对齐）
   注：原三层纵向堆叠（名称 / 价格 / 标签各占一行）卡高 116px，
       右侧三分之一全空；改为两行两端对齐后卡高减半、视野一屏可容纳全部线路。 */
.ec-line-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.ec-line-card {
    position: relative; display: grid;
    /* 价格列 auto（按内容占位）、标签列 minmax(0,1fr)：标签列**允许被压缩**，
       否则后台「商品卖点」较长时会撑宽网格并把价格挤掉/压叠（`auto` 会取 max-content）。 */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "head head" "price tags";
    align-items: center; column-gap: 12px; row-gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.ec-line-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ① 首行：名称（左）+ 平台缩写 / HOT（紧贴名称右侧），整行宽保证长线路名完整显示 */
.ec-line-head { grid-area: head; display: flex; align-items: center; gap: 8px; }
.ec-line-name {
    flex: 0 1 auto; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ec-line-check { flex: none; font-size: 13px; color: var(--brand-500); }
.ec-flag { width: 20px; height: 14px; border-radius: 2px; flex: none; }

/* ② 平台缩写徽标（后台「平台管理 → 品牌缩写」，如 KK / YG / ZK）：紧贴名称，不占价格行 */
.ec-line-brand {
    flex: none; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px;
    border: 1px solid var(--line); background: var(--bg-soft);
    font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted-2);
    text-transform: uppercase;
}
.ec-line-brand--hot { border-color: #f9c8c4; background: #feeceb; color: var(--c-danger); }

/* 次行左：价格（整卡视觉重心） */
.ec-line-price { grid-area: price; display: flex; align-items: baseline; gap: 4px; }
.ec-line-price b { font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--c-danger); }
.ec-line-price i { font-style: normal; font-size: 12px; color: var(--muted-2); }

/* 次行右：元信息标签（内容来自后台「商品管理 → 商品卖点」，随卡片自适应换行），
   右对齐 —— 与左端价格形成两端排布，填补卡片右侧留白；标签过宽时在自己列内换行，不压到价格。 */
.ec-line-tags { grid-area: tags; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ec-line-tags:empty { display: none; }

/* 选中线路：整卡蓝底白字（与机型卡 .ec-model-card.active 一致） */
.ec-line-card--cur {
    border-color: var(--c-primary);
    background: linear-gradient(180deg, #2a6bff 0%, #1a46d6 100%);
    box-shadow: 0 8px 20px rgba(26,86,240,.26);
}
.ec-line-card--cur:hover { transform: none; }
.ec-line-card--cur .ec-line-name { color: #fff; }
.ec-line-card--cur .ec-line-check { color: #fff; }
.ec-line-card--cur .ec-line-price b { color: #fff; }
.ec-line-card--cur .ec-line-price i { color: rgba(255,255,255,.76); }
.ec-line-card--cur .ec-line-brand { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.18); color: #fff; }
.ec-line-card--cur .ec-tag { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.16); color: #fff; }
.ec-line-card--cur .ec-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.55); }

.ec-tag {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 6px;
    font-size: 12px; line-height: 1.7; white-space: nowrap;
    border: 1px solid var(--brand-200); color: var(--c-primary); background: var(--brand-50);
}
.ec-tag--ok { border-color: #a6e9c6; color: #067647; background: #e7f8f0; }

/* ---------------- 可用区按钮 ---------------- */
.ec-zone-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ec-zone-btn {
    min-width: 150px; padding: 10px 18px; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
    font-size: 14px; color: var(--ink-2); transition: all .2s var(--ease);
}
.ec-zone-btn:hover { border-color: var(--brand-300); color: var(--c-primary); }
.ec-zone-btn.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }

/* ---------------- 机型卡片 ---------------- */
.ec-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ec-model-card {
    position: relative; padding: 14px 16px 14px 30px; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
    transition: all .2s var(--ease);
}
.ec-model-card::before {
    content: ''; position: absolute; left: 14px; top: 19px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--brand-300);
}
.ec-model-card:hover { border-color: var(--brand-300); }
/* 选中机型：与线路卡一致的蓝底白字 */
.ec-model-card.active {
    border-color: var(--c-primary);
    background: linear-gradient(180deg, #2a6bff 0%, #1a46d6 100%);
    box-shadow: 0 8px 20px rgba(26,86,240,.26);
}
.ec-model-card.active::before { background: #fff; }
.ec-model-card.active .ec-model-name { color: #fff; }
.ec-model-card.active .ec-model-desc { color: rgba(255,255,255,.92); }
.ec-model-card.active .ec-model-sub { color: rgba(255,255,255,.72); }
.ec-model-card.active .ec-model-badge { background: rgba(255,255,255,.24); }
.ec-model-name {
    font-size: 14px; font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ec-model-desc { margin-top: 6px; font-size: 12.5px; color: var(--c-primary); font-weight: 600; }
.ec-model-sub { margin-top: 3px; font-size: 12px; color: var(--muted-2); }
.ec-model-badge {
    position: absolute; top: 0; right: 0; padding: 2px 8px;
    font-size: 11px; font-weight: 700; color: #fff;
    background: var(--c-danger); border-bottom-left-radius: var(--radius-sm);
}

/* ---------------- 规格筛选 + 表格 ---------------- */
.ec-filters { display: flex; gap: 12px; flex-wrap: wrap; }
.ec-filter { max-width: 200px; }
.ec-picked {
    display: inline-flex; align-items: center; padding: 8px 16px;
    border-radius: var(--radius-sm); background: var(--c-primary); color: #fff;
    font-size: 13.5px; font-weight: 600;
}
/* 规格表：固定高度内滚动（表头吸顶），规格再多也不会把页面撑长 */
.ec-table-wrap {
    margin-top: 4px; max-height: 384px; overflow: auto;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.38) transparent;
}
.ec-table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.ec-table-wrap::-webkit-scrollbar-track { background: transparent; }
.ec-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(100,116,139,.34); border-radius: 8px;
}
.ec-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); }
.ec-table-wrap::-webkit-scrollbar-corner { background: transparent; }

.ec-spec-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ec-spec-table thead th {
    position: sticky; top: 0; z-index: 2;
    padding: 12px 18px; text-align: left; font-size: 13px; font-weight: 600;
    color: var(--muted); background: var(--bg-soft); white-space: nowrap;
    box-shadow: 0 1px 0 var(--line-2);
}
.ec-spec-table tbody td { padding: 14px 18px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); }
.ec-spec-table tbody tr { cursor: pointer; transition: background .16s var(--ease); }
.ec-spec-table tbody tr:hover { background: var(--bg-soft); }
.ec-spec-table tbody tr.active { background: var(--brand-50); }
.ec-th-radio { width: 52px; }
.ec-th-price { text-align: right; }
.ec-radio { width: 16px; height: 16px; accent-color: var(--c-primary); cursor: pointer; }
.ec-spec-name { color: var(--ink); font-weight: 600; }
/* CPU 型号列（阿帕云等上级的处理器型号）：型号串较长（如 Xeon Platinum 8255），
   单行展示，避免把规格表撑成两行高 */
.ec-spec-model { color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.ec-price { color: var(--c-danger); font-weight: 700; }
.ec-empty-cell { text-align: center; color: var(--muted); padding: 26px 18px !important; }

/* ---------------- 数值步进 / 滑块 ---------------- */
.ec-chip-static {
    display: inline-flex; align-items: center; padding: 8px 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg-soft); font-size: 13.5px; color: var(--ink-2);
}
.ec-step { display: inline-flex; align-items: stretch; }
.ec-step-btn {
    width: 34px; border: 1px solid var(--line); background: #fff; color: var(--ink-2);
    font-size: 15px; cursor: pointer; transition: all .18s var(--ease);
}
.ec-step-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: 0; }
.ec-step-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 0; }
.ec-step-btn:hover { background: var(--brand-50); color: var(--c-primary); }
.ec-num { width: 96px; height: 36px; text-align: center; }
.ec-step .form-control { height: 36px; border-radius: 0; }
.ec-unit { font-size: 13.5px; color: var(--muted); }
.ec-free {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 4px;
    font-size: 12px; font-weight: 600; color: var(--c-danger); background: #feeceb; white-space: nowrap;
}
.ec-range { flex: 1 1 200px; min-width: 140px; max-width: 420px; accent-color: var(--c-primary); cursor: pointer; }
.ec-add {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
    color: var(--c-primary); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.ec-add:hover { color: var(--c-primary-d); }

/* ---------------- 药丸按钮组 ---------------- */
.ec-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.ec-pill {
    min-width: 88px; padding: 9px 20px; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
    font-size: 14px; color: var(--ink-2); transition: all .18s var(--ease);
}
.ec-pill:hover { border-color: var(--brand-300); color: var(--c-primary); }
.ec-pill.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }

/* ---------------- 镜像选项卡 ---------------- */
.ec-os-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.ec-os-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
    font-size: 13.5px; color: var(--ink-2); transition: all .18s var(--ease);
}
.ec-os-tab i { font-size: 16px; }
.ec-os-tab:hover { border-color: var(--brand-300); }
.ec-os-tab.active { border-color: var(--c-primary); background: var(--brand-50); color: var(--c-primary); font-weight: 600; }

/* ---------------- 分段按钮组（地区类型 / 网络配置 / 带宽计费方式…） ----------------
   分格线由「容器底色 + 1px 间隙」实现，按钮自身不带边框；
   旧写法（按钮 border + margin-left:-1px 压边 + :first/:last 圆角）在**换行后**
   首/末行外侧会露出直角、中间行两端方角（地区类型 8 个按钮必换行），故改为容器统一描边 + overflow 裁切。 */
.ec-seg {
    display: inline-flex; flex-wrap: wrap; gap: 1px;
    background: var(--line); border: 1px solid var(--line);
    border-radius: var(--radius-sm); overflow: hidden;
}
.ec-seg-btn {
    min-width: 104px; padding: 10px 22px; cursor: pointer; font-family: inherit;
    border: 0; background: #fff; font-size: 14px; color: var(--ink-2);
    transition: all .18s var(--ease);
}
.ec-seg-btn:hover { color: var(--c-primary); background: var(--brand-50); }
.ec-seg-btn.active { background: var(--c-primary); color: #fff; font-weight: 600; }

/* ---------------- 勾选行（内网 IP 等） ---------------- */
.ec-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.ec-check input { width: 16px; height: 16px; accent-color: var(--c-primary); cursor: pointer; flex: none; }
.ec-check-text { font-size: 14px; color: var(--ink-2); }

/* ---------------- 镜像卡片网格 ---------------- */
/* 系统分类数量不定，桌面端**每行最多 6 个**：
   - 超过 6 个自动换到第 2 行（先前是 grid-auto-flow: column，8 个全挤一行，
     每张只剩 ~80px，名称被迫断词成 "Window s" / "Tencent OS"）；
   - 6 个以内仍平分整行（auto-fit 会把空轨道折掉，剩下的 1fr 撑满整行）。
   列宽下限取「容器宽 / 6」（减掉 5 个 gap），所以任何视口宽度下都塞不进第 7 个，
   卡片也永远有足够宽度让名称单行显示。 */
.ec-img-grid {
    /* gap 用变量定义，列宽下限公式直接引用它 —— 两者不会再各自漂移 */
    --ec-img-gap: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - 5 * var(--ec-img-gap)) / 6), 1fr));
    gap: var(--ec-img-gap);
}
.ec-img-card {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 9px; padding: 16px 8px; cursor: pointer; text-align: center; overflow: hidden;
    min-width: 0;   /* 允许在网格里收缩，否则长名称会把整列撑宽 */
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
    transition: all .18s var(--ease);
}
.ec-img-card i { font-size: 26px; line-height: 1; flex: none; }
/* 名称必须单行。先前是 overflow-wrap: anywhere —— 允许在任意位置断词，
   卡片一窄就断成 "Window s" / "Tencent OS"。改为不换行 + 溢出省略号，
   完整名称由视图的 :title 提供（悬停可见）。 */
.ec-img-card span {
    font-size: 13px; color: var(--ink-2); line-height: 1.25;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ec-img-card:hover { border-color: var(--brand-300); transform: translateY(-1px); }
.ec-img-card.active { border-color: var(--c-primary); background: var(--brand-50); }
.ec-img-card.active i, .ec-img-card.active span { color: var(--c-primary); font-weight: 600; }
/* 选中角标：右上角蓝色三角 + 对勾 */
.ec-img-card.active::after {
    content: ''; position: absolute; top: 0; right: 0;
    border: 15px solid var(--c-primary);
    border-left-color: transparent; border-bottom-color: transparent;
}
.ec-img-card.active::before {
    content: '✓'; position: absolute; top: -1px; right: 1px; z-index: 1;
    font-size: 10px; font-weight: 700; color: #fff; line-height: 1;
}
.ec-img-card.is-disabled { opacity: .5; cursor: not-allowed; background: var(--bg-soft); }
.ec-img-card.is-disabled:hover { border-color: var(--line); transform: none; }

/* ---------------- 响应式 ---------------- */
/* 窄屏不再用「每行 6 个」的按宽自适应，直接降到固定 3 / 2 列，避免卡片过窄。 */
@media (max-width: 1080px) {
    .ec-line-grid, .ec-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ec-img-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .ec-card { padding: 18px; }
    .ec-line-grid, .ec-model-grid { grid-template-columns: minmax(0, 1fr); }
    .ec-img-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ec-seg { width: 100%; }
    .ec-seg-btn { flex: 1 1 auto; text-align: center; }
    .ec-row { flex-direction: column; gap: 8px; }
    .ec-label { flex: none; padding-top: 0; text-align: left; font-weight: 600; }
    .ec-body { width: 100%; }
    .ec-zone-btn { min-width: 0; flex: 1 1 128px; }
    .ec-filter, .ec-md, .ec-num { max-width: 100%; width: 100%; }
    .ec-range { flex: 1 1 100%; }
    /* 小屏行高更矮，滚动区同步收窄 */
    .ec-table-wrap { max-height: 320px; }
    .ec-spec-table thead th, .ec-spec-table tbody td { padding: 11px 12px; }
}

/* ==========================================================================
   会员中心 · 产品管理页（实例运维）
   —— 电源操作 / 系统与配置 / 流量监控 / 远程与截图 / 安全设置 的功能格子
   —— 全部按适配器能力位渲染，不支持的功能不输出 DOM（故样式只需覆盖可见态）
   ========================================================================== */
.uc-ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.uc-ops-item {
    padding: 14px 16px; background: var(--bg-soft);
    border: 1px solid var(--line); border-radius: var(--radius);
}
.uc-ops-item__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.uc-ops-item__head b { font-size: 14px; font-weight: 600; color: var(--ink); }
.uc-ops-item p { margin: 0; }
.uc-ops-item .form-control { margin-bottom: 0; }

/* 用量进度条（流量总计 / 资源监控） */
.uc-bar {
    margin: 8px 0 4px; height: 8px; border-radius: 999px;
    background: var(--line-2); overflow: hidden;
}
.uc-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-500), var(--c-accent)); }
.uc-ops-item .uc-bar > i.is-warn { background: linear-gradient(90deg, var(--c-warning), #ffb547); }

/* 操作记录里的状态标签沿用 uc-tag 色阶，无需额外样式 */
@media (max-width: 768px) {
    .uc-ops-grid { grid-template-columns: minmax(0, 1fr); }
    .uc-ops-item__head { align-items: flex-start; }
    .uc-ops-section { padding: 14px 16px; }
    .uc-ops-section__head { flex-wrap: wrap; }
    .uc-ops-section__head .uc-ops-section__btn { width: 100%; justify-content: center; }
}

/* === 运维操作 · 大气扁平化分段布局（全站统一） ===
   取代旧的 uc-ops-item 紧凑灰块：每个操作为一个白色横排分段，左侧 40px 大图标 + 标题，
   右侧主按钮，描述与表单单独占一整行；分段间用 1px 细线分割，整体视觉重量更轻。
   .uc-ops-grid 大屏 2 列、窄屏 1 列，间距 16px；卡片内层用 .uc-ops-section 平铺。 */
.uc-ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.uc-ops-section {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.uc-ops-section:hover {
    border-color: var(--brand-500);
    box-shadow: 0 4px 16px rgba(15, 23, 42, .05);
}
.uc-ops-section__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
}
.uc-ops-section__title {
    display: flex; align-items: center; gap: 12px; min-width: 0;
}
.uc-ops-section__icon {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--brand-50); color: var(--brand-600);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.uc-ops-section__name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.uc-ops-section__desc { font-size: 13px; color: var(--muted); margin: 6px 0 0 52px; line-height: 1.6; }
.uc-ops-section__desc--warn { color: var(--c-warning); display: flex; align-items: center; gap: 6px; }
.uc-ops-section__body { margin-top: 12px; }
.uc-ops-section__btn { flex: none; }
.uc-ops-section__form { max-width: 460px; }
.uc-ops-section__hint {
    font-size: 12px; color: var(--muted); padding: 4px 10px; border-radius: 999px;
    background: var(--bg-soft);
}
.uc-ops-section--wide { grid-column: 1 / -1; }

/* === 实例详情页 · 顶部名片（替代旧 uc2-page__head） === */
.instance-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #ffffff 0%, var(--brand-50) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.instance-hero__left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 320px; }
.instance-hero__icon {
    flex: none; width: 48px; height: 48px; border-radius: 12px;
    background: var(--white); color: var(--brand-600);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}
.instance-hero__main { min-width: 0; }
.instance-hero__title {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.instance-hero__sub {
    margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.5;
}
.instance-hero__sub .mono { font-family: var(--font-mono, ui-monospace, monospace); color: var(--ink-2); }
.instance-hero__right {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.instance-hero__meta { line-height: 1.3; text-align: left; }
.instance-hero__meta .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.instance-hero__meta .v { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.instance-hero__meta .v.is-warn { color: var(--c-danger); }
.instance-hero__meta .v.is-tip { color: var(--c-warning); }

/* === 安装操作系统 · 横向分类标签 + 版本矩阵 + 确认卡（弹性云两步式） === */
.os-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 12px 0 0 52px;
}
.os-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--white); border: 1px solid var(--line);
    font-size: 13px; color: var(--ink-2);
    cursor: pointer; transition: all .18s var(--ease);
}
.os-tab:hover { border-color: var(--brand-300); color: var(--brand-700); }
.os-tab i { font-size: 14px; }
.os-tab.is-active {
    background: var(--brand-600); border-color: var(--brand-600); color: #fff;
    box-shadow: 0 2px 8px rgba(24, 95, 165, .25);
}
.os-tab.is-active i { color: #fff; }

.os-versions,
.os-version,
.os-versions__empty {
    /* 旧的版本矩阵样式已被下拉框取代，保留类名占位避免破坏引用 */
    display: none !important;
}

.os-version-picker {
    margin: 14px 0 0 52px;
    display: flex; align-items: center; gap: 10px;
}
.os-version-picker > i:first-child { color: var(--brand-600); font-size: 14px; }
.os-version-picker .form-control { flex: 1 1 auto; max-width: 420px; }

.os-confirm {
    margin-top: 18px;
    background: linear-gradient(180deg, var(--bg-soft), var(--white));
    border: 1px dashed var(--brand-300);
    border-radius: var(--radius);
    padding: 14px 18px;
}
.os-confirm__head {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--ink);
    flex-wrap: wrap;
}
.os-confirm__head > i:first-child { color: var(--brand-600); }
.os-confirm__pick {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--brand-50); color: var(--brand-700);
    font-size: 12px; font-weight: 500;
}
.os-confirm__body {
    margin-top: 12px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.os-confirm__body .form-control { flex: 1 1 220px; max-width: 360px; }
.os-confirm__body .btn { flex: none; }

@media (max-width: 768px) {
    .instance-hero { padding: 14px 16px; }
    .instance-hero__icon { width: 42px; height: 42px; font-size: 19px; }
    .instance-hero__title { font-size: 16px; }
    .instance-hero__right { width: 100%; justify-content: flex-start; gap: 16px; }
    .os-tabs { margin-left: 0; }
    .os-version-picker { margin-left: 0; }
    .os-version-picker .form-control { max-width: none; }
    .os-confirm__pick { margin-left: 0; }
    .os-confirm__body .form-control { max-width: none; }
}

/* ============================================================================
   会员中心 v6 · 紧凑型控制台（.uc2-*）
   设计：扁平 + 卡片化 + 紧凑栅格 + 状态语义色
   与现有 .uc-* 完全隔离；不破坏其他会员中心页
   ============================================================================ */
/* 兜底：清除任何父级居中容器的限宽 / 内边距，保证会员中心从浏览器左缘铺到右缘 */
main {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* 全屏 shell：铺满整个浏览器窗口，不限宽 / 不居中
   display:flex 让侧栏绝对定位时仍能与主区并排，且 shell 高度由内容决定，
   这样 footer 自然出现在侧栏下方（侧栏不再 position:fixed 跳出文档流）。 */
.uc2-shell {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: calc(100vh - var(--header-h));
    background: #f4f6fb;
    /* 兜底：裁剪内部任何横向溢出（光斑伪元素 / 绝对定位装饰），
       避免整页出现横向滚动条、右侧能拖出空白。
       用 clip 而非 hidden —— clip 不会创建滚动容器，纵轴仍保持 visible，
       因此不影响 sticky 顶栏与页面纵向滚动。表头横向滚动由 .uc2-table-scroll 自己负责。 */
    overflow-x: clip;
}

/* ============ 左侧栏（深灰）：改为 absolute，参与 shell 布局高度 ============
   不再 fixed 跳出文档流，避免遮住底部 footer；
   shell 内 flex 横向布局，侧栏宽 248px、主区占剩余空间。 */
.uc2-side {
    position: relative;
    flex: 0 0 var(--uc2-side-w, 248px);
    width: var(--uc2-side-w, 248px);
    align-self: stretch;
    min-height: calc(100vh - var(--header-h));
    z-index: 5;
    background: #232a37;
    border-right: 1px solid rgba(255, 255, 255, .06);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.uc2-side::-webkit-scrollbar { width: 5px; }
.uc2-side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 3px; }
.uc2-side::-webkit-scrollbar-track { background: transparent; }

/* ============ 主内容区：占满侧栏右侧全部空间 ============
   父级 .uc2-shell 改为 flex 横向布局，本区用 flex:1 占满剩余空间，
   主区高度由自身内容撑开（含足够大的 padding-bottom），footer 自然在 shell 下方。 */
.uc2-main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: auto;
    padding: 22px 24px 64px;
    isolation: isolate;
}
/* 兜底态：父级被居中容器截断时，由 front.js 写入精确像素宽度（见 uc2EnsureFullWidth） */
.uc2-main::before {
    /* 鼠标位置上的光斑（Alpine 写入 --mx/--my）
       inset 必须是 0：早期用 -10% 让光斑外溢，会让主区横向超出视口 10%，
       整页出现横向滚动条（右侧能拖出一片空白）。改为 0 后光斑只在主区内渲染。 */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(520px 320px at var(--mx,50%) var(--my,40%),
                                rgba(26,86,240,.10), rgba(0,194,255,0) 60%);
    z-index: -2;
    transition: background .6s var(--ease);
    pointer-events: none;
}

/* === 背景三色光斑（持续动效） === */
.uc2-bg {
    position: absolute; inset: 0; overflow: hidden;
    z-index: -1; pointer-events: none;
}
.uc2-bg__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    animation: uc2Float 18s ease-in-out infinite;
}
.uc2-bg__blob--1 {
    width: 460px; height: 460px;
    top: -140px; left: -120px;
    background: radial-gradient(circle, rgba(26,86,240,.45), transparent 60%);
}
.uc2-bg__blob--2 {
    width: 540px; height: 540px;
    top: 30%; right: -180px;
    background: radial-gradient(circle, rgba(0,194,255,.42), transparent 60%);
    animation-delay: -6s;
}
.uc2-bg__blob--3 {
    width: 420px; height: 420px;
    bottom: -160px; left: 35%;
    background: radial-gradient(circle, rgba(122,87,255,.30), transparent 60%);
    animation-delay: -12s;
}
@keyframes uc2Float {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(40px,-30px) scale(1.08); }
    66%      { transform: translate(-30px,40px) scale(.95); }
}

/* === Hero（顶部招呼 + 操作的紧凑条） === */
.uc2-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding: 16px 22px;
    margin-bottom: 14px;
    border-radius: var(--radius-lg);
    color: #fff;
    background:
        radial-gradient(at 95% 50%, rgba(0,194,255,.32), transparent 55%),
        linear-gradient(135deg, #1a56f0 0%, #103498 55%, #0a3fb0 100%);
    box-shadow: 0 10px 28px rgba(20,66,198,.18);
}
.uc2-hero__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.uc2-hero__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800;
    background: rgba(255,255,255,.18);
    border: 2px solid rgba(255,255,255,.55);
    flex-shrink: 0;
}
.uc2-hero__id { min-width: 0; }
.uc2-hero__line {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 14.5px; color: #fff;
}
.uc2-hero__hi { opacity: .85; font-weight: 400; }
.uc2-hero__line b { font-size: 18px; }
.uc2-hero__badge {
    padding: 2px 8px; border-radius: 999px;
    background: rgba(255,255,255,.18);
    font-size: 12px; font-weight: 500;
}
.uc2-hero__sub {
    margin-top: 4px;
    font-size: 12.5px;
    color: rgba(255,255,255,.72);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.uc2-hero__sub i { opacity: .8; }
.uc2-hero__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* 紧凑按钮（替代 .btn 在会员中心的用法） */
.uc2-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px;
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    border: 1px solid transparent;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.uc2-btn:hover { transform: translateY(-1px); }
.uc2-btn > i { font-size: 12px; }
.uc2-btn--primary {
    background: #fff; color: var(--brand-700); border-color: #fff;
}
.uc2-btn--primary:hover {
    background: var(--brand-50); color: var(--brand-700);
}
.uc2-btn--ghost {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.40);
    color: #fff;
}
.uc2-btn--ghost:hover {
    background: rgba(255,255,255,.20);
    color: #fff; border-color: rgba(255,255,255,.70);
}
/* 暗色背景外（白底卡）的 ghost 变体 */
.uc2-card .uc2-btn--ghost,
.uc2-after__acts .uc2-btn--ghost {
    background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100);
}
.uc2-card .uc2-btn--ghost:hover,
.uc2-after__acts .uc2-btn--ghost:hover {
    background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-200);
}

/* 紧凑徽标 */
.uc2-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
    background: rgba(255,255,255,.18);
    color: #fff;
}
.uc2-pill--ok   { background: rgba(230,247,239,.95); color: #07774a; }
.uc2-pill--warn { background: rgba(255,244,230,.95); color: #b45309; }
.uc2-pill--err  { background: rgba(254,236,235,.95); color: var(--c-danger); }
.uc2-pill--blue { background: rgba(238,244,255,.95); color: var(--brand-700); }
.uc2-pill--gray { background: rgba(244,247,253,.95); color: var(--muted); }
.uc2-pill > i { font-size: 11px; }

/* === KPI 指标条（5 个数字格） === */
.uc2-kpi {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.uc2-kpi__cell {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: var(--ink);
    overflow: hidden;
    transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.uc2-kpi__cell::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--brand-50) 0%, transparent 60%);
    opacity: 0; transition: opacity .3s var(--ease);
    pointer-events: none;
}
.uc2-kpi__cell:hover {
    transform: translateY(-2px);
    border-color: var(--brand-200);
    box-shadow: 0 12px 28px rgba(20,66,198,.08);
}
.uc2-kpi__cell:hover::after { opacity: 1; }
.uc2-kpi__ico {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
    color: #fff;
    flex-shrink: 0;
}
.uc2-kpi__ico--blue   { background: linear-gradient(135deg, #2f6bff, #1a56f0); }
.uc2-kpi__ico--violet { background: linear-gradient(135deg, #7c5cff, #5a3df0); }
.uc2-kpi__ico--green  { background: linear-gradient(135deg, #2bb673, #129d5c); }
.uc2-kpi__ico--amber  { background: linear-gradient(135deg, #f5a623, #de7d0e); }
.uc2-kpi__ico--red    { background: linear-gradient(135deg, #f25555, #d33d3d); }
.uc2-kpi__body {
    min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px;
    position: relative; z-index: 1;
}
.uc2-kpi__label {
    font-size: 12.5px; color: var(--muted);
}
.uc2-kpi__body b {
    font-size: 22px; font-weight: 800;
    color: var(--ink); letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.uc2-kpi__unit {
    font-size: 12px; color: var(--muted-2);
}
.uc2-kpi__arr {
    align-self: center; color: var(--muted-2); font-size: 12px;
    transition: color .2s, transform .2s var(--ease);
}
.uc2-kpi__cell:hover .uc2-kpi__arr { color: var(--brand-500); transform: translateX(2px); }

/* === 公用卡片 === */
.uc2-main .uc2-card {
    position: relative;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(12,26,43,.04), 0 8px 20px rgba(20,66,198,.05);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.uc2-main .uc2-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(20,66,198,.10);
    border-color: var(--brand-200);
}

.uc2-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line-2);
}
.uc2-card__head h2 {
    margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: var(--ink);
}
.uc2-card__head h2 i { color: var(--brand-500); }
.uc2-card__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px;
    padding: 0 7px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    background: var(--brand-50); color: var(--brand-700);
}
.uc2-card__body { padding: 16px 18px; }

/* === 通用页面标题块（二级页与 dashboard 都用） === */
.uc2-page__head {
    margin-bottom: 14px;
}
.uc2-page__crumbs {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--muted);
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.uc2-page__crumbs > i.fa-house { color: var(--brand-500); }
.uc2-page__crumbs a {
    color: var(--muted-2);
    transition: color .2s var(--ease);
}
.uc2-page__crumbs a:hover { color: var(--brand-600); }
.uc2-page__crumbs > i.fa-angle-right {
    font-size: 9px; opacity: .55;
}
.uc2-page__crumbs > span { color: var(--ink-2); font-weight: 500; }
.uc2-page__title {
    display: flex; align-items: center; gap: 10px;
    margin: 0;
    font-size: 22px; font-weight: 700; color: var(--ink);
    letter-spacing: -.5px;
}
.uc2-page__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
    color: var(--brand-600);
    font-size: 17px;
}
.uc2-page__sub {
    margin: 6px 0 0 46px;
    font-size: 13px; color: var(--muted);
}

/* === 实例详情页：标题块轻量化 ===
   仅作用于 .uc2-page__head--compact（当前只有实例详情页使用），
   其它会员中心页的 .uc2-page__head 保持原样，不受影响。
   目的：图标/字号收敛、副标题左侧 46px 的"阶梯缩进"取消，与下方紧凑卡片更协调。 */
.uc2-page__head--compact .uc2-page__icon {
    width: 30px; height: 30px;
    border-radius: 9px;
    font-size: 15px;
}
.uc2-page__head--compact .uc2-page__title {
    font-size: 19px;
    gap: 9px;
}
.uc2-page__head--compact .uc2-page__sub {
    margin-left: 0;
}
.uc2-more {
    font-size: 12.5px; color: var(--muted);
    transition: color .2s var(--ease);
}
.uc2-more:hover { color: var(--brand-600); }

/* === 通用徽标 === */
.uc2-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
    background: rgba(255,255,255,.16);
    color: #fff;
}
.uc2-badge--ok   { background: #e6f7ef; color: #07774a; }
.uc2-badge--warn { background: #fff4e6; color: #b45309; }
.uc2-badge--err  { background: #feeceb; color: var(--c-danger); }
.uc2-badge--blue { background: var(--brand-50); color: var(--brand-600); }

/* === 行容器（grid 栅格） === */
.uc2-row {
    display: grid; gap: 14px; margin-bottom: 14px;
}
.uc2-row--full { display: block; }
.uc2-row--full > .uc2-card { width: 100%; }
.uc2-row--mid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.uc2-row--bottom { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

/* === 账户概览 === */
.uc2-acc__nums {
    display: grid; grid-template-columns: 1fr 1px 1fr; align-items: end;
    padding: 6px 0 14px;
}
.uc2-acc__num { padding: 2px 12px; }
.uc2-acc__num .k { font-size: 12.5px; color: var(--muted); }
.uc2-acc__num b {
    display: block; margin-top: 2px;
    font-size: 28px; font-weight: 800;
    line-height: 1.05;
    background: linear-gradient(135deg, var(--brand-700), var(--c-accent-d));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
}
.uc2-acc__num .u {
    font-size: 12px; color: var(--muted-2); margin-left: 2px;
}
.uc2-acc__num--mid { position: relative; }
.uc2-acc__num--mid::before {
    content: ''; position: absolute;
    left: -1px; top: 12%; bottom: 12%;
    width: 1px; background: var(--line);
}

.uc2-acc__tiles {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-bottom: 14px;
}
.uc2-acc__tile {
    display: flex; flex-direction: column;
    padding: 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--bg-soft), #fff);
    transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.uc2-acc__tile:hover {
    transform: translateY(-2px);
    border-color: var(--brand-200);
}
.uc2-acc__tile span {
    font-size: 18px; font-weight: 700; color: var(--brand-600);
    line-height: 1.2; font-variant-numeric: tabular-nums;
}
.uc2-acc__tile em {
    margin-top: 2px;
    font-style: normal; font-size: 12px; color: var(--muted);
}

/* Account tabs (mini) */
.uc2-acc__tabs nav {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 12px;
}
.uc2-acc__tabs nav button {
    padding: 7px 12px;
    border: 0; background: none;
    font-size: 13px; color: var(--muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .2s, border-color .2s;
    font-family: inherit;
}
.uc2-acc__tabs nav button.on,
.uc2-acc__tabs nav button:hover {
    color: var(--brand-600);
    border-bottom-color: var(--brand-600);
}
.uc2-acc__panels { position: relative; }
.uc2-acc__panel { display: flex; gap: 8px; align-items: center; }
.uc2-acc__panel[hidden] { display: none; }
.uc2-acc__hint {
    margin: 0; font-size: 13px; color: var(--muted);
}
.uc2-acc__hint .brand { color: var(--brand-600); }
.uc2-input {
    flex: 1; min-width: 0;
    height: 38px; padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 14px; color: var(--ink-2);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.uc2-input:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3px var(--brand-50, rgba(26,86,240,.10));
}

/* === 业务信息 Dashboard === */
.uc2-biz {
    display: grid; grid-template-columns: 1fr 200px;
    gap: 18px; align-items: center;
}
.uc2-biz__rings {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    gap: 14px;
}
.uc2-ring {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
}
.uc2-ring svg { transform: rotate(-90deg); }
.uc2-ring__bg {
    fill: none;
    stroke: var(--line-2);
    stroke-width: 12;
}
.uc2-ring__fg {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1);
    filter: drop-shadow(0 4px 10px rgba(26,86,240,.25));
}
.uc2-ring__center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    pointer-events: none;
}
.uc2-ring__center b {
    font-size: 22px; font-weight: 800;
    color: var(--ink); letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
}
.uc2-ring__center span {
    margin-top: 2px; font-size: 12px; color: var(--muted);
}
.uc2-ring--mem .uc2-ring__center b { color: var(--c-accent-d); }
.uc2-ring--bw  .uc2-ring__center b { font-size: 18px; }
.uc2-ring--bw  svg { width: 100px; height: 100px; }
.uc2-ring--bw  .uc2-ring__bg,
.uc2-ring--bw  .uc2-ring__fg { stroke-width: 10; }

.uc2-biz__meta {
    display: grid; gap: 8px;
    border-left: 1px dashed var(--line);
    padding-left: 16px;
}
.uc2-biz__meta li {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--muted);
}
.uc2-biz__meta li > i {
    width: 18px; text-align: center; color: var(--brand-500);
}
.uc2-biz__meta li b {
    margin-left: auto;
    color: var(--ink); font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* === 我的工单 === */
.uc2-tkt { padding: 6px 0; }
.uc2-tkt li {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line-2);
    font-size: 13.5px; color: var(--ink-2);
    transition: background .2s var(--ease);
}
.uc2-tkt li:last-child { border-bottom: 0; }
.uc2-tkt li:hover { background: var(--bg-soft); }
.uc2-tkt__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--muted-2);
    flex-shrink: 0;
}
.uc2-tkt__dot--wait { background: var(--c-warning); box-shadow: 0 0 0 4px rgba(247,144,9,.15); }
.uc2-tkt__dot--ok   { background: var(--c-success); box-shadow: 0 0 0 4px rgba(18,183,106,.15); }
.uc2-tkt__dot--gray { background: var(--muted-2); }
.uc2-tkt li a {
    flex: 1; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uc2-tkt li em {
    font-style: normal; color: var(--brand-600); font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
.uc2-tkt li:last-child em { color: var(--muted); }

/* === 已购服务 === */
.uc2-svc__tabs {
    display: flex; gap: 4px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line-2);
    background: var(--bg-soft);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.uc2-svc__tabs::-webkit-scrollbar { display: none; }
.uc2-svc__tabs a {
    padding: 11px 14px;
    font-size: 13px; color: var(--muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.uc2-svc__tabs a:hover { color: var(--brand-600); }
.uc2-svc__tabs a.active,
.uc2-svc__tabs a.on {
    color: var(--brand-600); font-weight: 600;
    border-bottom-color: var(--brand-600);
}
.uc2-svc__tabs em {
    font-style: normal;
    margin-left: 4px;
    font-size: 11.5px; color: var(--muted-2);
}
.uc2-svc__panel { padding: 6px 6px 8px; }
.uc2-svc__row {
    display: grid;
    grid-template-columns: 28px 1.6fr 1fr 1.2fr;
    align-items: center; gap: 10px;
    margin: 6px 12px;
    padding: 12px 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--ink-2);
    transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.uc2-svc__row:hover {
    transform: translateX(2px);
    border-color: var(--brand-200);
    box-shadow: 0 6px 16px rgba(20,66,198,.06);
}
.uc2-svc__row-i {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--brand-50); color: var(--brand-600);
    font-size: 13px;
}
.uc2-svc__row-name {
    display: flex; flex-direction: column; gap: 2px;
    color: var(--ink); font-weight: 600;
    font-size: 13.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uc2-svc__row-name em {
    font-style: normal; font-weight: 400;
    font-size: 11.5px; color: var(--muted-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.uc2-svc__row-time {
    font-size: 12px; color: var(--muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* === 工单二维码卡 === */
.uc2-card--qr .uc2-card__body {
    display: flex; gap: 14px;
    align-items: center;
}
.uc2-qr__box {
    flex-shrink: 0;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.uc2-qr__txt h3 { margin: 0 0 4px; font-size: 15px; color: var(--ink); }
.uc2-qr__txt p  { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* === 公告 list === */
.uc2-news { padding: 4px 0 6px; }
.uc2-news li {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--line-2);
    font-size: 13px;
    transition: background .2s var(--ease);
}
.uc2-news li:last-child { border-bottom: 0; }
.uc2-news li:hover { background: var(--bg-soft); }
.uc2-news__dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--brand-300); flex-shrink: 0;
}
.uc2-news li a {
    flex: 1; min-width: 0;
    color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color .2s;
}
.uc2-news li a:hover { color: var(--brand-600); }
.uc2-news li time {
    flex-shrink: 0;
    font-size: 11.5px; color: var(--muted-2);
    font-variant-numeric: tabular-nums;
}
.uc2-news__empty {
    text-align: center; color: var(--muted); padding: 28px 0;
    justify-content: center;
}

/* === 已开通产品（九宫格） === */
.uc2-grid9 { padding-bottom: 4px; }
.uc2-grid9__hint {
    font-size: 12px; color: var(--muted);
}
.uc2-grid9__body {
    display: grid; gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 14px 18px 18px;
}
.uc2-grid9__cell {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto;
    grid-column-gap: 10px;
    align-items: center;
    padding: 12px 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #fff, var(--bg-soft));
    color: var(--ink-2);
    overflow: hidden;
    transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.uc2-grid9__cell::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, var(--brand-100), transparent 60%);
    opacity: 0; transition: opacity .3s var(--ease);
    z-index: 0;
}
.uc2-grid9__cell:hover {
    transform: translateY(-3px);
    border-color: var(--brand-300);
    box-shadow: 0 14px 28px rgba(20,66,198,.10);
}
.uc2-grid9__cell:hover::before { opacity: 1; }
.uc2-grid9__cell > * { position: relative; z-index: 1; }
.uc2-grid9__icon {
    grid-row: 1 / span 2;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
    color: var(--brand-600);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    transition: transform .4s var(--ease);
}
.uc2-grid9__cell:hover .uc2-grid9__icon {
    transform: scale(1.06) rotate(-6deg);
}
.uc2-grid9__name {
    font-size: 13.5px; font-weight: 600;
    color: var(--ink);
}
.uc2-grid9__num {
    top: -6px; margin-left: 4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: var(--c-danger);
    color: #fff;
    font-size: 11px; font-weight: 700; font-style: normal;
    line-height: 18px; text-align: center;
    box-shadow: 0 2px 4px rgba(240,68,56,.30);
}
.uc2-grid9__desc {
    margin-top: 2px;
    font-size: 11.5px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* === 状态徽标（颜色调成雨云风格） === */
.uc2-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px; line-height: 18px;
    white-space: nowrap;
    font-weight: 500;
}
.uc2-tag > i { width: 6px; height: 6px; border-radius: 50%; }
.uc2-tag--ok   { background: #e6f7ef; color: #07774a; } .uc2-tag--ok > i   { background: var(--c-success); }
.uc2-tag--wait { background: #fff4e6; color: #b45309; } .uc2-tag--wait > i { background: var(--c-warning); }
.uc2-tag--err  { background: #feeceb; color: var(--c-danger); } .uc2-tag--err > i { background: var(--c-danger); }
.uc2-tag--blue { background: var(--brand-50); color: var(--brand-600); } .uc2-tag--blue > i { background: var(--brand-500); }
.uc2-tag--gray { background: var(--bg); color: var(--muted); } .uc2-tag--gray > i { background: var(--muted-2); }

/* === 空态 === */
.uc2-empty {
    padding: 40px 20px; text-align: center; color: var(--muted);
}
.uc2-empty > i { font-size: 34px; color: var(--brand-200); margin-bottom: 8px; display: block; }
.uc2-empty p   { margin: 0 0 10px; font-size: 13px; }

/* === 按钮波纹（与已有 .btn 共存） === */
.ripple { position: relative; overflow: hidden; }
.ripple .r-wave {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255,255,255,.45);
    animation: r-ripple .55s linear;
    pointer-events: none;
}
@keyframes r-ripple {
    to { transform: scale(4); opacity: 0; }
}

/* === Responsive === */
@media (max-width: 1180px) {
    .uc2-row--top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
    .uc2-row--top > .uc2-card--tkt { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
    .uc2-row--top { grid-template-columns: minmax(0, 1fr); }
    .uc2-row--top > .uc2-card--tkt { grid-column: auto; }
    .uc2-row--mid { grid-template-columns: minmax(0, 1fr); }
    .uc2-grid9__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uc2-biz { grid-template-columns: 1fr; }
    .uc2-biz__meta { border-left: 0; padding-left: 0; border-top: 1px dashed var(--line); padding-top: 10px; }
}
@media (max-width: 600px) {
    .uc2-hello { padding: 14px; }
    .uc2-hello__left { width: 100%; }
    .uc2-hello__acts { width: 100%; }
    .uc2-hello__acts .btn { flex: 1; }
    .uc2-grid9__body { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .uc2-acc__nums { grid-template-columns: 1fr; gap: 8px; }
    .uc2-acc__num--mid::before { display: none; }
    .uc2-svc__row { grid-template-columns: 28px 1fr; }
    .uc2-svc__row-stat, .uc2-svc__row-time {
        grid-column: 1 / -1;
        text-align: left; padding-left: 40px; font-size: 12px;
    }
}

/* === SVG 渐变定义 === */
.uc2-defs {
    position: absolute; width: 0; height: 0; pointer-events: none;
}

/* ============================================================================
   会员中心 v5 · 全屏后台：深蓝顶栏 / 深灰侧栏 / 全宽主区
   ============================================================================ */
:root {
    --uc2-side-w: 248px;   /* 侧栏宽度，同时作为主区 margin-left */
    --uc2-nav-bg-1: #0d2a5c;
    --uc2-nav-bg-2: #123a7a;
    --uc2-nav-bg-3: #14459a;
    --uc2-side-bg:  #232a37;
}

/* ============ 顶部导航：100% 全屏 + 深蓝 ============ */
.site-head {
    width: 100%;
    background: linear-gradient(90deg, var(--uc2-nav-bg-1) 0%, var(--uc2-nav-bg-2) 55%, var(--uc2-nav-bg-3) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 4px 16px rgba(8, 18, 40, .25);
}
.site-head .wrap {
    /* 取消 .wrap 的 1240px 限宽与居中，左右贴浏览器边界 */
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 24px;
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 28px;
}
.site-head .logo { color: #fff; }
.site-head .logo-mark {
    background: linear-gradient(135deg, #4d8dff, var(--c-accent));
    color: #fff;
}
.site-head .nav a { color: rgba(255, 255, 255, .78); }
.site-head .nav a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.site-head .nav a.active { color: #fff; background: rgba(255, 255, 255, .16); }
.site-head .cart-link { color: rgba(255, 255, 255, .85); }
.site-head .cart-link:hover { color: #fff; }
.site-head .head-actions .btn {
    color: rgba(255, 255, 255, .92);
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .10);
}
.site-head .head-actions .btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .18);
}
.site-head .head-actions .btn-primary {
    background: #fff;
    color: var(--uc2-nav-bg-1);
    border-color: #fff;
}
.site-head .head-actions .btn-primary:hover {
    background: #eef4ff;
    color: var(--uc2-nav-bg-1);
}

/* ============ 侧栏内的深色主题（覆盖原浅色 .uc-side） ============ */
.uc2-side .uc-side {
    position: static;
    max-height: none;
    height: auto;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    display: flex;
    flex-direction: column;
}
/* 资料卡（.uc-side__top）已删除 —— 侧栏只保留导航。第一组菜单加点顶部空间
   与侧栏上沿呼吸，避免「总览」按钮贴边。 */
.uc2-side .uc-nav {
    flex: 1; min-height: 0; overflow: visible;
    padding: 18px 12px 12px;
}
.uc2-side .uc-nav a { color: rgba(255, 255, 255, .72); }
.uc2-side .uc-nav a > i { color: rgba(255, 255, 255, .45); }
.uc2-side .uc-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.uc2-side .uc-nav a:hover > i { color: #fff; }
.uc2-side .uc-nav a.active { background: rgba(77, 141, 255, .20); color: #a9c6ff; font-weight: 600; }
.uc2-side .uc-nav a.active > i { color: #a9c6ff; }

.uc2-side .uc-nav__home {
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding-bottom: 12px;
    border-radius: 10px 10px 0 0;
}
.uc2-side .uc-nav__ext { margin-left: auto; font-size: 11px; opacity: .6; }

.uc2-side .uc-nav__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    margin-top: 6px;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .42);
    text-align: left;
    font-family: inherit;
}
.uc2-side .uc-nav__title:hover { color: rgba(255, 255, 255, .7); }
.uc2-side .uc-nav__title i { font-size: 10px; transition: transform .25s var(--ease); }
.uc2-side .uc-nav__title i.is-collapsed { transform: rotate(-90deg); }
.uc2-side .uc-nav__items { display: flex; flex-direction: column; gap: 1px; }

.uc2-side .uc-nav__logout { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .07); }
.uc2-side .uc-nav__btn { color: rgba(255, 255, 255, .72); }
.uc2-side .uc-nav__btn > i { color: rgba(255, 255, 255, .45); }
.uc2-side .uc-nav__btn:hover { background: rgba(244, 63, 94, .16); color: #ff8a9b; }
.uc2-side .uc-nav__btn:hover > i { color: #ff8a9b; }

/* ============ 行布局（全宽） ============ */
.uc2-row { display: grid; gap: 16px; margin-bottom: 16px; }
.uc2-row--top    { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.5fr) minmax(0, .95fr); }
.uc2-row--full   { grid-template-columns: minmax(0, 1fr); }
.uc2-row--bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* 已开通产品：主区变宽后自动多列 */
.uc2-grid9__body {
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

/* ============ 待办事项 ============ */
.uc2-todo__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2);
    transition: background .2s var(--ease);
}
.uc2-todo__row:last-child { border-bottom: 0; }
.uc2-todo__row:hover { background: var(--bg-soft); }
.uc2-todo__ico {
    width: 36px; height: 36px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 15px;
}
.uc2-todo__ico--warn { background: #fff4e6; color: #b45309; }
.uc2-todo__ico--err  { background: #feeceb; color: var(--c-danger); }
.uc2-todo__ico--ok   { background: #e6f7ef; color: #07774a; }
.uc2-todo__ico--blue { background: var(--brand-50); color: var(--brand-600); }
.uc2-todo__txt { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.uc2-todo__txt b {
    font-size: 19px; font-weight: 800; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.uc2-todo__txt em { font-style: normal; font-size: 13px; color: var(--muted); }
.uc2-todo__arrow { flex-shrink: 0; font-size: 12px; color: var(--muted-2); transition: transform .2s var(--ease); }
.uc2-todo__row:hover .uc2-todo__arrow { transform: translateX(3px); color: var(--brand-600); }

/* ============ 资源监控：实例列表 ============ */
.uc2-mon__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}
.uc2-mon__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    font-size: 13px;
    color: var(--ink-2);
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.uc2-mon__row:hover { background: var(--brand-50); transform: translateX(2px); }
.uc2-mon__name {
    font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uc2-mon__exp {
    font-size: 12px; color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.uc2-mon__arr {
    font-size: 11px; color: var(--muted-2);
    transition: color .2s, transform .2s var(--ease);
}
.uc2-mon__row:hover .uc2-mon__arr { color: var(--brand-500); transform: translateX(2px); }

/* ============ 售后 ============ */
.uc2-after__top {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 6px;
}
.uc2-after__avatar {
    width: 42px; height: 42px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
    color: var(--brand-600);
    font-size: 18px;
}
.uc2-after__top b { display: block; font-size: 14.5px; color: var(--ink); }
.uc2-after__top span { font-size: 12.5px; color: var(--muted); }
.uc2-after__list { display: flex; flex-direction: column; }
.uc2-after__list li {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-2);
    font-size: 13.5px; color: var(--muted);
}
.uc2-after__list li:last-child { border-bottom: 0; }
.uc2-after__list li > i { width: 18px; text-align: center; color: var(--brand-500); }
.uc2-after__list li span { flex: 1; }
.uc2-after__list li a { color: var(--brand-600); font-weight: 500; }
.uc2-after__list li a:hover { text-decoration: underline; }
.uc2-after__cnt { color: var(--ink); font-weight: 700; }
.uc2-after__acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ============ 响应式 ============ */
@media (max-width: 1280px) {
    .uc2-grid9__body { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .uc2-grid9__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .uc2-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .uc2-row--mid, .uc2-row--bottom { grid-template-columns: minmax(0, 1fr); }
    .uc2-grid9__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .uc2-biz { grid-template-columns: 1fr; }
    .uc2-biz__meta {
        border-left: 0; padding-left: 0;
        border-top: 1px dashed var(--line); padding-top: 10px;
    }
}
@media (max-width: 860px) {
    /* 侧栏改为可横向滚动的顶部条，主区取消左边距 */
    .uc2-side {
        position: static;
        width: 100%;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        overflow: visible;
    }
    .uc2-side .uc-side { flex-direction: row; align-items: center; }
    .uc2-side .uc-nav { flex-direction: row; overflow-x: auto; padding: 10px; gap: 6px; }
    .uc2-side .uc-nav a,
    .uc2-side .uc-nav__btn { flex: 0 0 auto; padding: 9px 14px; }
    .uc2-side .uc-nav__title { display: none; }
    .uc2-side .uc-nav__home { margin: 0; padding: 9px 14px; border-bottom: 0; border-radius: 10px; }
    .uc2-main { margin-left: 0; padding: 16px 14px 48px; }
    .site-head .wrap { padding: 0 14px; gap: 14px; }
    .uc2-grid9__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uc2-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .uc2-hero { padding: 14px; }
    .uc2-hero__left { width: 100%; }
    .uc2-hero__acts { width: 100%; }
    .uc2-hero__acts .uc2-btn { flex: 1; }
    .uc2-grid9__body { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .uc2-kpi { grid-template-columns: 1fr; }
    .uc2-mon__row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .uc2-mon__arr { display: none; }
    .uc2-mon__exp { font-size: 11.5px; }
}