/* ============================================================
   platform.css —— 平台端视觉层 v2（2026-10-09 重做）
   风格参考：SaaS 后台设计（浅蓝白清新科技风 / 深色侧栏 / 卡片化）
   加载顺序：admin.css → platform.css（页面私有 <style> 之前）。
   覆盖「设计 token + admin.css 硬编码色」，不碰布局尺寸。
   ============================================================ */

/* ---------- ① 设计 token：浅蓝白清新底 + 亮蓝主色 ---------- */
:root{
  /* 底色与线：浅灰蓝白 */
  --bg:#f3f6fb; --panel:#ffffff;
  --line:#e6ebf5; --line-2:#eef2f9;

  /* 文字：深蓝黑 → 三级灰蓝 */
  --txt:#1b2333; --txt-2:#51607a; --txt-3:#96a3bd;

  /* 品牌亮蓝（参考稿同款 #3b6bf5） */
  --brand:#3b6bf5; --brand-weak:#eaf1ff; --brand-dk:#1e4fd0;

  /* 语义色 */
  --ok:#22c46f; --ok-weak:#e8f9f0;
  --warn:#f5a623; --warn-weak:#fff7e8;
  --err:#f1535f; --err-weak:#ffeff1;

  --purple:#7c6cf0; --purple-weak:#f1eeff;
  --teal:#43c6ac; --teal-weak:#e8f8f5;

  --r:10px; --r-sm:7px;
  --sh:0 2px 10px rgba(27,42,86,.06);
  --fs:13px;
}

/* ---------- ② 侧栏：近黑深蓝（参考稿深色侧栏） ---------- */
.side{
  background:linear-gradient(180deg,#232c3d 0%,#1b2231 100%);
  border-right:none;
}

.side-logo{color:#f3f6fc;border-bottom:1px solid rgba(255,255,255,.09);padding-top:14px;padding-bottom:14px}
.side-logo .dot{background:linear-gradient(135deg,#5b8cff,#7c6cf0);color:#fff;border-radius:9px}
.side-logo .sub{color:#aab4c8}

.side-group-t{color:#8d99b3;font-size:11px;letter-spacing:.5px}

.nav-i{color:#cdd5e5;border-radius:8px;margin:2px 10px;padding:9px 12px;transition:background .15s,color .15s}
.nav-i:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-i .cnt{color:#aab3c2}
.nav-i.on{
  background:linear-gradient(90deg,rgba(59,107,245,.32) 0%,rgba(59,107,245,.14) 100%);
  color:#fff;
  box-shadow:inset 3px 0 0 #6f96ff;
}

/* ---------- ③ 顶栏：纯白 + 细边 ---------- */
.top{
  background:#ffffff;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(27,42,86,.02);
}

/* ---------- ④ 卡片化组件升级 ---------- */
.card{border-radius:12px;border:1px solid var(--line);box-shadow:var(--sh);overflow:hidden}
.card-h{padding:13px 18px}
.card-h h2{font-size:14px;font-weight:600}
.card-b{padding:18px}

/* 指标卡：参考稿样式 —— 标签 + 大数字 + 底部角标 */
.stat{border-radius:12px;border:1px solid var(--line);box-shadow:var(--sh);padding:16px 18px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--stat-c,transparent);border-radius:0 4px 4px 0}
.stat .l{font-size:12.5px;color:var(--txt-2);font-weight:500}
.stat .v{font-size:26px;font-weight:600;margin-top:6px;letter-spacing:-.5px;color:var(--txt)}
.stat .t{font-size:11.5px;color:var(--txt-3);margin-top:6px;display:inline-flex;align-items:center;gap:4px}
.stat .t.up{color:var(--ok)}
.stat .t.down{color:var(--err)}

/* 快捷操作卡：宫格 */
.qk{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qk a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px;border:1px solid var(--line);border-radius:12px;color:var(--txt-2);text-decoration:none;transition:all .15s;background:#fbfcfe}
.qk a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-weak);transform:translateY(-1px)}
.qk .qi{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--qk-c,var(--brand-weak));color:var(--qk-c2,var(--brand))}
.qk .qn{font-size:12.5px;font-weight:500}

/* 提醒卡 */
.rmd{border-radius:12px;border:1px solid var(--line);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;background:#fff;margin-bottom:10px}
.rmd:last-child{margin-bottom:0}
.rmd .ri{width:30px;height:30px;border-radius:9px;flex:0 0 30px;display:flex;align-items:center;justify-content:center}
.rmd .rt{font-size:13px;font-weight:600;color:var(--txt)}
.rmd .rs{font-size:12px;color:var(--txt-2);margin-top:2px}

/* 问候横幅 */
.hero{border-radius:14px;padding:22px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(59,107,245,.12),transparent 70%)}
.hero .hh{font-size:21px;font-weight:600;color:var(--txt)}
.hero .hs{font-size:13px;color:var(--txt-2);margin-top:5px}
.hero .hs b{color:var(--brand-dk);font-weight:600}
.hero .hb{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}

/* 表格升级 */
th{background:#f4f7fd;color:var(--txt-2);font-weight:500}
tbody tr:hover{background:#f4f8ff}

/* 按钮微调 */
.btn{border-radius:8px}
.btn.pri{box-shadow:0 2px 6px rgba(59,107,245,.28)}

/* 浅底统一 */
.note{background:#f6f9ff}
.ph-body{background:var(--bg)}

.note.warn{border-color:#f5dcb4;color:#8a5a10}
.note.err{border-color:#fbc9cf;color:#c0303f}
.btn.danger{border-color:#fbc9cf}

/* 登录页：浅蓝白清新化 */
.lg-page{background:linear-gradient(150deg,#eef4ff 0%,#f7f9ff 55%,#eef1fb 100%)}


/* ---------- ⑤ 应用勾选网格：卡片化（租户开通/编辑/套餐表单共用） ---------- */
.app-pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:8px}
.app-pk{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.app-pk:hover{border-color:var(--brand);box-shadow:0 2px 8px rgba(27,42,86,.06)}
.app-pk:has(input:checked){border-color:var(--brand);background:var(--brand-weak);box-shadow:inset 0 0 0 1px var(--brand)}
.app-pk input{min-width:0;accent-color:var(--brand)}
.app-pk-n{font-size:13px;font-weight:500;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-pk-c{font-size:11px;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-pk-t{font-size:10.5px;color:var(--ok);background:var(--ok-weak);padding:1px 6px;border-radius:999px;margin-left:auto;flex:0 0 auto}