/* ================= Shopee 跨境电商实训系统 · 主题样式 ================= */
:root {
  --brand: #ee4d2d;
  --brand-dark: #d73211;
  --brand-light: #fff2ee;
  --brand-soft: #ffe9e3;
  --bg: #f4f5f9;
  --card: #ffffff;
  --text: #222222;
  --text-2: #6b6b6b;
  --text-3: #9b9b9b;
  --line: #ececec;
  --green: #26aa99;
  --blue: #2673dd;
  --orange: #f5a623;
  --red: #ee4d2d;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 10px rgba(16, 24, 40, .05);
  --shadow-lift: 0 6px 18px rgba(16, 24, 40, .10);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
  background: linear-gradient(180deg, #f7f8fc 0%, #f0f2f8 100%) fixed; color: var(--text); font-size: 14px;
}
.hidden { display: none !important; }
a { color: var(--brand); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
input, select, textarea, button { font-family: inherit; font-size: 14px; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d3d7de; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #b9bec7; }
::-webkit-scrollbar-track { background: transparent; }

/* ================= 登录页 ================= */
.login-wrap { display: flex; min-height: 100vh; }
.login-left {
  flex: 1.1; background: linear-gradient(140deg, #c62f10 0%, #ee4d2d 42%, #f4703f 72%, #ff9a6b 100%);
  color: #fff; padding: 70px 60px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
}
.login-left::after {
  content: ''; position: absolute; right: -140px; top: -140px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 68%); pointer-events: none;
}
.login-left::before {
  content: ''; position: absolute; left: -120px; bottom: -180px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none;
}
.brand-badge {
  display: inline-block; align-self: flex-start; background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .5); padding: 5px 14px; border-radius: 40px;
  font-size: 13px; letter-spacing: 1px; margin-bottom: 22px;
}
.login-brand { position: absolute; top: 40px; left: 60px; display: flex; align-items: center; gap: 12px; z-index: 1; }
.login-brand-name { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.login-left h1 { font-size: 38px; line-height: 1.25; margin-bottom: 14px; }
.login-slogan { font-size: 16px; opacity: .92; margin: 0 0 18px; }
.login-four { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.login-four .lf-item {
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .42);
  padding: 4px 14px; border-radius: 20px; font-size: 13.5px; font-weight: 600; letter-spacing: .5px;
}
.login-four i { font-style: normal; opacity: .6; }
.login-points { list-style: none; padding: 0; margin: 0; max-width: 460px; }
.login-points li {
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  padding: 12px 16px; border-radius: 8px; margin-bottom: 10px; font-size: 14px; line-height: 1.5;
}
.login-points b {
  display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center;
  background: #fff; color: var(--brand); border-radius: 50%; margin-right: 8px; font-size: 13px;
}
.login-right { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #fdf5f2 0%, #f6f8fc 60%, #eef2f9 100%); padding: 30px; }
.login-footer {
  position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
  color: var(--text-3, #98a2b3); font-size: 12.5px;
}
.login-footer:empty { display: none; }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 14px; box-shadow: 0 14px 44px rgba(238, 77, 45, .10), 0 2px 10px rgba(16, 24, 40, .05); padding: 32px 30px; }
.login-card h2 { font-size: 22px; margin-bottom: 6px; }
.login-notice { color: var(--text-3); font-size: 13px; margin: 0 0 22px; min-height: 18px; }
.login-card .field { margin-bottom: 16px; }
.btn-block { width: 100%; padding: 11px; font-size: 15px; }

/* ================= 顶栏 ================= */
#app { height: 100vh; display: flex; flex-direction: column; }
.app-footer {
  flex: 0 0 auto; padding: 9px 22px; text-align: center;
  color: var(--text-3, #98a2b3); font-size: 12.5px;
  border-top: 1px solid var(--line, #eef0f3); background: #fff;
}
.app-footer:empty { display: none; }
.topbar {
  height: 56px; background: linear-gradient(90deg, #c62f10 0%, #ee4d2d 48%, #f56b45 100%); color: #fff;
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex: none;
  box-shadow: 0 2px 10px rgba(198, 47, 16, .28); z-index: 10;
}
.logo { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.logo-mark {
  width: 30px; height: 30px; background: #fff; color: var(--brand); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px;
}
.topbar-right { display: flex; align-items: center; gap: 14px; }
.who { font-size: 13px; }
.who b { font-weight: 600; }
.who em { font-style: normal; opacity: .85; margin-left: 6px; font-size: 12px; }
.topbar .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
.topbar .btn-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ================= 布局 ================= */
.layout { flex: 1; display: flex; min-height: 0; }
.sidebar {
  width: 216px; background: #fff; border-right: 1px solid var(--line); overflow-y: auto;
  flex: none; padding: 8px 0 30px;
}
.nav-group { margin-bottom: 6px; }
.nav-group-title {
  font-size: 11px; color: #a8aeb9; padding: 14px 18px 6px; letter-spacing: 1.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.nav-group-title::after {
  content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #e8ebf1, rgba(232, 235, 241, 0));
}
.nav-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 18px; color: var(--text-2);
  cursor: pointer; font-size: 13.5px; border-left: 3px solid transparent; transition: .15s;
}
.nav-item:hover { background: var(--brand-light); color: var(--brand); }
.nav-item.active {
  background: linear-gradient(90deg, #fff0ea, #fffaf7); color: var(--brand); font-weight: 600; border-left-color: var(--brand);
}
.nav-item .ni-ic { width: 15px; height: 15px; flex: 0 0 15px; opacity: .68; transition: .15s; }
.nav-item:hover .ni-ic, .nav-item.active .ni-ic { opacity: 1; }
.logo-img { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); }
.content { flex: 1; overflow-y: auto; padding: 18px 22px 40px; min-width: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 14px; flex-wrap: wrap; }
.page-head h2 { font-size: 19px; }
.page-sub { margin: 4px 0 0; color: var(--text-3); font-size: 12.5px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ================= 卡片 / 统计 ================= */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.card-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat {
  background: linear-gradient(180deg, #ffffff, #fdfdfd); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
  border-left: 3px solid var(--brand); transition: .18s;
}
.stat:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.stat .s-label { color: var(--text-3); font-size: 12.5px; margin-bottom: 8px; }
.stat .s-value { font-size: 22px; font-weight: 700; color: var(--text); }
.stat .s-value small { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 4px; }
.stat.g { border-left-color: var(--green); } .stat.b { border-left-color: var(--blue); }
.stat.o { border-left-color: var(--orange); } .stat.r { border-left-color: var(--red); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ================= 表格 ================= */
.tbl-wrap { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: auto; }
table.tb { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tb th {
  background: #fafafa; color: var(--text-2); font-weight: 600; text-align: left;
  padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.tb td { padding: 11px 14px; border-bottom: 1px solid #f4f4f4; vertical-align: middle; }
table.tb tbody tr:hover { background: #fffaf8; }
table.tb .nowrap { white-space: nowrap; }
table.tb .num { text-align: right; font-variant-numeric: tabular-nums; }
.tb-thumb { width: 42px; height: 42px; border-radius: 4px; object-fit: cover; background: var(--bg); }
.tb-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tbl-empty { text-align: center; color: var(--text-3); padding: 40px 0; }

/* ================= 按钮 ================= */
.btn {
  border: 1px solid var(--line); background: #fff; color: var(--text); padding: 7px 14px;
  border-radius: var(--radius); cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-primary { background: linear-gradient(135deg, #ee4d2d, #f4703f); border-color: transparent; color: #fff; box-shadow: 0 2px 8px rgba(238, 77, 45, .30); }
.btn-primary:hover { background: linear-gradient(135deg, #d73211, #ee4d2d); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(238, 77, 45, .38); transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--text-2); }
.btn-danger { background: #fff; color: var(--red); border-color: #ffd4cb; }
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-sm { padding: 4px 10px; font-size: 12.5px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-link { background: none; border: none; color: var(--brand); cursor: pointer; padding: 0; }
.btn-link:hover { text-decoration: underline; }

/* ================= 表单 ================= */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12.5px; color: var(--text-2); }
.field-hint { font-size: 11.5px; color: var(--text-3); }
.req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid #dcdcdc; border-radius: var(--radius); padding: 8px 10px;
  min-height: 36px; background: #fff; color: var(--text); outline: none; transition: .15s;
}
.field textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(238, 77, 45, .1); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span2 { grid-column: 1 / -1; }
/* 富文本编辑器 */
.rt-editor { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.rt-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: var(--bg-2, #f7f8fa); border-bottom: 1px solid var(--line); }
.rt-btn { border: 1px solid transparent; background: none; border-radius: 6px; padding: 4px 9px; font-size: 12.5px; cursor: pointer; color: var(--text-2); }
.rt-btn:hover { background: rgba(238, 77, 45, .08); color: var(--brand); }
.rt-sep { width: 1px; height: 18px; background: var(--line); margin: 4px 5px; }
.rt-area { padding: 14px 16px; outline: none; overflow-y: auto; max-height: 460px; font-size: 14px; line-height: 1.8; }
.rt-area:focus { box-shadow: inset 0 0 0 2px rgba(238, 77, 45, .12); }
.rt-area img, .rt-area video { max-width: 100%; border-radius: 6px; }
.rt-area table { border-collapse: collapse; margin: 8px 0; }
.rt-area td, .rt-area th { border: 1px solid var(--line); padding: 6px 10px; }
.rt-area blockquote { border-left: 3px solid var(--brand); margin: 8px 0; padding: 4px 12px; color: var(--text-2); background: rgba(238, 77, 45, .04); }
.rt-area pre { background: #2b303b; color: #e6e9ef; padding: 10px 14px; border-radius: 8px; white-space: pre-wrap; }
.rt-src { width: 100%; border: none; padding: 14px 16px; font-family: Consolas, monospace; font-size: 13px; outline: none; }
/* 富文本内容展示（学生端课时正文） */
.rich-body { font-size: 14px; line-height: 1.85; }
.rich-body h2 { font-size: 17px; margin: 18px 0 8px; padding-left: 9px; border-left: 3px solid var(--brand); }
.rich-body h3 { font-size: 15px; margin: 14px 0 6px; }
.rich-body img, .rich-body video { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.rich-body table { border-collapse: collapse; margin: 10px 0; width: auto; }
.rich-body td, .rich-body th { border: 1px solid var(--line); padding: 6px 12px; }
.rich-body ul, .rich-body ol { padding-left: 22px; }
.rich-body blockquote { border-left: 3px solid var(--brand); margin: 10px 0; padding: 6px 14px; background: rgba(238, 77, 45, .04); color: var(--text-2); border-radius: 0 8px 8px 0; }
.rich-body pre { background: #2b303b; color: #e6e9ef; padding: 12px 16px; border-radius: 8px; white-space: pre-wrap; overflow-x: auto; }
/* 素材库 */
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mat-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; transition: box-shadow .15s; cursor: pointer; position: relative; }
.mat-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.mat-thumb { height: 86px; display: flex; align-items: center; justify-content: center; background: var(--bg-2, #f7f8fa); font-size: 11.5px; color: var(--text-3); overflow: hidden; }
.mat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mat-info { padding: 7px 9px; font-size: 12px; }
.mat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mat-meta { color: var(--text-3); margin-top: 3px; display: flex; justify-content: space-between; }
.checklist { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
.chk input { width: auto; min-height: auto; }

/* ================= 弹窗 ================= */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: flex; align-items: center;
  justify-content: center; z-index: 100; padding: 20px;
}
.modal-box { background: #fff; border-radius: 6px; width: 520px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
.modal-box.modal-wide { width: 820px; }
.modal-box.modal-sm { width: 380px; }
.modal-title { padding: 15px 20px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-body p { margin: 0; color: var(--text-2); }
.modal-foot { padding: 13px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }

/* ================= Toast ================= */
.toast-box { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast-item {
  background: #333; color: #fff; padding: 10px 20px; border-radius: 20px; font-size: 13.5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2); animation: tin .25s ease; max-width: 80vw;
}
.toast-item.error { background: var(--red); }
.toast-item.success { background: var(--green); }
.toast-item.out { opacity: 0; transition: opacity .3s; }
@keyframes tin { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ================= 状态徽标 ================= */
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; line-height: 18px; white-space: nowrap; }
.badge.gray { background: #f0f0f0; color: #666; }
.badge.green { background: #e6f7f4; color: var(--green); }
.badge.blue { background: #e8f1fd; color: var(--blue); }
.badge.orange { background: #fff3e0; color: #d98011; }
.badge.red { background: var(--brand-soft); color: var(--red); }
.badge.purple { background: #f2ecfd; color: #7a52d6; }

/* ================= Tabs ================= */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.tab {
  padding: 9px 15px; cursor: pointer; color: var(--text-2); font-size: 13.5px; border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--brand); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tab .cnt { color: var(--text-3); font-size: 12px; margin-left: 4px; }

/* ================= 图表 ================= */
.chart-line { padding: 6px 0 0; }
.line-svg { width: 100%; height: 150px; display: block; }
.line-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 6px; }
.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar { width: 60%; max-width: 46px; background: linear-gradient(180deg, #ff7a5c, #ee4d2d); border-radius: 3px 3px 0 0; min-height: 4px; }
.bar-val { font-size: 11px; color: var(--text-2); margin-bottom: 4px; }
.bar-lb { font-size: 11px; color: var(--text-3); margin-top: 6px; }
.progress-bar { background: #f0f0f0; border-radius: 10px; height: 8px; overflow: hidden; }
.progress-bar > i { display: block; height: 100%; background: var(--brand); border-radius: 10px; }
.funnel-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.funnel-row .f-name { width: 80px; font-size: 13px; color: var(--text-2); }
.funnel-row .f-bar { flex: 1; height: 22px; background: var(--brand-soft); border-radius: 3px; overflow: hidden; }
.funnel-row .f-bar > i { display: block; height: 100%; background: var(--brand); opacity: .8; }
.funnel-row .f-val { width: 60px; text-align: right; font-size: 13px; }

/* ================= 商品/课程卡片 ================= */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.course-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; transition: .18s; display: flex; flex-direction: column; }
.course-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(238, 77, 45, .16); }
.course-cover { height: 96px; background: linear-gradient(135deg, #ff8a65, #ee4d2d); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; font-weight: 700; }
.course-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-body { padding: 13px 15px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.course-body h4 { font-size: 14.5px; }
.course-body .c-sum { color: var(--text-3); font-size: 12.5px; line-height: 1.55; flex: 1; }
.course-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); }
/* 课程包卡片 */
.course-cover { position: relative; }
.cover-ic { width: 40px; height: 40px; opacity: .95; }
.cover-badge {
  position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, .24); color: #fff;
  font-size: 11.5px; padding: 2px 9px; border-radius: 10px; white-space: nowrap;
}
.cover-off {
  position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, .26); color: #fff;
  font-size: 11.5px; padding: 2px 9px; border-radius: 10px;
}
.pkg-courses { display: flex; flex-direction: column; gap: 5px; }
.pkg-course { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.pkg-course .mini { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 2px; opacity: .6; }
.pkg-more { font-size: 12px; color: var(--text-3); }
.pkg-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 2px; }
.tag { display: inline-block; background: var(--brand-light); color: var(--brand); padding: 2px 8px; border-radius: 3px; font-size: 12px; }
.sub-tag { background: #f2f2f2; color: var(--text-2); }
.feature-card { flex-direction: row; }
.feature-card .course-cover { flex: 0 0 300px; height: auto; min-height: 150px; border-radius: var(--radius) 0 0 var(--radius); }
.feature-card .course-body { padding: 16px 20px; }
.feature-card .course-body h4 { font-size: 17px; }

.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.prod-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.prod-img { height: 150px; background: linear-gradient(135deg, #fff3ef, #ffe0d6); display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 34px; }
.prod-body { padding: 11px 13px; }
.prod-title { font-size: 13.5px; line-height: 1.5; height: 40px; overflow: hidden; margin-bottom: 8px; }
.prod-price { color: var(--brand); font-size: 16px; font-weight: 700; }
.prod-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-top: 6px; }

/* ================= 课程阅读 ================= */
.lesson-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .lesson-layout { grid-template-columns: 1fr; } }
.lesson-menu { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; position: sticky; top: 0; }
.lesson-menu a { display: block; padding: 9px 12px; border-radius: 3px; color: var(--text-2); font-size: 13.5px; cursor: pointer; }
.lesson-menu a:hover { background: var(--brand-light); color: var(--brand); }
.lesson-menu a.active { background: var(--brand-light); color: var(--brand); font-weight: 600; }
.lesson-menu a .ok { color: var(--green); margin-right: 5px; }
.md-body { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 28px; line-height: 1.85; }
.md-body h1 { font-size: 22px; margin: 4px 0 16px; }
.md-body h2 { font-size: 17px; margin: 22px 0 10px; padding-left: 10px; border-left: 3px solid var(--brand); }
.md-body h3 { font-size: 15px; margin: 18px 0 8px; }
.md-body p { margin: 10px 0; }
.md-body ul, .md-body ol { padding-left: 22px; margin: 10px 0; }
.md-body li { margin: 5px 0; }
.md-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13.5px; }
.md-body th, .md-body td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.md-body th { background: #fafafa; }
.md-body blockquote { margin: 12px 0; padding: 10px 16px; background: var(--brand-light); border-left: 3px solid var(--brand); color: var(--text-2); }
.md-body code { background: #f5f5f5; padding: 2px 6px; border-radius: 3px; font-size: 13px; }
.md-body figure { margin: 18px 0; text-align: center; }
.md-body figure img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.md-body figure figcaption { margin-top: 8px; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.md-body img { max-width: 100%; height: auto; }

/* ================= 答题 ================= */
.exam-head { display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 14px 18px; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; position: sticky; top: 0; z-index: 5; }
.exam-timer { font-size: 20px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.q-item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 14px; }
.q-stem { font-size: 14.5px; line-height: 1.7; margin-bottom: 14px; }
.q-stem .q-no { color: var(--brand); font-weight: 700; margin-right: 6px; }
.q-type { font-size: 11.5px; color: var(--text-3); border: 1px solid var(--line); border-radius: 3px; padding: 1px 7px; margin-left: 8px; }
.opt { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; cursor: pointer; transition: .15s; }
.opt:hover { border-color: var(--brand); background: #fffaf8; }
.opt input { margin-top: 3px; }
.opt.correct { border-color: var(--green); background: #eefaf7; }
.opt.wrong { border-color: var(--red); background: #fff4f1; }
.opt .opt-key { font-weight: 600; color: var(--text-2); min-width: 18px; }
.analysis { background: #fafafa; border-radius: 4px; padding: 11px 14px; font-size: 13px; color: var(--text-2); margin-top: 10px; line-height: 1.7; }

/* ================= 其它 ================= */
.empty { text-align: center; color: var(--text-3); padding: 50px 20px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.loading { text-align: center; color: var(--text-3); padding: 50px; }
.section-title { font-size: 14px; font-weight: 600; margin: 18px 0 10px; color: var(--text); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar input, .toolbar select { min-height: 34px; border: 1px solid #dcdcdc; border-radius: var(--radius); padding: 6px 10px; min-width: 160px; }
.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 12px 4px; color: var(--text-2); font-size: 13px; }
.kv { display: flex; gap: 10px; font-size: 13.5px; padding: 7px 0; border-bottom: 1px dashed #f0f0f0; }
.kv .k { width: 110px; color: var(--text-3); flex: none; }
.kv .v { color: var(--text); flex: 1; word-break: break-all; }
.rank-1 { color: #d4a017; font-weight: 700; }
.rank-2 { color: #8a9099; font-weight: 700; }
.rank-3 { color: #b87333; font-weight: 700; }
.timeline { border-left: 2px solid var(--line); padding-left: 14px; margin-left: 6px; }
.timeline-item { position: relative; padding-bottom: 14px; font-size: 13px; }
.timeline-item::before { content: ''; position: absolute; left: -20px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.timeline-item .t-time { color: var(--text-3); font-size: 12px; }
.alert { padding: 11px 15px; border-radius: var(--radius); font-size: 13.5px; margin-bottom: 14px; }
.alert-info { background: #e8f1fd; color: #1f5ba8; }
.alert-warn, .alert-warning { background: #fff3e0; color: #a86a10; }
.alert-danger { background: #fdecea; color: #b3271a; }
.alert-success { background: #e6f6ee; color: #0c7a43; }
.tr-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 16px 16px; }
@media (max-width: 1100px) { .tr-cols { grid-template-columns:1fr; } }

/* ================= 授权提示条 ================= */
.license-bar {
  background: linear-gradient(90deg, #fff3e0, #ffe9d6); color: #a86a10;
  border-bottom: 1px solid #ffd9a8; padding: 10px 22px; font-size: 13px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center; flex: none;
}
.license-bar b { color: #b3271a; }
.license-bar span { color: #a86a10; opacity: .9; }

/* ================= AI 面板 ================= */
.ai-loading { display: flex; align-items: center; padding: 22px 4px; }
.ai-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--brand); margin-right: 6px;
  animation: abounce 1.2s infinite ease-in-out;
}
.ai-dot:nth-child(2) { animation-delay: .18s; }
.ai-dot:nth-child(3) { animation-delay: .36s; }
@keyframes abounce { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
.ai-report {
  background: #fafafa; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; line-height: 1.85; font-size: 13.5px; color: var(--text);
  max-height: 52vh; overflow-y: auto; white-space: normal;
}
.ai-block { margin-bottom: 12px; }
.ai-block b { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.ai-block ul { margin: 0; padding-left: 20px; }
.ai-block li { margin: 4px 0; font-size: 13.5px; line-height: 1.7; }
.ai-title {
  background: var(--brand-light); color: var(--brand-dark); padding: 9px 13px;
  border-radius: var(--radius); font-weight: 600; font-size: 13.5px;
}
.ai-hint {
  margin-top: 12px; font-size: 12px; color: var(--text-3);
  background: #fff8f5; border-left: 3px solid var(--brand); padding: 8px 12px; border-radius: 3px;
}
.btn-ai {
  background: linear-gradient(135deg, #7a52d6, #5b8def); color: #fff; border: none;
}
.btn-ai:hover { background: linear-gradient(135deg, #6a44c4, #4a7ade); color: #fff; border: none; }

/* ================= AI 标识（正常文字，不做突出样式） ================= */
.ai-pill {
  display: inline; font-size: inherit; font-weight: inherit; letter-spacing: normal;
  line-height: inherit; padding: 0; border-radius: 0; vertical-align: baseline;
  color: inherit; background: none; box-shadow: none;
}
.ai-pill-big {
  display: inline; font-size: inherit; font-weight: inherit; letter-spacing: normal;
  line-height: inherit; padding: 0; border-radius: 0; vertical-align: baseline;
  color: inherit; background: none; box-shadow: none;
}
.nav-group-title .ai-pill { margin-left: 0; }
.nav-item .ni-ai { margin-left: auto; }
.ai-status-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 12px 4px 5px;
  border-radius: 20px; white-space: nowrap; transition: .15s;
}
.ai-status-pill.on { background: #fff; color: #6a44c4; border: 1px solid #fff; font-weight: 600; }
.ai-status-pill.on:hover { box-shadow: 0 2px 8px rgba(255, 255, 255, .45); }
.ai-status-pill.off { background: rgba(255, 255, 255, .96); color: #7a52d6; border: 1px solid rgba(255, 255, 255, .8); }
.ai-status-pill.off:hover { background: #fff; }

/* AI 助手页 */
.ai-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg, #7a52d6, #5b8def); color: #fff;
  border-radius: 6px; padding: 20px 24px; margin-bottom: 16px;
}
.ai-hero-title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ai-hero-sub { font-size: 13px; opacity: .9; margin-top: 8px; }
.ai-hero-mode { text-align: right; }
.ai-mode-label { font-size: 12px; opacity: .85; }
.ai-mode-value { font-size: 19px; font-weight: 700; margin: 2px 0; }
.ai-mode-model { font-size: 12px; opacity: .85; }
.ai-cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 16px; }
.ai-cap { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; border-top: 3px solid #7a52d6; }
.ai-cap-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ai-cap-icon { font-size: 17px; }
.ai-cap-name { font-weight: 600; font-size: 14.5px; }
.ai-cap-who { display: inline-block; font-size: 11.5px; color: #7a52d6; background: #f2ecfd; padding: 1px 8px; border-radius: 20px; margin-bottom: 8px; }
.ai-cap-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.75; margin-bottom: 8px; }
.ai-cap-entry { font-size: 11.5px; color: var(--text-3); border-top: 1px dashed #eee; padding-top: 8px; }
.ai-quick { display: flex; flex-direction: column; gap: 10px; }
.ai-quick-btn {
  text-align: left; background: linear-gradient(135deg, #faf7ff, #f3f6ff);
  border: 1px solid #e6ddff; border-radius: var(--radius); padding: 12px 14px; cursor: pointer;
  transition: .15s; position: relative;
}
.ai-quick-btn:hover { border-color: #7a52d6; box-shadow: 0 3px 12px rgba(122, 82, 214, .16); transform: translateY(-1px); }
.ai-quick-btn .ai-pill { margin-bottom: 6px; }
.ai-quick-btn b { display: block; font-size: 13.5px; margin-bottom: 3px; color: #4a3a7a; }
.ai-quick-btn span:last-child { font-size: 12px; color: var(--text-3); }

/* AI 评分反馈（学生端实操任务） */
.ai-feedback {
  margin-top: 14px; background: linear-gradient(135deg, #faf7ff, #f3f6ff);
  border: 1px solid #e6ddff; border-radius: 6px; padding: 12px 14px;
}
.ai-feedback-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ai-feedback-head b { color: #4a3a7a; font-size: 14px; }
.ai-feedback-body {
  font-size: 12.5px; color: var(--text-2); line-height: 1.8; white-space: normal;
  border-top: 1px dashed #e2d8ff; padding-top: 9px;
}
.ai-panel { margin-top: 14px; }
/* AI 问答窗口 */
.ai-chat { background: linear-gradient(180deg, #fafbfd, #f3f5fa); border: 1px solid #eef0f5; border-radius: 10px; padding: 14px 14px 4px; }
.ai-qa-log { display: flex; flex-direction: column; gap: 14px; max-height: 46vh; overflow-y: auto; padding: 2px 2px 10px; }
.ai-qa { display: flex; gap: 10px; }
.ai-qa .who {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 12.5px; font-weight: 700; color: #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .14);
}
.ai-qa.me .who { background: linear-gradient(135deg, #ee4d2d, #f4703f); }
.ai-qa.ai .who { background: linear-gradient(135deg, #7a52d6, #5b8def); }
.ai-qa .bubble {
  background: #fff; border: 1px solid #edf0f4; border-radius: 4px 12px 12px 12px; padding: 10px 14px;
  font-size: 13.5px; line-height: 1.8; max-width: 86%; white-space: pre-wrap;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}
.ai-qa.me { flex-direction: row-reverse; }
.ai-qa.me .bubble {
  background: linear-gradient(135deg, #ee4d2d, #f4703f); color: #fff; border: none;
  border-radius: 12px 4px 12px 12px; box-shadow: 0 2px 8px rgba(238, 77, 45, .25);
}
.ai-qa.me .bubble .ai-hint { color: var(--text-2); background: rgba(255,255,255,.85); }
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 14px 16px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: #b9c0cc; animation: aiTyping 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aiTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; }
.ai-chip {
  border: 1px solid #e3e7ee; background: #fff; color: var(--text-2); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; cursor: pointer; transition: .15s;
}
.ai-chip:hover { border-color: #7a52d6; color: #7a52d6; background: #f6f4ff; }
.ai-inputbar { display: flex; gap: 10px; margin-top: 12px; }
.ai-inputbar input {
  flex: 1; min-width: 0; border: 1.5px solid #e3e7ee; border-radius: 10px; padding: 10px 14px;
  outline: none; background: #fff; transition: .15s;
}
.ai-inputbar input:focus { border-color: #7a52d6; box-shadow: 0 0 0 3px rgba(122, 82, 214, .12); }
.ai-send {
  border: none; border-radius: 10px; padding: 0 22px; color: #fff; font-size: 14px; cursor: pointer;
  background: linear-gradient(135deg, #7a52d6, #5b8def); box-shadow: 0 2px 8px rgba(122, 82, 214, .30); transition: .15s;
}
.ai-send:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ================= 仿真实虾皮卖家中心（全屏） ================= */
.sc-root {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  display: flex; flex-direction: column;
}
.sc-top {
  height: 56px; background: #fff; border-bottom: 1px solid #e8e8e8; flex: none;
  display: flex; align-items: center; gap: 18px; padding: 0 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.sc-top-left { display: flex; align-items: baseline; gap: 8px; flex: none; }
.sc-logo { color: var(--brand); font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.sc-logo-sub { color: var(--text-2); font-size: 13px; border-left: 1px solid #e0e0e0; padding-left: 8px; }
.sc-top-mid { flex: 1; max-width: 460px; position: relative; display: flex; align-items: center; }
.sc-search-icon { display: none; }
.sc-search {
  width: 100%; height: 34px; border: 1px solid #e2e2e2; background: #f7f7f7;
  border-radius: 17px; padding: 0 14px 0 32px; outline: none; font-size: 13px;
}
.sc-search:focus { background: #fff; border-color: var(--brand); }
.sc-top-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.sc-icon { display: none; }
.sc-icon:hover { opacity: 1; }
.sc-shop {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text);
  padding-left: 14px; border-left: 1px solid #eee;
}
.sc-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
}
.sc-exit { flex: none; }
.sc-body { flex: 1; display: flex; min-height: 0; }
.sc-sidebar {
  width: 208px; background: #fff; border-right: 1px solid #ececec; overflow-y: auto;
  flex: none; padding: 10px 0 40px;
}
.sc-group { margin-bottom: 4px; }
.sc-group-name {
  font-size: 11px; color: var(--text-3); padding: 12px 20px 5px; letter-spacing: .6px;
}
.sc-item {
  display: block; padding: 9px 20px; font-size: 13.5px; color: var(--text-2); cursor: pointer;
  border-left: 3px solid transparent; transition: .15s;
}
.sc-item:hover { background: var(--brand-light); color: var(--brand); }
.sc-item.active {
  background: var(--brand-light); color: var(--brand); font-weight: 600; border-left-color: var(--brand);
}
.sc-tip {
  margin: 18px 16px 0; padding: 10px 12px; background: #fafafa; border-radius: 4px;
  font-size: 11.5px; color: var(--text-3); line-height: 1.7;
}
.sc-main { flex: 1; overflow-y: auto; padding: 16px 24px 46px; min-width: 0; }
.sc-crumb { font-size: 12.5px; color: var(--text-3); margin-bottom: 12px; }
.sc-crumb i { font-style: normal; margin: 0 6px; color: #ccc; }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.sc-head h1 { font-size: 20px; font-weight: 600; }
.sc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-cat { padding: 10px 0; border-bottom: 1px dashed #f0f0f0; }
.sc-cat-l1 { font-weight: 600; margin-bottom: 8px; font-size: 13.5px; }
.sc-cat-l2 { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-cat-tag {
  background: #f5f5f5; color: var(--text-2); padding: 4px 12px; border-radius: 3px; font-size: 12.5px;
}
@media (max-width: 860px) {
  .sc-sidebar { width: 160px; }
  .sc-top-mid { display: none; }
}

/* ============ 虾皮卖家中心组件（高保真） ============ */
/* 侧边栏分组：图标 + 可折叠 */
.sc-group-head {
  display: flex; align-items: center; gap: 9px; padding: 10px 16px 10px 18px; cursor: pointer;
  color: var(--text); font-size: 13.5px; font-weight: 500; user-select: none;
}
.sc-group-head:hover { color: var(--brand); }
.sc-group-head .g-icon { width: 18px; height: 18px; flex: none; color: #9a9a9a; }
.sc-group-head:hover .g-icon, .sc-group.open .sc-group-head .g-icon { color: var(--brand); }
.sc-group.open .sc-group-head { color: var(--brand); }
.sc-group-head .caret {
  margin-left: auto; font-size: 10px; color: #bbb; transition: transform .18s;
}
.sc-group.open .sc-group-head .caret { transform: rotate(90deg); }
.sc-group-items { display: none; padding-bottom: 2px; }
.sc-group.open .sc-group-items { display: block; }
.sc-item { padding-left: 45px; }

/* 顶栏账号菜单 */
.sc-account { position: relative; }
.sc-account-btn {
  display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 4px 8px;
  border-radius: 20px; font-size: 13px;
}
.sc-account-btn:hover { background: #f7f7f7; }
.sc-caret { font-size: 9px; color: #999; }
.sc-menu {
  position: absolute; right: 0; top: 40px; background: #fff; border: 1px solid #eee;
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); min-width: 168px; padding: 6px 0;
  z-index: 30;
}
.sc-menu a { display: block; padding: 9px 16px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.sc-menu a:hover { background: var(--brand-light); color: var(--brand); }
.sc-menu .sep { height: 1px; background: #f0f0f0; margin: 5px 0; }
.sc-badge {
  position: absolute; top: -5px; right: -7px; background: var(--brand); color: #fff;
  font-size: 10px; line-height: 15px; min-width: 15px; text-align: center; border-radius: 8px;
  padding: 0 4px;
}
.sc-icon-wrap { position: relative; display: inline-flex; }

/* Tab 栏 */
.sp-tabs { display: flex; gap: 26px; border-bottom: 1px solid #ececec; margin-bottom: 0; padding: 0 2px; background: #fff; border-radius: 6px 6px 0 0; }
.sp-tabs .sp-tab {
  padding: 13px 2px; font-size: 14px; color: var(--text-2); cursor: pointer; position: relative;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.sp-tabs .sp-tab:hover { color: var(--brand); }
.sp-tabs .sp-tab.active { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }
.sp-tabs .sp-tab .cnt { color: var(--text-3); font-size: 12px; margin-left: 3px; }

/* 日期范围 */
.sp-range { display: flex; gap: 0; border: 1px solid #e6e6e6; border-radius: 4px; overflow: hidden; }
.sp-range button {
  border: none; background: #fff; padding: 6px 14px; font-size: 13px; color: var(--text-2);
  cursor: pointer; border-right: 1px solid #eee;
}
.sp-range button:last-child { border-right: none; }
.sp-range button:hover { color: var(--brand); }
.sp-range button.active { background: var(--brand); color: #fff; font-weight: 500; }

/* 筛选栏 */
.sp-panel { background: #fff; border-radius: 6px; box-shadow: var(--shadow); margin-bottom: 14px; }
.sp-panel-body { padding: 16px 18px; }
.sp-filter { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.sp-filter .f { display: flex; flex-direction: column; gap: 6px; }
.sp-filter .f > label { font-size: 12px; color: var(--text-3); }
.sp-input {
  height: 34px; border: 1px solid #e2e2e2; border-radius: 4px; padding: 0 11px; font-size: 13px;
  background: #fff; outline: none; min-width: 168px;
}
.sp-input:focus { border-color: var(--brand); }
select.sp-input { padding-right: 26px; min-width: 150px; }
.sp-filter-actions { display: flex; gap: 10px; margin-left: auto; }

/* 虾皮风格按钮 */
.sp-btn {
  height: 34px; padding: 0 16px; border-radius: 4px; font-size: 13.5px; cursor: pointer;
  border: 1px solid var(--brand); background: #fff; color: var(--brand); transition: .15s;
}
.sp-btn:hover { background: var(--brand-light); }
.sp-btn.solid { background: var(--brand); color: #fff; }
.sp-btn.solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.sp-btn.grey { border-color: #dcdcdc; color: var(--text-2); }
.sp-btn.grey:hover { border-color: #bbb; background: #fafafa; }
.sp-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 表格工具栏 */
.sp-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #f2f2f2; }
.sp-toolbar .sp-count { margin-left: auto; font-size: 13px; color: var(--text-3); }
.sp-batch {
  height: 34px; border: 1px solid #dcdcdc; border-radius: 4px; padding: 0 11px; font-size: 13px;
  background: #fff; color: var(--text-2); cursor: pointer;
}

/* 虾皮表格 */
.sp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-table th {
  background: #fafafa; color: var(--text-2); font-weight: 500; text-align: left;
  padding: 12px 14px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; font-size: 12.5px;
}
.sp-table td { padding: 12px 14px; border-bottom: 1px solid #f4f4f4; vertical-align: middle; }
.sp-table tbody tr:hover { background: #fffaf8; }
.sp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-table .ck { width: 15px; height: 15px; }
.sp-prod { display: flex; gap: 10px; align-items: flex-start; }
.sp-thumb {
  width: 46px; height: 46px; border-radius: 4px; background: linear-gradient(135deg, #fff3ef, #ffe0d6);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none;
  color: var(--brand); object-fit: cover;
}
.sp-prod-name { line-height: 1.45; max-width: 320px; }
.sp-prod-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.sp-link { color: #2673dd; cursor: pointer; font-size: 12.5px; }
.sp-link:hover { text-decoration: underline; }
.sp-link.danger { color: var(--brand); }
.sp-link-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* 状态标签（虾皮配色） */
.sp-tag { display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 12px; white-space: nowrap; }
.sp-tag.pending { background: #fff3e0; color: #d97a06; }
.sp-tag.paid { background: #ffece8; color: #d73211; }
.sp-tag.shipping { background: #e8f1fd; color: #2673dd; }
.sp-tag.completed { background: #e6f7f4; color: #1d8f7f; }
.sp-tag.refunding, .sp-tag.refunded { background: #f2ecfd; color: #7a52d6; }
.sp-tag.cancelled { background: #f2f2f2; color: #8a8a8a; }
.sp-tag.active { background: #e6f7f4; color: #1d8f7f; }
.sp-tag.soldout { background: #fff3e0; color: #d97a06; }
.sp-tag.offline, .sp-tag.draft { background: #f2f2f2; color: #8a8a8a; }
.sp-tag.orange { background: #fff3e8; color: #ee4d2d; }
.sp-tag.violation { background: #ffece8; color: #d73211; }

/* 分页 */
.sp-pager {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 18px;
  font-size: 13px; color: var(--text-3);
}

/* ================= 仿真实Shopee买家卖场（全屏） ================= */
.bc-top {
  flex: none; background: linear-gradient(0deg, #f53d2d, #f63 55%, #ff6533);
  display: flex; align-items: center; gap: 22px; padding: 0 24px; height: 78px;
}
.bc-top-left { display: flex; align-items: center; gap: 16px; flex: none; }
.bc-logo {
  color: #fff; font-size: 24px; font-weight: 800; font-style: italic; letter-spacing: -.5px;
}
.bc-exit {
  background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 3px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.bc-exit:hover { background: rgba(255, 255, 255, .28); }
.bc-lang {
  background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 3px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.bc-lang:hover { background: rgba(255, 255, 255, .28); }
.bc-top-mid { flex: 1; display: flex; max-width: 680px; }
.bc-search {
  flex: 1; height: 38px; border: none; outline: none; border-radius: 3px 0 0 3px;
  padding: 0 16px; font-size: 13.5px; background: #fff; color: var(--text);
}
.bc-search-btn {
  flex: none; width: 70px; height: 38px; border: none; border-radius: 0 3px 3px 0;
  background: var(--brand); color: #fff; font-size: 13.5px; cursor: pointer;
}
.bc-search-btn:hover { background: var(--brand-dark); }
.bc-top-right { display: flex; align-items: center; gap: 20px; flex: none; margin-left: auto; }
.bc-top-link { color: #fff; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.bc-top-link:hover { opacity: .85; }
.bc-cart-link {
  position: relative; color: #fff; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.bc-cart-link:hover { opacity: .85; }
.bc-cart-badge {
  position: absolute; top: -8px; right: -14px; min-width: 18px; height: 18px; line-height: 18px;
  padding: 0 5px; border-radius: 9px; background: #fff; color: var(--brand);
  font-size: 11px; font-weight: 700; text-align: center; border: 1px solid rgba(0, 0, 0, .04);
}
.bc-body { flex: 1; overflow-y: auto; padding: 18px 24px 60px; min-height: 0; }

/* 横幅与分类条 */
.bc-banner { display: flex; gap: 14px; margin-bottom: 16px; }
.bc-banner-item {
  flex: 1; height: 110px; border-radius: 6px; color: #fff; font-size: 22px; font-weight: 700;
  display: flex; align-items: center; padding: 0 34px;
  background: linear-gradient(135deg, #ee4d2d, #ff8a5c);
}
.bc-banner-item.alt { background: linear-gradient(135deg, #2673dd, #5aa3ff); }
.bc-cats {
  display: flex; flex-wrap: wrap; gap: 10px; background: #fff; border-radius: 6px;
  padding: 12px 16px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.bc-cat {
  padding: 5px 16px; border-radius: 20px; background: #f5f5f5; color: var(--text-2);
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.bc-cat:hover { color: var(--brand); }
.bc-cat.active { background: var(--brand); color: #fff; }

/* 商品网格 */
.bc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.bc-card {
  background: #fff; border-radius: 4px; overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s;
  border: 1px solid transparent;
}
.bc-card:hover {
  transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  border-color: var(--brand-light);
}
.bc-card-img {
  position: relative; width: 100%; padding-top: 100%; background: #f7f7f7;
  display: flex; align-items: center; justify-content: center;
}
.bc-card-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.bc-card-img span { color: var(--text-3); font-size: 12px; }
.bc-card-body { padding: 10px; }
.bc-card-title {
  font-size: 13px; line-height: 1.45; color: var(--text); height: 38px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bc-card-shop { font-size: 11.5px; color: var(--text-3); margin: 4px 0 6px; }
.bc-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.bc-price { color: var(--brand); font-size: 16px; font-weight: 600; }
.bc-sold { font-size: 11px; color: var(--text-3); white-space: nowrap; }

/* 分页 */
.bc-pager { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.bc-page {
  min-width: 32px; height: 32px; line-height: 30px; text-align: center; padding: 0 8px;
  background: #fff; border: 1px solid #e2e2e2; border-radius: 3px; font-size: 13px;
  color: var(--text-2); cursor: pointer;
}
.bc-page:hover { color: var(--brand); border-color: var(--brand); }
.bc-page.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* 通用标题 / 返回 */
.bc-page-title { font-size: 20px; margin-bottom: 16px; }
.bc-section-title { font-size: 16px; margin: 22px 0 12px; }
.bc-back {
  background: none; border: none; color: var(--brand); font-size: 13px; cursor: pointer;
  padding: 0; margin-bottom: 12px;
}
.bc-back:hover { text-decoration: underline; }
.bc-label { font-size: 13px; color: var(--text-2); margin-bottom: 8px; font-weight: 600; }

/* 按钮 */
.bc-btn {
  height: 40px; padding: 0 28px; border-radius: 3px; font-size: 14px; cursor: pointer;
  border: 1px solid transparent;
}
.bc-btn:disabled { opacity: .5; cursor: not-allowed; }
.bc-btn.primary {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.bc-btn.primary:hover:not(:disabled) { background: var(--brand-dark); }
.bc-btn.ghost {
  background: #fff; color: var(--brand); border-color: var(--brand);
}
.bc-btn.ghost:hover:not(:disabled) { background: var(--brand-light); }

/* 商品详情 */
.bc-product {
  display: flex; gap: 26px; background: #fff; border-radius: 6px; padding: 22px;
  box-shadow: var(--shadow); align-items: flex-start;
}
.bc-p-gallery { flex: none; width: 420px; max-width: 45%; }
.bc-p-mainimg {
  width: 100%; padding-top: 100%; position: relative; background: #f7f7f7;
  border-radius: 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.bc-p-mainimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-p-mainimg span { color: var(--text-3); font-size: 13px; }
.bc-p-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.bc-p-thumb {
  width: 64px; height: 64px; border-radius: 3px; overflow: hidden; background: #f7f7f7;
  border: 1px solid #ececec;
}
.bc-p-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.bc-p-info { flex: 1; min-width: 0; }
.bc-p-title { font-size: 20px; line-height: 1.4; margin-bottom: 10px; }
.bc-p-meta { font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; }
.bc-p-price {
  background: var(--brand-light); color: var(--brand); font-size: 28px; font-weight: 600;
  padding: 14px 18px; border-radius: 4px; margin-bottom: 16px;
}
.bc-p-stock { font-size: 13px; color: var(--text-2); margin-bottom: 16px; }
.bc-soldout { color: var(--brand); font-weight: 600; }
.bc-p-skus { margin-bottom: 16px; }
.bc-sku {
  display: inline-block; margin: 0 8px 8px 0; padding: 7px 14px; border: 1px solid #e2e2e2;
  border-radius: 3px; font-size: 12.5px; color: var(--text-2); cursor: pointer;
}
.bc-sku:has(input:checked) { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.bc-sku input { margin-right: 5px; vertical-align: -2px; }
.bc-p-qtyrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.bc-qty { display: inline-flex; align-items: stretch; }
.bc-qty button {
  width: 30px; height: 30px; border: 1px solid #dcdcdc; background: #fff; cursor: pointer;
  font-size: 14px; color: var(--text-2);
}
.bc-qty button:hover { color: var(--brand); }
.bc-qty input {
  width: 48px; height: 30px; border: 1px solid #dcdcdc; border-left: none; border-right: none;
  text-align: center; font-size: 13px; outline: none;
}
.bc-qty span { line-height: 30px; padding: 0 14px; font-size: 13.5px; }
.bc-p-actions { display: flex; gap: 12px; margin-bottom: 18px; }
.bc-shop-link { display: inline-block; font-size: 13px; margin-bottom: 18px; }
.bc-p-desc {
  border-top: 1px dashed #eee; padding-top: 14px; font-size: 13.5px; line-height: 1.8;
  color: var(--text-2); white-space: pre-wrap;
}

/* 店铺页 */
.bc-shop-header {
  background: #fff; border-radius: 6px; padding: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.bc-shop-header h2 { font-size: 20px; }
.bc-shop-rating { color: var(--orange); font-size: 13px; font-weight: 600; }
.bc-shop-header p { color: var(--text-2); font-size: 13.5px; line-height: 1.7; margin: 0; }

/* 购物车 */
.bc-cart-list { background: #fff; border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; }
.bc-cart-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid #f4f4f4;
}
.bc-cart-item:last-child { border-bottom: none; }
.bc-ck { width: 15px; height: 15px; flex: none; accent-color: var(--brand); }
.bc-cart-img {
  width: 72px; height: 72px; border-radius: 4px; overflow: hidden; background: #f7f7f7; flex: none;
}
.bc-cart-img img { width: 100%; height: 100%; object-fit: cover; }
.bc-cart-info { flex: 1; min-width: 0; }
.bc-cart-title { font-size: 13.5px; line-height: 1.5; margin-bottom: 4px; }
.bc-cart-shop { font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
.bc-cart-del {
  background: none; border: none; color: var(--text-3); font-size: 12.5px; cursor: pointer; flex: none;
}
.bc-cart-del:hover { color: var(--brand); }
.bc-cart-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 22px;
  background: #fff; border-radius: 6px; box-shadow: var(--shadow);
  padding: 14px 20px; margin-top: 14px;
}
.bc-cart-total { font-size: 14px; color: var(--text-2); }
.bc-cart-total b { color: var(--brand); font-size: 20px; margin-left: 6px; }

/* 结算 */
.bc-co-block {
  background: #fff; border-radius: 6px; box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 14px;
}
.bc-co-block h3 { font-size: 15px; margin-bottom: 12px; }
.bc-addr {
  display: block; border: 1px solid #e8e8e8; border-radius: 4px; padding: 12px 14px; margin-bottom: 10px;
  font-size: 13px; line-height: 1.7; cursor: pointer; color: var(--text-2);
}
.bc-addr.active { border-color: var(--brand); background: var(--brand-light); }
.bc-addr b { color: var(--text); margin: 0 8px 0 4px; }
.bc-co-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; font-size: 13.5px; border-bottom: 1px dashed #f4f4f4;
}
.bc-co-row:last-child { border-bottom: none; }

/* 我的订单 */
.bc-order {
  background: #fff; border-radius: 6px; box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 14px;
}
.bc-order-head {
  display: flex; align-items: center; gap: 14px; font-size: 13.5px; font-weight: 600;
  padding-bottom: 10px; border-bottom: 1px solid #f4f4f4; margin-bottom: 6px; flex-wrap: wrap;
}
.bc-order-status {
  color: var(--brand); font-size: 12.5px; font-weight: 600;
}
.bc-order-time { color: var(--text-3); font-size: 12px; font-weight: 400; margin-left: auto; }
.bc-order-total {
  text-align: right; font-size: 13px; color: var(--text-2); padding-top: 8px;
}
@media (max-width: 860px) {
  .bc-top { gap: 12px; padding: 0 12px; height: 64px; }
  .bc-exit, .bc-top-link { display: none; }
  .bc-logo { font-size: 18px; }
  .bc-banner-item { font-size: 16px; height: 80px; padding: 0 18px; }
  .bc-product { flex-direction: column; }
  .bc-p-gallery { width: 100%; max-width: none; }
  .bc-body { padding: 12px; }
}
.sp-pager button {
  min-width: 30px; height: 30px; border: 1px solid #e2e2e2; background: #fff; border-radius: 4px;
  cursor: pointer; color: var(--text-2);
}
.sp-pager button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.sp-pager button:disabled { opacity: .45; cursor: not-allowed; }
.sp-pager button.cur { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 业务概览指标卡 */
.sp-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
@media (max-width: 1100px) { .sp-metrics { grid-template-columns: repeat(2, 1fr); } }
.sp-metric { background: #fff; border-radius: 6px; box-shadow: var(--shadow); padding: 16px 18px; }
.sp-metric .m-label { font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; }
.sp-metric .m-value { font-size: 25px; font-weight: 700; letter-spacing: -.5px; }
.sp-metric .m-value small { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 3px; }
.sp-metric .m-cmp { font-size: 12px; color: var(--text-3); margin-top: 9px; }
.sp-metric .up { color: #1d8f7f; }
.sp-metric .down { color: var(--brand); }

/* 待办事项 */
.sp-todo { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px dashed #f0f0f0; }
.sp-todo:last-child { border-bottom: none; }
.sp-todo .t-name { flex: 1; font-size: 13.5px; }
.sp-todo .t-count {
  min-width: 26px; height: 22px; line-height: 22px; text-align: center; border-radius: 11px;
  background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 600; padding: 0 7px;
}
.sp-todo .t-count.zero { background: #f2f2f2; color: #a0a0a0; }

/* 店铺卡片 */
.sp-shopcard { display: flex; gap: 14px; align-items: center; }
.sp-shoplogo {
  width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #ff8a65, #ee4d2d);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
}
.sp-shopcard .s-name { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.sp-shopcard .s-meta { font-size: 12.5px; color: var(--text-3); line-height: 1.7; }

/* ============ 买家端深化：图标墙 / 楼层 / 页脚 / 评价 / 订单 / 结算 / 弹窗 ============ */
.bc-floor-title {
  font-size: 16px; font-weight: 700; color: var(--text); margin: 18px 2px 12px;
  border-left: 4px solid var(--brand); padding-left: 10px;
}
.bc-quickcats {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px;
  background: #fff; border-radius: 6px; box-shadow: var(--shadow); padding: 16px 12px; margin-bottom: 14px;
}
.bc-qc { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; }
.bc-qc-ico {
  width: 46px; height: 46px; border-radius: 12px; color: #fff; font-size: 19px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; transition: transform .15s;
}
.bc-qc:hover .bc-qc-ico { transform: translateY(-3px); }
.bc-qc-name { font-size: 12px; color: var(--text-2); text-align: center; line-height: 1.3; }
@media (max-width: 1100px) { .bc-quickcats { grid-template-columns: repeat(6, 1fr); } }

.bc-footer { background: #fff; margin-top: 24px; border-top: 4px solid var(--brand); }
.bc-footer-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1200px; margin: 0 auto; padding: 26px 20px 18px;
}
.bc-footer-cols h5 { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.bc-footer-cols a { display: block; font-size: 12.5px; color: var(--text-3); line-height: 2; cursor: pointer; }
.bc-footer-cols a:hover { color: var(--brand); }
.bc-footer-pay {
  max-width: 1200px; margin: 0 auto; padding: 14px 20px; border-top: 1px solid #f0f0f0;
  font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bc-footer-pay b {
  border: 1px solid #e5e5e5; border-radius: 4px; padding: 3px 9px; font-size: 11px;
  color: var(--text-2); font-weight: 600; background: #fafafa;
}
.bc-footer-copy {
  background: #fafafa; text-align: center; font-size: 12px; color: #999; padding: 14px; margin-top: 6px;
}

/* 详情：配送信息 / 星级 / 店铺卡 / 评价 */
.bc-p-ship {
  margin-top: 12px; border: 1px solid #f0f0f0; border-radius: 6px; padding: 4px 14px; background: #fcfcfc;
}
.bc-ship-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 9px 0; border-bottom: 1px dashed #f0f0f0; }
.bc-ship-row:last-child { border-bottom: none; }
.bc-ship-row span { color: var(--text-3); }
.bc-ship-row b { font-weight: 500; color: var(--text); }
.bc-stars { color: #f5a623; letter-spacing: 1px; font-size: 14px; }
.bc-stars.sm { font-size: 12.5px; }
.bc-shopcard {
  background: #fff; border-radius: 6px; box-shadow: var(--shadow); padding: 18px 20px;
  display: flex; align-items: center; gap: 16px; margin-top: 14px;
}
.bc-sc-logo {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #ff8a65, #ee4d2d); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
}
.bc-sc-info { flex: 1; }
.bc-sc-name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.bc-sc-meta { font-size: 12.5px; color: var(--text-3); }
.bc-sc-actions { display: flex; gap: 10px; }
.bc-sc-actions .bc-btn { height: 36px; padding: 0 20px; }

.bc-reviews { background: #fff; border-radius: 6px; box-shadow: var(--shadow); padding: 18px 20px; margin-top: 14px; }
.bc-rv-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.bc-rv-head h3 { font-size: 16px; }
.bc-rv-score { font-size: 13px; color: var(--text-3); }
.bc-rv-score b { color: var(--brand); font-size: 18px; }
.bc-rv-item { padding: 16px 0; border-bottom: 1px solid #f4f4f4; }
.bc-rv-item:last-child { border-bottom: none; }
.bc-rv-user { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.bc-rv-ava {
  width: 38px; height: 38px; border-radius: 50%; background: #f4f4f4; color: var(--text-2);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.bc-rv-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.bc-rv-content { font-size: 13.5px; line-height: 1.7; color: var(--text); margin: 4px 0 8px 48px; }
.bc-rv-imgs { display: flex; gap: 8px; margin: 6px 0 6px 48px; flex-wrap: wrap; }
.bc-rv-imgs img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; border: 1px solid #f0f0f0; }
.bc-rv-reply {
  margin: 8px 0 0 48px; background: #f7f7f7; border-radius: 4px; padding: 10px 12px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.7;
}

/* 结算：物流/支付选项 / 输入框 / 汇总 */
.bc-opt {
  display: flex; align-items: center; gap: 12px; border: 1px solid #e8e8e8; border-radius: 4px;
  padding: 11px 14px; margin-bottom: 8px; cursor: pointer; font-size: 13.5px;
}
.bc-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-light); }
.bc-opt .bc-opt-name { flex: 1; }
.bc-opt .bc-opt-eta { color: var(--text-3); font-size: 12.5px; }
.bc-opt b { color: var(--brand); min-width: 52px; text-align: right; }
.bc-input {
  width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 10px 12px; font-size: 13.5px;
  font-family: inherit; resize: vertical; box-sizing: border-box;
}
.bc-input:focus { outline: none; border-color: var(--brand); }
.bc-co-summary {
  background: #fff; border-radius: 6px; box-shadow: var(--shadow); padding: 8px 20px; margin-bottom: 14px;
  max-width: 100%;
}
.bc-co-row.grand { border-top: 1px solid #f0f0f0; margin-top: 4px; padding-top: 12px; font-size: 15px; }
.bc-co-row.grand b { color: var(--brand); font-size: 19px; }

/* 订单 tabs 与卡片 */
.bc-otabs {
  display: flex; gap: 4px; background: #fff; border-radius: 6px; box-shadow: var(--shadow);
  padding: 4px; margin-bottom: 14px; overflow-x: auto;
}
.bc-otab {
  padding: 10px 18px; font-size: 13.5px; color: var(--text-2); cursor: pointer; white-space: nowrap;
  border-radius: 4px; text-decoration: none;
}
.bc-otab:hover { color: var(--brand); }
.bc-otab.active { background: var(--brand); color: #fff; font-weight: 600; }
.bc-order-no { font-weight: 400; color: var(--text-3); font-size: 12.5px; }
.bc-order-shop { color: var(--text); }
.bc-order-status { margin-left: auto; }
.bc-order-item { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.bc-order-img {
  width: 56px; height: 56px; border-radius: 4px; background: #f5f5f5; flex: none;
}
.bc-order-title { flex: 1; font-size: 13.5px; line-height: 1.5; }
.bc-order-spec { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.bc-order-qty { color: var(--text-3); font-size: 13px; min-width: 40px; text-align: center; }
.bc-order-price { font-size: 13.5px; min-width: 80px; text-align: right; }
.bc-order-meta { font-size: 12px; color: var(--text-3); padding: 6px 0; }
.bc-order-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding-top: 12px; border-top: 1px solid #f4f4f4; flex-wrap: wrap;
}
.bc-order-foot .bc-act { height: 34px; padding: 0 18px; font-size: 13px; }
.bc-note { font-size: 12.5px; color: var(--text-3); }
.bc-note.done { color: #27ae60; }
.st-unpaid .bc-order-status { color: #f5a623; }
.st-cancelled .bc-order-status { color: #999; }
.st-completed .bc-order-status { color: #27ae60; }

/* 评价弹窗 */
.bc-modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.bc-modal {
  background: #fff; border-radius: 8px; padding: 24px; width: 420px; max-width: 92vw;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.bc-modal h3 { font-size: 17px; margin-bottom: 16px; }
.bc-rate-stars { display: flex; gap: 8px; margin-bottom: 16px; }
.bc-rs {
  font-size: 30px; color: #d9d9d9; cursor: pointer; transition: color .1s, transform .1s;
}
.bc-rs:hover { transform: scale(1.12); }
.bc-rs.on { color: #f5a623; }
.bc-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ============ 注册卡片 / 排序筛选 / 售后 ============ */
.login-switch { text-align: center; font-size: 13px; color: #888; margin-top: 10px; }
.login-switch a { color: var(--brand); cursor: pointer; }
.login-switch a:hover { text-decoration: underline; }

.bc-sortbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff; padding: 10px 14px; border-radius: 3px; margin: 12px 0; font-size: 13px; }
.bc-sort-label { color: #777; }
.bc-sort-opt { padding: 4px 12px; border-radius: 2px; color: #555; cursor: pointer; }
.bc-sort-opt:hover { color: var(--brand); }
.bc-sort-opt.active { background: var(--brand); color: #fff; }
.bc-sort-sep { color: #ddd; margin: 0 4px; }
.bc-price-input { width: 88px; height: 30px; border: 1px solid #ddd; border-radius: 2px;
  padding: 0 8px; font-size: 13px; outline: none; }
.bc-price-input:focus { border-color: var(--brand); }
.bc-price-dash { color: #999; }
.bc-btn.sm { height: 30px; padding: 0 14px; font-size: 13px; }

.bc-price-old { color: #aaa; font-size: 12px; text-decoration: line-through; margin-left: 6px; font-weight: 400; }
.bc-card-foot .bc-price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.bc-card-tag { position: absolute; top: 0; left: 0; background: var(--brand); color: #fff;
  font-size: 11px; padding: 2px 8px; border-bottom-right-radius: 8px; }
.bc-card-img { position: relative; }
.bc-p-sale { display: inline-block; margin-left: 10px; background: var(--brand); color: #fff;
  font-size: 12px; padding: 2px 8px; border-radius: 2px; vertical-align: middle; }
.bc-p-price .bc-price-old { font-size: 15px; }
.bc-banner-item.has-link { cursor: pointer; }
.bc-banner-item { background-size: cover; background-position: center; }

.bc-order-after { background: #fff8f5; border-left: 3px solid var(--brand); padding: 8px 12px;
  margin: 8px 0; font-size: 13px; color: #9a4527; border-radius: 2px; }
.bc-order.st-refunded .bc-order-status { color: #27ae60; }
.bc-order.st-returning .bc-order-status,
.bc-order.st-refunding .bc-order-status { color: #f69113; }
.bc-field-label { font-size: 13px; color: #555; font-weight: 600; margin: 10px 0 6px; }
.bc-after-types { display: flex; flex-direction: column; gap: 8px; }
.bc-after-type { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #eee;
  border-radius: 3px; padding: 10px 12px; cursor: pointer; }
.bc-after-type:has(input:checked) { border-color: var(--brand); background: #fff8f5; }
.bc-after-type b { display: block; font-size: 14px; color: #333; }
.bc-after-type span { font-size: 12px; color: #999; }

/* ============ 卖家中心：开店门禁 / 绑卡弹窗 / 活动选品 ============ */
.sc-gate { min-height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fff8f5, #f7f8fa); padding: 40px 20px; box-sizing: border-box; }
.sc-gate-card { background: #fff; border-radius: 8px; box-shadow: 0 6px 30px rgba(0,0,0,.08);
  max-width: 520px; width: 100%; padding: 36px 40px; text-align: center; }
.sc-gate-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; font-size: 28px; }
.sc-gate-card h2 { font-size: 20px; margin: 0 0 12px; color: #222; }
.sc-gate-card p { color: #666; font-size: 14px; line-height: 1.8; margin: 0 0 20px; }
.sc-gate-note { background: #fdecea; color: #a0341d; border-radius: 4px; padding: 10px 14px;
  font-size: 13px; text-align: left; margin-bottom: 18px; line-height: 1.7; }
.sc-gate-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.sc-open-form { text-align: left; margin-top: 18px; }
.sc-open-form label { display: block; margin-bottom: 14px; }
.sc-open-form label > span { display: block; font-size: 13px; color: #555; margin-bottom: 6px; font-weight: 600; }
.sc-open-form label > span em { color: var(--brand); font-style: normal; }
.sc-open-form .sp-input, .sc-open-form input, .sc-open-form select, .sc-open-form textarea {
  width: 100%; box-sizing: border-box; height: 36px; border: 1px solid #ddd; border-radius: 3px;
  padding: 0 12px; font-size: 14px; outline: none; font-family: inherit; }
.sc-open-form textarea { height: auto; padding: 8px 12px; resize: vertical; }
.sc-open-form input:focus, .sc-open-form select:focus, .sc-open-form textarea:focus { border-color: var(--brand); }
.sc-open-form button { width: 100%; margin-top: 6px; }

.sp-modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.sp-modal { background: #fff; border-radius: 6px; width: 460px; max-width: 100%;
  max-height: 90vh; display: flex; flex-direction: column; }
.sp-modal-wide { width: 720px; }
.sp-modal h3 { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.sp-modal .sp-form-row { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
.sp-modal .sp-form-row > span { width: 80px; font-size: 13px; color: #555; flex-shrink: 0; }
.sp-modal .sp-form-row .sp-input { flex: 1; }
.sp-modal-foot { padding: 14px 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 10px; }

.sp-pp-list { padding: 12px 20px; overflow-y: auto; max-height: 56vh; }
.sp-pp-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid #eee; border-radius: 4px; margin-bottom: 8px; cursor: pointer; }
.sp-pp-row.on { border-color: var(--brand); background: #fff8f5; }
.sp-pp-title { flex: 1; font-size: 13.5px; line-height: 1.5; }
.sp-pp-origin { font-size: 12px; color: #999; white-space: nowrap; }
.sp-pp-price { width: 110px !important; height: 32px; }
.sp-pp-price:disabled { background: #f7f7f7; color: #bbb; }

/* ============ Shopee Feed ============ */
.sp-modal .sp-form-row label { display:block; font-size:13px; color:#555; margin-bottom:6px; }
.sp-feed-card { border:1px solid var(--line); border-radius:6px; padding:14px 16px; background:#fff; }
.sp-feed-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.sp-feed-content { font-size:13.5px; line-height:1.7; color:var(--text-1); white-space:normal; }
.sp-feed-imgs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.sp-feed-imgs img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; background:#f5f5f5; }
.sp-feed-stats { display:flex; gap:18px; margin-top:10px; font-size:12.5px; color:var(--text-3); }
.sp-feed-stats .sp-link { margin-left:auto; }
.bc-feed { max-width:720px; margin:16px auto; display:flex; flex-direction:column; gap:14px; }
.bc-feed-card { background:#fff; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,.08); padding:16px 18px; cursor:default; }
.bc-feed-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.bc-feed-shop { font-weight:600; color:#ee4d2d; font-size:14px; }
.bc-feed-time { color:#999; font-size:12px; }
.bc-feed-content { font-size:14px; line-height:1.7; color:#333; }
.bc-feed-imgs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.bc-feed-img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; background:#f5f5f5; cursor:pointer; }
.bc-feed-foot { display:flex; gap:20px; margin-top:10px; color:#888; font-size:12.5px; align-items:center; }
.bc-feed-like { cursor:pointer; color:#999; font-size:14px; user-select:none; }
.bc-feed-like.on { color:#ee4d2d; }
.badge.orange { background:#fff3e8; color:#ee4d2d; }

/* ============ 成长等级 ============ */
.gr-hero { display:flex; justify-content:space-between; align-items:center; padding:22px 24px;
  background:linear-gradient(120deg,#fff6f1,#ffe9df); border-radius:6px; flex-wrap:wrap; gap:14px; }
.gr-badge { display:inline-block; font-size:12px; font-weight:700; padding:2px 9px; border-radius:3px;
  margin-left:8px; vertical-align:middle; letter-spacing:.3px; }
.gr-preferred { background:#ee4d2d; color:#fff; }
.gr-mall { background:#b3261e; color:#fff; }
.gr-ladder { display:flex; align-items:center; gap:6px; font-size:12.5px; }
.gr-ladder span { padding:4px 10px; border-radius:20px; background:#eee; color:#888; }
.gr-ladder span.on { background:#fff; color:#ee4d2d; border:1px solid #ee4d2d; font-weight:600; }
.gr-ladder span.on.mall { background:#b3261e; color:#fff; border-color:#b3261e; }
.gr-step { margin:14px 0; }
.gr-step-l { display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; }
.gr-ok { color:#27ae60; font-weight:600; }
.gr-todo { color:var(--text-3); }
.gr-bar { height:8px; background:#f0f0f0; border-radius:5px; overflow:hidden; }
.gr-bar i { display:block; height:100%; background:linear-gradient(90deg,#ff8a5c,#ee4d2d); border-radius:5px;
  transition:width .4s; }
.bc-badge { display:inline-block; font-size:10px; font-weight:700; color:#fff; padding:1px 5px;
  border-radius:2px; margin-right:4px; vertical-align:middle; letter-spacing:.3px; }
.bc-badge.mall, .badge.mall-badge { background:#b3261e; color:#fff; }
.bc-badge.pref { background:#ee4d2d; }

/* ============ 跨境收款（卖家钱包） ============ */
.wp-psp { display:flex; gap:14px; flex-wrap:wrap; }
.wp-psp-card { flex:1; min-width:210px; border:1px solid #eee; border-radius:6px; padding:14px 16px;
  background:#fafafa; transition:border-color .2s; }
.wp-psp-card.on { border-color:#ee4d2d; background:#fff7f4; }
.wp-psp-name { font-weight:700; font-size:13.5px; margin-bottom:6px; }
.wp-psp-fee { font-size:12.5px; color:var(--text-2); }
.wp-psp-fee b { color:#ee4d2d; }
.wp-psp-acct { font-size:12px; margin-top:4px; word-break:break-all; }
.wp-calc { font-size:13.5px; }
.wp-calc-r { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed #eee; }
.wp-calc-r span { color:var(--text-2); }
.wp-calc-r.total { border-bottom:none; font-size:15px; padding-top:10px; }
.wp-calc-r.total b { color:#ee4d2d; font-size:17px; }

/* ================= Shopee Chat 聊聊 ================= */
.ch-wrap { display:flex; height:calc(100vh - 150px); min-height:460px; border:1px solid #eee;
  border-radius:8px; overflow:hidden; background:#fff; }
.ch-list { width:280px; border-right:1px solid #eee; display:flex; flex-direction:column; flex-shrink:0; }
.ch-list-h, .ch-plist-h { padding:14px 16px; font-weight:700; font-size:14px; border-bottom:1px solid #eee;
  display:flex; justify-content:space-between; align-items:center; }
.ch-list-h span { font-weight:400; font-size:12px; color:var(--text-3); }
.ch-item { display:flex; gap:10px; padding:12px 14px; cursor:pointer; border-bottom:1px solid #f5f5f5; }
.ch-item:hover { background:#fafafa; }
.ch-item.on { background:#fff4f1; }
.ch-avatar { width:38px; height:38px; border-radius:50%; background:#ee4d2d; color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.ch-item-main { flex:1; min-width:0; }
.ch-item-top { display:flex; justify-content:space-between; align-items:center; }
.ch-item-top b { font-size:13.5px; }
.ch-item-msg { font-size:12.5px; color:var(--text-3); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; margin-top:3px; }
.ch-badge { background:#ee4d2d; color:#fff; border-radius:10px; font-size:11px; padding:1px 7px;
  min-width:18px; text-align:center; font-weight:600; }
.ch-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.ch-no-session { flex:1; display:flex; align-items:center; justify-content:center; color:var(--text-3); font-size:14px; }
.ch-head { padding:13px 18px; border-bottom:1px solid #eee; font-size:14px; display:flex;
  justify-content:space-between; align-items:center; }
.ch-auto-note { font-size:11.5px; color:var(--text-3); font-weight:400; }
.ch-msgs { flex:1; overflow-y:auto; padding:18px; background:#f7f8fa; display:flex; flex-direction:column; gap:12px; }
.ch-msg { max-width:72%; display:flex; flex-direction:column; }
.ch-msg.me { align-self:flex-end; align-items:flex-end; }
.ch-msg.other { align-self:flex-start; align-items:flex-start; }
.ch-bubble { position:relative; background:#fff; border-radius:10px; padding:9px 13px; font-size:13.5px;
  line-height:1.6; box-shadow:0 1px 2px rgba(0,0,0,.05); word-break:break-word; }
.ch-msg.me .ch-bubble { background:#ee4d2d; color:#fff; }
.ch-bubble.auto { background:#f1f8f3; border:1px solid #d6ecdd; }
.ch-auto-tag { display:inline-block; font-size:10px; background:#0f9d58; color:#fff; border-radius:3px;
  padding:0 5px; margin-right:6px; vertical-align:1px; font-weight:600; }
.ch-time { font-size:10.5px; color:#bbb; margin-left:8px; }
.ch-msg.me .ch-time { color:rgba(255,255,255,.7); }
.ch-translate { cursor:pointer; font-size:10.5px; border:1px solid currentColor; border-radius:3px;
  padding:0 4px; margin-left:6px; opacity:.55; }
.ch-translate:hover { opacity:1; }
.ch-trans { display:none; font-size:12.5px; background:#fffbe6; border:1px solid #ffe58f;
  border-radius:8px; padding:7px 11px; margin-top:4px; max-width:100%; }
.ch-trans.show { display:block; }
.ch-trans-text { color:#7a5b00; }
.ch-trans-engine { display:block; color:#b09540; font-size:10.5px; margin-top:3px; }
.ch-quick { padding:8px 14px 0; display:flex; gap:8px; flex-wrap:wrap; background:#fff; }
.ch-q { font-size:12px; background:#f5f5f5; border-radius:14px; padding:4px 12px; cursor:pointer; color:var(--text-2); }
.ch-q:hover { background:#fff0eb; color:#ee4d2d; }
.ch-input-bar { padding:12px 14px; border-top:1px solid #eee; background:#fff; }
.ch-input-bar textarea { width:100%; resize:none; font-size:13.5px; }
.ch-send-btns { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.ch-empty { text-align:center; color:var(--text-3); font-size:13px; padding:40px 20px; line-height:1.9; }
.ch-empty span { font-size:12px; }
.ch-back { cursor:pointer; color:#ee4d2d; font-weight:600; margin-right:10px; }

/* 买家端浮窗 */
.ch-fab { position:fixed; right:26px; bottom:26px; width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,#ee4d2d,#ff6542); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 18px rgba(238,77,45,.4); z-index:1500; }
.ch-badge.fab { position:absolute; top:-2px; right:-2px; border:2px solid #fff; border-radius:10px; }
.ch-panel { position:fixed; right:26px; bottom:92px; width:720px; max-width:calc(100vw - 52px);
  height:540px; max-height:calc(100vh - 130px); background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.22); z-index:1501; border:1px solid #eee; }
.ch-panel .ch-plist { width:240px; border-right:1px solid #eee; overflow-y:auto; flex-shrink:0; }
.ch-panel .ch-main { background:#fff; }

/* ===== AI 助教悬浮球 ===== */
.ai-fab { position:fixed; right:26px; bottom:26px; width:56px; height:56px; border-radius:50%;
  border:none; cursor:pointer; z-index:95; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; color:#fff; background:linear-gradient(135deg,#6e5bff,#a84dff);
  box-shadow:0 6px 18px rgba(110,91,255,.45); transition:transform .18s, box-shadow .18s; }
.ai-fab:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 10px 26px rgba(110,91,255,.5); }
.ai-fab .fab-ai { font-size:15px; font-weight:800; line-height:1; letter-spacing:.5px; }
.ai-fab .fab-tt { font-size:10px; opacity:.92; line-height:1; }
.ai-fab::after { content:attr(data-tip); position:absolute; right:66px; top:50%; transform:translateY(-50%);
  background:#2b2660; color:#fff; font-size:12px; padding:7px 12px; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .18s; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.ai-fab:hover::after { opacity:1; }

/* ===== 知识图谱 ===== */
.km-summary { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:14px; }
.km-sum-item { background:linear-gradient(135deg,#fff,#f4f1ff); border:1px solid var(--line); border-radius:12px; padding:14px 16px; text-align:center; box-shadow:0 1px 4px rgba(110,91,255,.06); }
.km-sum-num { font-size:24px; font-weight:800; color:#6e5bff; }
.km-sum-num.warn { color:#ee4d2d; }
.km-sum-lb { font-size:12px; color:var(--text-3); margin-top:4px; }
.km-note { font-size:12.5px; color:var(--text-3); margin-bottom:14px; }
.km-legend { display:flex; gap:18px; font-size:12px; color:var(--text-3); margin-bottom:14px; flex-wrap:wrap; }
.km-legend .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.km-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:1200px) { .km-grid { grid-template-columns:1fr; } .km-summary { grid-template-columns:repeat(2,1fr); } }
.km-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:0 1px 6px rgba(0,0,0,.05); transition:box-shadow .2s; }
.km-card:hover { box-shadow:0 6px 18px rgba(110,91,255,.12); }
.km-head { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.km-ring { flex:none; width:52px; height:52px; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; }
.km-ring i { position:absolute; inset:6px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; }
.km-ring span { position:relative; z-index:1; font-size:12px; font-weight:700; color:var(--text-2); }
.km-tt { flex:1; min-width:0; }
.km-name { font-size:15px; font-weight:700; color:var(--text-1); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.km-meta { font-size:12px; color:var(--text-3); margin-top:3px; }
.km-tag { font-size:11px; padding:2px 8px; border-radius:20px; background:#f0ecff; color:#6e5bff; font-weight:600; }
.km-tag.warn { background:#fdecea; color:#c0392b; }
.km-bar { height:6px; border-radius:4px; background:#f1f0fb; overflow:hidden; margin-bottom:14px; }
.km-bar i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#6e5bff,#a84dff); }
.km-nodes { display:flex; flex-wrap:wrap; gap:8px; }
.km-node { cursor:pointer; display:inline-flex; align-items:center; gap:6px; border-radius:16px; padding:6px 12px;
  font-size:12.5px; border:1px solid #e5e5e5; background:#fafafa; max-width:100%;
  transition:border-color .15s, box-shadow .15s, transform .15s; }
.km-node:hover { border-color:#c9c2ff; box-shadow:0 2px 8px rgba(110,91,255,.15); transform:translateY(-1px); }
.km-node .dot { flex:none; width:8px; height:8px; border-radius:50%; background:#d9d9d9; }
.km-node.done .dot { background:#1d8f7f; }
.km-node.wrong { border-color:#f5b5ae; background:#fff5f4; }
.km-node.wrong .dot { background:#ee4d2d; }
.km-node .kp { color:var(--text-3); font-size:11px; }
.km-node .wbadge { background:#ee4d2d; color:#fff; border-radius:8px; padding:0 6px; font-size:11px; font-weight:600; }

/* ===== 教学概览 ===== */
.ov-quick { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.ov-chip { border:1px solid #ffd6cb; background:linear-gradient(135deg,#fff,#fff6f3); color:var(--brand);
  font-size:13px; padding:8px 16px; border-radius:20px; cursor:pointer; font-weight:600;
  transition:all .15s; }
.ov-chip:hover { background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 4px 12px rgba(238,77,45,.3); transform:translateY(-1px); }
.ov-head { display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.ov-head b { font-size:15px; }
.ov-head span { font-size:12.5px; color:var(--text-3); }
.ov-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.ov-class { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  box-shadow:0 1px 6px rgba(0,0,0,.05); transition:box-shadow .2s, transform .2s; }
.ov-class:hover { box-shadow:0 6px 18px rgba(238,77,45,.12); transform:translateY(-2px); }
.oc-top { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.oc-name { font-size:14.5px; font-weight:700; color:var(--text-1); }
.oc-stats { display:flex; gap:28px; margin-bottom:12px; }
.oc-stats i { font-style:normal; display:block; font-size:11.5px; color:var(--text-3); margin-bottom:2px; }
.oc-stats b { font-size:20px; font-weight:800; color:var(--text-1); }
.oc-stats b.brand { color:var(--brand); }
.oc-stats small { font-size:11px; font-weight:400; color:var(--text-3); margin-left:2px; }
.oc-foot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:12px; color:var(--text-3); }

/* ===== 首页品牌横幅 ===== */
.hero-strip { background:linear-gradient(120deg,#ee4d2d 0%,#f9663a 55%,#ff8a4d 100%); border-radius:14px;
  color:#fff; padding:22px 28px; margin-bottom:18px; box-shadow:0 8px 24px rgba(238,77,45,.28);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.hero-strip h3 { font-size:19px; font-weight:800; letter-spacing:.5px; }
.hero-strip p { font-size:12.5px; opacity:.92; margin-top:5px; }
.hs-docs { margin-top:10px !important; font-size:12.5px !important; color:rgba(255,255,255,.85) !important; }
.hs-docs a { color:#fff; font-weight:600; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.55); padding-bottom:1px; }
.hs-docs a:hover { border-bottom-style:solid; }
.hero-strip .hs-nums { display:flex; gap:34px; flex-wrap:wrap; }
.hero-strip .hs-num { text-align:center; min-width:86px; }
.hero-strip .hs-num b { display:block; font-size:22px; font-weight:800; line-height:1.2; }
.hero-strip .hs-num span { font-size:11.5px; opacity:.85; }

/* ===== 批次 H：教学课表周视图 ===== */
.tt-board { display:grid; grid-template-columns:repeat(7,1fr) 220px; gap:8px; margin-top:12px; }
.tt-day { background:#f7f7f7; border:1px solid #eee; border-radius:8px; min-height:420px;
  display:flex; flex-direction:column; }
.tt-day-head { padding:8px 10px; font-weight:600; font-size:13px; background:#fff;
  border-bottom:1px solid #eee; border-radius:8px 8px 0 0; color:var(--text-1); }
.tt-day-head small { color:var(--text-3); font-weight:400; }
.tt-day.tt-pool { background:#f0f4fb; border-style:dashed; }
.tt-drop { flex:1; padding:8px; overflow-y:auto; }
.tt-drop.dragover { background:#fff3ef; }
.tt-card { background:#fff; border:1px solid #e5e5e5; border-left:3px solid var(--brand);
  border-radius:6px; padding:8px 10px; margin-bottom:8px; cursor:grab;
  box-shadow:0 1px 3px rgba(0,0,0,.06); }
.tt-card:hover { border-color:var(--brand); }
.tt-card.dragging { opacity:.45; cursor:grabbing; }
.tt-c-title { font-size:13px; font-weight:600; line-height:1.35; }
.tt-c-kp { font-size:11px; color:#1d6f8f; margin-top:4px; cursor:text; line-height:1.4; }
.tt-c-kp.empty { color:#aaa; }
.tt-c-meta { font-size:11px; color:var(--text-3); margin-top:2px; }
@media (max-width:1200px) { .tt-board { grid-template-columns:repeat(4,1fr); } }
@media (max-width:800px) { .tt-board { grid-template-columns:repeat(2,1fr); } }

/* ===== 批次 I：竞赛中心 / 作品集 ===== */
.cp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.cp-card { background:#fff; border:1px solid #eee; border-radius:10px; padding:16px;
  display:flex; flex-direction:column; gap:8px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.cp-card.ongoing { border-top:3px solid #ee4d2d; }
.cp-card.upcoming { border-top:3px solid #3f6fd6; }
.cp-head { display:flex; gap:6px; flex-wrap:wrap; }
.cp-title { font-size:16px; font-weight:700; }
.cp-desc { font-size:13px; color:var(--text-2); line-height:1.5; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cp-meta { font-size:12px; color:var(--text-3); }
.cp-actions { display:flex; gap:8px; margin-top:4px; }
.pf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.pf-card { background:#fff; border:1px solid #eee; border-radius:10px; overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.pf-cover { height:170px; background:#f7f7f7; display:flex; align-items:center; justify-content:center; }
.pf-cover img { width:100%; height:100%; object-fit:cover; }
.pf-noimg { color:#bbb; font-size:13px; }
.pf-body { padding:12px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.pf-type { font-size:11px; color:#1d8f7f; font-weight:600; }
.pf-title { font-size:14px; font-weight:600; line-height:1.4; }
.pf-price { color:#ee4d2d; font-weight:700; }
.pf-note { font-size:12px; color:var(--text-2); background:#fafafa; border-radius:6px; padding:6px 8px; }
.pf-foot { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:8px; }
.pf-custom { border-left:3px solid #3f6fd6; }
.pf-pick { display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow-y:auto; }
.pf-pick-item { display:flex; gap:12px; align-items:center; padding:8px; border:1px solid #eee; border-radius:8px; }
.badge.blue { background:#e8f0fe; color:#1a56db; }

/* ---------------- 数据大屏 ---------------- */
.ds-time { font-size:12px; color:var(--text-3); }
.ds-kpi { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.ds-kpi .s-sub { font-size:12px; color:var(--text-3); margin-top:4px; }
.ds-row { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-bottom:14px; }
.ds-row:nth-of-type(4) { grid-template-columns:repeat(3, 1fr); }
.ds-card { margin:0; padding:14px 16px; }
.ds-card-h { font-weight:700; font-size:14px; margin-bottom:10px; color:var(--text-1); }
.ds-card .data-table { font-size:13px; }
.ds-card .data-table th, .ds-card .data-table td { padding:7px 8px; }
.ds-empty { color:var(--text-3); text-align:center; padding:26px 0; font-size:13px; }
.ds-hb-row { display:grid; grid-template-columns:96px 1fr 86px; gap:8px; align-items:center; margin-bottom:9px; font-size:12px; }
.ds-hb-lb { color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-hb-track { background:#f3f3f3; border-radius:4px; height:14px; overflow:hidden; }
.ds-hb-bar { height:100%; background:linear-gradient(90deg,#ff7337,#ee4d2d); border-radius:4px; min-width:3px; }
.ds-hb-val { text-align:right; color:var(--text-1); font-weight:600; }
.ds-hb-val small { color:var(--text-3); font-weight:400; margin-left:2px; }
@media (max-width:1100px) {
  .ds-row, .ds-row:nth-of-type(4) { grid-template-columns:1fr; }
}

/* ===== 实操任务页 ===== */
.task-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.ts-item { background:linear-gradient(135deg,#fff,#fdf1ee); border:1px solid var(--line); border-radius:12px; padding:16px 18px; text-align:center; box-shadow:0 1px 4px rgba(238,77,45,.06); }
.ts-num { font-size:26px; font-weight:800; color:var(--brand); }
.ts-num.ok { color:var(--green); }
.ts-lb { font-size:12px; color:var(--text-3); margin-top:4px; }
.task-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:1100px) { .task-grid { grid-template-columns:1fr; } .task-summary { grid-template-columns:repeat(2,1fr); } }
.task-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:0 1px 6px rgba(0,0,0,.05); display:flex; flex-direction:column; transition:box-shadow .2s; }
.task-card:hover { box-shadow:0 6px 18px rgba(238,77,45,.12); }
.task-card.done { border-color:rgba(22,163,74,.35); background:linear-gradient(180deg,#fff,#f2fbf6); }
.task-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
.task-idx { flex:none; width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#ee4d2d,#ff7337); color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(238,77,45,.3); }
.task-tt { flex:1; min-width:0; }
.tt-name { font-size:15px; font-weight:700; color:var(--text-1); }
.tt-meta { font-size:12px; color:var(--text-3); margin-top:3px; }
.task-state { text-align:right; flex:none; }
.task-tag { display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px; font-weight:600; }
.task-tag + .task-tag { margin-left:4px; }
.task-tag.green { background:#e7f7ee; color:#16a74e; }
.task-tag.orange { background:#fff3e8; color:#ee7d2d; }
.task-tag.blue { background:#eef2ff; color:#5b6ee8; }
.task-score { font-size:22px; font-weight:800; color:var(--brand); line-height:1.2; margin-top:4px; }
.task-score span { font-size:12px; font-weight:400; color:var(--text-3); margin-left:2px; }
.task-desc { font-size:13px; color:var(--text-2); line-height:1.7; background:#faf9f7; border-radius:8px; padding:10px 12px; margin-bottom:14px; }
.task-items { display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.tk-item { display:flex; gap:10px; align-items:center; }
.tk-dot { flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; background:#fff; box-sizing:border-box; }
.tk-item.ok .tk-dot { background:var(--green); border-color:var(--green); }
.tk-main { flex:1; min-width:0; }
.tk-row { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; margin-bottom:4px; }
.tk-label { color:var(--text-2); }
.tk-item.ok .tk-label { color:var(--green); font-weight:600; }
.tk-val { color:var(--text-3); white-space:nowrap; }

/* ==================== 仿官方 Seller Centre 登录页 ==================== */
.sc-login {
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(720px 380px at 12% -8%, rgba(238,77,45,.14), transparent 60%),
    radial-gradient(680px 360px at 96% 110%, rgba(246,145,19,.16), transparent 60%),
    linear-gradient(160deg, #fdf7f4 0%, #f7f5f2 55%, #f4f1ec 100%);
  position: relative; padding: 32px 16px;
}
.sc-login-lang { position: absolute; top: 18px; right: 26px; font-size: 12.5px; color: #7b6f68; }
.sc-login-card {
  width: 400px; max-width: 94vw; background: #fff; border-radius: 10px;
  box-shadow: 0 10px 44px rgba(60,35,20,.12); padding: 34px 36px 26px;
}
.sc-login-brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.sc-login-logo { font-size: 30px; font-weight: 900; font-style: italic; color: #ee4d2d; letter-spacing: -1px; }
.sc-login-sub { font-size: 14px; color: #999; font-weight: 600; letter-spacing: .5px; }
.sc-login-card h1 { font-size: 21px; margin: 0 0 6px; color: #222; }
.sc-login-hint { font-size: 12.5px; color: #999; margin: 0 0 18px; }
.sc-login-err { background: #fdecea; color: #c0392b; border-radius: 6px; padding: 9px 12px; font-size: 13px; margin-bottom: 14px; }
.sc-login-card label { display: block; margin-bottom: 14px; }
.sc-login-card label > span { display: block; font-size: 12.5px; color: #666; margin-bottom: 6px; font-weight: 600; }
.sc-login-card input:not([type=checkbox]) {
  width: 100%; height: 42px; border: 1px solid #ddd; border-radius: 6px; padding: 0 12px;
  font-size: 14px; box-sizing: border-box; outline: none; transition: border-color .15s;
}
.sc-login-card input:focus { border-color: #ee4d2d; }
.sc-login-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: #666; }
.sc-login-row .chk { display: flex; align-items: center; gap: 5px; margin: 0; font-weight: 400; }
.sc-login-row a { color: #ee4d2d; text-decoration: none; }
.sc-login-btn {
  width: 100%; height: 44px; margin-top: 8px; border: none; border-radius: 6px; cursor: pointer;
  background: linear-gradient(135deg, #f05d40, #ee4d2d); color: #fff; font-size: 16px; font-weight: 700;
  letter-spacing: 1px; transition: filter .15s;
}
.sc-login-btn:hover { filter: brightness(.94); }
.sc-login-back {
  width: 100%; height: 36px; margin-top: 12px; background: none; border: none; cursor: pointer;
  color: #999; font-size: 12.5px;
}
.sc-login-back:hover { color: #ee4d2d; }
.sc-login-foot { margin-top: 22px; font-size: 12px; color: #b3aca6; letter-spacing: .5px; }

/* ==================== 入驻向导（分步开店申请） ==================== */
.sc-gate-wide { width: 560px; max-width: 94vw; }
.sc-gate-head { display: flex; align-items: center; gap: 14px; text-align: left; margin-bottom: 16px; }
.sc-gate-head .sc-gate-logo {
  flex: none; width: 56px; height: 56px; border-radius: 12px; background: #ee4d2d; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; font-style: italic;
}
.sc-gate-head h2 { margin: 0 0 4px; }
.sc-gate-head p { margin: 0; }
.sc-steps { display: flex; gap: 6px; margin: 16px 0 18px; }
.sc-step {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12.5px; color: #999; padding: 8px 0; border-radius: 6px; background: #f6f6f6; font-weight: 600;
}
.sc-step i {
  width: 20px; height: 20px; border-radius: 50%; background: #ddd; color: #fff; font-style: normal;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.sc-step.active { background: #fff3ee; color: #ee4d2d; }
.sc-step.active i { background: #ee4d2d; }
.sc-step-pane { text-align: left; }
.sc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.sc-form-grid label { display: block; margin-bottom: 0; }
.sc-form-grid label.full { grid-column: 1 / -1; }
.sc-form-grid label > span { display: block; font-size: 12.5px; color: #555; margin-bottom: 6px; font-weight: 600; }
.sc-form-grid label > span em { color: var(--brand); font-style: normal; }
.sc-form-grid input, .sc-form-grid select, .sc-form-grid textarea {
  width: 100%; height: 38px; border: 1px solid #ddd; border-radius: 6px; padding: 0 10px;
  font-size: 13.5px; box-sizing: border-box; outline: none;
}
.sc-form-grid textarea { height: auto; padding: 8px 10px; resize: vertical; }
.sc-form-grid input:focus, .sc-form-grid select:focus, .sc-form-grid textarea:focus { border-color: var(--brand); }
.sc-wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.sc-acc-card {
  display: flex; align-items: center; gap: 12px; background: #fafbfc; border: 1px solid #eef0f3;
  border-radius: 8px; padding: 12px 14px;
}
.sc-acc-card .sc-avatar { flex: none; width: 42px; height: 42px; font-size: 17px; }
.sc-acc-name { font-size: 15px; font-weight: 700; color: #222; }
.sc-acc-meta { font-size: 12.5px; color: #888; margin-top: 2px; }
.sc-acc-ok { margin-left: auto; font-size: 12px; color: #1d8f7f; background: #e6f7f4; border-radius: 20px; padding: 3px 10px; }
.sc-tip-line { font-size: 12.5px; color: #8a7f77; background: #fdf6f0; border-radius: 6px; padding: 9px 12px; margin-top: 12px; line-height: 1.7; }
.sc-incubation { background: linear-gradient(135deg, #fff8f2, #fffdf9); border: 1px solid #ffe3d1; border-radius: 8px; padding: 12px 14px; margin-top: 16px; }
.sc-inc-title { font-size: 12.5px; font-weight: 700; color: #c9571f; margin-bottom: 8px; }
.sc-inc-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sc-inc-steps i { color: #d9a888; font-style: normal; font-size: 12px; }
.sc-inc-step {
  font-size: 12px; color: #8a5a3b; background: #fff; border: 1px solid #f3d9c4;
  border-radius: 20px; padding: 3px 10px; white-space: nowrap;
}
.sc-inc-step.done { background: #ee4d2d; border-color: #ee4d2d; color: #fff; }

/* ==================== 工作台：待办订单网格 / 公告栏 ==================== */
.sc-todo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sc-todo-cell {
  background: #fafbfc; border: 1px solid #eef0f3; border-radius: 8px; padding: 14px 10px;
  text-align: center; cursor: pointer; transition: all .15s;
}
.sc-todo-cell:hover { border-color: #f3b7a8; background: #fff8f5; transform: translateY(-1px); }
.sc-todo-cell .tc-num { font-size: 24px; font-weight: 800; color: var(--text-2); line-height: 1.2; }
.sc-todo-cell.has .tc-num { color: #ee4d2d; }
.sc-todo-cell .tc-label { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.sc-ann { display: flex; flex-direction: column; gap: 12px; }
.sc-ann-item { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.65; }
.sc-ann-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ee4d2d; margin-top: 7px; }
.sc-ann-dot.grey { background: #d8d4cf; }
.sc-ann-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ==================== 仿 Shopee 买家登录页 ==================== */
.bc-login {
  min-height: 100%; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(700px 380px at 88% -10%, rgba(238,77,45,.15), transparent 60%),
    linear-gradient(150deg, #fdf6f2 0%, #f8f4f0 60%, #f4efe9 100%);
  padding: 32px 16px;
}
.bc-login-card {
  width: 380px; max-width: 94vw; background: #fff; border-radius: 10px;
  box-shadow: 0 10px 44px rgba(60,35,20,.12); padding: 30px 34px 24px; text-align: center;
}
.bc-login-logo {
  font-size: 34px; font-weight: 900; font-style: italic; color: #ee4d2d; letter-spacing: -1px; margin-bottom: 6px;
}
.bc-login-card h2 { font-size: 17px; font-weight: 600; color: #333; margin: 0 0 18px; }
.bc-login-err { background: #fdecea; color: #c0392b; border-radius: 6px; padding: 9px 12px; font-size: 13px; margin-bottom: 14px; text-align: left; }
.bc-login-card label { display: block; margin-bottom: 14px; text-align: left; }
.bc-login-card label > span { display: block; font-size: 12.5px; color: #666; margin-bottom: 6px; font-weight: 600; }
.bc-login-card input {
  width: 100%; height: 42px; border: 1px solid #ddd; border-radius: 6px; padding: 0 12px;
  font-size: 14px; box-sizing: border-box; outline: none; transition: border-color .15s;
}
.bc-login-card input:focus { border-color: #ee4d2d; }
.bc-login-btn {
  width: 100%; height: 44px; margin-top: 6px; border: none; border-radius: 6px; cursor: pointer;
  background: linear-gradient(135deg, #f05d40, #ee4d2d); color: #fff; font-size: 15px; font-weight: 700;
  letter-spacing: 1px; transition: filter .15s;
}
.bc-login-btn:hover { filter: brightness(.94); }
.bc-login-foot { margin-top: 16px; font-size: 12.5px; color: #888; display: flex; justify-content: center; align-items: center; gap: 10px; }
.bc-login-foot .sep { width: 1px; height: 12px; background: #ddd; }
.bc-login-foot a { color: #ee4d2d; text-decoration: none; font-weight: 600; }
.bc-login-back {
  width: 100%; height: 34px; margin-top: 14px; background: none; border: none; cursor: pointer;
  color: #999; font-size: 12.5px;
}
.bc-login-back:hover { color: #ee4d2d; }

/* ==================== 品牌 LOGO ==================== */
.login-logo { height: 40px; max-width: 110px; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 3px 8px rgba(0, 0, 0, .18)); }