xinghen.work/src/styles.css

:root { font-family: Inter,'SF Pro Display','PingFang SC','Microsoft YaHei',sans-serif; color:#18233a; background:#f5f7fb; font-synthesis:none; --blue:#55b0f7; --blue-action:#0875bd; --blue-dark:#075f9b; --blue-ink:#075078; --primary:var(--blue-action); --ink:#17213a; --muted:#78839a; --line:#e4e8f0; --paper:#fff; --button-radius:6px; --button-height:44px; --button-small-height:34px; --button-shadow:none; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 85% 6%,rgba(85,176,247,.06),transparent 24%),#f5f7fb; }
button,input,textarea,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:flex; flex-direction:column; }
.app-main { flex:1; }
.topbar { height:72px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; border-bottom:1px solid rgba(220,225,235,.8); background:rgba(248,249,252,.82); backdrop-filter:blur(14px); position:sticky; top:0; z-index:20; }
.logo-link { display:flex; }
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; user-select:none; }
.brand-mark { width:38px; height:24px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .3s cubic-bezier(0.2,0.8,0.2,1); }
.brand-mark-svg { width:100%; height:100%; overflow:visible; display:block; }
.brand:hover .brand-mark { transform:translateY(-1px) scale(1.04); }
.brand-text { display:inline-flex; align-items:baseline; gap:8px; }
.brand strong, .brand-title { font-family:"Songti SC","Noto Serif SC","Source Han Serif CN","STSong","STKaiti","PingFang SC",serif; font-size:21px; font-weight:600; letter-spacing:.2em; color:#121826; line-height:1; transition:color .2s ease; }
.brand small, .brand-sub { font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:9px; font-weight:500; letter-spacing:.28em; color:#8c97aa; line-height:1; text-transform:uppercase; }
.brand--compact .brand-mark { width:32px; height:20px; }
.brand--compact strong, .brand--compact .brand-title { font-size:18px; letter-spacing:.16em; }
.topbar nav { display:flex; height:100%; gap:34px; align-items:center; margin-left:60px; color:#9aa3b3; font-size:14px; }
.topbar nav a { color:#5b6880; font-weight:500; height:100%; display:flex; align-items:center; position:relative; }
.topbar nav a.active { color:var(--blue-action); font-weight:600; }
.topbar nav a.active:after { content:''; position:absolute; bottom:0; left:3px; right:3px; height:2px; background:var(--blue); }
.admin-nav-link { color:var(--blue-action)!important; display:inline-flex; align-items:center; gap:6px; font-weight:600!important; }
.admin-tag { background:var(--blue); color:var(--blue-ink); font-size:10px; padding:2px 6px; border-radius:4px; margin-left:4px; font-weight:500; }
.nav-muted { cursor:default; }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:13px; }
.icon-button { border:0; background:transparent; color:#8d96a7; padding:7px; display:grid; place-items:center; border-radius:6px; }
.icon-button:hover { color:#18233a; background:rgba(0,0,0,.04); }
.beta { display:flex; align-items:center; gap:6px; font-size:11px; color:#0875bd; border:1px solid #dbe4f7; background:#f0f4fd; border-radius:999px; padding:6px 10px; letter-spacing:.06em; }
.page { width:min(1400px,100%); margin:0 auto; padding:0 clamp(24px,5vw,76px) 70px; }
.hero { min-height:414px; display:flex; align-items:center; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-copy { position:relative; z-index:2; padding-top:12px; }
.eyebrow { font-size:11px!important; font-weight:600; letter-spacing:.18em; color:#0875bd!important; text-transform:uppercase; display:flex; align-items:center; gap:8px; margin:0 0 20px!important; }
.hero h1 { color:#19233a; font-size:clamp(39px,4.3vw,64px); line-height:1.18; letter-spacing:-.045em; margin:0; font-weight:300; }
.hero h1 em { font-style:normal; color:var(--blue); }
.hero-copy>p:not(.eyebrow) { color:#7b8699; font-size:15px; margin:24px 0 30px; letter-spacing:.02em; }
.primary-button,.secondary-button { border:0; border-radius:var(--button-radius); min-height:var(--button-height); padding:0 19px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:500; font-size:14px; line-height:1; transition:background-color .16s ease,border-color .16s ease,color .16s ease; }
.primary-button { background:var(--blue-action); color:#fff; box-shadow:none; }
.primary-button:hover:not(:disabled) { background:var(--blue-dark); color:#fff; }
.primary-button:active:not(:disabled) { background:#054e82; }
.primary-button:disabled,.secondary-button:disabled { opacity:.48; cursor:not-allowed; box-shadow:none; }
.secondary-button { border:1px solid #dce2ed; color:#536077; background:#fff; }
.secondary-button:hover:not(:disabled) { border-color:#b8c8d6; background:#f4f8fb; color:#35435b; }
.secondary-button:active:not(:disabled) { background:#eaf2f8; }
.small-button { min-height:var(--button-small-height); padding:0 12px; font-size:12px; }
.highlight-button { background:var(--blue-action); color:#fff; box-shadow:none; }
.highlight-button:hover:not(:disabled) { background:var(--blue-dark); color:#fff; }
.orbit { position:absolute; border:1px solid rgba(72,91,125,.18); border-color:rgba(72,91,125,.22) transparent transparent transparent; border-radius:50%; transform:rotate(-12deg); }
.orbit-one { width:570px; height:280px; right:1%; top:99px; }
.orbit-two { width:440px; height:210px; right:6%; top:135px; border-color:rgba(85,176,247,.14) transparent transparent transparent; }
.star-dot { position:absolute; border-radius:50%; width:8px; height:8px; background:#c4a05b; right:8.4%; top:192px; box-shadow:-380px 50px 0 -2px #55b0f7; }
.hero-note { position:absolute; right:4%; top:165px; width:340px; z-index:2; }
.hero-note span { display:block; letter-spacing:.36em; color:#aab1bf; font-size:10px; margin-bottom:18px; }
.hero-note p { margin:0; color:#556176; font-weight:300; font-size:17px; line-height:1.8; max-width:260px; }
.content-section { padding-top:43px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:23px; }
.section-kicker { color:#a0aabc; letter-spacing:.22em; font-size:9px; font-weight:600; }
.section-heading h2 { margin:6px 0 0; font-size:24px; font-weight:500; }
.metrics { display:flex; gap:20px; color:#8b96aa; font-size:12px; }
.metrics span { display:flex; align-items:center; gap:7px; }
.course-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.course-card { min-height:158px; border:1px solid #e5e9f1; background:rgba(255,255,255,.82); border-radius:12px; display:flex; padding:22px; position:relative; transition:.2s; overflow:hidden; }
.course-card:hover { border-color:#cbd7ee; box-shadow:0 12px 40px rgba(24,48,91,.07); transform:translateY(-2px); }
.course-number { width:70px; min-width:70px; flex-shrink:0; height:100%; min-height:110px; display:grid; place-items:center; border-radius:8px; color:#0875bd; font-size:18px; font-weight:600; background:linear-gradient(145deg,#eaf7ff,#f7f9fd); margin-right:20px; position:relative; overflow:hidden; }
.course-number:after { content:''; position:absolute; width:80px; height:36px; border:1px solid rgba(44,95,200,.2); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-15deg); pointer-events:none; }
.tone-0 { color:#0875bd; background:linear-gradient(145deg,#eaf7ff,#f7f9fd); }
.tone-1 { color:#6885a9; background:#f1f4f7; }
.tone-1:after { border-color:rgba(104,133,169,.22); }
.tone-2 { color:#b09052; background:#f8f5ed; }
.tone-2:after { border-color:rgba(176,144,82,.25); }
.course-card-main { flex:1; min-width:0; padding-top:1px; padding-right:28px; }
.course-card h3 { margin:11px 0 6px; font-size:17px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.course-card-main>p { font-size:12px; color:#8c96a8; margin:0 0 17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.course-meta { display:flex; gap:8px; flex-wrap:wrap; }
.course-meta span { font-size:10px; color:#7d899c; background:#f4f6f9; padding:5px 8px; border-radius:4px; }
.card-arrow { position:absolute; right:20px; top:24px; color:#b6bfce; }

/* 状态徽章体系 */
.status { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; letter-spacing:.02em; padding:3px 9px; border-radius:20px; }
.status i { width:6px; height:6px; border-radius:50%; }
.status--draft { color:#627289; background:#f1f4f8; }
.status--draft i { background:#8e9cb0; }
.status--waiting_production { color:#b45309; background:#fef3c7; }
.status--waiting_production i { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.2); }
.status--in_production { color:#0875bd; background:#d3edff; }
.status--in_production i { background:#1684ce; box-shadow:0 0 0 3px rgba(85,176,247,.2); }
.status--completed { color:#15803d; background:#dcfce7; }
.status--completed i { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.2); }
.status--rejected { color:#b91c1c; background:#fee2e2; }
.status--rejected i { background:#ef4444; }

.empty-state { background:rgba(255,255,255,.58); border:1px dashed #d9dfe9; min-height:260px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; }
.empty-state h3 { margin:13px 0 5px; font-size:17px; font-weight:500; }
.empty-state p { color:#939cad; font-size:13px; margin:0 0 15px; }
.empty-state a:not([class*="button"]) { color:var(--blue); font-size:13px; display:flex; align-items:center; gap:5px; }
.empty-state .primary-button { color:#fff; }
.compact-empty { min-height:160px; padding:20px; }
.empty-orbit { width:58px; height:33px; border:1px solid #aab4c4; border-color:#aab4c4 transparent transparent transparent; border-radius:50%; position:relative; transform:rotate(-9deg); }
.empty-orbit i { position:absolute; width:6px; height:6px; background:#c4a05b; border-radius:50%; top:8px; left:-1px; }
.skeleton-card { height:158px; border-radius:12px; background:linear-gradient(90deg,#eceff4,#f7f8fa,#eceff4); background-size:200% 100%; animation:shimmer 1.3s infinite; }
.form-page,.workspace-page { padding-top:32px; }
.back-link { color:#8c96a7; display:inline-flex; align-items:center; gap:7px; font-size:12px; margin-bottom:35px; }
.back-link:hover { color:var(--blue); }
.form-layout { display:grid; grid-template-columns:minmax(260px,360px) minmax(500px,700px); gap:clamp(40px,8vw,115px); align-items:start; justify-content:center; }
.form-layout aside { padding-top:24px; }
.step-number { color:#c2cada; font-size:11px; letter-spacing:.18em; border-bottom:1px solid #bdc7d9; padding-bottom:6px; }
.form-layout aside .eyebrow { margin-top:44px!important; }
.form-layout aside h1 { font-size:36px; font-weight:300; line-height:1.45; margin:0; letter-spacing:-.035em; }
.form-layout aside>p:last-child { color:#8b96a9; font-size:13px; line-height:1.8; margin-top:25px; max-width:280px; }
.paper-form { background:#fff; padding:38px 42px; border:1px solid #e5e9f0; border-radius:13px; box-shadow:0 20px 60px rgba(40,57,90,.06); }
.form-title { padding-bottom:25px; border-bottom:1px solid #edf0f4; margin-bottom:27px; }
.form-title span { font-size:9px; color:#a3adbd; letter-spacing:.2em; }
.form-title h2 { font-size:21px; margin:7px 0 0; font-weight:500; }
.form-title h3 { font-size:19px; margin:6px 0 0; font-weight:500; }
.form-title h4 { font-size:16px; margin:4px 0 0; font-weight:500; }
.paper-form label { display:flex; flex-direction:column; gap:9px; font-size:12px; color:#59657b; margin:0 0 22px; }
.paper-form label span { display:inline-flex; align-items:center; gap:3px; }
.paper-form label b { color:#d86f67; font-weight:600; }
.paper-form input,.paper-form select,.paper-form textarea { border:1px solid #dfe4ec; border-radius:7px; color:#253149; background:#fbfcfe; padding:12px 13px; outline:none; width:100%; transition:.2s; }
.paper-form textarea { resize:vertical; line-height:1.6; }
.paper-form input:focus,.paper-form select:focus,.paper-form textarea:focus { border-color:#8dcfff; box-shadow:0 0 0 3px rgba(85,176,247,.08); background:#fff; }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.form-footer { border-top:1px solid #edf0f4; padding-top:22px; display:flex; justify-content:space-between; align-items:center; }
.form-footer>span { font-size:11px; color:#a1aaba; }
.form-error { color:#bc4e47; background:#fff4f3; padding:9px 12px; border-radius:6px; font-size:12px; }
.workspace-head { display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid var(--line); padding-bottom:28px; }
.workspace-head .back-link { margin-bottom:22px; }
.title-row { display:flex; align-items:center; gap:15px; flex-wrap:wrap; }
.title-row h1 { margin:0; font-size:27px; font-weight:500; }
.title-row h2 { margin:0; font-size:23px; font-weight:500; }
.edit-course-info-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff; color:#667085; border-radius:7px; padding:7px 10px; font-size:12px; cursor:pointer; transition:.2s; }
.edit-course-info-btn:hover { color:var(--primary); border-color:var(--primary); background:#f8faff; }
.workspace-head>div>p { color:#929cad; font-size:12px; margin:8px 0 0; }

.modal-dialog.edit-course-modal {
  width: min(620px, 95vw);
  max-height: 90vh;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.edit-course-modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
}
.edit-course-modal-body .form-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
}
.edit-course-modal-body .form-label.required > span::after {
  content: " *";
  color: #ef4444;
}
.edit-course-modal-body input,
.edit-course-modal-body select,
.edit-course-modal-body textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 14px;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  transition: all .15s ease;
}
.edit-course-modal-body select {
  min-height: 42px;
  cursor: pointer;
}
.edit-course-modal-body textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.55;
}
.edit-course-modal-body input:focus,
.edit-course-modal-body select:focus,
.edit-course-modal-body textarea:focus {
  outline: none;
  border-color: #55b0f7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(85, 176, 247, .12);
}
.edit-course-field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.edit-course-modal-body .field-count {
  color: #98a2b3;
  font-size: 11px;
  font-weight: 400;
}
@media (max-width: 540px) {
  .edit-course-modal-body { padding: 18px; }
  .modal-dialog.edit-course-modal .modal-header,
  .modal-dialog.edit-course-modal .modal-footer { padding-left: 18px; padding-right: 18px; }
}
.waiting-edit-notice { margin:32px 0 18px; padding:14px 16px; border:1px solid #b8e2ff; background:#f1faff; border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:#315b91; font-size:13px; }
.waiting-edit-notice>div { display:flex; align-items:center; gap:9px; }
.waiting-edit-notice .secondary-button { flex-shrink:0; }
.cancel-waiting-button { border:0; background:transparent; color:#98a2b3; padding:8px 10px; font-size:12px; cursor:pointer; }
.cancel-waiting-button:hover:not(:disabled) { color:#b42318; text-decoration:underline; }
.cancel-waiting-button:disabled { cursor:not-allowed; opacity:.6; }
@media (max-width: 640px) { .waiting-edit-notice { align-items:flex-start; flex-direction:column; } }
.success-panel { margin:55px auto 0; max-width:720px; text-align:center; background:#fff; border:1px solid #e4e9f1; border-radius:14px; padding:50px 55px; box-shadow:0 22px 70px rgba(35,53,88,.06); }
.success-panel .eyebrow { justify-content:center; margin-top:18px!important; margin-bottom:11px!important; }
.success-panel h2 { font-size:28px; font-weight:400; margin:0 0 13px; }
.success-panel>p:not(.eyebrow) { color:#8a95a7; font-size:13px; line-height:1.8; margin:0 auto; max-width:510px; }
.completed-panel { border-color:#c8e6c9; background:linear-gradient(180deg,#fff 60%,#f5fbf7); }
.producing-panel { border-color:#a7dcff; background:linear-gradient(180deg,#fff 60%,#f1faff); }
.producing-orbit-icon { color:#55b0f7; margin-bottom:12px; }
.success-badge-icon { color:#2e7d32; margin-bottom:12px; }
.production-notes-box { background:#f4f9f4; border:1px solid #d4ecd7; border-radius:10px; padding:18px 22px; margin:24px 0; text-align:left; }
.production-notes-box strong { font-size:13px; color:#276749; display:block; margin-bottom:8px; }
.production-notes-box p { margin:0; font-size:13px; color:#2d3748; line-height:1.7; white-space:pre-line; }
.deliverables-box { margin:24px 0; border:1px solid #e2e8f0; border-radius:10px; padding:20px; background:#fff; text-align:left; }
.deliverables-box .box-header { display:flex; align-items:center; gap:8px; margin-bottom:15px; color:#0875bd; }
.deliverables-box .box-header h4 { margin:0; font-size:15px; font-weight:600; }
.deliverable-list { display:flex; flex-direction:column; gap:10px; }
.deliverable-row { display:flex; align-items:center; gap:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:12px 16px; }
.deliv-info { flex:1; min-width:0; }
.deliv-info strong { display:block; font-size:13px; color:#2d3748; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deliv-info span { font-size:11px; color:#718096; }
.receipt { display:grid; grid-template-columns:1fr 1fr 1fr; background:#f7f9fc; border:1px solid #edf0f5; border-radius:9px; margin:30px 0 25px; text-align:left; }
.receipt span { display:flex; flex-direction:column; gap:7px; padding:17px; min-width:0; border-right:1px solid #e6eaf1; }
.receipt span:last-child { border:0; }
.receipt small { color:#9ca6b5; font-size:9px; }
.receipt strong { color:#536076; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.center-loading { min-height:60vh; display:grid; place-items:center; color:#8793a8; }
.spin { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes shimmer { to { background-position:-200% 0; } }

.user-link { display:flex; align-items:center; gap:7px; color:#66738a; font-size:12px; padding:7px 10px; border-radius:7px; }
.auth-page { min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; }
.auth-brand { padding:64px clamp(40px,8vw,120px); display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(circle at 20% 70%,rgba(85,176,247,.12),transparent 38%),#eef3fc; }
.auth-brand h1 { font-size:clamp(40px,5vw,67px); font-weight:300; line-height:1.2; }
.auth-brand h1 em { font-style:normal; color:var(--blue); }
.auth-card { align-self:center; width:min(430px,calc(100% - 48px)); margin:auto; background:#fff; border:1px solid var(--line); border-radius:14px; padding:42px; }
.auth-card label,.instructor-form label { display:flex; flex-direction:column; gap:8px; font-size:12px; color:#59657b; margin:18px 0; }
.input-with-icon { position:relative; }
.input-with-icon svg { position:absolute; left:13px; top:13px; width:17px; color:#a1abbc; }
.auth-card input,.instructor-form input,.instructor-form textarea { width:100%; border:1px solid #dfe4ec; border-radius:7px; padding:12px 13px; background:#fbfcfe; }
.input-with-icon input { padding-left:41px; }
.auth-switch { display:block; margin:18px auto 0; border:0; background:transparent; color:var(--blue); }
.profile-page { max-width:1180px; padding-top:34px; }
.profile-settings { display:grid; grid-template-columns:270px minmax(0,1fr); gap:24px; align-items:start; margin-top:20px; }
.profile-sidebar { position:sticky; top:96px; overflow:hidden; border:1px solid #e1e6ef; border-radius:14px; background:rgba(255,255,255,.78); box-shadow:0 14px 40px rgba(35,50,80,.05); backdrop-filter:blur(14px); }
.profile-sidebar-heading { display:flex; align-items:center; gap:12px; padding:20px; border-bottom:1px solid #e8ecf2; }
.profile-sidebar-heading>div:last-child { min-width:0; display:flex; flex-direction:column; gap:4px; }
.profile-sidebar-heading strong { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.profile-sidebar-heading span { color:#929baa; font-size:11px; }
.profile-avatar { width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:10px; color:#55b0f7; background:#eaf7ff; }
.profile-sidebar nav { display:flex; flex-direction:column; gap:4px; padding:8px; }
.profile-sidebar nav button { width:100%; display:grid; grid-template-columns:20px minmax(0,1fr) 15px; gap:11px; align-items:center; padding:12px; border:0; border-radius:9px; color:#69758a; background:transparent; text-align:left; }
.profile-sidebar nav button>span { display:flex; flex-direction:column; gap:3px; }
.profile-sidebar nav button strong { color:#354157; font-size:13px; font-weight:600; }
.profile-sidebar nav button small { color:#9aa3b2; font-size:10px; }
.profile-sidebar nav button>svg:last-child { opacity:.55; }
.profile-sidebar nav button:hover { background:#f3f6fb; }
.profile-sidebar nav button.active { color:#55b0f7; background:#eaf7ff; box-shadow:inset 0 0 0 1px rgba(85,176,247,.08); }
.profile-sidebar nav button.active strong { color:#184ebc; }
.profile-content { min-width:0; }
.profile-panel { min-height:560px; }
.profile-panel .form-title p { margin:7px 0 0; color:#929bad; font-size:12px; }
.profile-field-item { display:flex; flex-direction:column; gap:9px; margin:0 0 22px; }
.profile-field-label { font-size:12px; color:#59657b; font-weight:500; }
.profile-org-list { display:flex; flex-direction:column; gap:10px; }
.profile-org-card { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#fbfcfe; border:1px solid #dfe4ec; border-radius:9px; transition:border-color .2s; }
.profile-org-main { display:flex; align-items:center; gap:12px; }
.profile-org-icon-box { width:32px; height:32px; border-radius:8px; background:#eaf7ff; color:#0284c7; display:grid; place-items:center; flex-shrink:0; }
.profile-org-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.profile-org-name { font-size:14px; font-weight:600; color:#1e293b; }
.profile-org-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:500; }
.profile-org-badge.badge-manager { background:#e0f2fe; color:#0369a1; border:1px solid #bae6fd; }
.profile-org-badge.badge-member { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }
.profile-org-badge.badge-inactive { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.profile-org-action { font-size:12px; color:#0284c7; text-decoration:none; font-weight:500; padding:4px 10px; border-radius:6px; background:#fff; border:1px solid #bae6fd; transition:all .2s; }
.profile-org-action:hover { background:#f0f9ff; border-color:#7dd3fc; }
.profile-org-empty-card { display:flex; align-items:center; gap:10px; padding:12px 16px; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:9px; color:#94a3b8; font-size:13px; }
.points-form-title { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.points-form-title h2 { margin:0; }
.points-heading-wrap { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.points-org-pill { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:6px; background:#eaf7ff; border:1px solid #a7dcff; color:#0875bd; font-size:11px; font-weight:500; line-height:1.2; }
.profile-security { max-width:650px; }
.points-wallet { display:flex; align-items:center; gap:16px; margin:25px 0 31px; padding:22px 24px; border:1px solid #f0dfcc; border-radius:12px; background:linear-gradient(135deg,#fff8ef,#fffdf9); }
.points-wallet-icon { width:48px; height:48px; display:grid; place-items:center; flex:none; border-radius:13px; color:#c76520; background:#ffead4; }
.points-wallet>div:last-child { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.points-wallet span { width:100%; color:#8d755f; font-size:11px; }
.points-wallet strong { color:#b95519; font-size:30px; line-height:1; }
.points-wallet small { color:#a97c5c; font-size:12px; }
.points-history-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid #e9edf3; }
.points-history-heading h3 { margin:0; font-size:14px; }
.points-history-heading span { color:#929baa; font-size:11px; }
.points-transaction-list { display:flex; flex-direction:column; }
.points-transaction { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:13px; align-items:center; padding:16px 4px; border-bottom:1px solid #edf0f4; transition:.2s; }
.points-transaction:hover { padding-left:9px; padding-right:9px; background:#f9fafc; }
.transaction-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:#ba5e24; background:#fff0e4; }
.transaction-main,.transaction-value { display:flex; flex-direction:column; gap:5px; }
.transaction-main { min-width:0; }
.transaction-main strong { overflow:hidden; color:#303b4e; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.transaction-main span,.transaction-value time { color:#9aa3b1; font-size:10px; }
.transaction-value { align-items:flex-end; text-align:right; }
.transaction-value strong { color:#d2542e; font-size:14px; }
.points-empty { min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:#a0a9b7; font-size:12px; text-align:center; }
.points-empty strong { color:#69758a; font-size:13px; }
.points-empty span { color:#a0a9b7; font-size:11px; }
@media (max-width:760px) {
  .profile-page { padding-top:22px; }
  .profile-settings { grid-template-columns:1fr; }
  .profile-sidebar { position:static; }
  .profile-sidebar-heading { display:none; }
  .profile-sidebar nav { flex-direction:row; overflow-x:auto; }
  .profile-sidebar nav button { min-width:max-content; grid-template-columns:18px auto; padding:10px 12px; }
  .profile-sidebar nav button small,.profile-sidebar nav button>svg:last-child { display:none; }
  .profile-panel { min-height:0; }
  .points-transaction { grid-template-columns:36px minmax(0,1fr); }
  .transaction-value { grid-column:2; align-items:flex-start; flex-direction:row; justify-content:space-between; }
}
.notice { padding:12px 16px; border-radius:8px; margin:14px 0; font-size:13px; }
.notice-error { color:#ad504a; background:#fff1f0; border:1px solid #f3d9d7; }
.notice-success { color:#2e7d32; background:#e8f5e9; border:1px solid #c8e6c9; }
.asset-layout { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:22px; margin:31px auto 0; max-width:1160px; }
.upload-panel { background:#fff; border:1px solid #e5e9f0; border-radius:12px; padding:32px 35px; }
.instructor-panel { background:#fff; border:1px solid #e5e9f0; border-radius:12px; padding:28px; align-self:start; }
.panel-heading { display:flex; gap:22px; margin-bottom:27px; }
.panel-heading .step-number { height:25px; }
.panel-heading .eyebrow { margin-bottom:9px!important; }
.panel-heading h2 { margin:0; font-size:22px; font-weight:500; }
.panel-heading>div>p:last-child { color:#8e98aa; font-size:12px; margin:8px 0 0; }
.drop-zone { min-height:255px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px dashed #cbd5e5; border-radius:10px; background:#fafcff; cursor:pointer; transition:.2s; }
.drop-zone:hover,.drop-zone.dragging { border-color:#8dcfff; background:#f5f8ff; }
.compact { min-height:140px; }
.drop-zone h3 { font-size:15px; font-weight:500; margin:3px 0 6px; }
.drop-zone small { font-size:10px; color:#adb5c3; }
.asset-list { display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.asset-row { display:flex; align-items:center; gap:12px; border:1px solid #e3e8f0; border-radius:8px; padding:12px; background:#fafbfc; }
.asset-row div { display:flex; flex-direction:column; min-width:0; }
.asset-row span { font-size:10px; color:#9aa5b7; }
.asset-row button,.instructor-card>button { margin-left:auto; border:0; background:transparent; color:#a4adbb; cursor:pointer; }
.asset-row button:hover,.instructor-card>button:hover { color:#e53e3e; }
.aside-title { display:flex; justify-content:space-between; align-items:center; }
.aside-title button { height:34px; border:1px solid #dce3ed; background:#fff; border-radius:6px; display:flex; align-items:center; gap:6px; padding:0 12px; font-size:12px; }
.instructor-form { padding:18px; background:#f8fafd; border-radius:9px; margin-top:14px; border:1px solid #e2e8f0; }
.instructor-list { margin-top:14px; }
.instructor-card { display:flex; gap:11px; padding:13px 0; border-bottom:1px solid #edf0f4; align-items:start; }
.instructor-card img,.avatar,.avatar-placeholder { width:54px; height:65px; object-fit:cover; border-radius:7px; background:#e9effa; display:grid; place-items:center; flex:none; font-weight:600; color:#4a5568; }
.instructor-photo-stack,.admin-instructor-photos { display:flex; flex-wrap:wrap; gap:5px; flex:none; }
.instructor-photo-stack { width:113px; }
.instructor-photo-stack img { margin:0; }
.admin-instructor-photos { max-width:117px; }
.instructor-card>div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.instructor-card small,.instructor-card p,.empty-tip,.submit-box p { font-size:11px; color:#8d98aa; }
.instructor-card p { margin:3px 0; line-height:1.5; color:#4a5568; }

/* 数字讲师卡片升级样式 */
.instructor-photo-thumb-btn {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 7px;
  overflow: hidden;
  line-height: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.instructor-photo-thumb-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}
.instructor-photo-thumb-btn .photo-zoom-hint {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(2px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.15s ease;
  pointer-events: none;
}
.instructor-photo-thumb-btn:hover .photo-zoom-hint {
  opacity: 1;
  transform: scale(1);
}

.instructor-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
  justify-content: center;
}
.instructor-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.instructor-name {
  font-size: 15px;
  font-weight: 600;
  color: #172033;
}

.instructor-voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  border: 1px solid #d0e2ff;
  background: #f0f6ff;
  color: #0066cc;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.instructor-voice-btn:hover {
  background: #e0edff;
  border-color: #b3d1ff;
  color: #0052a3;
  transform: translateY(-1px);
}
.instructor-voice-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.instructor-voice-btn.playing {
  background: #0066cc;
  border-color: #0066cc;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
  animation: pulse-voice 1.8s infinite;
}
.voice-icon-active {
  animation: bounce-voice 1s infinite alternate ease-in-out;
}
@keyframes bounce-voice {
  0% { transform: scale(0.92); }
  100% { transform: scale(1.12); }
}
@keyframes pulse-voice {
  0% { box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(0, 102, 204, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 102, 204, 0); }
}
.voice-btn-text {
  font-size: 11px;
  line-height: 1;
}

.instructor-note {
  margin: 3px 0 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
  word-break: break-word;
  white-space: pre-wrap;
}

.submit-box { border-top:1px solid #edf0f4; margin-top:20px; padding-top:18px; }

.production-progress-card { margin: 18px 0; }
.points-balance-badge { padding:6px 10px; border-radius:999px; background:#fff0e7; color:#c7541a; font-size:12px; font-weight:700; }
.course-workspace-tabs { display:flex; gap:6px; margin:20px 0 4px; padding:5px; width:max-content; max-width:100%; border:1px solid #e4e9f1; border-radius:10px; background:#f6f8fb; }
.course-workspace-tabs button { display:flex; align-items:center; gap:7px; padding:9px 18px; border:0; border-radius:7px; background:transparent; color:#697386; font-size:13px; font-weight:600; cursor:pointer; }
.course-workspace-tabs button.active { background:#fff; color:#172033; box-shadow:0 2px 8px rgba(28,44,76,.09); }
.course-workspace-tabs button span { min-width:20px; padding:1px 6px; border-radius:999px; background:#e8edf5; color:#667085; font-size:10px; }
.course-workspace-tabs button.active span { background:#fff0e7; color:#c7541a; }
.course-progress-tab-panel { max-width:920px; }
.course-progress-tab-panel .production-progress-card { margin-top:16px; }
.progress-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.points-summary { text-align:right; display:flex; flex-direction:column; gap:3px; }
.points-summary strong { color:#e06b2d; font-size:24px; }
.points-summary span,.points-summary small,.points-rule { color:#788397; font-size:12px; }
.progress-title-row { display:flex; align-items:center; gap:10px; }
.progress-title-row h3 { margin:4px 0 0; }
.points-charged-label { color:#16845b !important; font-weight:700; }
.points-rule { margin:10px 0 16px; }
.progress-timeline { display:flex; flex-direction:column; gap:0; }
.progress-event { display:grid; grid-template-columns:18px 1fr; gap:10px; padding:10px 0; border-top:1px solid #edf0f4; }
.progress-dot { width:9px; height:9px; margin-top:5px; border-radius:50%; background:#e06b2d; box-shadow:0 0 0 4px #fff0e7; }
.progress-event-title { display:flex; justify-content:space-between; gap:16px; }
.progress-event-title time { color:#9aa3b2; font-size:11px; white-space:nowrap; }
.progress-event p { margin:4px 0 0; color:#667085; font-size:12px; }
.admin-points-panel { display:flex; justify-content:space-between; align-items:end; gap:28px; margin:18px 0; }
.admin-points-form { display:grid; grid-template-columns:140px minmax(240px,1fr) auto; align-items:end; gap:12px; flex:1; max-width:720px; }
.admin-points-form label { font-size:12px; }
.admin-progress-card { margin-bottom:18px; }
@media (max-width: 760px) { .progress-card-head,.admin-points-panel { flex-direction:column; } .points-summary { text-align:left; } .admin-points-form { grid-template-columns:1fr; width:100%; } }
.selected-stack { margin-top:12px; }
.selected-file { display:flex; align-items:center; border:1px solid #dfe6f1; background:#f9fbff; border-radius:9px; padding:12px 14px; margin-top:8px; gap:10px; }
.selected-file div { display:flex; flex-direction:column; min-width:0; }
.selected-file strong { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.selected-file span { font-size:10px; color:#97a2b4; }
.selected-file button { margin-left:auto; border:0; background:transparent; color:#9ca6b6; cursor:pointer; }
.full-button { width:100%; margin-top:14px; }

/* ==================== ADMIN 管理端专属现代设计系统 ==================== */

.admin-shell { min-height:100vh; background:#f4f6fa; }
.admin-topbar { height:70px; padding:0 clamp(20px,4vw,60px); display:flex; align-items:center; border-bottom:1px solid #dde3ed; background:#ffffff; box-shadow:0 1px 4px rgba(0,0,0,.03); position:sticky; top:0; z-index:20; }
.admin-brand-wrap { display:flex; align-items:center; gap:14px; }
.admin-badge { display:inline-flex; align-items:center; gap:5px; background:var(--blue); color:var(--blue-ink); font-size:11px; font-weight:600; padding:4px 9px; border-radius:6px; letter-spacing:.05em; }
.admin-nav { display:flex; height:100%; gap:26px; align-items:center; margin-left:45px; }
.admin-nav a { color:#64748b; font-size:14px; font-weight:500; height:100%; display:flex; align-items:center; gap:7px; position:relative; }
.admin-nav a:hover { color:#1e293b; }
.admin-nav a.active { color:var(--blue-action); font-weight:600; }
.admin-nav a.active:after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--blue); }
.admin-top-actions { margin-left:auto; display:flex; align-items:center; gap:16px; }
.client-switch-button { min-height:var(--button-small-height); display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#536077; background:#fff; border:1px solid #dce2ed; padding:0 12px; border-radius:var(--button-radius); font-weight:500; transition:.2s ease; }
.client-switch-button:hover { background:#e2e8f0; color:#0f172a; }
.admin-user-info { display:flex; flex-direction:column; text-align:right; font-size:12px; }
.admin-user-info strong { color:#1e293b; }
.admin-user-info small { color:#94a3b8; font-size:10px; }
.admin-page { padding-top:24px; padding-bottom:60px; }
.admin-header-row { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; }
.admin-header-row h2 { margin:5px 0 0; font-size:24px; font-weight:700; color:#0f172a; }
.admin-subtitle { color:#64748b; font-size:13px; margin:4px 0 0; }

/* 导航面包屑 */
.admin-breadcrumb-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:13px; }
.admin-breadcrumb-bar .back-link { display:inline-flex; align-items:center; gap:6px; color:#475569; font-weight:500; text-decoration:none; padding:6px 12px; border-radius:8px; background:#fff; border:1px solid #e2e8f0; transition:.15s; }
.admin-breadcrumb-bar .back-link:hover { color:var(--blue); border-color:#cbd5e1; transform:translateX(-2px); }
.breadcrumb-id { color:#94a3b8; font-size:12px; font-family:ui-monospace, monospace; }

/* 统计卡片网格 */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:28px; }
.stat-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:20px; display:flex; align-items:center; gap:16px; box-shadow:0 2px 6px rgba(0,0,0,.02); transition:.2s ease; }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.04); }
.stat-icon { width:48px; height:48px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; }
.tone-blue { background:#eaf7ff; color:#1684ce; }
.tone-slate { background:#f1f5f9; color:#475569; }
.tone-gold { background:#fef3c7; color:#d97706; }
.tone-primary { background:#eaf7ff; color:var(--blue); }
.tone-green { background:#dcfce7; color:#16a34a; }
.stat-content { display:flex; flex-direction:column; }
.stat-content small { font-size:12px; color:#64748b; margin-bottom:4px; }
.stat-content strong { font-size:24px; font-weight:600; color:#0f172a; line-height:1; }

.admin-section-block { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:24px; margin-bottom:28px; }
.text-link { color:var(--blue-action); font-size:13px; display:inline-flex; align-items:center; gap:5px; }

/* 过滤与搜索条 */
.admin-filter-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.filter-tabs { display:flex; background:#e2e8f0; padding:3px; border-radius:8px; gap:3px; }
.tab-item { border:0; background:transparent; color:#64748b; font-size:13px; font-weight:500; padding:6px 14px; border-radius:6px; transition:.15s; cursor:pointer; }
.tab-item.active { background:#fff; color:#0f172a; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.search-form { display:flex; gap:8px; width:100%; max-width:380px; }
.search-form .input-with-icon { flex:1; }
.search-form input { border:1px solid #cbd5e1; border-radius:8px; padding:9px 12px 9px 36px; font-size:13px; background:#fff; outline:none; width:100%; box-sizing:border-box; }
.search-form input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(85,176,247,.1); }
.user-stat-summary { color:#64748b; font-size:13px; }
.status-filter-select { border:1px solid #cbd5e1; border-radius:8px; padding:9px 12px; font-size:13px; background:#fff; color:#334155; outline:none; }
.status-filter-select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(85,176,247,.1); }
.lead-message { max-width:340px; font-size:12px; line-height:1.7; color:#64748b; white-space:pre-wrap; word-break:break-word; }

/* 管理端表格 */
.admin-table-wrapper { width:100%; overflow-x:auto; background:#fff; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.02); }
.admin-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.admin-table th { background:#f8fafc; color:#475569; font-weight:600; font-size:12px; padding:15px 18px; border-bottom:1px solid #e2e8f0; white-space:nowrap; letter-spacing:0.02em; }
.admin-table td { padding:16px 18px; border-bottom:1px solid #f1f5f9; vertical-align:middle; color:#1e293b; }
.admin-table tr:last-child td { border-bottom:0; }
.admin-table tr:hover td { background:#f8fbff; }

/* 列表项元素 */
.course-table-name { display:block; font-size:14px; font-weight:600; color:#0f172a; margin-bottom:4px; line-height:1.4; }
.course-table-desc { display:block; color:#64748b; font-size:12px; line-height:1.4; max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:4px; }
.table-episodes-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:#475569; background:#f1f5f9; padding:2px 8px; border-radius:4px; margin-top:2px; }
.category-pill { display:inline-block; font-size:12px; font-weight:500; color:#075f9b; background:#eaf7ff; padding:3px 8px; border-radius:6px; border:1px solid #d3edff; }

/* 列表表格中的醒目用户信息单元格 */
.user-highlight-cell { display:flex; align-items:flex-start; gap:10px; }
.user-avatar-mini { width:32px; height:32px; border-radius:50%; background:#eaf7ff; color:var(--blue); border:1px solid #a7dcff; font-size:13px; font-weight:700; display:grid; place-items:center; flex-shrink:0; margin-top:2px; }
.user-info-stack { display:flex; flex-direction:column; gap:2px; min-width:0; }
.user-contact-name { font-size:13px; font-weight:700; color:#0f172a; }
.user-org-text { font-size:11px; color:#475569; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.user-phone-text { font-size:12px; font-weight:600; color:#075f9b; display:inline-flex; align-items:center; gap:4px; }

.badge-group { display:flex; flex-wrap:wrap; gap:6px; }
.badge-count { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:#475569; background:#f1f5f9; padding:3px 7px; border-radius:4px; }
.deliverable-badge { background:#e8f5e9; color:#16a34a; font-weight:500; }
.role-tag { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; }
.role-admin { background:#fee2e2; color:#991b1b; }
.role-user { background:#f1f5f9; color:#475569; }
.action-button-group { display:flex; justify-content:flex-end; gap:8px; }

/* ==================== 课程详情工作台 Hero 与用户信息横幅 ==================== */

.admin-hero-card { background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; padding:24px 28px; margin-bottom:24px; box-shadow:0 4px 20px rgba(0,0,0,.03); display:flex; flex-direction:column; gap:20px; }
.admin-hero-top { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.admin-hero-title-area { flex:1; min-width:280px; }
.admin-hero-title-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.admin-course-name { margin:0; font-size:24px; font-weight:700; color:#0f172a; letter-spacing:-0.01em; }
.admin-meta-tags { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.meta-tag { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#475569; background:#f8fafc; border:1px solid #e2e8f0; padding:4px 10px; border-radius:6px; }
.meta-tag strong { color:#0f172a; font-weight:600; }

.admin-hero-actions { display:flex; align-items:center; gap:12px; }
.hero-action-btn { min-height:40px; padding:0 20px; font-size:14px; font-weight:600; box-shadow:0 2px 8px rgba(85,176,247,.2); }
.hero-status-action-row { display:flex; align-items:center; gap:12px; }
.status-pill { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:7px 16px; border-radius:20px; }
.status-pill-producing { background:#eaf7ff; color:#0875bd; border:1px solid #a7dcff; }
.status-pill-completed { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }

/* 🌟 核心高亮：提交用户信息横幅 (Creator Banner) */
.admin-creator-banner {
  background: linear-gradient(135deg, #f0f7ff 0%, #f7faff 50%, #ffffff 100%);
  border: 1.5px solid #a7dcff;
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 4px 16px rgba(85, 176, 247, 0.05);
  position: relative;
}

.creator-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue-action);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(85, 176, 247, 0.25);
}

.creator-banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  align-items: center;
}

.creator-field-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all .2s ease;
}
.creator-field-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.field-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.name-icon { background: #eaf7ff; color: #1684ce; }
.org-icon { background: #f1f5f9; color: #475569; }
.phone-icon { background: #fef2f2; color: #dc2626; }
.wechat-icon { background: #f0fdf4; color: #16a34a; }
.time-icon { background: #fdf4ff; color: #9333ea; }

.field-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.field-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 2px;
}

.field-value-primary {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-value-text {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-value-highlight {
  font-size: 14px;
  font-weight: 700;
  color: #dc2626;
  font-family: ui-monospace, monospace;
}

.phone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.copy-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #1684ce;
  background: #eaf7ff;
  border: 1px solid #a7dcff;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .15s;
}
.copy-phone-btn:hover {
  background: #1684ce;
  color: #ffffff;
}
.copy-phone-btn.copied {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}

.field-value-time {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}

.creator-banner-bio {
  margin-top: 14px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px dashed #a7dcff;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}
.bio-label { color: #1684ce; font-weight: 600; flex-shrink: 0; }
.bio-text { margin: 0; color: #334155; line-height: 1.5; }

/* ==================== 制作积分消耗卡片 UI ==================== */

.admin-points-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 26px;
  margin: 20px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.02);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr);
  gap: 28px;
  align-items: center;
}

.points-card-left { display: flex; flex-direction: column; gap: 10px; }
.points-card-header h3 { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: #0f172a; }
.points-formula-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 16px;
  width: fit-content;
  flex-wrap: wrap;
}
.formula-item { display: flex; flex-direction: column; }
.formula-label { font-size: 10px; color: #64748b; font-weight: 500; }
.formula-item strong { font-size: 14px; color: #1e293b; font-weight: 700; }
.formula-operator { font-size: 16px; color: #94a3b8; font-weight: 700; }
.formula-highlight strong { color: var(--blue); font-size: 16px; }
.points-card-note { font-size: 12px; color: #64748b; line-height: 1.5; margin: 0; }

.points-card-form { display: flex; flex-direction: column; gap: 12px; }
.points-form-fields { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: flex-end; }
.points-input-field, .points-reason-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: #334155; }
.input-suffix-wrap { position: relative; display: flex; align-items: center; }
.points-number-input { width: 100%; padding-right: 42px !important; font-weight: 700; font-size: 14px; }
.input-suffix { position: absolute; right: 10px; font-size: 12px; color: #94a3b8; font-weight: 500; pointer-events: none; }
.points-update-btn { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; min-height: 38px; }

@media (max-width: 900px) {
  .admin-points-card { grid-template-columns: 1fr; }
  .points-form-fields { grid-template-columns: 1fr; }
  .points-update-btn { width: 100%; justify-content: center; }
}

/* ==================== 制作交付成果与素材双栏工作台 ==================== */

.admin-detail-grid { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(320px,1.05fr); gap:24px; align-items:start; }
.admin-panel { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:26px; margin-bottom:24px; box-shadow:0 2px 8px rgba(0,0,0,.02); }
.panel-desc { font-size:13px; color:#64748b; line-height:1.6; margin:-6px 0 20px; }

.form-title-with-actions { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; }
.form-title-with-actions h3 { margin:2px 0 0; font-size:18px; font-weight:700; color:#0f172a; }
.ep-expand-actions { display:flex; align-items:center; gap:8px; font-size:12px; }
.divider-dot { color:#cbd5e1; }

.deliverable-list-section { margin-bottom: 24px; }
.deliverable-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.deliverable-list-header h4 { margin: 0; font-size: 15px; font-weight: 700; color: #1e293b; }
.admin-deliv-group-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.admin-deliv-group-card .group-header { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.deliverable-items { display: flex; flex-direction: column; gap: 8px; }
.deliv-item { display: flex; align-items: center; gap: 12px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; transition: .15s; }
.deliv-item:hover { border-color: #cbd5e1; box-shadow: 0 2px 6px rgba(0,0,0,.03); }
.deliv-icon-wrap { width: 34px; height: 34px; border-radius: 6px; background: #f0fdf4; display: grid; place-items: center; flex-shrink: 0; }
.deliv-meta { flex: 1; min-width: 0; }
.deliv-meta strong { display: block; font-size: 13px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deliv-meta small { color: #64748b; font-size: 11px; }
.deliv-actions { display: flex; align-items: center; gap: 8px; }
.empty-deliverable-placeholder { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 24px; text-align: center; color: #64748b; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.placeholder-icon { color: #94a3b8; }

.admin-upload-section { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; margin-top: 18px; }
.upload-section-title { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #1e293b; margin-bottom: 12px; }
.deliv-upload-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.target-ep-select-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; font-weight: 500; }
.target-ep-select-label select { padding: 6px 10px; border-radius: 6px; border: 1px solid #cbd5e1; font-size: 12px; background: #fff; }
.pending-upload-stack { margin-top: 14px; padding: 14px; background: #eaf7ff; border: 1px dashed #8dcefa; border-radius: 8px; font-size: 12px; }
.pending-stack-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.file-chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.file-chip { background: #ffffff; border: 1px solid #a7dcff; color: #075f9b; font-weight: 600; padding: 3px 8px; border-radius: 4px; font-size: 11px; }

.delivery-notes-label { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; font-size: 13px; color: #1e293b; font-weight: 600; }
.delivery-notes-label textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 13px; outline: none; box-sizing: border-box; }
.delivery-notes-label textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(85,176,247,.1); }
.admin-delivery-footer { margin-top: 16px; }
.deliver-confirm-btn { min-height: 44px; font-size: 15px; font-weight: 700; }

/* ==================== 分集讲稿与素材面板 ==================== */

.admin-episodes-list { display: flex; flex-direction: column; gap: 12px; }
.admin-episode-card { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,.02); transition: .15s; }
.admin-episode-card:hover { border-color: #cbd5e1; }
.admin-ep-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #f8fafc; cursor: pointer; user-select: none; }
.admin-ep-header .header-left { display: flex; align-items: center; gap: 10px; }
.ep-badge-pill { font-size: 11px; font-weight: 700; padding: 3px 8px; background: #eaf7ff; color: var(--blue); border-radius: 6px; border: 1px solid #a7dcff; }
.ep-card-title { font-size: 14px; font-weight: 600; color: #0f172a; }
.admin-ep-header .header-right { display: flex; align-items: center; gap: 8px; }
.text-pill { font-size: 11px; color: #475569; background: #ffffff; padding: 3px 8px; border: 1px solid #e2e8f0; border-radius: 4px; }
.admin-ep-body { padding: 16px; border-top: 1px solid #e2e8f0; background: #ffffff; }
.notes-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.notes-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #1e293b; }
.copy-notes-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #1684ce; background: #eaf7ff; border: 1px solid #a7dcff; padding: 2px 7px; border-radius: 4px; cursor: pointer; transition: .15s; }
.copy-notes-btn:hover { background: #1684ce; color: #fff; }
.copy-notes-btn.copied { background: #16a34a; color: #fff; border-color: #16a34a; }
.notes-pre-content { margin: 0; padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-family: inherit; font-size: 13px; line-height: 1.7; color: #0f172a; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow-y: auto; }

.admin-ep-assets-wrap { margin-top: 14px; }
.ep-assets-label { font-size: 12px; font-weight: 600; color: #475569; display: block; margin-bottom: 8px; }
.admin-ep-assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.admin-mini-asset-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
.mini-asset-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mini-asset-info strong { font-size: 12px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-asset-info small { color: #64748b; font-size: 10px; }
.download-mini-btn { padding: 3px 8px; font-size: 11px; }

.admin-global-assets-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid #e2e8f0; }
.sub-section-title { font-size: 14px; font-weight: 700; color: #1e293b; margin: 0 0 12px; }
.asset-download-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.asset-download-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.asset-download-info { flex: 1; min-width: 0; }
.asset-download-info strong { display: block; font-size: 13px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-download-info small { color: #64748b; font-size: 11px; }

/* ==================== 右侧侧边栏卡片 ==================== */

.admin-sidebar-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 22px; margin-bottom: 20px; box-shadow: 0 2px 6px rgba(0,0,0,.02); }
.admin-sidebar-card .form-title { margin-bottom: 14px; }
.admin-sidebar-card .form-title h4 { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: #0f172a; }

.creator-sidebar-card { border-top: 3px solid var(--blue); }
.user-profile-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
.user-avatar-large { width: 48px; height: 48px; border-radius: 50%; background: #eaf7ff; color: var(--blue); border: 1.5px solid #a7dcff; display: grid; place-items: center; flex-shrink: 0; }
.sidebar-user-name { display: block; font-size: 16px; font-weight: 700; color: #0f172a; }
.sidebar-user-org { display: block; color: #475569; font-size: 12px; font-weight: 500; margin-top: 1px; }
.sidebar-user-role { display: inline-block; font-size: 10px; font-weight: 600; color: #1684ce; background: #eaf7ff; padding: 2px 6px; border-radius: 4px; margin-top: 3px; }

.contact-list { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.contact-item { display: flex; justify-content: space-between; align-items: center; color: #475569; }
.contact-label { color: #64748b; font-size: 12px; }
.contact-val-wrap { display: flex; align-items: center; gap: 6px; }
.mini-copy-link { border: 0; background: transparent; color: var(--blue); font-size: 11px; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; }
.contact-item strong { color: #0f172a; font-weight: 600; }
.contact-item.flex-col { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; }
.contact-item p { margin: 0; font-size: 12px; color: #334155; line-height: 1.5; background: #f8fafc; padding: 10px 12px; border-radius: 6px; border: 1px solid #e2e8f0; width: 100%; box-sizing: border-box; }

.sidebar-episode-outline { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.outline-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #f8fafc; border-radius: 6px; border: 1px solid #f1f5f9; }
.outline-badge { font-size: 10px; font-weight: 700; color: var(--blue); background: #eaf7ff; padding: 2px 6px; border-radius: 4px; }
.outline-info { flex: 1; min-width: 0; }
.outline-info strong { display: block; font-size: 12px; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline-info small { color: #64748b; font-size: 11px; }

.course-full-desc { font-size: 13px; color: #334155; line-height: 1.7; margin: 0 0 16px; white-space: pre-line; background: #f8fafc; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; }
.time-meta-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #f8fafc; border-radius: 8px; font-size: 11px; color: #64748b; border: 1px solid #f1f5f9; }
.time-meta-box div { display: flex; justify-content: space-between; }
.time-meta-box span { font-weight: 600; color: #1e293b; }

.instructor-sidebar-list { display: flex; flex-direction: column; gap: 14px; }
.inst-card-detail { display: flex; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
.inst-card-detail:last-child { border-bottom: 0; padding-bottom: 0; }
.inst-photo { width: 56px; height: 68px; object-fit: cover; border-radius: 6px; flex-shrink: 0; border: 1px solid #e2e8f0; }
.inst-info strong { display: block; font-size: 13px; color: #0f172a; font-weight: 700; }
.inst-info small { color: #64748b; font-size: 11px; display: block; margin: 2px 0 6px; }
.inst-info p { margin: 0; font-size: 11px; color: #475569; line-height: 1.5; }

@media (max-width:960px) {
  .admin-detail-grid { grid-template-columns:1fr; }
  .admin-topbar nav { display:none; }
}

/* ==================== ADMIN 专属登录页样式 ==================== */
.admin-login-page { min-height:100vh; display:grid; place-items:center; background:radial-gradient(circle at 22% 28%,rgba(85,176,247,.10),transparent 38%),#f5f7fb; padding:24px; }
.admin-login-card { width:min(440px,100%); background:#fff; border:1px solid var(--line); border-radius:14px; padding:44px 38px; box-shadow:0 20px 60px rgba(40,57,90,.08); }
.admin-login-head { text-align:center; margin-bottom:28px; }
.admin-login-brand { display:flex; justify-content:center; margin-bottom:18px; }
.admin-login-badge { display:inline-flex; align-items:center; gap:6px; background:#eaf7ff; color:var(--blue); font-size:11px; font-weight:600; padding:4px 11px; border-radius:20px; letter-spacing:.08em; margin-bottom:14px; }
.admin-login-head h2 { margin:0 0 8px; font-size:24px; font-weight:500; color:var(--ink); }
.admin-login-head p { margin:0; font-size:13px; color:var(--muted); }
.admin-login-form label { display:flex; flex-direction:column; gap:8px; font-size:12px; color:#59657b; margin-bottom:20px; }
.admin-login-form input { width:100%; border:1px solid #dfe4ec; border-radius:7px; padding:12px 14px 12px 42px; background:#fbfcfe; color:#253149; font-size:14px; outline:none; transition:.2s; }
.admin-login-form input:focus { border-color:#8dcfff; box-shadow:0 0 0 3px rgba(85,176,247,.08); background:#fff; }
.admin-login-form .input-with-icon svg { color:#64748b; top:14px; }
.admin-login-footer { margin-top:24px; text-align:center; display:flex; flex-direction:column; gap:14px; }
.admin-tip-box { background:#f7f9fc; border:1px solid #edf0f5; border-radius:8px; padding:8px 12px; font-size:11px; color:#8b96a9; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.back-to-client-link { font-size:12px; color:var(--blue); transition:.15s; }
.back-to-client-link:hover { color:var(--blue-dark); text-decoration:underline; }

/* ==================== 课程创建页 - 示例模板与示范卡片 ==================== */
.new-course-layout {
  grid-template-columns: minmax(340px, 480px) minmax(420px, 620px);
  gap: clamp(30px, 5vw, 60px);
}
.new-course-aside {
  padding-top: 10px;
}
.aside-subtext {
  color: #7b889d;
  font-size: 13px;
  line-height: 1.7;
  margin: 16px 0 24px;
}
.template-showcase-box {
  background: #ffffff;
  border: 1px solid #dfe5f0;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(30, 48, 80, 0.05);
  margin-top: 10px;
}
.template-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf1f7;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1a253c;
}
.flame-icon { color: var(--blue); }
.sample-count-tag {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 12px;
}
.template-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.template-pill {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.template-pill:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}
.template-pill.active {
  background: #eaf7ff;
  border-color: #55b0f7;
  color: #0875bd;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(85, 176, 247, 0.12);
}
.pill-badge {
  background: #d3edff;
  color: #075f9b;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
}
.selected-template-card {
  background: linear-gradient(180deg, #fbfcfe 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.sample-tag {
  font-size: 10px;
  font-weight: 500;
  color: #1684ce;
  background: #eef4ff;
  border: 1px solid #dbe6fe;
  padding: 2px 7px;
  border-radius: 4px;
}
.sample-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}
.sample-desc {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.6;
  color: #64748b;
}
.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
  background: #ffffff;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #edf2f7;
}
.spec-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #475569;
}
.spec-item svg {
  color: #55b0f7;
  margin-top: 2px;
  flex-shrink: 0;
}
.spec-item small {
  display: block;
  font-size: 10px;
  color: #94a3b8;
}
.spec-item span {
  display: block;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.3;
}
.preset-assets-strip {
  margin-bottom: 14px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 10px 12px;
}
.strip-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}
.preset-pill-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.asset-minitag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #475569;
  background: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-minitag svg {
  color: #64748b;
  flex-shrink: 0;
}
.template-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.action-btn {
  width: 100%;
  padding: 0 10px;
}
.highlight-sample-btn { background:var(--blue-action); color:#fff; box-shadow:none; }
.highlight-sample-btn:hover:not(:disabled) { background:var(--blue-dark); color:#fff; }
.template-card-footer {
  text-align: center;
  padding-top: 6px;
}
.detail-link-btn {
  border: 0;
  background: transparent;
  color: #1684ce;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s;
}
.detail-link-btn:hover {
  background: #eaf7ff;
  text-decoration: underline;
}

/* 表单顶部快速载入按钮 */
.title-left {
  display: flex;
  flex-direction: column;
}
.quick-sample-pill-btn {
  border: 1px solid #a7dcff;
  background: #eaf7ff;
  color: #0875bd;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.quick-sample-pill-btn:hover {
  background: #d3edff;
  border-color: #8dcefa;
}
.form-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.new-course-main .form-title h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  color: #1e293b;
}
.optional-tag {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 400;
  margin-left: 2px;
}
.filled-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 16px;
  animation: fadeIn 0.25s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== 制作任务书弹窗 Modal ==================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}
.modal-dialog.brief-modal {
  width: min(720px, 95vw);
  max-height: 88vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
}
.modal-header h3 {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
}
.modal-badge {
  font-size: 10px;
  color: #0875bd;
  background: #d3edff;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}
.close-modal-btn {
  border: 0;
  background: transparent;
  color: #64748b;
  padding: 6px;
  border-radius: 6px;
  display: grid;
  place-items: center;
}
.close-modal-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.modal-body.brief-modal-content {
  padding: 22px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.brief-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
}
.brief-section.focus-card {
  background: #fffbeb;
  border-color: #fde68a;
}
.brief-section.focus-card h4 {
  color: #92400e;
}
.brief-section h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brief-section ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #334155;
  line-height: 1.6;
}
.brief-preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.brief-subcard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
}
.brief-subcard strong {
  display: block;
  font-size: 12px;
  color: #0f172a;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}
.inst-subrow, .asset-subrow {
  margin-bottom: 8px;
}
.inst-subrow span, .asset-subrow span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}
.inst-subrow small, .asset-subrow small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin: 2px 0;
}
.inst-subrow p {
  margin: 0;
  font-size: 11px;
  color: #475569;
  line-height: 1.4;
}
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #edf2f7;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #f8fafc;
}

/* ==================== 新建用户弹窗 ==================== */
.modal-dialog.create-user-modal {
  width: min(520px, calc(100vw - 40px));
  max-height: min(720px, calc(100vh - 40px));
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.24);
  overflow: hidden;
}

.create-user-modal form {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.create-user-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  overflow-y: auto;
}

.create-user-body .notice {
  margin: 0;
}

.create-user-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.create-user-field.required > span::after {
  content: " *";
  color: #ef4444;
}

.create-user-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #f8fafc;
  padding: 11px 13px;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.create-user-field input::placeholder {
  color: #94a3b8;
}

.create-user-field input:focus {
  outline: none;
  border-color: #55b0f7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(85, 176, 247, .12);
}

.create-user-field small,
.create-user-hint {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
}

.create-user-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.password-generate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.password-generate-row .secondary-button {
  white-space: nowrap;
}

.login-credentials {
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #f8fafc;
}

.login-credentials > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
}

.login-credentials > div + div {
  border-top: 1px solid #e2e8f0;
}

.login-credentials span {
  color: #64748b;
  font-size: 12px;
}

.login-credentials strong {
  overflow-wrap: anywhere;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
}

.copy-login-button {
  align-self: stretch;
  justify-content: center;
}

@media (max-width: 540px) {
  .modal-backdrop {
    align-items: end;
    padding: 12px;
  }

  .modal-dialog.create-user-modal {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 14px;
  }

  .create-user-modal .modal-header,
  .create-user-modal .modal-footer,
  .create-user-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .create-user-grid {
    grid-template-columns: 1fr;
  }

  .password-generate-row {
    grid-template-columns: 1fr;
  }

  .password-generate-row .secondary-button {
    justify-content: center;
  }
}

/* ==================== 讲师出镜照片上传与规范示例 ==================== */
.instructor-image-field-wrapper {
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.field-main-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  margin: 0 !important;
}

.field-sub-label {
  font-size: 11px;
  color: #94a3b8;
  font-weight: normal;
}

.guide-toggle-btn {
  border: 0;
  background: transparent;
  color: #1684ce;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.guide-toggle-btn:hover {
  background: #eaf7ff;
  color: #0875bd;
}

/* 上传虚线框 */
.instructor-upload-zone {
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 8px;
}

.instructor-upload-zone:hover,
.instructor-upload-zone.dragging {
  border-color: #55b0f7;
  background: #eaf7ff;
  transform: translateY(-1px);
}

.upload-zone-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eaf7ff;
  color: #1684ce;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease;
}

.instructor-upload-zone:hover .upload-zone-icon {
  transform: scale(1.08);
}

.upload-zone-text strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 3px;
}

.upload-zone-text span {
  font-size: 11px;
  color: #64748b;
}

/* 已选图片预览卡片 */
.instructor-image-preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #8dcefa;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(85, 176, 247, 0.08);
}

.preview-thumbnail {
  width: 52px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  flex-shrink: 0;
}

.preview-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.preview-info .file-name {
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-info .file-size {
  font-size: 11px;
  color: #16a34a;
  margin-top: 3px;
  font-weight: 500;
}

.preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-actions .change-btn {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.preview-actions .change-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.preview-actions .remove-btn {
  border: 0;
  background: #fee2e2;
  color: #ef4444;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.preview-actions .remove-btn:hover {
  background: #fecaca;
  color: #dc2626;
}

/* 规范示例展示区域 */
.sample-guide-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sample-guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.guide-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

.guide-icon {
  color: #1684ce;
}

.guide-tag {
  font-size: 10px;
  background: #dcfce7;
  color: #15803d;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}

/* 示例卡片两列布局 */
.sample-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sample-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.sample-card:hover {
  transform: translateY(-2px);
  border-color: #8dcefa;
  box-shadow: 0 6px 16px rgba(85, 176, 247, 0.08);
}

.sample-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000000;
  overflow: hidden;
}

.sample-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.3s ease;
}

.sample-card:hover .sample-img-box img {
  transform: scale(1.05);
}

.sample-pose-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.zoom-hint {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sample-card:hover .zoom-hint {
  opacity: 1;
}

.sample-card-desc {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sample-card-desc strong {
  font-size: 12px;
  color: #0f172a;
  font-weight: 600;
}

.sample-card-desc p {
  margin: 0;
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.4;
}

/* 文字要求清单 */
.guide-requirements-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 10px;
}

.req-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.req-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.green-dot {
  color: #16a34a;
  background: #dcfce7;
}

.blue-dot {
  color: #1684ce;
  background: #d3edff;
}

.amber-dot {
  color: #d97706;
  background: #fef3c7;
}

.red-dot {
  color: #dc2626;
  background: #fee2e2;
}

.req-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.req-content strong {
  font-size: 11.5px;
  color: #1e293b;
  font-weight: 600;
}

.req-content p {
  margin: 0;
  font-size: 11px;
  color: #475569;
  line-height: 1.45;
}

/* 示例大图弹窗 Modal */
.sample-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

.sample-modal-box {
  width: min(820px, 95vw);
  max-height: 90vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #cbd5e1;
}

.sample-modal-header {
  padding: 16px 22px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.modal-title-group h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
}

.modal-sub-tag {
  font-size: 11px;
  color: #1684ce;
  font-weight: 500;
}

.modal-close-btn {
  border: 0;
  background: transparent;
  color: #64748b;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.sample-modal-body {
  display: grid;
  grid-template-columns: 340px 1fr;
  padding: 20px 24px;
  gap: 24px;
  overflow-y: auto;
  align-items: start;
}

@media (max-width: 720px) {
  .sample-modal-body {
    grid-template-columns: 1fr;
  }
}

.sample-modal-view {
  background: #0f172a;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
}

.modal-large-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sample-modal-spec {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sample-modal-spec h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.spec-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spec-checklist li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.5;
}

.spec-checklist li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: #1684ce;
  font-size: 18px;
  line-height: 1;
}

.spec-checklist strong {
  color: #0f172a;
}

.sample-modal-switch {
  margin-top: 12px;
  padding: 12px 14px;
  background: #f1f5f9;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.switch-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
}

.switch-buttons {
  display: flex;
  gap: 8px;
}

.switch-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.switch-btn:hover {
  border-color: #8dcefa;
  color: #1684ce;
}

.switch-btn.active {
  background: #1684ce;
  color: #ffffff;
  border-color: #1684ce;
  font-weight: 600;
}

.sample-modal-footer {
  padding: 14px 22px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
}

/* 讲师表单操作按钮 */
.instructor-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.instructor-form-actions .cancel-btn {
  flex: 1;
  height: 40px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.instructor-form-actions .cancel-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.instructor-form-actions .primary-button {
  flex: 2;
  margin-top: 0;
  height: 40px;
}

/* ==================== 讲师添加弹窗 Modal ==================== */
.modal-dialog.instructor-modal {
  width: min(680px, 95vw);
  max-height: 90vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.modal-form-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

.instructor-modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.instructor-modal-body .form-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .instructor-modal-body .form-group-row {
    grid-template-columns: 1fr;
  }
}

.instructor-modal-body .form-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
}

.instructor-modal-body .form-label span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.instructor-modal-body .form-label.required span::after {
  content: " *";
  color: #ef4444;
}

.instructor-modal-body input,
.instructor-modal-body textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  font-size: 14px;
  color: #0f172a;
  transition: all 0.15s ease;
  box-sizing: border-box;
  font-family: inherit;
}

.instructor-modal-body input:focus,
.instructor-modal-body textarea:focus {
  outline: none;
  border-color: #55b0f7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(85, 176, 247, 0.12);
}

.instructor-modal-body textarea {
  resize: vertical;
  min-height: 76px;
  line-height: 1.5;
}

.instructor-modal-body .instructor-image-field-wrapper {
  margin: 4px 0 0;
}

/* 侧边栏空讲师状态 */
.empty-instructor-box {
  padding: 22px 16px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.empty-instructor-box p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

.add-instructor-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  color: #1684ce;
  background: #eaf7ff;
  border: 1px solid #a7dcff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.add-instructor-trigger-btn:hover {
  background: #d3edff;
  color: #0875bd;
  border-color: #8dcefa;
}

.add-instructor-btn:hover {
  background: #f1f5f9 !important;
  color: #1684ce;
  border-color: #cbd5e1 !important;
}

/* ==================== 课程分集与素材管理 UI ==================== */

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
  width: 100%;
  margin-top: 20px;
}

.episodes-workspace-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.episodes-header-panel {
  padding: 24px 28px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.panel-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.panel-intro {
  color: #64748b;
  font-size: 13px;
  margin: 6px 0 0 0;
  line-height: 1.5;
}

.episodes-actions-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.episodes-metrics-bar {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 20px;
  padding: 14px 18px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #edf2f7;
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-num {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.metric-item small {
  font-size: 12px;
  color: #64748b;
}

.expand-collapse-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #e2e8f0;
  font-size: 12px;
  color: #475569;
}

.expand-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.expand-links button {
  background: transparent;
  border: 0;
  color: #1684ce;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  font-weight: 500;
}

.expand-links button:hover {
  text-decoration: underline;
}

/* 分集卡片容器 */
.episodes-list-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.episode-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: all 0.2s ease;
}

.episode-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.episode-card.expanded {
  border-color: #8dcefa;
  box-shadow: 0 4px 16px rgba(85, 176, 247, 0.08);
}

.episode-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  background: #ffffff;
  transition: background 0.15s ease;
}

.episode-card.expanded .episode-card-header {
  background: #f8fbff;
  border-bottom: 1px solid #e2e8f0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.ep-toggle-arrow {
  color: #64748b;
  display: flex;
  align-items: center;
}

.ep-number-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #0875bd;
  background: #eaf7ff;
  border-radius: 6px;
  border: 1px solid #a7dcff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.ep-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.tag-pill-success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.tag-pill-dim {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.tag-pill-info {
  background: #eaf7ff;
  color: #075f9b;
  border: 1px solid #d3edff;
}

.icon-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-action-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #e2e8f0;
}

.icon-action-btn.delete-btn:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

/* 展开后的分集主体 */
.episode-card-body {
  padding: 18px 20px;
  background: #ffffff;
}

.episode-content-heading {
  display: flex;
  align-items: center;
  margin: 2px 0 12px;
}

.episode-content-heading > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.episode-content-heading strong {
  color: #1e293b;
  font-size: 14px;
}

.episode-content-heading span {
  color: #94a3b8;
  font-size: 12px;
}

.ep-body-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ep-notes-box,
.ep-assets-box {
  display: flex;
  flex-direction: column;
  background: #fbfcfe;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
}

.ep-assets-box {
  padding-bottom: 12px;
}

.box-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.box-title-row .title-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
}

.optional-label,
.asset-count-label {
  padding: 2px 6px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10px;
  font-weight: 500;
}

.asset-count-label {
  background: #eaf7ff;
  color: #1684ce;
}

.dirty-badge {
  font-size: 11px;
  padding: 2px 6px;
  background: #fef3c7;
  color: #b45309;
  border-radius: 4px;
  font-weight: 600;
}

.ep-notes-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #1e293b;
  background: #ffffff;
  resize: vertical;
  min-height: 120px;
  transition: border-color 0.15s ease;
}

.ep-notes-textarea:focus {
  outline: none;
  border-color: #1684ce;
  box-shadow: 0 0 0 3px rgba(85, 176, 247, 0.12);
}

.lecture-preview { max-height: 130px; overflow: auto; padding: 10px 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.lecture-preview p { margin: 0 0 8px; }
.lecture-preview ul, .lecture-preview ol { padding-left: 24px; }
.lecture-count { color: #64748b; margin-top: 8px; }
.modal-dialog.lecture-dialog { width: min(960px, calc(100vw - 32px)); height: min(88vh, 900px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #dbe4ee; border-radius: 12px; box-shadow: 0 24px 64px rgba(15, 23, 42, .24); }
.lecture-dialog .modal-header { flex: none; padding: 18px 24px; }
.lecture-dialog .modal-header small { display: block; margin-top: 5px; color: #64748b; }
.lecture-toolbar { display: flex; flex: none; gap: 6px; padding: 10px 20px; border-bottom: 1px solid #e2e8f0; background: #fff; }
.lecture-toolbar button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #dbe4ee; border-radius: 6px; background: #fff; color: #334155; cursor: pointer; }
.lecture-toolbar button:hover { background: #eaf7ff; color: #0875bd; }
.lecture-editor { flex: 1; min-height: 0; overflow: auto; margin: 16px 20px; padding: 18px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font-size: 15px; line-height: 1.8; outline: none; overflow-wrap: anywhere; white-space: pre-wrap; }
.lecture-editor:focus { border-color: #0875bd; box-shadow: 0 0 0 3px rgba(85,176,247,.12); }
.lecture-editor:empty::before { content: attr(data-placeholder); color: #94a3b8; }
.lecture-dialog-footer { flex: none; padding: 14px 20px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-top: 1px solid #edf2f7; }
.lecture-dialog-footer small { color: #64748b; }
.lecture-dialog-footer > div { display: flex; gap: 8px; }
.lecture-dialog-footer .lecture-stats { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; color: #334155; }
.lecture-stats strong { color: #0875bd; font-size: 15px; }
.lecture-stats span { font-size: 13px; }
.lecture-stats small { display: block; width: 100%; font-size: 11px; }
@media (max-width: 600px) { .modal-dialog.lecture-dialog { height: calc(100dvh - 24px); max-height: none; } .lecture-dialog .modal-header { padding: 14px 16px; } .lecture-toolbar { padding: 8px 12px; } .lecture-editor { margin: 12px; padding: 12px; } .lecture-dialog-footer { align-items: stretch; flex-direction: column; padding: 10px 12px 14px; } .lecture-dialog-footer > div { justify-content: flex-end; } }

.asset-preview-backdrop { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 12px; background: rgba(15,23,42,.88); }
.asset-preview-dialog { width: min(1450px, 100%); height: min(100%, 1000px); display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: #f1f5f9; box-shadow: 0 24px 72px rgba(0,0,0,.3); }
.asset-preview-header, .asset-preview-footer { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; background: #fff; }
.asset-preview-header { border-bottom: 1px solid #e2e8f0; }
.asset-preview-header > div { min-width: 0; display: flex; flex-direction: column; }
.asset-preview-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.asset-preview-header span { color: #64748b; font-size: 12px; }
.asset-preview-header .asset-preview-warning { color: #9a5b16; }
.asset-preview-header button, .asset-preview-footer button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #dbe4ee; border-radius: 6px; padding: 7px 10px; background: #fff; color: #334155; cursor: pointer; }
.asset-preview-header button { border: 0; }
.asset-preview-footer { border-top: 1px solid #e2e8f0; }
.asset-preview-footer > div { display: flex; align-items: center; gap: 10px; }
.asset-preview-footer button:disabled { opacity: .45; cursor: default; }
.asset-preview-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 20px; background: #e8edf3; }
.asset-preview-canvas { max-width: 100%; height: auto; margin: auto; background: #fff; box-shadow: 0 4px 20px rgba(15,23,42,.15); }
.asset-preview-media { max-width: 100%; max-height: 100%; object-fit: contain; }
.asset-preview-message { text-align: center; color: #475569; }
.asset-preview-rendering { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 20px; background: #334155; color: #fff; font-size: 12px; }
.asset-preview-action { flex: none; border: 1px solid #bee4ff; border-radius: 6px; padding: 5px 9px; background: #eff8ff; color: #0875bd; cursor: pointer; font-size: 12px; }
.asset-preview-action:hover { background: #d3edff; }
.asset-row > button:not(:first-of-type) { margin-left: 0; }
.asset-row .asset-preview-action { border: 1px solid #bee4ff; background: #eff8ff; color: #0875bd; }
.asset-row .asset-preview-action:hover { background: #d3edff; color: #075f9b; }
@media (max-width: 600px) { .asset-preview-backdrop { padding: 0; } .asset-preview-dialog { height: 100dvh; border-radius: 0; } .asset-preview-stage { padding: 8px; } .asset-preview-footer { padding: 10px; } .asset-preview-footer > div { gap: 4px; font-size: 12px; } .asset-preview-footer button { padding: 6px; font-size: 12px; } }

.notes-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.notes-footer-row small {
  font-size: 11px;
  color: #94a3b8;
}

.save-notes-btn {
  padding: 4px 12px;
  font-size: 12px;
  gap: 4px;
}

/* 分集素材列表 */
.ep-assets-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
  max-height: 160px;
  overflow-y: auto;
}

.ep-asset-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.ep-asset-item:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.asset-item-icon {
  color: #1684ce;
  flex-shrink: 0;
}

.ep-asset-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ep-asset-info strong {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ep-asset-info span {
  font-size: 10px;
  color: #94a3b8;
}

.ep-upload-zone {
  margin-top: 8px;
}

.ep-file-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: #eaf7ff;
  border: 1px dashed #8dcefa;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #0875bd;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ep-file-label:hover {
  background: #d3edff;
  border-color: #60a5fa;
}

.compact-upload-button {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-style: solid;
}

.ep-pending-files {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pending-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pending-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #f1f5f9;
  border-radius: 4px;
  font-size: 11px;
  color: #334155;
}

.pending-chip button {
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  padding: 0;
}

.pending-chip button:hover {
  color: #ef4444;
}

/* 空分集提示卡片 */
.episodes-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: #ffffff;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  text-align: center;
}

.episodes-empty-card .empty-icon {
  color: #94a3b8;
  margin-bottom: 12px;
}

.episodes-empty-card h3 {
  margin: 0 0 6px 0;
  font-size: 16px;
  color: #1e293b;
}

.episodes-empty-card p {
  margin: 0 0 20px 0;
  font-size: 13px;
  color: #64748b;
  max-width: 440px;
}

.empty-actions {
  display: flex;
  gap: 12px;
}

/* 全局资产卡片 */
.global-assets-panel {
  padding: 24px 28px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}

/* 通用资产备注卡片 */
.asset-notes-card {
  display: flex;
  flex-direction: column;
  background: #fbfcfe;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.asset-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.asset-notes-header .notes-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
}

.asset-notes-header .notes-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.asset-notes-text {
  font-size: 13px;
  line-height: 1.6;
  color: #334155;
  white-space: pre-wrap;
  word-break: break-word;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  padding: 10px 12px;
}

.asset-notes-edit-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.asset-notes-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #1e293b;
  background: #ffffff;
  resize: vertical;
  min-height: 90px;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.asset-notes-textarea:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.add-asset-notes-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.notes-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 提交统计提示 */
.submit-summary-info {
  margin-bottom: 10px;
}

.submit-summary-info p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

/* ==================== 分集弹窗 EpisodeModal 样式 ==================== */
.modal-dialog.episode-modal {
  width: min(680px, 95vw);
  max-height: 90vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.modal-tabs-header {
  display: flex;
  background: #f1f5f9;
  padding: 6px 8px;
  gap: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.modal-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-tab-btn:hover {
  color: #1e293b;
  background: rgba(255, 255, 255, 0.6);
}

.modal-tab-btn.active {
  background: #ffffff;
  color: #1684ce;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.episode-modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.grid-two-inputs {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
}

@media (max-width: 540px) {
  .grid-two-inputs {
    grid-template-columns: 1fr;
  }
}

.episode-modal-body .form-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
}

.episode-modal-body .form-label span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.episode-modal-body .form-label.required span::after {
  content: " *";
  color: #ef4444;
}

.episode-modal-body input,
.episode-modal-body textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  font-size: 14px;
  color: #0f172a;
  transition: all 0.15s ease;
  box-sizing: border-box;
  font-family: inherit;
}

.episode-modal-body input:focus,
.episode-modal-body textarea:focus {
  outline: none;
  border-color: #55b0f7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(85, 176, 247, 0.12);
}

.episode-modal-body textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.55;
}

.label-with-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.optional-fields-toggle {
  display: flex;
  justify-content: flex-start;
  padding-top: 2px;
}

.toggle-optional-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 500;
  width: 100%;
  justify-content: center;
}

.toggle-optional-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #334155;
}

.optional-fields-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  animation: fadeIn 0.18s ease-out;
}

.lecture-stats-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #1684ce;
  background: #eaf7ff;
  border: 1px solid #d3edff;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 500;
}

.batch-notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #eaf7ff;
  border: 1px solid #a7dcff;
  border-radius: 10px;
  color: #075f9b;
}

.batch-notice-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #1684ce;
}

.batch-notice-banner strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
  color: #1e3a8a;
}

.batch-notice-banner p {
  margin: 0;
  font-size: 12px;
  color: #55b0f7;
  line-height: 1.45;
}

.quick-count-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.count-pill {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.count-pill:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.count-pill.active {
  background: #1684ce;
  color: #ffffff;
  border-color: #1684ce;
  box-shadow: 0 2px 6px rgba(85, 176, 247, 0.25);
}

.batch-preview-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
}

.preview-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
}

.batch-preview-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}

.preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #edf2f7;
  padding: 6px 10px;
  border-radius: 6px;
}

.preview-ep-tag {
  font-size: 10px;
  font-weight: 700;
  color: #1684ce;
  background: #eaf7ff;
  border: 1px solid #d3edff;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.preview-ep-title {
  font-size: 12px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-row-more {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  padding: 4px 0;
}

/* ==================== 制作交付与管理后台分集面板 ==================== */

.deliverable-category-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.episode-deliverable-group {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
}

.episode-deliverable-group .group-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ep-badge-small {
  font-size: 10px;
  padding: 2px 6px;
  background: #d3edff;
  color: #075f9b;
  border-radius: 4px;
  font-weight: 700;
}

/* 管理员端分集列表与交付 */
.admin-deliv-group-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.admin-deliv-group-card .group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.deliv-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.target-ep-select-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}

.target-ep-select-label select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font-size: 12px;
  background: #ffffff;
  color: #1e293b;
}

.admin-episodes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.admin-episode-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.admin-ep-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
}

.admin-ep-header .header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ep-badge-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: #eaf7ff;
  color: var(--blue);
  border-radius: 4px;
}

.text-pill {
  font-size: 11px;
  color: #64748b;
  background: #ffffff;
  padding: 2px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
}

.admin-ep-body {
  padding: 14px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.admin-ep-summary {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: #475569;
}

.admin-ep-notes-display {
  margin-bottom: 12px;
}

.notes-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.notes-pre-content {
  margin: 0;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.6;
  color: #1e293b;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

.admin-ep-assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.admin-mini-asset-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.mini-asset-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mini-asset-info strong {
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-asset-info small {
  font-size: 10px;
  color: #94a3b8;
}

.sidebar-episode-outline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.outline-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #edf2f7;
}

.outline-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  background: #eaf7ff;
  color: #0875bd;
  border-radius: 4px;
  flex-shrink: 0;
}

.outline-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.outline-info strong {
  font-size: 11px;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outline-info small {
  font-size: 10px;
  color: #94a3b8;
}

.sub-section-title {
  margin: 16px 0 10px 0;
  font-size: 13px;
  color: #334155;
}

.ep-subrow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  margin-bottom: 4px;
}

.ep-subrow span {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

.ep-subrow small {
  font-size: 11px;
  color: #64748b;
}

/* ==================== 底部辅助操作区 & 删除课程弹窗 ==================== */
.course-danger-section {
  margin-top: 40px;
  margin-bottom: 24px;
  padding-top: 24px;
  border-top: 1px dashed #e2e8f0;
}

.danger-zone-card {
  background: #fbfcfd;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

@media (max-width: 640px) {
  .danger-zone-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   公开营销首页
   ========================================================================== */
.marketing-page { min-height:100vh; background:#f7f8fb; color:var(--ink); overflow:hidden; }
.marketing-nav { height:76px; max-width:1400px; margin:0 auto; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; border-bottom:1px solid rgba(220,225,235,.75); }
.marketing-nav nav { display:flex; gap:34px; margin-left:70px; font-size:13px; color:#6f7b90; }
.marketing-nav nav a:hover,.marketing-login:hover { color:var(--blue-action); }
.marketing-nav-actions { margin-left:auto; display:flex; align-items:center; gap:22px; }
.marketing-login { font-size:13px; color:#536077; }
.public-help-nav { width:100%; flex:0 0 76px; }
.marketing-hero { width:min(1400px,100%); min-height:660px; margin:0 auto; padding:90px clamp(24px,5vw,76px) 80px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; position:relative; }
.marketing-hero-copy { position:relative; z-index:2; max-width:650px; }
.marketing-kicker { display:flex; align-items:center; gap:10px; color:#0875bd; font-size:11px; font-weight:600; letter-spacing:.18em; margin:0 0 27px; }
.marketing-kicker span { width:22px; height:1px; background:#c09b57; }
.marketing-hero h1 { margin:0; font-family:"Songti SC","Noto Serif SC","Source Han Serif CN",serif; font-size:clamp(48px,5vw,72px); font-weight:500; line-height:1.23; letter-spacing:-.045em; }
.marketing-hero h1 em { color:var(--blue); font-style:normal; }
.marketing-lead { max-width:570px; margin:28px 0 32px; color:#748096; font-size:16px; line-height:1.9; }
.marketing-hero-actions { display:flex; align-items:center; gap:28px; }
.marketing-cta { min-height:49px; padding:0 23px; }
.marketing-text-link { font-size:13px; color:#647087; display:inline-flex; gap:8px; align-items:center; }
.marketing-text-link:hover { color:var(--blue); }
.marketing-trust { display:flex; gap:25px; margin-top:36px; color:#8994a7; font-size:11px; }
.marketing-trust span { display:flex; align-items:center; gap:6px; }
.marketing-trust svg { color:#b38b43; }
.marketing-visual { min-height:470px; position:relative; }
.visual-orbit { position:absolute; left:0; top:50%; border:1px solid rgba(87,105,138,.18); border-radius:50%; transform:translateY(-50%) rotate(-15deg); }
.visual-orbit-a { width:640px; height:320px; }
.visual-orbit-b { width:500px; height:245px; left:70px; border-color:rgba(85,176,247,.14); }
.visual-star { position:absolute; border-radius:50%; z-index:2; }
.star-a { width:9px; height:9px; background:#c09a54; left:42px; top:161px; box-shadow:0 0 0 5px rgba(192,154,84,.1); }
.star-b { width:7px; height:7px; background:#55b0f7; right:12px; bottom:123px; }
.course-preview-card { width:min(410px,82%); position:absolute; left:100px; top:82px; z-index:3; border:1px solid #e0e6f0; border-radius:16px; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); padding:28px; box-shadow:0 30px 80px rgba(31,52,94,.12); transform:rotate(1.5deg); }
.preview-top { display:flex; justify-content:space-between; align-items:center; color:#94a0b3; font-size:10px; letter-spacing:.18em; }
.preview-top i { width:8px; height:8px; border-radius:50%; background:#d6ad61; box-shadow:0 0 0 5px #f8f3e8; }
.preview-lines { margin:34px 0 40px; display:flex; flex-direction:column; gap:12px; }
.preview-lines b { height:9px; border-radius:5px; background:#edf0f5; width:92%; }
.preview-lines b:first-child { height:18px; width:68%; background:#27334a; }
.preview-lines b:last-child { width:55%; }
.preview-progress { display:flex; justify-content:space-between; color:#707d92; font-size:11px; margin-bottom:10px; }
.preview-progress strong { color:var(--blue); font-size:12px; }
.preview-bar { height:5px; background:#edf1f6; border-radius:5px; overflow:hidden; }
.preview-bar i { display:block; width:75%; height:100%; background:linear-gradient(90deg,#55b0f7,#9cd6ff); }
.preview-stages { display:flex; justify-content:space-between; margin-top:25px; color:#a1aabb; font-size:10px; }
.preview-stages .done { color:#526582; }
.visual-note { position:absolute; right:-5px; bottom:24px; font-family:"Songti SC",serif; font-size:15px; line-height:1.8; color:#8993a5; letter-spacing:.08em; }
.marketing-process { width:min(1400px,100%); margin:0 auto; padding:100px clamp(24px,5vw,76px) 110px; border-top:1px solid var(--line); }
.marketing-section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:46px; }
.marketing-section-heading>div>p,.marketing-final-cta>p { color:#6680b2; font-size:10px; font-weight:600; letter-spacing:.22em; margin:0 0 12px; }
.marketing-section-heading h2,.marketing-final-cta h2 { font-family:"Songti SC",serif; font-size:clamp(30px,3vw,43px); font-weight:500; margin:0; letter-spacing:-.03em; }
.marketing-section-heading>p { max-width:360px; color:#8a95a7; font-size:13px; line-height:1.8; margin:0; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #e1e6ef; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.65); }
.process-card { min-height:260px; padding:28px; border-right:1px solid #e5e9f1; transition:.25s ease; }
.process-card:last-child { border-right:0; }
.process-card:hover { background:#fff; transform:translateY(-3px); box-shadow:0 16px 38px rgba(30,50,88,.07); }
.process-card-top { display:flex; justify-content:space-between; align-items:center; color:#9aa5b7; }
.process-card-top span { font-family:Georgia,serif; font-size:12px; color:#b18a45; }
.process-card-top svg { color:#6e88bb; }
.process-card h3 { margin:55px 0 14px; font-size:18px; font-weight:600; }
.process-card p { margin:0; color:#8390a4; font-size:13px; line-height:1.8; }
.marketing-final-cta { width:min(1248px,calc(100% - 48px)); margin:0 auto 95px; min-height:365px; border-radius:18px; overflow:hidden; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(145deg,#eaf7ff,#f8f9fc); border:1px solid #dce5f4; }
.marketing-final-cta>span { color:#7c899e; font-size:14px; margin:18px 0 27px; }
.final-orbit { position:absolute; width:700px; height:230px; border:1px solid rgba(53,92,171,.14); border-radius:50%; transform:rotate(-9deg); pointer-events:none; }
.final-orbit i { position:absolute; width:9px; height:9px; border-radius:50%; background:#c29b54; left:65px; top:36px; }
.marketing-final-cta>*:not(.final-orbit) { position:relative; z-index:1; }
@media (max-width:900px) {
  .marketing-hero { grid-template-columns:1fr; padding-top:68px; }
  .marketing-visual { margin-top:24px; min-height:430px; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .process-card:nth-child(2) { border-right:0; }
  .process-card:nth-child(-n+2) { border-bottom:1px solid #e5e9f1; }
}
@media (max-width:640px) {
  .marketing-nav { height:68px; padding:0 18px; }
  .public-help-nav { flex-basis:68px; }
  .marketing-nav nav,.marketing-login { display:none; }
  .marketing-nav-actions { gap:0; }
  .marketing-hero { padding:58px 20px 50px; min-height:auto; }
  .marketing-hero h1 { font-size:43px; }
  .marketing-lead { font-size:14px; }
  .marketing-hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }
  .marketing-trust { flex-direction:column; gap:9px; margin-top:28px; }
  .marketing-visual { min-height:360px; margin-left:-15px; }
  .visual-orbit-a { width:470px; height:245px; left:-65px; }
  .visual-orbit-b { width:370px; height:185px; left:-15px; }
  .course-preview-card { left:28px; top:68px; width:320px; padding:23px; }
  .visual-note { display:none; }
  .marketing-process { padding:72px 20px 80px; }
  .marketing-section-heading { align-items:flex-start; flex-direction:column; gap:18px; }
  .process-grid { grid-template-columns:1fr; }
  .process-card { min-height:220px; border-right:0; border-bottom:1px solid #e5e9f1; }
  .process-card:last-child { border-bottom:0; }
  .process-card h3 { margin-top:38px; }
  .marketing-final-cta { width:calc(100% - 32px); margin-bottom:60px; padding:40px 20px; }
}

.danger-zone-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.danger-icon {
  color: #94a3b8;
}

.danger-zone-info h4 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #475569;
}

.danger-zone-info p {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
}

.danger-button-subtle {
  background: transparent;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: var(--button-radius, 6px);
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.danger-button-subtle:hover:not(:disabled) {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

.danger-button-subtle:active:not(:disabled) {
  background: #fee2e2;
}

.danger-button-subtle:disabled,
.danger-button-subtle.disabled {
  background: transparent !important;
  border-color: #f1f5f9 !important;
  color: #cbd5e1 !important;
  opacity: 0.8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 删除课程弹窗 */
.modal-dialog.delete-course-modal {
  width: min(480px, 95vw);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header-simple-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.delete-modal-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.danger-alert-card {
  background: #fff8f8;
  border: 1px solid #fee2e2;
  border-radius: 8px;
  padding: 12px 14px;
}

.danger-alert-card p {
  margin: 0;
  font-size: 13px;
  color: #991b1b;
  line-height: 1.55;
}

.target-course-name-box {
  margin: 8px 0 10px 0;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  user-select: all;
}

.target-course-name-box code {
  color: #0f172a;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  word-break: break-all;
}

.delete-confirm-input {
  width: 100%;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  padding: 0 12px;
  font-size: 13.5px;
  background: #ffffff;
  color: #0f172a;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.delete-confirm-input:focus {
  border-color: #ef4444;
  outline: none;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.danger-submit-btn {
  background: #ef4444;
  color: #ffffff;
  border: 1px solid #dc2626;
  border-radius: var(--button-radius, 6px);
  min-height: 36px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.danger-submit-btn:hover:not(:disabled) {
  background: #dc2626;
  border-color: #b91c1c;
}

.danger-submit-btn:disabled {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  opacity: 0.8 !important;
  cursor: not-allowed !important;
}

/* ==================== 联系星痕 · 等待制作面板卡片样式 ==================== */
.success-panel-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

.contact-support-card {
  margin-top: 28px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 22px 24px;
  text-align: left;
}

.contact-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #edf2f7;
}

.contact-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #eaf7ff;
  color: #1684ce;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-header-text h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.contact-header-text p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.contact-card-body {
  display: flex;
  gap: 22px;
  align-items: stretch;
}

.contact-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
}

.contact-qr-box {
  width: 140px;
  height: 140px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.contact-qr-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.contact-qr-caption {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}

.contact-card-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.contact-step-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
}

.step-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eaf7ff;
  color: #1684ce;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.step-desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step-desc strong {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

.step-desc span {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

/* ==================== 联系星痕 · 弹窗样式 ==================== */
.modal-dialog.contact-modal {
  width: min(560px, 95vw);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-modal-intro {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
}

.contact-modal-intro p {
  margin: 0;
}

.contact-modal-intro strong {
  color: #0f172a;
}

.contact-modal-qr-section {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.contact-modal-qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.qr-image-wrapper {
  width: 140px;
  height: 140px;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-modal-qr-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.qr-badge-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}

.contact-modal-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.contact-step-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
}

.step-badge-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eaf7ff;
  color: #1684ce;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.step-content strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
}

.step-content p {
  margin: 0;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
}

.contact-modal-footer-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #475569;
  background: #eaf7ff;
  border: 1px solid #d3edff;
  padding: 10px 14px;
  border-radius: 8px;
}

.contact-modal-footer-tip svg {
  color: #55b0f7;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .contact-card-body,
  .contact-modal-qr-section {
    flex-direction: column;
    align-items: center;
  }
  .contact-card-steps,
  .contact-modal-steps {
    width: 100%;
  }
}

/* ==========================================================================
   帮助中心 (Help & FAQ Page)
   ========================================================================== */

.help-page {
  padding-top: 32px;
  max-width: 1100px;
}

.help-hero {
  text-align: center;
  padding: 30px 20px 48px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.help-hero-content {
  max-width: 680px;
  margin: 0 auto;
}

.help-hero-content .eyebrow {
  justify-content: center;
  margin-bottom: 14px !important;
}

.help-hero h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

.help-hero-desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 auto 32px;
  max-width: 540px;
}

/* 搜索栏 */
.help-search-bar {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.help-search-bar .search-icon {
  position: absolute;
  left: 18px;
  color: #94a3b8;
  pointer-events: none;
}

.help-search-bar input {
  width: 100%;
  height: 52px;
  padding: 0 70px 0 50px;
  font-size: 15px;
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 26px;
  color: var(--ink);
  box-shadow: 0 4px 20px rgba(85, 176, 247, 0.05);
  transition: all 0.2s ease;
  outline: none;
}

.help-search-bar input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(85, 176, 247, 0.1);
}

.clear-search-btn {
  position: absolute;
  right: 16px;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 4px;
}

.clear-search-btn:hover {
  color: var(--ink);
  background: #f1f5f9;
}

.help-search-status {
  min-height: 20px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* 页面小节通用头部 */
.help-section {
  margin-bottom: 56px;
}

.help-section-header {
  text-align: center;
  margin-bottom: 32px;
}

.help-section-header h2 {
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin: 6px 0 8px;
}

.help-section-header p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

/* 核心特性 4 卡片 */
.help-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.help-feature-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.help-feature-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(30, 41, 59, 0.06);
}

.feature-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eaf7ff;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.help-feature-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.help-feature-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.65;
  margin: 0;
}

/* 四步流程指南 */
.help-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.help-step-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.help-feature-grid.is-search-results,
.help-steps-grid.is-search-results {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.step-badge {
  font-size: 20px;
  font-weight: 700;
  color: #8dcefa;
  font-family: Inter, monospace;
  margin-bottom: 12px;
  line-height: 1;
}

.step-item-body h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}

.step-item-body p {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* FAQ 分类切换 Tabs */
.faq-category-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.faq-tab-btn {
  background: #fff;
  border: 1px solid #dce2ed;
  color: #4b5563;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.faq-tab-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: var(--ink);
}

.faq-tab-btn.active {
  background: var(--blue-action);
  color: #fff;
  border-color: var(--blue-action);
  box-shadow: none;
}

/* FAQ 手风琴列表 */
.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
}

.faq-accordion-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-accordion-item:hover {
  border-color: #cbd5e1;
}

.faq-accordion-item.is-open {
  border-color: #8dcefa;
  box-shadow: 0 4px 18px rgba(85, 176, 247, 0.06);
}

.faq-question-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 18px 22px;
  background: transparent;
  border: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  gap: 16px;
  transition: background 0.15s ease;
}

.faq-question-btn:hover {
  background: #f8fafc;
}

.faq-question-text {
  flex: 1;
}

.faq-chevron-icon {
  color: #94a3b8;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.faq-accordion-item.is-open .faq-chevron-icon {
  color: var(--blue);
}

.faq-answer-content {
  border-top: 1px solid #f1f5f9;
  background: #fafcff;
  padding: 18px 22px;
  font-size: 14px;
  color: #475569;
  line-height: 1.75;
}

.faq-answer-inner {
  max-width: 100%;
}

.faq-empty-state {
  text-align: center;
  padding: 48px 20px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  color: #94a3b8;
}

.faq-empty-state svg {
  margin-bottom: 12px;
  color: #94a3b8;
}

.faq-empty-state h4 {
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 6px;
  font-weight: 500;
}

.faq-empty-state p {
  font-size: 13px;
  margin: 0;
}

.help-search-empty {
  max-width: 860px;
  margin: 0 auto 56px;
}

.help-search-empty .secondary-button {
  margin-top: 18px;
}

/* 底部联系卡片 Banner */
.help-contact-banner {
  background: linear-gradient(135deg, #ffffff 0%, #eaf7ff 100%);
  border: 1px solid #d4e2fc;
  border-radius: 14px;
  padding: 30px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 8px 30px rgba(85, 176, 247, 0.06);
  margin-top: 20px;
}

.contact-banner-content {
  display: flex;
  align-items: center;
  gap: 18px;
}

.contact-banner-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #fff;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(85, 176, 247, 0.12);
}

.contact-banner-content h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}

.contact-banner-content p {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.contact-banner-action {
  flex-shrink: 0;
}

/* 响应式断点 */
@media (max-width: 960px) {
  .help-feature-grid,
  .help-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .help-contact-banner {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
  }
  .contact-banner-content {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .help-feature-grid,
  .help-steps-grid {
    grid-template-columns: 1fr;
  }
  .help-hero {
    padding: 20px 10px 36px;
  }
  .faq-question-btn {
    padding: 15px 16px;
    font-size: 14px;
  }
  .faq-answer-content {
    padding: 15px 16px;
    font-size: 13.5px;
  }
}

/* ==========================================================================
   全站页脚 (Site Footer)
   ========================================================================== */

.auth-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.auth-wrapper .auth-page {
  flex: 1;
  min-height: auto;
}

.admin-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.admin-main {
  flex: 1;
}

.production-queue-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.production-queue-toolbar > strong { display:inline-flex; align-items:center; gap:8px; color:#075f9b; font-size:14px; }
.production-queue-tabs { display:flex; align-items:center; gap:8px; }
.production-queue-tabs button { border:1px solid #dce4ec; background:#fff; color:#516176; padding:8px 13px; border-radius:6px; cursor:pointer; }
.production-queue-tabs button.active { background:#0875bd; border-color:#0875bd; color:#fff; }
.production-queue-tabs strong { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:#52627a; margin-left:8px; }
.production-queue-toolbar form { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #dbe3ec; border-radius:8px; padding:5px 6px 5px 12px; }
.production-queue-toolbar input { border:0; outline:0; min-width:220px; font:inherit; }
.production-queue-list { display:grid; gap:18px; }
.production-queue-card { background:#fff; border:1px solid #dfe5ed; border-radius:12px; padding:22px; }
.production-queue-card-head { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.production-queue-card-head h3 { margin:5px 0 6px; font-size:21px; color:#172338; }
.production-queue-card-head p { margin:0; color:#607086; font-size:13px; line-height:1.55; }
.production-queue-index { font-size:12px; color:#0875bd; font-weight:700; }
.production-queue-meta { display:flex; flex-wrap:wrap; gap:8px 22px; padding:15px 0; margin:16px 0 0; border-top:1px solid #e9edf2; border-bottom:1px solid #e9edf2; color:#52627a; font-size:12px; }
.production-queue-meta span { display:inline-flex; align-items:center; gap:6px; }
.production-queue-grid { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:18px; padding-top:18px; }
.production-queue-grid section { min-width:0; }
.production-queue-grid h4 { margin:0 0 10px; font-size:13px; color:#243348; }
.production-queue-grid ul { list-style:none; margin:0; padding:0; max-height:190px; overflow:auto; }
.production-queue-grid li { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-top:1px solid #f0f2f5; font-size:12px; overflow-wrap:anywhere; }
.production-queue-grid li:first-child { border-top:0; }
.production-queue-grid li strong { font-weight:600; }
.production-queue-grid li span { color:#68768a; }
.production-queue-grid section:first-child li { display:grid; gap:3px; }
.production-queue-grid section > p,.production-instructor p { color:#69788d; font-size:12px; margin:0; }
.production-file-action { display:inline-flex; align-items:center; gap:4px; color:#0875bd; background:transparent; border:0; cursor:pointer; font-size:12px; text-align:left; }
.production-instructor { display:grid; gap:7px; font-size:12px; }
.production-instructor strong { font-size:14px; }
.production-instructor small { color:#637187; }
.production-instructor-photos { display:flex; gap:6px; overflow:auto; }
.production-instructor-photos img { width:54px; height:54px; object-fit:cover; border-radius:6px; border:1px solid #e4e8ee; }
.production-queue-more { border-top:1px solid #e9edf2; margin-top:18px; padding-top:14px; }
.production-queue-more summary { cursor:pointer; color:#0875bd; font-size:13px; font-weight:600; }
.production-queue-more-content { display:grid; grid-template-columns:220px 1fr; gap:24px; padding-top:16px; font-size:13px; }
.production-queue-more-content h4 { margin:0 0 8px; }
.production-queue-more-content p { margin:4px 0; white-space:pre-wrap; line-height:1.55; }
.production-queue-more-content section { border-top:1px solid #edf0f3; padding:10px 0; }
.production-queue-actions { display:flex; align-items:end; gap:10px; flex-wrap:wrap; border-top:1px solid #e9edf2; margin-top:18px; padding-top:16px; font-size:12px; }
.production-queue-actions label { display:grid; gap:5px; color:#52627a; }
.production-queue-actions input,.production-queue-actions textarea { border:1px solid #dce4ec; border-radius:6px; padding:8px; font:inherit; max-width:240px; }
.production-queue-actions textarea { min-width:210px; }
.production-deliverables { display:flex; flex-direction:column; align-items:start; gap:4px; max-width:220px; overflow-wrap:anywhere; }
@media (max-width:900px) { .production-queue-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:650px) { .production-queue-card-head,.production-queue-toolbar { align-items:stretch; flex-direction:column; } .production-queue-grid,.production-queue-more-content { grid-template-columns:1fr; } .production-queue-toolbar form { width:100%; } .production-queue-toolbar input { min-width:0; flex:1; } }

.site-footer {
  border-top: 1px solid rgba(226, 232, 240, 0.7);
  background: rgba(248, 249, 252, 0.6);
  backdrop-filter: blur(8px);
  padding: 16px clamp(24px, 5vw, 76px);
  margin-top: auto;
}

.site-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #94a3b8;
  letter-spacing: 0.01em;
}

.site-footer-company {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  color: #94a3b8;
}

.site-footer-dot {
  color: #cbd5e1;
  user-select: none;
}

.site-footer-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-footer-beian {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer-beian:hover {
  color: #475569;
  text-decoration: underline;
}

.site-footer-sep {
  color: #e2e8f0;
  user-select: none;
}

.site-footer-help-link {
  color: #64748b;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer-help-link:hover {
  color: var(--blue);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .site-footer {
    padding: 14px 16px;
  }
  .site-footer-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 6px;
    font-size: 11px;
  }
}
.workspace-switcher { position: relative; display: inline-flex; align-items: center; min-width: 0; color: #16243e; }
.workspace-switcher-trigger, .workspace-switcher-current { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; min-height: 36px; padding: 7px 10px; border-radius: 8px; color: #16243e; font-size: 14px; font-weight: 600; line-height: 1.3; }
.workspace-switcher-trigger { border: 1px solid transparent; background: transparent; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.workspace-switcher-trigger:hover, .workspace-switcher-trigger[aria-expanded="true"] { border-color: #d9e0ed; background: #fff; }
.workspace-switcher-trigger span, .workspace-switcher-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-switcher-trigger svg { flex: none; color: #667085; transition: transform .2s ease; }
.workspace-switcher-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.workspace-switcher-menu { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: max-content; min-width: 180px; max-width: min(280px, calc(100vw - 32px)); padding: 6px; border: 1px solid #e1e7f0; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(22,36,62,.14); }
.workspace-switcher-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: #475467; font: inherit; font-size: 13px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.workspace-switcher-menu button:hover { background: #f3f6fb; color: #17213a; }
.workspace-switcher-menu button.active { background: #eaf7ff; color: var(--blue-action); font-weight: 600; }
.org-page { min-height: 60vh; padding-top: 48px; }
.org-page > .primary-button, .org-page > .secondary-button { margin-right: 12px; margin-top: 18px; }
.org-member-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.org-member-grid span { padding: 10px 14px; border: 1px solid #dce5f1; border-radius: 9px; background: #f8fbff; }
.org-manage-shell { min-height: 100vh; }
.org-manage-topbar { justify-content: flex-start; }
.org-manage-back { display:inline-flex; align-items:center; color:#475569; font-size:14px; font-weight:600; text-decoration:none; }
.org-manage-back:hover { color:var(--blue); }
.org-inline-form { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.org-inline-form label { display: grid; gap: 6px; color: #475467; font-size: 13px; }
.org-inline-form input, .org-inline-form select, .org-invite input { min-width: 200px; padding: 10px 12px; border: 1px solid #d9e0ed; border-radius: 8px; background: white; color: #16243e; font: inherit; }
.org-inline-form button { min-height: 40px; }
.org-invite { display: flex; gap: 10px; margin-top: 16px; }
.org-invite input { flex: 1; }
.org-invite-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.org-invite-display { display: flex; align-items: center; gap: 24px; margin-top: 20px; padding: 18px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fbff; }
.org-invite-link { flex: 1; min-width: 0; }
.org-invite-link label { display: block; margin-bottom: 8px; color: #475467; font-size: 12px; font-weight: 600; }
.org-invite-link > div { display: flex; align-items: center; gap: 8px; }
.org-invite-link input { min-width: 0; flex: 1; height: 36px; padding: 8px 10px; border: 1px solid #d9e0ed; border-radius: 7px; background: #fff; color: #344054; font: inherit; font-size: 12px; }
.org-invite-link .secondary-button { flex: none; }
.org-invite-qr { display: grid; flex: none; justify-items: center; gap: 7px; color: #667085; font-size: 11px; }
.org-invite-qr img { display: block; width: 132px; height: 132px; padding: 6px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.org-invite-legacy-note { color: #8b6b32; }
.org-created-login { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.org-list-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e8edf5; }
.org-list-row > div { display: flex; gap: 8px; }
.org-audit-event { border-bottom: 1px solid #e8edf5; padding: 12px 0; }
.org-audit-event summary { cursor: pointer; }
.org-audit-event pre { max-height: 320px; overflow: auto; padding: 12px; background: #f7f9fc; border-radius: 8px; font-size: 12px; white-space: pre-wrap; }
@media (max-width: 700px) { .workspace-switcher-trigger, .workspace-switcher-current { max-width: 180px; } .org-invite, .org-list-row, .org-invite-display { flex-direction: column; align-items: stretch; } .org-invite-qr { justify-items: start; } }

.org-guest-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(70vh - 120px);
  padding: 40px 16px;
}
.org-apply-card {
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  border: 1px solid #e3e8f2;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
  padding: 40px 32px;
  text-align: center;
}
.org-apply-header {
  margin-bottom: 24px;
}
.org-apply-header .org-title {
  font-size: 24px;
  font-weight: 600;
  color: #16243e;
  letter-spacing: -0.01em;
  margin: 0;
  word-break: break-word;
}
.org-apply-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
.org-apply-actions .primary-button {
  min-width: 160px;
  height: 44px;
  font-size: 15px;
}
.org-inactive-text {
  color: #8c9ba5;
  font-size: 14px;
  margin: 0;
}

.topbar-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #eaf7ff;
  color: #0875bd;
  border: 1px solid #a7dcff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 9999px;
  margin-left: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.topbar-role-badge svg {
  color: #1684ce;
  flex-shrink: 0;
}

.primary-button:focus-visible,.secondary-button:focus-visible,.highlight-button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* 工作区数字讲师资产库与课程选择器 */
.digital-picker { margin: 20px 0; padding: 18px; border: 1px solid var(--border, #dce8f2); border-radius: 16px; background: #f8fbfe; }
.digital-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.digital-picker-help { margin: 12px 0 0; font-size: 13px; color: #64748b; }
.digital-picker-help a { color: var(--blue-dark, #167ac0); font-weight: 600; }
.digital-picker-options { display: grid; gap: 10px; max-height: 340px; overflow: auto; }
.digital-search { width: 100%; margin-bottom: 12px; }
.digital-picker-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; background: #fff; border: 1px solid #dce8f2; border-radius: 12px; cursor: pointer; }
.digital-picker-item.selected { border: 2px solid var(--blue, #55b0f7); }
.digital-picker-item:disabled { cursor: not-allowed; opacity: .62; }
.digital-picker-item img { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; }
.digital-picker-item span:nth-child(2) { flex: 1; display: grid; gap: 3px; }
.digital-picker-item small { color: #64748b; }
.digital-create-form, .digital-edit-form { display: grid; gap: 10px; margin: 12px 0; }
.digital-library-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.digital-library-heading h1 { margin-bottom: 6px; }
.digital-library-heading p { margin: 0; color: #64748b; }
.digital-library-heading-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.digital-search-toggle { white-space: nowrap; }
.digital-library-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 18px; padding: 16px; background: #f8fbff; border: 1px solid #dce8f2; border-radius: 14px; }
.digital-library-toolbar input { width: min(100%, 420px); min-width: 0; }
.digital-library-toolbar select { min-height: 42px; padding: 8px 12px; border: 1px solid #cbddea; border-radius: 8px; background: #fff; }
.digital-search-clear { border: 0; background: transparent; color: #176ca8; font-weight: 600; cursor: pointer; }
.digital-note-toggle { justify-self: start; padding: 7px 0; border: 0; background: transparent; color: #176ca8; font-weight: 600; cursor: pointer; }
.digital-note-toggle:focus-visible { outline: 3px solid #55b0f7; outline-offset: 2px; border-radius: 3px; }
@media (max-width: 600px) { .digital-library-heading-actions { width: 100%; } .digital-library-heading-actions > * { flex: 1; text-align: center; } .digital-library-toolbar input { width: 100%; } .digital-library-toolbar select { flex: 1; } }
.digital-editor-page { padding-top: 22px; }
.digital-editor-back { display: inline-flex; margin-bottom: 4px; color: #176ca8; font-weight: 600; font-size: 14px; }
.digital-editor-page .digital-create-panel { margin-bottom: 28px; }
.digital-create-panel { margin-top: 22px; padding: 28px; background: #fff; border: 1px solid #dce8f2; border-radius: 18px; box-shadow: 0 12px 32px rgba(30, 67, 110, .06); }
.digital-create-intro { display: flex; justify-content: space-between; gap: 24px; align-items: start; padding-bottom: 22px; border-bottom: 1px solid #e6edf4; }
.digital-create-eyebrow { display: inline-block; margin-bottom: 8px; color: #176ca8; font-size: 13px; font-weight: 700; }
.digital-create-intro h2 { margin: 0 0 8px; font-size: 24px; }
.digital-create-intro p { margin: 0; color: #5b6b7e; line-height: 1.6; }
.digital-close-button { border: 0; background: #f2f6fa; width: 32px; height: 32px; border-radius: 50%; font-size: 22px; color: #53687c; cursor: pointer; }
.digital-create-steps { display: grid; gap: 0; }
.digital-step { display: grid; grid-template-columns: minmax(190px, 270px) minmax(0, 1fr); gap: 28px; padding: 28px 0; border-bottom: 1px solid #e6edf4; }
.digital-step-title { display: flex; align-items: flex-start; gap: 12px; }
.digital-step-title > span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #e7f4ff; color: #176ca8; font-size: 13px; font-weight: 800; }
.digital-step-title h3 { margin: 3px 0 7px; font-size: 17px; }
.digital-step-title p { margin: 0; line-height: 1.6; color: #667789; font-size: 13px; }
.digital-step-body { display: grid; gap: 14px; min-width: 0; }
.digital-field { display: grid; gap: 7px; font-size: 14px; font-weight: 600; }
.digital-field strong { display: inline; color: #186ba5; font-size: 12px; }
.digital-field span, .digital-field-hint { color: #718195; font-size: 12px; font-weight: 400; }
.digital-field input, .digital-field textarea { width: 100%; padding: 11px 13px; border: 1px solid #cddbe8; border-radius: 9px; background: #fff; font: inherit; }
.digital-field input:disabled { background: #f8fafc; color: #64748b; border-color: #dbe4ee; cursor: not-allowed; }
.digital-field textarea { resize: vertical; }
.digital-field input[aria-invalid="true"] { border-color: #ca4a47; }
.digital-field-error { color: #bd3734; font-size: 12px; margin: -6px 0 0; }
.digital-field-hint { margin: -6px 0 0; }
.digital-guidance { background: #f5f9fd; border: 1px solid #e2edf6; border-radius: 11px; padding: 13px 16px; font-size: 13px; line-height: 1.65; }
.digital-guidance strong { color: #245a80; }
.digital-guidance ul { margin: 5px 0 0; padding-left: 18px; color: #526273; }
.digital-guide-button { margin-top: 8px; padding: 4px 0; border: 0; background: transparent; color: #176ca8; font-size: 13px; font-weight: 700; cursor: pointer; }
.digital-reading-script { padding: 16px 18px; border: 1px solid #cfe4f4; border-radius: 11px; background: #f8fcff; }
.digital-reading-script > div { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: #245a80; }
.digital-reading-script span { color: #718195; font-size: 12px; }
.digital-reading-script p { margin: 10px 0 0; color: #28394c; line-height: 1.9; }
.digital-upload-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.digital-upload-zone { display: grid; justify-items: center; gap: 5px; position: relative; padding: 23px 18px; border: 1.5px dashed #a9c9e4; border-radius: 11px; background: #fbfdff; color: #176ca8; text-align: center; cursor: pointer; }
.digital-upload-zone:hover { background: #f1f8fe; border-color: #55b0f7; }
.digital-upload-zone:focus-within { outline: 2px solid #3c96dd; outline-offset: 2px; }
.digital-upload-zone .digital-upload-icon { font-size: 25px; line-height: 1; }
.digital-upload-zone small { color: #718195; font-size: 12px; }
.digital-upload-zone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.digital-record-zone { display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 120px; padding: 15px; border: 1px solid #d9e5ef; border-radius: 11px; background: #f9fbfe; text-align: center; color: #176ca8; }
.digital-record-zone small { color: #718195; font-size: 12px; }
.digital-record-zone button { border: 1px solid #9bc4e0; border-radius: 7px; background: #fff; color: #176ca8; min-height: 34px; padding: 5px 11px; font-size: 13px; font-weight: 600; }
.digital-record-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 5px; }
.digital-record-actions span { color: #bc423e; font-weight: 700; font-size: 13px; }
.digital-record-actions .digital-record-time-ready { color: #168047; }
.digital-record-actions .digital-record-countdown { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #176ca8; color: #fff; font-size: 24px; }
.digital-photo-guide-dialog { position: relative; width: min(1120px, 100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 20px; border-radius: 14px; background: #fff; }
.digital-photo-guide-dialog h3 { margin: 0 0 5px; }
.digital-photo-guide-dialog p { margin: 0 0 16px; color: #526273; }
.digital-photo-guide-dialog img { display: block; width: 100%; height: auto; }
.digital-guide-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.digital-guide-examples > div { display: grid; gap: 5px; min-width: 0; }
.digital-guide-examples strong { color: #168047; }
.digital-guide-examples > div + div strong { color: #bd3939; }
.digital-guide-examples span { color: #526273; font-size: 13px; }
.digital-guide-example-image { width: 100%; aspect-ratio: 4 / 3; border-radius: 9px; background-image: url('/guides/digital-instructor-photo-reference.png'); background-size: 397% 244%; background-repeat: no-repeat; }
.digital-guide-example-good { background-position: 58.3% 17.5%; }
.digital-guide-example-bad { background-position: 95.2% 17.5%; }
.digital-photo-guide-dialog details { margin-top: 20px; }
.digital-photo-guide-dialog summary { color: #176ca8; font-weight: 600; cursor: pointer; }
.digital-photo-guide-dialog details img { margin-top: 12px; }
@media (max-width: 600px) { .digital-guide-examples { grid-template-columns: 1fr; } .digital-photo-guide-dialog { box-sizing: border-box; } }
.digital-upload-preview, .digital-audio-preview { border: 1px solid #e2edf6; border-radius: 11px; padding: 12px; }
.digital-preview-heading, .digital-audio-preview > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.digital-preview-heading button, .digital-audio-preview button { border: 0; background: none; color: #176ca8; cursor: pointer; }
.digital-photo-list { display: flex; gap: 10px; overflow-x: auto; padding-top: 11px; }
.digital-photo-list > div { width: 110px; flex: none; }
.digital-photo-list > div { width: 130px; }
.digital-photo-list img { display: block; width: 110px; height: 92px; object-fit: cover; border-radius: 7px; background: #eef4f8; }
.digital-photo-list img { width: 130px; height: 104px; }
.digital-photo-list .digital-photo-open { display: block; width: 130px; height: 104px; margin: 0; padding: 0; overflow: hidden; border: 1px solid #e2edf6; border-radius: 8px; background: #f5f8fb; cursor: zoom-in; }
.digital-photo-list .digital-photo-open img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.digital-photo-list .digital-photo-open:focus-visible { outline: 3px solid #55b0f7; outline-offset: 2px; }
.digital-photo-lightbox { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(9, 22, 41, .9); }
.digital-photo-lightbox-content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
.digital-photo-lightbox-content img { display: block; max-width: min(100%, 1200px); max-height: calc(100dvh - 100px); width: auto; height: auto; object-fit: contain; }
.digital-photo-lightbox-content p { margin: 12px 0 0; color: #fff; text-align: center; overflow-wrap: anywhere; }
.digital-photo-lightbox-close { position: absolute; top: 0; right: 0; transform: translate(35%, -35%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: #17233a; font-size: 28px; line-height: 1; cursor: pointer; }
.digital-photo-list span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-top: 4px; color: #667789; font-size: 11px; }
.digital-photo-list button { border: 0; background: none; color: #176ca8; padding: 3px 0; font-size: 11px; cursor: pointer; }
.digital-photo-list button + button { color: #b44c4c; margin-left: 8px; }
.digital-preview-heading span { color: #718195; font-size: 12px; }
.digital-field select { width: 100%; padding: 11px 13px; border: 1px solid #cddbe8; border-radius: 9px; background: #fff; }
.digital-audio-preview audio { display: block; width: 100%; margin-top: 10px; }
.digital-create-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; }
.digital-create-footer p { margin: 0; max-width: 620px; color: #667789; font-size: 13px; line-height: 1.55; }
.digital-create-footer > div { display: flex; gap: 10px; flex: none; }
.digital-library-empty { margin-top: 20px; padding: 42px 24px; text-align: center; background: #fff; border: 1px dashed #cbddea; border-radius: 16px; }
.digital-library-empty h2 { margin: 0 0 8px; }
.digital-library-empty p { color: #64748b; }
.digital-create-form input, .digital-create-form textarea, .digital-edit-form input, .digital-edit-form textarea, .digital-edit-form select { width: 100%; }
.digital-create-form p, .digital-edit-form p { font-size: 13px; color: #64748b; margin: 0; }
.digital-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 16px; margin-top: 22px; }
.digital-library-card { padding: 18px; border: 1px solid #dce8f2; border-radius: 16px; background: #fff; }
.digital-library-card > img { width: 100%; height: 185px; object-fit: cover; border-radius: 11px; }
.digital-asset-card { padding: 0; overflow: visible; display: flex; flex-direction: column; }
.digital-asset-photo { height: 194px; display: grid; place-items: center; overflow: hidden; border-radius: 15px 15px 0 0; background: #eff5fa; color: #7890a1; font-size: 13px; }
.digital-asset-photo img { width: 100%; height: 100%; object-fit: cover; }
.digital-asset-body { padding: 18px; display: flex; flex: 1; flex-direction: column; }
.digital-asset-title { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.digital-asset-title h2 { font-size: 18px; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.digital-state-ready, .digital-state-incomplete { flex: none; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.digital-state-ready { background: #e8f6ed; color: #27754b; }
.digital-state-incomplete { background: #fff3df; color: #9c6118; }
.digital-asset-note { min-height: 40px; line-height: 1.55; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.digital-asset-meta { margin: 3px 0; line-height: 1.5; }
.digital-asset-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; }
.digital-asset-actions .secondary-button { min-height: 38px; }
.digital-more-menu { position: relative; }
.digital-more-menu summary { list-style: none; cursor: pointer; border: 1px solid #cbddea; }
.digital-more-menu summary::-webkit-details-marker { display: none; }
.digital-more-menu > div { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 230px; padding: 7px; border: 1px solid #dce8f2; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(35, 64, 94, .16); }
.digital-more-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: 13px; }
.digital-more-menu button:hover:not(:disabled) { background: #eef7ff; }
.digital-more-menu button:disabled { color: #9aa7b4; cursor: not-allowed; }
.digital-more-menu .digital-danger-action { color: #b33e3b; }
.digital-copy-org { padding: 8px 5px; border-top: 1px solid #e9eef3; border-bottom: 1px solid #e9eef3; font-size: 12px; }
.digital-copy-org label { display: grid; gap: 5px; }
.digital-copy-org select { width: 100%; }
.digital-usage-link { display: inline-flex; align-self: start; padding: 0; border: 0; background: none; color: #176ca8; font-size: 12px; font-weight: 600; }
.digital-usage-list { display: grid; gap: 7px; padding: 10px; margin-top: 8px; border-radius: 8px; background: #f4f9fd; font-size: 12px; }
.digital-usage-list a { color: #176ca8; }
.digital-confirm-backdrop { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(20,36,54,.46); }
.digital-confirm-dialog { width: min(430px,100%); padding: 24px; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px rgba(20,36,54,.2); }
.digital-confirm-dialog h2 { margin: 0 0 10px; font-size: 20px; }
.digital-confirm-dialog p { color: #657589; line-height: 1.6; }
.digital-confirm-dialog > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.digital-danger-button { background: #b33e3b; }
.digital-library-card audio { display: block; width: 100%; margin: 10px 0; }
.digital-library-card h2 { font-size: 20px; margin: 12px 0 6px; }
.digital-library-card p { color: #64748b; font-size: 13px; }
.digital-library-card button { margin: 4px 8px 4px 0; }
.digital-library-card > button, .digital-library-card > div > button { padding: 7px 12px; border: 1px solid #cbddea; border-radius: 8px; background: #f8fbfe; cursor: pointer; }
.digital-library-card select, .digital-library-page > select { padding: 7px 10px; border: 1px solid #cbddea; border-radius: 8px; background: #fff; }
@media (max-width: 700px) { .digital-picker-head { align-items: flex-start; flex-direction: column; } .digital-picker-item { flex-wrap: wrap; } .digital-create-panel { padding: 20px; } .digital-step { grid-template-columns: 1fr; gap: 14px; padding: 23px 0; } .digital-create-footer { flex-direction: column; align-items: stretch; } .digital-create-footer > div { justify-content: flex-end; flex-wrap: wrap; } }
@media (max-width: 700px) { .digital-editor-page .digital-create-footer { position: sticky; bottom: 0; z-index: 4; margin: 0 -20px -20px; padding: 12px 20px; border-top: 1px solid #e6edf4; background: rgba(255,255,255,.97); } .digital-editor-page .digital-create-footer p { font-size: 11px; } .digital-editor-page .digital-create-footer .primary-button { flex: 1; } }
@media (max-width: 500px) { .digital-upload-actions { grid-template-columns: 1fr; } .digital-upload-zone, .digital-record-zone { min-height: 112px; } }
@media (min-width: 701px) { .digital-camera-zone { display: none; } }
@media (max-width: 700px) { .topbar { height: auto; min-height: 72px; flex-wrap: wrap; gap: 0 12px; padding: 8px 18px 0; } .topbar nav { order: 3; width: 100%; min-width: 0; height: 46px; margin-left: 0; gap: 20px; overflow-x: auto; white-space: nowrap; } .topbar nav a { flex: none; } .top-actions { gap: 5px; } .top-actions .user-link { padding: 6px; } .top-actions .user-link span { display: none; } .top-actions .points-balance-badge { padding: 5px 7px; font-size: 11px; } }