/* ============================================================
   桥云云版控制台样式 cloud.css v1.0（2026-09-13 桥速-03 阶段 3）
   依据：《阶段 2 接口契约 v1.0》§三/§3.1 ·《桥云品牌与视觉设计统一规则 v1.2》
   ------------------------------------------------------------
   令牌不重复定义：颜色/阴影/圆角/字体一律复用 /css/style.css 的 :root
   （--navy/--navy-2/--red/--panel/--line/--ink/--muted/--blue-soft/
     --green-soft/--amber-soft/--grey-soft/--carved/--raised/--radius/--serif/--sans）
   本文件只承载"云版控制台"页面级组件：额度卡 / 档位卡 / 能力清单 /
   成员表 / 提示条 / 品牌页脚 + 移动端适配。
   ============================================================ */

/* ---------- 页面容器 ---------- */
.cloud-wrap{max-width:1180px;margin:0 auto;padding:20px 24px 56px;}

/* ---------- 页头 hero（浅色融合雕刻；不用深底，保持云版浅色皮肤） ---------- */
.cloud-hero{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;box-shadow:var(--carved);margin-bottom:18px;position:relative;overflow:hidden;}
.cloud-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);}
.cloud-hero h1{font-family:var(--serif);font-size:24px;color:var(--navy);letter-spacing:2px;margin-bottom:4px;}
.cloud-hero .motto{font-size:12px;color:var(--red);letter-spacing:4px;font-weight:600;}
.cloud-hero p{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.8;max-width:760px;}

/* ---------- 顶部页签（云版内导航） ---------- */
.cloud-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.cloud-nav a{padding:7px 16px;border-radius:20px;background:var(--panel);border:1px solid var(--line);
  color:var(--navy);font-size:13.5px;box-shadow:var(--carved-sm);transition:background .2s,color .2s;}
.cloud-nav a:hover{background:var(--blue-soft);}
.cloud-nav a.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.cloud-nav a .badge{font-size:11px;opacity:.8;margin-left:4px;}

/* ---------- 双轨额度卡（单位 / 个人，必须分别标注） ---------- */
.bal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-bottom:16px;}
.bal-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--raised);position:relative;}
.bal-card .b-lab{font-size:12px;color:var(--muted);letter-spacing:2px;display:flex;align-items:center;gap:6px;}
.bal-card .b-lab .dot{width:8px;height:8px;border-radius:50%;background:var(--navy);}
.bal-card.personal .b-lab .dot{background:var(--red);}
.bal-card .b-num{font-family:var(--serif);font-weight:700;font-size:30px;color:var(--navy);line-height:1.2;margin:6px 0 2px;}
.bal-card.personal .b-num{color:var(--red);}
.bal-card .b-num small{font-size:13px;font-weight:600;color:var(--muted);}
.bal-card .b-sub{font-size:12px;color:var(--muted);line-height:1.7;}
.bal-card .b-tag{position:absolute;top:14px;right:14px;font-size:11px;padding:1px 8px;border-radius:9px;
  background:var(--blue-soft);color:var(--navy);}
.bal-card.personal .b-tag{background:var(--amber-soft);color:var(--amber);}

/* ---------- 档位卡 ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.tier-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--raised);position:relative;transition:transform .25s var(--ease),border-color .25s;}
.tier-card:hover{transform:translateY(-2px);border-color:var(--navy);}
.tier-card .t-name{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--navy);letter-spacing:1px;}
.tier-card .t-pts{font-size:12.5px;color:var(--muted);margin:6px 0 10px;min-height:34px;}
.tier-card .t-price{font-family:var(--serif);font-weight:700;font-size:23px;color:var(--red);}
.tier-card .t-price small{font-size:13px;font-weight:600;}
.tier-card .t-meta{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.7;border-top:1px dashed var(--line);padding-top:8px;}
.tier-card .t-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}
.tier-card .t-flag{position:absolute;top:12px;right:12px;font-size:11px;padding:1px 8px;border-radius:9px;
  background:var(--green-soft);color:var(--green);}
.tier-card.recommend{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,62,62,.10),var(--raised);}
.tier-card button{font-size:13px;padding:8px 14px;}

/* ---------- 能力清单（权益视图） ---------- */
.cap-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.cap-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 14px;
  box-shadow:var(--carved-sm);display:flex;align-items:center;gap:10px;font-size:13px;}
.cap-item .c-name{color:var(--navy);font-weight:600;flex:1;min-width:0;}
.cap-item .c-cost{font-family:var(--serif);color:var(--red);font-weight:700;white-space:nowrap;}
.cap-item .c-via{font-size:11.5px;color:var(--muted);white-space:nowrap;}
.cap-item.blocked{opacity:.72;}
.cap-item.blocked .c-name{color:var(--muted);font-weight:500;}

/* ---------- 提示条 ---------- */
.notice{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:11px 14px;font-size:13px;
  line-height:1.75;margin-bottom:14px;background:var(--amber-soft);color:var(--amber);border:1px solid #F0DFB8;}
.notice.blue{background:var(--blue-soft);border-color:#C9D8EC;color:var(--navy);}
.notice.green{background:var(--green-soft);border-color:#CFE7D8;color:var(--green);}
.notice.red{background:#FCE8EA;border-color:#F3C9CE;color:var(--red);}
.notice b{font-weight:700;}

/* ---------- 徽标 ---------- */
.pill{display:inline-block;padding:2px 9px;border-radius:10px;font-size:12px;white-space:nowrap;}
.p-pub{background:var(--green-soft);color:var(--green);}
.p-doing{background:var(--amber-soft);color:var(--amber);}
.p-draft{background:var(--grey-soft);color:var(--muted);}
.p-enc{background:#FCE8EA;color:var(--red);}
.p-navy{background:var(--blue-soft);color:var(--navy);}

/* ---------- 键值列表 ---------- */
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px;}
.kv:last-child{border-bottom:none;}
.kv span{color:var(--muted);}
.kv b{color:var(--navy);text-align:right;}

/* ---------- 表格外壳（横向滚动，移动端友好） ---------- */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:640px;}

/* ---------- 空态 / 骨架 ---------- */
.empty{text-align:center;color:var(--muted);padding:30px 16px;font-size:13px;}
.skeleton{height:14px;border-radius:7px;background:linear-gradient(90deg,#E3E7EE,#F2F4F8,#E3E7EE);
  background-size:200% 100%;animation:sk 1.3s ease-in-out infinite;}
@keyframes sk{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ---------- 二维码容器（会员开通下单） ---------- */
.qr-box{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;
  box-shadow:0 4px 16px rgba(10,31,54,.12);margin:14px 0 6px;}

/* ---------- 品牌页脚 ---------- */
.foot{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);
  font-size:12px;line-height:1.9;text-align:center;}

/* ---------- 移动端适配（桥速-03 ⑥） ---------- */
@media(max-width:960px){
  .cloud-wrap{padding:16px 14px 44px;}
  .cloud-hero{padding:16px 16px 14px;}
  .cloud-hero h1{font-size:20px;letter-spacing:1px;}
}
@media(max-width:640px){
  header{padding:10px 14px;}
  .cloud-nav{gap:6px;}
  .cloud-nav a{padding:6px 12px;font-size:12.5px;flex:1 1 auto;text-align:center;}
  .bal-grid{grid-template-columns:1fr;}
  .bal-card .b-num{font-size:26px;}
  .tier-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .tier-card{padding:14px;}
  .tier-card .t-price{font-size:20px;}
  .cap-list{grid-template-columns:1fr;}
  .table-scroll table{min-width:520px;}
  .foot{font-size:11.5px;}
}
@media(max-width:400px){
  .tier-grid{grid-template-columns:1fr;}
}

/* ============================================================
   批次 D（桥速-07，2026-09-14）：窄屏（≤480px）适配修补
   ------------------------------------------------------------
   实测结论（Playwright 精确 390×900 视口）：
     · membership / subscription / unit-members 页面级溢出 = 0（表格已由 .table-scroll 承载内部滚动）
     · entitlements 页面级溢出 = 59px：根因是 .cap-item 内 .c-via 为 nowrap 且承载**整句**
       门禁文案（如"点数余额不足，请充值点数或联系单位管理员。"）→ 该项 min-content 达 414px
       → 1fr 网格轨道被最小内容宽撑宽 → 撑破页面。
   修补原则：**仅在 ≤480px 生效**（≥481px 及以上含桌面端逐字不变，零回归）。
   ============================================================ */
@media (max-width:480px){
  /* a) 容器与页签：去 min-width 约束；页签允许换行、必要时横向滚动兜底 */
  .cloud-wrap{min-width:0;padding:14px 12px 40px;}
  .cloud-nav{flex-wrap:wrap;gap:6px;max-width:100%;}
  .cloud-nav a{padding:5px 10px;font-size:12px;}

  /* c) 卡片/网格子项 min-width:0 —— 阻止长文本把 1fr 轨道撑宽 */
  .cloud-hero,.card,.bal-card,.tier-card,.notice{min-width:0;}
  .bal-grid>*,.tier-grid>*,.cap-list>*{min-width:0;}
  .cap-item{flex-wrap:wrap;}
  /* 关键修复：门禁文案允许换行（原 nowrap 是 59px 溢出的直接原因） */
  .cap-item .c-via{white-space:normal;}
  .cap-item .c-name,.cloud-hero p,.notice,.bal-card .b-sub{word-break:break-word;overflow-wrap:anywhere;}

  /* b) 表格外壳兜底（表格本身已由 .table-scroll 承载内部滚动，此处仅防外壳被撑宽） */
  .table-scroll{max-width:100%;}

  /* 字号微调（窄屏可读性，不改变桌面表现） */
  .cloud-hero h1{font-size:19px;letter-spacing:1px;}
  .bal-card .b-num{font-size:24px;}
}

/* ============================================================
   批次 D2（桥速-08，2026-09-14）：宽屏区间横向溢出修补（entitlements 能力清单）
   ------------------------------------------------------------
   复现（Playwright 精确布局视口；门禁长文案落在**末列**时）：
     768px δ=9px ／ 1024px δ=39px ／ 1280px δ=28px（其余页面与宽度均 0）
   根因：`.cap-item .c-via{white-space:nowrap}` 承载**整句**门禁文案
        （如「点数余额不足，请充值点数或联系单位管理员。」≈242px），该 nowrap 项使卡片
        内容宽超出所处 `1fr` 网格轨道；当它落在**末列**时，溢出即撑宽整页。
        （批次 D 只把换行能力放进了 ≤480px 断点，故 481–1440px 区间仍复发。）
   处置（派单 ①a/①b/①c）：把"允许换行"**提出来**，生效区间取 ≤1440px，
        以同时满足 ①d「≥1441px 观感保持不变」（≥1441px 实测 δ=0，本就无溢出）。
   ============================================================ */
@media (max-width:1440px){
  .cap-item{min-width:0;flex-wrap:wrap;}                        /* ①b ＋ 允许卡片内部换行（防 1 字/行的竖排挤压） */
  .cap-item .c-name{min-width:0;flex:1 1 8em;}                  /* 名称给足宽度，避免被压缩到每行一字 */
  .cap-item .c-via{white-space:normal;overflow-wrap:anywhere;flex:1 1 auto;}   /* ①a ★ 根因修复 */
  .cap-item .pill{max-width:100%;flex:0 0 auto;}                /* ①c 同类 nowrap 元素兜底 */
}