/* ============================================================
 * apps/mofang.css —— 魔方后台 / 财务系统（js/apps/mofang.js）
 *
 * 由原 css/apps.css 按既有的分节标记切分而来（0.3.1 架构整理）。
 * 内容与切分前逐字节一致 —— 只换了存放位置，没动一个字符。
 * 新增样式请放进对应 App 的分片，不要再往 apps.css 里堆。
 * ============================================================ */
/* ============ 魔方后台（WHMCS 风） ============ */
.mf-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.mf-stat .st {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--e1);
  padding: 11px 12px;
}
.mf-stat .st .st-k { font-size: 11px; color: var(--text-2); }
.mf-stat .st .st-v { font-size: 21px; font-weight: 400; margin-top: 2px; letter-spacing: .3px; }
.mf-stat .st .st-v small { font-size: 12px; color: var(--text-2); }
.mf-stat .st.up .st-v { color: var(--ok); }
.mf-stat .st.down .st-v { color: var(--danger); }

.mf-tabs { display: flex; border-bottom: 1px solid var(--divider); background: var(--surface); flex: none; }
.mf-tabs .mt {
  flex: 1; text-align: center; padding: 12px 0; font-size: 13.5px; color: var(--text-2);
  position: relative; overflow: hidden;
}
.mf-tabs .mt.on { color: var(--md-primary); font-weight: 500; }
.mf-tabs .mt.on::after {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; background: var(--md-primary);
}

.cust-row { display: flex; align-items: center; padding: 11px 14px; background: var(--surface); position: relative; }
.cust-row + .cust-row::before {
  content: ''; position: absolute; left: 14px; right: 0; top: 0; height: 1px; background: var(--divider);
}
.cust-row .cr-main { flex: 1; min-width: 0; margin-left: 12px; }
.cust-row .cr-name { font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.cust-row .cr-meta { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.cust-row .cr-right { text-align: right; flex: none; }
/* 客户状态点。Active 那个会喘气 —— 客户列表上"谁还活着"一眼看得出来 */
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; position: relative; isolation: isolate; }
.status-dot.Active { background: var(--ok); }
.status-dot.Suspended { background: var(--warn); }
.status-dot.Terminated { background: var(--dead); }
.status-dot.Overdue { background: var(--danger); }

.ticket {
  background: var(--surface);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.ticket + .ticket::before {
  content: ''; position: absolute; left: 14px; right: 0; top: 0; height: 1px; background: var(--divider);
}
.ticket:active { background: #F4F6F7; }
.ticket .tk-top { display: flex; align-items: center; gap: 8px; }
.ticket .tk-id { font-size: 11px; color: var(--text-3); font-family: monospace; }
.ticket .tk-subj { font-size: 14.5px; margin-top: 3px; }
.ticket .tk-meta { font-size: 11.5px; color: var(--text-2); margin-top: 4px; display: flex; gap: 10px; }
.tk-pri { font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.tk-pri.High { background: #F2D9D6; color: #8E3F38; }
.tk-pri.Medium { background: #F3E3C6; color: #8A6A22; }
.tk-pri.Low { background: #E2E8EA; color: #5A7079; }

.tk-detail { padding: 14px; }
.tk-msg { background: var(--surface); border-radius: var(--r); box-shadow: var(--e1); padding: 12px; margin-bottom: 10px; }
.tk-msg .tm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tk-msg .tm-name { font-size: 13.5px; font-weight: 500; }
.tk-msg .tm-time { font-size: 11px; color: var(--text-3); margin-left: auto; }
.tk-msg .tm-body { font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.tk-msg.admin { background: #EEF3F5; }

/*
 * 表格：自己就是白底 + 圆角，所以**外层要用 .md-card 托盘**（底色下沉一档），
 * 让表格浮出来。这就是"卡片套卡片"的正确解法 —— 不是禁止嵌套，
 * 而是两层的底色必须不同，否则叠出来的就是一块没有边界的大白。
 */
.mf-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 13px;
}
.mf-table th {
  text-align: left; font-weight: 500; font-size: 11.5px; color: var(--text-2);
  padding: 10px 12px; border-bottom: 1px solid var(--divider); background: var(--surface-2);
}
.mf-table td { padding: 10px 12px; border-bottom: 1px solid var(--divider); }
.mf-table tr:last-child td { border-bottom: 0; }

/*
 * 语义化告警条。
 * 以前这种条子是在 JS 里写内联 style 上色的，绕过设计系统 —— 改配色时
 * 会漏掉，而且同一个"报错"在不同页面长得不一样。现在统一成类。
 */
.banner {
  border-radius: var(--r-lg);
  padding: 12px;
  font-size: 13px;
  border: 1px solid transparent;
}
.banner.err { background: #F9E7E4; color: #8E3F38; border-color: #EBC9C4; }
.banner.warn { background: #F8EFDC; color: #8A6520; border-color: #E9D8B4; }
.banner.ok { background: #E6EFE7; color: #3E6B4B; border-color: #C7DBCB; }
.banner.info { background: var(--surface-2); color: var(--text); border-color: var(--divider); }

/* 安装向导 */
.wiz-step { padding: 16px; }
.wiz-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--md-primary); color: #FFFDFB;
  font-size: 12px; margin-right: 8px;
}
.wiz-log {
  background: #1E272B; color: #9FB6A8; font-family: monospace; font-size: 11.5px;
  border-radius: var(--r-sm); padding: 10px; margin-top: 10px; white-space: pre-wrap; line-height: 1.6;
  max-height: 160px; overflow-y: auto;
}
.wiz-log .err { color: #D98A7F; }
.wiz-log .ok { color: #8FB89C; }

/* ============================================================
 * 产品构建器（第二幕上架）：0.3.7 新增
 *
 * 设计约束（来自 impeccable / design-taste-plus，preserve 模式）：
 *   · 沿用既有暖纸底 token（--surface / --md-primary / --r / --e1…），不另起美学
 *   · 一个圆角系统（控件 --r、卡片 --r-lg）、一个强调色（--md-primary）
 *   · 动效只走 transform / opacity / box-shadow，绝不 bounce / overshoot
 *   · 每个可点元素都有 hover / active / focus 状态；禁用态给"原因"而非纯灰
 * ============================================================ */

/* ---------- 名称输入 ---------- */
.pf-input {
  width: 100%;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 15px; color: var(--text);
  padding: 4px 0;
}
.pf-input::placeholder { color: var(--text-3); }

/* ---------- 宿主机节点（多选） ---------- */
.pf-node {
  position: relative;
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--e1);
  padding: 13px 40px 13px 14px;
  margin: 0 10px 8px;
  cursor: pointer;
  transition: box-shadow var(--fast), background var(--fast), transform var(--mag);
}
.pf-node:active { box-shadow: var(--e2); transform: scale(.99); }
.pf-node-main { display: block; }
.pf-node-name { font-size: 14px; font-weight: 500; }
.pf-node-sub { font-size: 11.5px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.pf-node-warn { font-size: 11.5px; color: #8A6520; margin-top: 5px; line-height: 1.4; }
.pf-node.on { box-shadow: var(--e1), 0 0 0 1.5px var(--md-primary) inset; }
/* 选中指示：右侧圆环（donut），不抢戏 */
.pf-node::after {
  content: ''; position: absolute; top: 50%; right: 13px; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--divider);
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.pf-node.on::after {
  border-color: var(--md-primary);
  background: var(--md-primary);
  box-shadow: inset 0 0 0 3px var(--surface);
}

/* ---------- 可选卡片（虚拟化 / 网络 / 定价档位通用） ---------- */
.pf-chip {
  position: relative;
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--e1);
  padding: 12px 14px;
  margin: 0 10px 8px;
  cursor: pointer;
  transition: box-shadow var(--fast), background var(--fast), transform var(--mag);
}
.pf-chip:active { box-shadow: var(--e2); transform: scale(.99); }
.pf-chip:hover { box-shadow: var(--e2); }
.pf-chip-t { font-size: 14px; font-weight: 500; line-height: 1.35; }
.pf-chip-s { font-size: 11.5px; color: var(--text-2); margin-top: 3px; line-height: 1.45; }
.pf-chip.on { box-shadow: var(--e1), 0 0 0 1.5px var(--md-primary) inset; }
.pf-chip.on .pf-chip-t { color: var(--md-primary); }
/* 未解锁：降透明度、换底色、不可点（JS 不挂 tap） */
.pf-chip.lock { opacity: .55; background: var(--surface-2); cursor: default; }
.pf-chip.lock:hover { box-shadow: var(--e1); }
.pf-chip.lock:active { transform: none; box-shadow: var(--e1); }

/* 定价档位：横向等分一排 */
.pf-tiers { display: flex; gap: 8px; padding: 0 10px 8px; }
.pf-tiers .pf-chip { flex: 1; margin: 0; }

/* ---------- 配置步进器 ---------- */
.pf-step {
  display: flex; align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--divider);
}
.pf-step:last-child { border-bottom: 0; }
.pf-step-l { flex: 1; font-size: 14px; }
.pf-step-ctr { display: flex; align-items: center; gap: 12px; }
.pf-step-v {
  min-width: 62px; text-align: right;
  font-size: 14px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pf-step-b {
  width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--md-primary);
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--e1);
  transition: background var(--fast), color var(--fast), transform var(--mag), box-shadow var(--fast);
}
.pf-step-b:hover { background: var(--surface-3); }
.pf-step-b:active { background: var(--md-primary-l); color: #FFFDFB; transform: scale(.9); box-shadow: var(--e2); }
.pf-step-b:focus-visible { outline: 2px solid var(--md-primary-l); outline-offset: 2px; }

/* ---------- 预设档位按钮 ---------- */
.pf-presets { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 10px 10px; }
.pf-preset {
  flex: 1; min-width: 0;
  height: 36px;
  border: 1.5px solid var(--divider); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px;
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast), transform var(--mag);
}
.pf-preset:hover { border-color: var(--md-primary-l); }
.pf-preset:active { background: var(--surface-2); border-color: var(--md-primary-l); transform: scale(.98); }
.pf-preset:focus-visible { outline: 2px solid var(--md-primary-l); outline-offset: 2px; }

/* ---------- 底部实时摘要栏（整屏 flex 列的末位，非 fixed） ---------- */
.pf-foot {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border-top: 1px solid var(--divider);
  box-shadow: 0 -2px 10px rgba(42, 49, 56, .08);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
}
.pf-summary { flex: 1; min-width: 0; }
.pf-summary-recipe { font-size: 12.5px; line-height: 1.45; }
.pf-summary-recipe b { font-weight: 600; }
.pf-risks {
  font-size: 11.5px; line-height: 1.5; color: #8A6520;
  margin-top: 5px;
}
.pf-go { flex: none; height: 44px; padding: 0 20px; }
.pf-go.disabled { background: #E4E4E0; color: #ABA9A3; box-shadow: none; cursor: default; }
.pf-go.disabled:active { transform: scale(1); background: #E4E4E0; }