/* ==========================================================================
   彭世培训平台 · 设计系统 (v2 · 2026-10-21)
   视觉基准：授课学堂（saas.soke.cn）—— 浅灰底 + 白卡片 + 细边框 + 蓝色主色
   品牌主色：彭世标准蓝 #002DD2（RGB 0,45,210，公司指定）；品牌辅色 #FFC33E（RGB 255,195,62）
   说明：本文件是 11 个页面的唯一视觉基底；页面内只允许写「页面专属布局」，
        通用组件一律复用 .ps-* 类，避免各页各写一套。
   ========================================================================== */

:root {
  /* ---------- 品牌色（彭世标准蓝 #002DD2） ---------- */
  --ps-blue-7: #0022A6;
  --ps-blue-6: #002DD2;   /* 主色 */
  --ps-blue-5: #2E53DA;
  --ps-blue-3: #8CA0E6;
  --ps-blue-2: #BFCBF4;
  --ps-blue-1: #E7ECFC;
  --ps-blue-0: #F0F2FC;
  --ps-gold-6: #FFC33E;   /* 品牌黄：只做色块/装饰，不做白底文字色 */
  --ps-gold-1: #FFF7E5;

  /* ---------- 中性色（对标 Arco 体系） ---------- */
  --ps-text-1: #1D2129;   /* 主文本 */
  --ps-text-2: #4E5969;   /* 次文本 */
  --ps-text-3: #86909C;   /* 辅助/占位 */
  --ps-text-4: #C9CDD4;   /* 禁用 */
  --ps-border-2: #E5E6EB; /* 常规描边 */
  --ps-border-1: #F2F3F5; /* 分割线 */
  --ps-fill-2: #F7F8FA;   /* 浅填充 */
  --ps-fill-3: #F2F3F5;   /* 更浅填充 */
  --ps-bg: #F5F6F7;       /* 页面底色 */
  --ps-white: #FFFFFF;

  /* ---------- 功能色 ---------- */
  --ps-success: #00A870;
  --ps-success-bg: #E8F8F2;
  --ps-warning: #E8890C;
  --ps-warning-bg: #FFF3E8;
  --ps-danger: #D93025;
  --ps-danger-bg: #FDECEA;
  --ps-info: #002DD2;
  --ps-info-bg: #E7ECFC;

  /* ---------- 圆角 ---------- */
  --ps-r-xs: 2px;
  --ps-r-sm: 4px;
  --ps-r-md: 6px;
  --ps-r-lg: 8px;
  --ps-r-xl: 12px;
  --ps-r-full: 999px;

  /* ---------- 阴影（克制，靠边框分层） ---------- */
  --ps-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.03);
  --ps-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.06);
  --ps-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.10);
  --ps-shadow-blue: 0 6px 18px rgba(0, 45, 210, 0.18);

  /* ---------- 间距 ---------- */
  --ps-s1: 4px;
  --ps-s2: 8px;
  --ps-s3: 12px;
  --ps-s4: 16px;
  --ps-s5: 20px;
  --ps-s6: 24px;
  --ps-s8: 32px;
  --ps-s10: 40px;
  --ps-s12: 48px;

  /* ---------- 字体 ---------- */
  --ps-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --ps-fs-12: 12px;
  --ps-fs-13: 13px;
  --ps-fs-14: 14px;
  --ps-fs-16: 16px;
  --ps-fs-18: 18px;
  --ps-fs-20: 20px;
  --ps-fs-24: 24px;
  --ps-fs-32: 32px;

  /* ---------- 尺寸 ---------- */
  --ps-header-h: 60px;
  --ps-container: 1180px;
  --ps-side-w: 208px;

  /* ---------- 兼容旧变量名（历史页面仍在引用，统一指向新 token） ---------- */
  --brand-primary: var(--ps-blue-6);
  --brand-primary-dark: var(--ps-blue-7);
  --brand-primary-light: var(--ps-blue-5);
  --brand-secondary: var(--ps-gold-6);
  --brand-secondary-dark: #D9A020;
  --brand-secondary-light: #FFD470;
  --color-bg: var(--ps-bg);
  --color-bg-white: var(--ps-white);
  --color-text-primary: var(--ps-text-1);
  --color-text-secondary: var(--ps-text-2);
  --color-text-tertiary: var(--ps-text-3);
  --color-border: var(--ps-border-2);
  --color-border-light: var(--ps-border-1);
  --color-success: var(--ps-success);
  --color-warning: var(--ps-warning);
  --color-error: var(--ps-danger);
  --color-info: var(--ps-info);
  --shadow-sm: var(--ps-shadow-1);
  --shadow-md: var(--ps-shadow-2);
  --shadow-lg: var(--ps-shadow-3);
  --radius-sm: var(--ps-r-sm);
  --radius-md: var(--ps-r-md);
  --radius-lg: var(--ps-r-lg);
  --radius-xl: var(--ps-r-xl);
  --radius-full: var(--ps-r-full);
  --spacing-xs: var(--ps-s1);
  --spacing-sm: var(--ps-s2);
  --spacing-md: var(--ps-s3);
  --spacing-lg: var(--ps-s4);
  --spacing-xl: var(--ps-s6);
  --spacing-2xl: var(--ps-s8);
  --spacing-3xl: var(--ps-s12);
  --font-family: var(--ps-font);
  --font-size-xs: var(--ps-fs-12);
  --font-size-sm: var(--ps-fs-13);
  --font-size-md: var(--ps-fs-14);
  --font-size-lg: var(--ps-fs-16);
  --font-size-xl: var(--ps-fs-18);
  --font-size-2xl: var(--ps-fs-24);
  --font-size-3xl: var(--ps-fs-32);
}

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

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--ps-font);
  font-size: var(--ps-fs-14);
  line-height: 1.5715;
  color: var(--ps-text-1);
  background: var(--ps-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ps-blue-6); text-decoration: none; }
a:hover { color: var(--ps-blue-5); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--ps-blue-2); color: var(--ps-text-1); }

/* 细滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D5D8DE; border-radius: var(--ps-r-full); }
::-webkit-scrollbar-thumb:hover { background: #C2C6CE; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================ 布局 ============================ */
.ps-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--ps-bg); }

.ps-container {
  width: 100%;
  max-width: var(--ps-container);
  margin: 0 auto;
  padding: 0 var(--ps-s6);
}

.ps-main { flex: 1; padding: var(--ps-s5) 0 var(--ps-s8); }

/* 通用行/列 */
.ps-row { display: flex; align-items: center; }
.ps-col { display: flex; flex-direction: column; }
.ps-between { display: flex; align-items: center; justify-content: space-between; }
.ps-center { display: flex; align-items: center; justify-content: center; }
.ps-wrap { flex-wrap: wrap; }
.ps-gap-1 { gap: var(--ps-s1); }
.ps-gap-2 { gap: var(--ps-s2); }
.ps-gap-3 { gap: var(--ps-s3); }
.ps-gap-4 { gap: var(--ps-s4); }
.ps-gap-5 { gap: var(--ps-s5); }
.ps-gap-6 { gap: var(--ps-s6); }
.ps-flex1 { flex: 1; min-width: 0; }
.ps-mt-2 { margin-top: var(--ps-s2); }
.ps-mt-3 { margin-top: var(--ps-s3); }
.ps-mt-4 { margin-top: var(--ps-s4); }
.ps-mt-5 { margin-top: var(--ps-s5); }
.ps-mb-3 { margin-bottom: var(--ps-s3); }
.ps-mb-4 { margin-bottom: var(--ps-s4); }
.ps-hidden { display: none !important; }

/* 文本 */
.ps-muted { color: var(--ps-text-3); }
.ps-sub { color: var(--ps-text-2); }
.ps-strong { font-weight: 600; color: var(--ps-text-1); }
.ps-fs-12 { font-size: var(--ps-fs-12); }
.ps-fs-13 { font-size: var(--ps-fs-13); }
.ps-fs-16 { font-size: var(--ps-fs-16); }
.ps-fs-18 { font-size: var(--ps-fs-18); }
.ps-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-clamp-1, .ps-clamp-2, .ps-clamp-3 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.ps-clamp-1 { -webkit-line-clamp: 1; }
.ps-clamp-2 { -webkit-line-clamp: 2; }
.ps-clamp-3 { -webkit-line-clamp: 3; }

/* ============================ 顶部导航 ============================ */
.ps-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--ps-header-h);
  background: var(--ps-white);
  border-bottom: 1px solid var(--ps-border-1);
}
.ps-header-inner {
  height: 100%;
  max-width: var(--ps-container);
  margin: 0 auto;
  padding: 0 var(--ps-s6);
  display: flex;
  align-items: center;
  gap: var(--ps-s8);
}
.ps-logo { display: flex; align-items: center; gap: var(--ps-s2); flex: none; }
.ps-logo img { height: 36px; width: auto; object-fit: contain; }
.ps-logo-text { font-size: var(--ps-fs-16); font-weight: 600; color: var(--ps-text-1); letter-spacing: .2px; }

.ps-nav { display: flex; align-items: center; height: 100%; gap: 2px; }
.ps-nav-link {
  position: relative;
  display: flex; align-items: center; height: 100%;
  padding: 0 var(--ps-s4);
  font-size: var(--ps-fs-14);
  color: var(--ps-text-2);
  cursor: pointer;
  transition: color .15s;
}
.ps-nav-link:hover { color: var(--ps-blue-6); }
.ps-nav-link.active { color: var(--ps-blue-6); font-weight: 500; }
.ps-nav-link.active::after {
  content: "";
  position: absolute; left: var(--ps-s4); right: var(--ps-s4); bottom: 0;
  height: 2px; background: var(--ps-blue-6); border-radius: 2px 2px 0 0;
}
.ps-nav-caret { font-size: 10px; margin-left: 3px; opacity: .6; }

.ps-header-right {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--ps-s4);
  color: var(--ps-text-2);
}
.ps-icon-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--ps-r-sm);
  color: var(--ps-text-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.ps-icon-btn:hover { background: var(--ps-fill-3); color: var(--ps-blue-6); }
.ps-icon-btn svg { width: 17px; height: 17px; }

.ps-avatar {
  width: 28px; height: 28px; border-radius: var(--ps-r-full);
  background: var(--ps-blue-1); color: var(--ps-blue-6);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--ps-fs-12); font-weight: 600;
  overflow: hidden; flex: none;
}
.ps-user { display: flex; align-items: center; gap: var(--ps-s2); cursor: pointer; }
.ps-user-name { font-size: var(--ps-fs-13); color: var(--ps-text-2); max-width: 120px; }

/* ============================ 卡片 ============================ */
.ps-card {
  background: var(--ps-white);
  border: 1px solid var(--ps-border-1);
  border-radius: var(--ps-r-lg);
  box-shadow: var(--ps-shadow-1);
}
.ps-card-pad { padding: var(--ps-s5); }
.ps-card-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ps-s4) var(--ps-s5);
  border-bottom: 1px solid var(--ps-border-1);
}
.ps-card-hd.plain { border-bottom: none; padding-bottom: 0; }
.ps-card-title {
  display: flex; align-items: center; gap: var(--ps-s2);
  font-size: var(--ps-fs-16); font-weight: 600; color: var(--ps-text-1);
}
.ps-card-title::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px;
  background: var(--ps-blue-6); display: none;
}
.ps-card-title.bar::before { display: block; }
.ps-card-more {
  font-size: var(--ps-fs-13); color: var(--ps-text-3);
  display: inline-flex; align-items: center; gap: 2px; cursor: pointer;
}
.ps-card-more:hover { color: var(--ps-blue-6); }
.ps-card-bd { padding: var(--ps-s5); }
.ps-card-bd.tight { padding: var(--ps-s3) var(--ps-s5); }

/* ============================ 按钮 ============================ */
.ps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ps-s1);
  height: 32px; padding: 0 var(--ps-s4);
  border-radius: var(--ps-r-sm);
  border: 1px solid transparent;
  background: var(--ps-white); color: var(--ps-text-1);
  font-size: var(--ps-fs-14); font-weight: 400;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  user-select: none;
}
.ps-btn svg { width: 15px; height: 15px; }
.ps-btn-primary { background: var(--ps-blue-6); border-color: var(--ps-blue-6); color: #fff; }
.ps-btn-primary:hover { background: var(--ps-blue-5); border-color: var(--ps-blue-5); color: #fff; }
.ps-btn-primary:active { background: var(--ps-blue-7); border-color: var(--ps-blue-7); }
.ps-btn-default { border-color: var(--ps-border-2); color: var(--ps-text-1); }
.ps-btn-default:hover { border-color: var(--ps-blue-3); color: var(--ps-blue-6); background: var(--ps-blue-0); }
.ps-btn-text { background: transparent; color: var(--ps-blue-6); padding: 0 var(--ps-s2); }
.ps-btn-text:hover { background: var(--ps-blue-1); }
.ps-btn-danger { border-color: var(--ps-border-2); color: var(--ps-danger); }
.ps-btn-danger:hover { border-color: #F5B5AF; background: var(--ps-danger-bg); }
.ps-btn-ghost-white { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; }
.ps-btn-ghost-white:hover { background: rgba(255,255,255,.24); color: #fff; }
.ps-btn-sm { height: 26px; padding: 0 var(--ps-s3); font-size: var(--ps-fs-12); border-radius: var(--ps-r-sm); }
.ps-btn-lg { height: 40px; padding: 0 var(--ps-s5); font-size: var(--ps-fs-14); }
.ps-btn-block { width: 100%; }
.ps-btn:disabled, .ps-btn.disabled { opacity: .5; cursor: not-allowed; }
.ps-btn-link { background: none; border: none; color: var(--ps-blue-6); padding: 0; height: auto; cursor: pointer; }

/* ============================ 表单 ============================ */
.ps-field { display: flex; flex-direction: column; gap: var(--ps-s2); }
.ps-label { font-size: var(--ps-fs-13); color: var(--ps-text-2); font-weight: 500; }
.ps-label .req { color: var(--ps-danger); margin-left: 2px; }

.ps-input, .ps-select, .ps-textarea {
  width: 100%; height: 34px; padding: 0 var(--ps-s3);
  background: var(--ps-white);
  border: 1px solid var(--ps-border-2);
  border-radius: var(--ps-r-sm);
  color: var(--ps-text-1);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ps-textarea { height: auto; min-height: 88px; padding: var(--ps-s2) var(--ps-s3); resize: vertical; line-height: 1.6; }
.ps-input::placeholder, .ps-textarea::placeholder { color: var(--ps-text-4); }
.ps-input:hover, .ps-select:hover, .ps-textarea:hover { border-color: var(--ps-blue-3); }
.ps-input:focus, .ps-select:focus, .ps-textarea:focus {
  border-color: var(--ps-blue-6); box-shadow: 0 0 0 2px rgba(0, 45, 210, .12);
}
.ps-input:disabled, .ps-select:disabled { background: var(--ps-fill-3); color: var(--ps-text-3); cursor: not-allowed; }
.ps-input-lg { height: 42px; }
.ps-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%2386909C' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 28px;
  cursor: pointer;
}
.ps-search {
  position: relative;
}
.ps-search .ps-input { padding-left: 30px; height: 30px; background: var(--ps-fill-3); border-color: transparent; }
.ps-search .ps-input:focus { background: var(--ps-white); border-color: var(--ps-blue-6); }
.ps-search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--ps-text-3); pointer-events: none;
}

/* 下划线输入（登录页专用风格） */
.ps-underline-field {
  display: flex; align-items: center; gap: var(--ps-s2);
  border-bottom: 1px solid var(--ps-border-2);
  padding: 10px 0;
  transition: border-color .18s;
}
.ps-underline-field:focus-within { border-bottom-color: var(--ps-blue-6); }
.ps-underline-field input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: var(--ps-fs-14); color: var(--ps-text-1); min-width: 0;
}
.ps-underline-field input::placeholder { color: var(--ps-text-4); }
.ps-underline-field .prefix {
  font-size: var(--ps-fs-14); color: var(--ps-text-2);
  display: flex; align-items: center; gap: 4px; padding-right: var(--ps-s3);
  border-right: 1px solid var(--ps-border-2);
}
.ps-field-error { font-size: var(--ps-fs-12); color: var(--ps-danger); min-height: 18px; }

/* 复选框 / 单选 */
.ps-check { display: inline-flex; align-items: center; gap: var(--ps-s2); cursor: pointer; font-size: var(--ps-fs-13); color: var(--ps-text-2); }
.ps-check input[type="checkbox"], .ps-check input[type="radio"] {
  width: 15px; height: 15px; accent-color: var(--ps-blue-6); cursor: pointer; margin: 0;
}

/* ============================ 标签 / 徽标 ============================ */
.ps-tag {
  display: inline-flex; align-items: center; gap: 3px;
  height: 20px; padding: 0 7px;
  border-radius: var(--ps-r-xs);
  font-size: var(--ps-fs-12); line-height: 1;
  background: var(--ps-fill-3); color: var(--ps-text-2);
  white-space: nowrap;
}
.ps-tag-blue { background: var(--ps-blue-1); color: var(--ps-blue-6); }
.ps-tag-green { background: var(--ps-success-bg); color: var(--ps-success); }
.ps-tag-orange { background: var(--ps-warning-bg); color: var(--ps-warning); }
.ps-tag-red { background: var(--ps-danger-bg); color: var(--ps-danger); }
.ps-tag-gold { background: var(--ps-gold-1); color: #9A6B00; }
.ps-tag-outline { background: transparent; border: 1px solid var(--ps-border-2); color: var(--ps-text-2); }

.ps-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; }

/* ============================ 选项卡 ============================ */
.ps-tabs {
  display: flex; align-items: center; gap: var(--ps-s6);
  border-bottom: 1px solid var(--ps-border-1);
  overflow-x: auto;
}
.ps-tab {
  position: relative;
  padding: 11px 0;
  font-size: var(--ps-fs-14); color: var(--ps-text-2);
  cursor: pointer; white-space: nowrap;
  border: none; background: none;
  transition: color .15s;
}
.ps-tab:hover { color: var(--ps-blue-6); }
.ps-tab.active { color: var(--ps-blue-6); font-weight: 500; }
.ps-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--ps-blue-6); border-radius: 2px 2px 0 0;
}
.ps-tab .count { color: var(--ps-text-3); font-weight: 400; margin-left: 2px; }

/* 分段控件（胶囊） */
.ps-segment {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--ps-fill-3); border-radius: var(--ps-r-sm);
}
.ps-segment-item {
  padding: 4px 12px; border-radius: 3px;
  font-size: var(--ps-fs-13); color: var(--ps-text-2);
  cursor: pointer; border: none; background: transparent;
  transition: all .15s;
}
.ps-segment-item.active { background: var(--ps-white); color: var(--ps-text-1); font-weight: 500; box-shadow: var(--ps-shadow-1); }

/* ============================ 课程卡片 ============================ */
.ps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ps-s4);
}
.ps-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ps-course {
  background: var(--ps-white);
  border: 1px solid var(--ps-border-1);
  border-radius: var(--ps-r-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .18s, transform .18s, border-color .18s;
  display: flex; flex-direction: column;
}
.ps-course:hover {
  box-shadow: var(--ps-shadow-2);
  transform: translateY(-2px);
  border-color: var(--ps-border-2);
}
.ps-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #DCE0F7 0%, #EDF0FB 100%);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ps-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ps-thumb-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--ps-fs-13); text-align: center; padding: var(--ps-s3);
  background: linear-gradient(135deg, #0B63C6 0%, #0A4FA8 100%);
  line-height: 1.4;
}
.ps-thumb-fallback::after {
  content: ""; position: absolute; right: -20%; top: -30%;
  width: 70%; height: 160%; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
/* 无封面时的品牌占位图（列表页禁止渲染 cover_url，统一走这里） */
.ps-thumb.art-0 { background: linear-gradient(135deg, #1657A8 0%, #0B3F80 100%); }
.ps-thumb.art-1 { background: linear-gradient(135deg, #1B6FCB 0%, #0F4E96 100%); }
.ps-thumb.art-2 { background: linear-gradient(135deg, #2C7FB8 0%, #175E8C 100%); }
.ps-thumb.art-3 { background: linear-gradient(135deg, #3C63A6 0%, #274B84 100%); }
.ps-thumb .thumb-glyph { width: 34px; height: 34px; color: rgba(255,255,255,.72); position: relative; z-index: 1; }
.ps-thumb .thumb-deco {
  position: absolute; right: -16px; bottom: -30px;
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.ps-thumb .thumb-deco.sm {
  right: 52px; bottom: 26px; width: 40px; height: 40px; background: rgba(255,255,255,.05);
}
.ps-course-bd { padding: var(--ps-s3); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ps-course-title {
  font-size: var(--ps-fs-13); color: var(--ps-text-1); line-height: 1.5;
  min-height: 39px;
}
.ps-course-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--ps-fs-12); color: var(--ps-text-3); margin-top: auto; }
.ps-progress-line { height: 3px; border-radius: 2px; background: var(--ps-fill-3); overflow: hidden; }
.ps-progress-line > i { display: block; height: 100%; background: var(--ps-blue-6); border-radius: 2px; }

/* 空位（授课学堂风格：虚线 + 淡图标） */
.ps-slot-empty {
  border: 1px dashed var(--ps-border-2);
  border-radius: var(--ps-r-md);
  background: #FCFCFD;
  display: flex; align-items: center; justify-content: center;
  min-height: 120px;
  color: var(--ps-text-4);
}

/* ============================ 快捷入口 ============================ */
.ps-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: var(--ps-s2); }
.ps-quick-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--ps-s2);
  padding: var(--ps-s4) var(--ps-s2);
  border-radius: var(--ps-r-md);
  cursor: pointer; border: none; background: transparent;
  transition: background .15s;
}
.ps-quick-item:hover { background: var(--ps-fill-2); }
.ps-quick-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.ps-quick-icon svg { width: 21px; height: 21px; }
.ps-quick-label { font-size: var(--ps-fs-13); color: var(--ps-text-1); }

/* ============================ 统计数字 ============================ */
.ps-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.ps-stat { text-align: center; padding: var(--ps-s2) var(--ps-s3); }
.ps-stat + .ps-stat { border-left: 1px solid var(--ps-border-1); }
.ps-stat-num { font-size: 26px; font-weight: 600; color: var(--ps-blue-6); line-height: 1.2; }
.ps-stat-label { font-size: var(--ps-fs-12); color: var(--ps-text-3); margin-top: 2px; }

/* 指标块（横排：大数字+说明） */
.ps-metric-label { font-size: var(--ps-fs-12); color: var(--ps-text-3); }
.ps-metric-num { font-size: 22px; font-weight: 600; color: var(--ps-text-1); line-height: 1.3; }
.ps-metric-sub { font-size: var(--ps-fs-12); color: var(--ps-text-3); }

/* ============================ 表格 ============================ */
.ps-table-wrap { width: 100%; overflow-x: auto; }
.ps-table { width: 100%; border-collapse: collapse; font-size: var(--ps-fs-13); }
.ps-table th {
  text-align: left; font-weight: 500; color: var(--ps-text-3);
  background: var(--ps-fill-2);
  padding: 10px var(--ps-s4);
  border-bottom: 1px solid var(--ps-border-1);
  white-space: nowrap;
}
.ps-table th:first-child { border-top-left-radius: var(--ps-r-md); }
.ps-table th:last-child { border-top-right-radius: var(--ps-r-md); }
.ps-table td {
  padding: 12px var(--ps-s4);
  border-bottom: 1px solid var(--ps-border-1);
  color: var(--ps-text-1);
  vertical-align: middle;
}
.ps-table tbody tr:hover td { background: var(--ps-blue-0); }
.ps-table tbody tr:last-child td { border-bottom: none; }
.ps-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ps-table .ops { text-align: right; white-space: nowrap; }

/* ============================ 空状态 ============================ */
.ps-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--ps-s10) var(--ps-s4);
  color: var(--ps-text-3);
  gap: var(--ps-s3);
}
.ps-empty svg { width: 96px; height: 72px; opacity: .9; }
.ps-empty-text { font-size: var(--ps-fs-13); color: var(--ps-text-3); }

/* ============================ 面包屑 ============================ */
.ps-crumb {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--ps-fs-12); color: var(--ps-text-3);
  margin-bottom: var(--ps-s3);
}
.ps-crumb a { color: var(--ps-text-3); }
.ps-crumb a:hover { color: var(--ps-blue-6); }
.ps-crumb .sep { color: var(--ps-text-4); }

/* ============================ 页脚 ============================ */
.ps-footer {
  padding: var(--ps-s5) 0 var(--ps-s6);
  text-align: center;
  font-size: var(--ps-fs-12);
  color: var(--ps-text-3);
  line-height: 1.9;
}
.ps-footer .brand { color: var(--ps-text-2); }
.ps-footer a { color: var(--ps-text-3); }
.ps-footer a:hover { color: var(--ps-blue-6); }

/* ============================ 管理后台外壳（左侧栏） ============================ */
.ps-shell { display: flex; min-height: 100vh; background: var(--ps-bg); }
.ps-sidebar {
  width: var(--ps-side-w); flex: none;
  background: var(--ps-white);
  border-right: 1px solid var(--ps-border-1);
  padding: var(--ps-s4) 0 var(--ps-s8);
  overflow-y: auto;
  position: sticky; top: 0; height: 100vh;
}
.ps-side-group { margin-bottom: var(--ps-s2); }
.ps-side-group-title {
  padding: 10px var(--ps-s4) 6px;
  font-size: var(--ps-fs-12); color: var(--ps-text-3);
  display: flex; align-items: center; gap: 6px;
}
.ps-side-item {
  display: flex; align-items: center; gap: var(--ps-s2);
  padding: 8px var(--ps-s4);
  font-size: var(--ps-fs-13); color: var(--ps-text-2);
  cursor: pointer; border-left: 2px solid transparent;
  transition: background .15s, color .15s;
}
.ps-side-item svg { width: 15px; height: 15px; opacity: .8; flex: none; }
.ps-side-item:hover { background: var(--ps-fill-2); color: var(--ps-text-1); }
.ps-side-item.active {
  background: var(--ps-blue-1); color: var(--ps-blue-6);
  border-left-color: var(--ps-blue-6); font-weight: 500;
}
.ps-side-item .badge {
  margin-left: auto; font-size: 10px; color: var(--ps-danger);
  background: var(--ps-danger-bg); border-radius: var(--ps-r-xs); padding: 0 4px;
}

/* ============================ 提示条 ============================ */
.ps-alert {
  display: flex; align-items: flex-start; gap: var(--ps-s2);
  padding: 10px var(--ps-s4);
  border-radius: var(--ps-r-md);
  font-size: var(--ps-fs-13);
  line-height: 1.6;
}
.ps-alert-info { background: var(--ps-info-bg); color: var(--ps-blue-7); }
.ps-alert-warn { background: var(--ps-warning-bg); color: #8A5200; }
.ps-alert-error { background: var(--ps-danger-bg); color: #A3241B; }
.ps-alert-success { background: var(--ps-success-bg); color: #00734C; }

/* 简易 toast（替代第三方组件时使用） */
.ps-toast {
  position: fixed; left: 50%; top: 72px; transform: translateX(-50%);
  background: rgba(29, 33, 41, .88); color: #fff;
  padding: 8px 18px; border-radius: var(--ps-r-md);
  font-size: var(--ps-fs-13); z-index: 3000;
  animation: ps-toast-in .2s ease;
}
@keyframes ps-toast-in { from { opacity: 0; transform: translate(-50%, -6px); } }

/* 弹窗 */
.ps-mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
  z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: var(--ps-s4);
}
.ps-modal {
  background: var(--ps-white); border-radius: var(--ps-r-lg);
  width: 100%; max-width: 440px;
  box-shadow: var(--ps-shadow-3);
  overflow: hidden;
}
.ps-modal-hd {
  padding: var(--ps-s4) var(--ps-s5);
  font-size: var(--ps-fs-16); font-weight: 600;
  border-bottom: 1px solid var(--ps-border-1);
}
.ps-modal-bd { padding: var(--ps-s5); font-size: var(--ps-fs-13); color: var(--ps-text-2); line-height: 1.8; }
.ps-modal-ft {
  padding: var(--ps-s3) var(--ps-s5);
  display: flex; justify-content: flex-end; gap: var(--ps-s2);
  border-top: 1px solid var(--ps-border-1);
}

/* 加载动画 */
.ps-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--ps-blue-2); border-top-color: var(--ps-blue-6);
  animation: ps-spin .7s linear infinite; display: inline-block;
}
@keyframes ps-spin { to { transform: rotate(360deg); } }

.ps-loading-block {
  display: flex; align-items: center; justify-content: center; gap: var(--ps-s2);
  padding: var(--ps-s10); color: var(--ps-text-3); font-size: var(--ps-fs-13);
}

/* ============================ 旧类名兼容（历史页面） ============================ */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; border: 1px solid transparent; border-radius: var(--ps-r-sm); font-size: var(--ps-fs-14); font-weight: 400; cursor: pointer; transition: all .15s; font-family: inherit; background: var(--ps-white); }
.btn-primary { background: var(--ps-blue-6); border-color: var(--ps-blue-6); color: #fff; }
.btn-primary:hover { background: var(--ps-blue-5); border-color: var(--ps-blue-5); }
.btn-secondary { background: var(--ps-gold-6); border-color: var(--ps-gold-6); color: var(--ps-text-1); }
.btn-ghost { background: transparent; color: var(--ps-blue-6); border-color: var(--ps-blue-3); }
.btn-ghost:hover { background: var(--ps-blue-1); }
.btn-block { width: 100%; }
.card { background: var(--ps-white); border: 1px solid var(--ps-border-1); border-radius: var(--ps-r-lg); padding: var(--ps-s4); box-shadow: var(--ps-shadow-1); }
.input { width: 100%; height: 34px; padding: 0 var(--ps-s3); border: 1px solid var(--ps-border-2); border-radius: var(--ps-r-sm); font-size: var(--ps-fs-14); font-family: inherit; outline: none; }
.input:focus { border-color: var(--ps-blue-6); box-shadow: 0 0 0 2px rgba(0, 45, 210, .12); }
.tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--ps-r-xs); font-size: var(--ps-fs-12); background: var(--ps-fill-3); color: var(--ps-text-2); }
.progress-bar { height: 4px; background: var(--ps-fill-3); border-radius: var(--ps-r-full); overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--ps-blue-6); border-radius: var(--ps-r-full); transition: width .3s; }
.container { width: 100%; max-width: var(--ps-container); margin: 0 auto; padding: 0 var(--ps-s6); }
.page-header { background: var(--ps-white); border-bottom: 1px solid var(--ps-border-1); }

/* ============================ 页头用户区（全站统一） ============================ */
/* 结构：头像 + 姓名 + 手机号；退出按钮常驻其右，**不做下拉菜单**（2026-10-21）
   手机号来源：中台 sys_user.phonenumber → px_user.phonenumber → /api/auth/me。
   由 /ui/assets/userchip.js 填充（页面自身也可直接绑值）。 */
.ps-user-chip {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.ps-user-chip .ps-user-avatar {
  width: 34px; height: 34px; border-radius: var(--ps-r-full);
  object-fit: cover; object-position: center 38%;
  flex: none; background: var(--ps-blue-1);
  box-shadow: 0 0 0 1px var(--ps-border-1);
}
.ps-user-chip .ps-user-meta {
  display: flex; flex-direction: column; justify-content: center;
  line-height: 1.25; min-width: 0;
}
.ps-user-chip .ps-user-name {
  font-size: var(--ps-fs-13); font-weight: 600; color: var(--ps-text-1);
  max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-user-chip .ps-user-phone {
  font-size: 11px; color: var(--ps-text-3);
  letter-spacing: .2px; white-space: nowrap;
}
/* 手机号未同步时不占位（避免出现一条空白行） */
.ps-user-chip .ps-user-phone:empty { display: none; }

/* ============================ 响应式（web 优先，移动端第二阶段细化） ============================ */
@media (max-width: 1200px) {
  .ps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-quick { grid-template-columns: repeat(3, 1fr); }
  .ps-header-inner { gap: var(--ps-s5); }
  .ps-nav-link { padding: 0 var(--ps-s3); }
}
@media (max-width: 768px) {
  .ps-container { padding: 0 var(--ps-s4); }
  .ps-main { padding: var(--ps-s3) 0 var(--ps-s6); }
  .ps-grid { gap: var(--ps-s3); }
  .ps-card-pad, .ps-card-bd { padding: var(--ps-s4); }
  .ps-stats { grid-template-columns: repeat(2, 1fr); }
  .ps-stat:nth-child(3) { border-left: none; }
  .ps-sidebar { display: none; }
  .ps-nav { display: none; }
  .ps-user-name { display: none; }
  /* 窄屏：用户区只留头像 + 退出（姓名/手机号隐藏，避免挤压导航） */
  .ps-user-chip .ps-user-meta { display: none; }
}
@media (max-width: 480px) {
  .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ps-s2); }
  .ps-quick { grid-template-columns: repeat(2, 1fr); }
}