:root {
  --bg: #08090d;
  --panel: #101117;
  --soft: #171821;
  --line: rgba(255,255,255,.085);
  --text: #f5f3f9;
  --muted: #9793a2;
  --violet: #9c6dff;
  --violet-2: #6f42d9;
  --green: #7cf3b0;
  --sidebar: 248px;
  --desktop-canvas-width: 1660px;
  --desktop-canvas-height: 1038px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.ambient { position: fixed; pointer-events: none; filter: blur(100px); opacity: .19; border-radius: 50%; }
.ambient-one { width: 460px; height: 460px; background: #6d39c7; left: 20%; top: 18%; }
.ambient-two { width: 300px; height: 300px; background: #193e72; right: -80px; bottom: 5%; }
.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-weight: 800; letter-spacing: 1px; font-size: 16px; }
.brand > span:last-child > span { color: var(--violet); }
.brand-mark { width: 28px; height: 31px; position: relative; border: 2px solid #ad86ff; border-radius: 7px; transform: skewY(-8deg); box-shadow: 0 0 18px rgba(156,109,255,.22); }
.brand-mark::before, .brand-mark span { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid #ad86ff; left: 8px; top: 9px; border-radius: 50%; }
.brand-mark::after { content: ""; position: absolute; width: 2px; height: 5px; background: #ad86ff; left: 11px; top: 18px; }

/* The sign-in screen uses the same fixed desktop canvas as the management
   workbench, so it does not stretch across an ultra-wide monitor. */
.login-shell {
  position: relative;
  width: var(--desktop-canvas-width);
  max-width: none;
  height: var(--desktop-canvas-height);
  min-height: var(--desktop-canvas-height);
  margin: 28px auto;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
}
.login-panel { min-width: 0; }
.login-story { padding: 58px 7vw 54px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 66% 45%, rgba(120,75,210,.12), transparent 40%); }
.story-copy { max-width: 720px; margin: 12vh 0 8vh; }
.eyebrow, .section-label { color: #aaa1bd; font-size: 11px; letter-spacing: 2.6px; font-weight: 700; }
.eyebrow i { width: 26px; height: 1px; background: var(--violet); display: inline-block; margin: 0 9px 4px 0; }
.story-copy h1 { font-family: Georgia, "Songti SC", serif; font-weight: 400; font-size: clamp(56px, 6vw, 92px); line-height: 1.03; margin: 27px 0; letter-spacing: -3px; }
.story-copy h1 em { color: #aa82ff; font-weight: 400; }
.story-copy p { max-width: 550px; color: var(--muted); line-height: 1.9; font-size: 16px; }
.trust-row { display: flex; gap: 4vw; border-top: 1px solid var(--line); padding-top: 26px; }
.trust-row div { display: grid; gap: 6px; }
.trust-row strong { font-family: Georgia, serif; letter-spacing: 1px; font-size: 17px; }
.trust-row span { font-size: 11px; color: #777382; }
.login-panel { display: grid; place-items: center; padding: 40px; background: rgba(8,9,13,.45); backdrop-filter: blur(18px); }
.login-card { width: min(390px, 100%); }
.mobile-brand { display: none; }
.lock-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(170,125,255,.35); background: rgba(147,94,244,.08); color: #b68dff; border-radius: 14px; transform: rotate(-20deg); font-size: 28px; }
.login-card h2 { font-family: Georgia, "Songti SC", serif; font-size: 35px; font-weight: 400; margin: 27px 0 7px; }
.login-card > p { color: var(--muted); margin: 0 0 37px; font-size: 14px; }
.login-card label, .upload-meta label, .user-create-card label { display: grid; gap: 10px; color: #c4c0cb; font-size: 12px; font-weight: 600; letter-spacing: .3px; margin: 0 0 19px; }
input, textarea, select { width: 100%; border: 1px solid var(--line); background: #12131a; color: white; padding: 15px 16px; outline: none; border-radius: 7px; transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus, select:focus { border-color: rgba(166,118,255,.7); box-shadow: 0 0 0 3px rgba(156,109,255,.08); }
.primary-button { width: 100%; border: 0; border-radius: 7px; background: linear-gradient(135deg, #8d5bef, #7040cf); box-shadow: 0 12px 32px rgba(99,54,190,.26); min-height: 51px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 22px; font-weight: 700; cursor: pointer; transition: transform .2s, filter .2s; }
.primary-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.primary-button:disabled { opacity: .55; cursor: wait; transform: none; }
.primary-button b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); }
.form-error { color: #ff8b9b; font-size: 12px; min-height: 20px; padding-top: 9px; }
.demo-hint { color: #74707f; text-align: center; font-size: 11px; margin-top: 11px; }
.demo-hint button { border: 0; color: #b994ff; background: none; cursor: pointer; padding: 4px; }
.login-card small { display: block; text-align: center; color: #5f5c68; font-size: 10px; margin-top: 30px; }

.app-shell { min-height: 100vh; display: flex; position: relative; z-index: 1; }
.sidebar { width: var(--sidebar); position: fixed; inset: 0 auto 0 0; padding: 29px 22px; border-right: 1px solid var(--line); background: rgba(11,12,17,.91); backdrop-filter: blur(24px); display: flex; flex-direction: column; z-index: 20; }
.sidebar .brand { margin: 0 10px 54px; }
.sidebar nav { display: grid; gap: 7px; }
.nav-item { border: 0; background: transparent; color: #8d8997; padding: 12px 13px; display: flex; align-items: center; gap: 13px; border-radius: 8px; cursor: pointer; text-align: left; font-size: 13px; }
.nav-item span { width: 20px; color: #777280; text-align: center; font-size: 17px; }
.nav-item:hover, .nav-item.active { color: white; background: rgba(156,109,255,.11); }
.nav-item.active span { color: #ae84ff; }
.security-card { margin-top: auto; border: 1px solid rgba(94,232,153,.12); background: rgba(54,141,94,.055); padding: 13px; border-radius: 9px; display: flex; align-items: flex-start; gap: 10px; }
.pulse-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 9px rgba(124,243,176,.8); margin-top: 5px; }
.security-card strong { display: block; font-size: 11px; color: #b5dac4; margin-bottom: 5px; }
.security-card small { color: #557361; font-size: 9px; }
.logout-button { border: 0; border-top: 1px solid var(--line); background: none; color: #777380; padding: 19px 5px 0; margin-top: 18px; display: flex; justify-content: space-between; cursor: pointer; font-size: 12px; }
.logout-button:hover { color: #ddd; }
.account-button { border: 0; background: none; color: #9993a5; padding: 18px 5px 0; margin-top: 18px; display: flex; justify-content: space-between; cursor: pointer; font-size: 12px; }
.account-button:hover { color: #ddd; }
.workspace { margin-left: var(--sidebar); width: calc(100% - var(--sidebar)); min-width: 0; }
.topbar { height: 86px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 0 clamp(25px, 4.2vw, 70px); background: rgba(8,9,13,.7); backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 10; }
.search-box { width: 240px; border-bottom: 1px solid var(--line); padding: 7px 2px; color: #6c6874; display: flex; gap: 8px; }
.search-box input { border: 0; background: none; box-shadow: none; padding: 0; border-radius: 0; font-size: 12px; }
.user-chip { display: flex; gap: 10px; align-items: center; min-width: 145px; }
.user-chip > span { width: 33px; height: 33px; display: grid; place-items: center; background: linear-gradient(135deg, #9163e8, #4c2f83); border-radius: 50%; font-size: 12px; font-weight: 700; }
.user-chip div { display: grid; gap: 2px; }
.user-chip strong { font-size: 12px; }
.user-chip small { color: #77727f; font-size: 9px; }
.user-chip i { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.menu-button { display: none; }
.page { display: none; padding: 58px clamp(25px, 4.2vw, 70px) 80px; }
.page.active-page { display: block; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 45px; }
.hero-row h1 { margin: 11px 0 7px; font-family: Georgia, "Songti SC", serif; font-size: 38px; font-weight: 400; }
.hero-row p { color: var(--muted); font-size: 12px; margin: 0; }
.hero-metric { text-align: right; display: grid; }
.hero-metric strong { font: 42px Georgia, serif; color: #cdb7fb; }
.hero-metric span { color: #77727e; font-size: 10px; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.video-card { border: 1px solid var(--line); border-radius: 11px; background: rgba(17,18,25,.8); overflow: hidden; cursor: pointer; transition: transform .25s, border-color .25s; }
.video-card:hover { transform: translateY(-4px); border-color: rgba(161,116,248,.35); }
.video-cover { aspect-ratio: 16/9; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 60% 40%, rgba(160,114,255,.35), transparent 45%), linear-gradient(135deg, #1e1a29, #0a0c11); }
.video-cover.cyan { background: radial-gradient(circle at 65% 35%, rgba(66,190,210,.3), transparent 45%), linear-gradient(135deg, #12232a, #090b10); }
.video-cover.amber { background: radial-gradient(circle at 65% 40%, rgba(232,154,62,.27), transparent 45%), linear-gradient(135deg, #2a2117, #0c0c0d); }
.video-cover.rose { background: radial-gradient(circle at 62% 37%, rgba(226,81,131,.27), transparent 45%), linear-gradient(135deg, #281722, #0c0c0e); }
.video-cover::before { content: ""; width: 53%; height: 53%; border: 1px solid rgba(255,255,255,.06); transform: rotate(30deg); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.012), 0 0 0 60px rgba(255,255,255,.009); }
.play-button { position: absolute; width: 51px; height: 51px; border-radius: 50%; display: grid; place-items: center; padding-left: 3px; color: white; border: 1px solid rgba(255,255,255,.32); background: rgba(10,10,14,.55); backdrop-filter: blur(8px); font-size: 16px; }
.cover-lock { position: absolute; right: 13px; top: 13px; font-size: 9px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(0,0,0,.35); color: #c9c5ce; }
.video-meta { padding: 17px 18px; }
.video-meta h3 { font-size: 14px; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-meta p { color: #77737f; font-size: 10px; margin: 0 0 16px; min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-meta footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; color: #605d68; font-size: 9px; }
.video-meta footer span:last-child { color: #8e71c7; }
.video-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.video-package, .video-delete { min-width: 0; padding: 8px 6px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 10px; text-align: center; text-decoration: none; }
.video-package { border: 1px solid rgba(103,126,255,.25); background: rgba(103,126,255,.07); color: #9aabff; }
.video-package:hover { color: #d5dcff; border-color: rgba(103,126,255,.55); }
.video-local-status { display: grid; place-items: center; padding: 8px 6px; border: 1px solid rgba(84,217,154,.25); border-radius: 6px; background: rgba(84,217,154,.06); color: #7fe0ad; font-size: 10px; }
.video-delete { border: 1px solid rgba(255,120,140,.15); background: rgba(255,90,120,.04); color: #a9757f; }
.video-delete:hover { color: #ff9aaa; border-color: rgba(255,120,140,.35); }
.video-delete:disabled { opacity: .45; cursor: wait; }
.empty-state { text-align: center; border: 1px dashed var(--line); padding: 70px 20px; border-radius: 12px; color: #77727e; }
.empty-state > span { font-size: 40px; color: #7855b6; }
.empty-state h3 { color: #d5d1da; font-weight: 500; }
.empty-state p { font-size: 12px; }

.upload-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; }
.drop-zone, .upload-meta { min-height: 420px; border: 1px solid var(--line); background: rgba(17,18,25,.74); border-radius: 12px; }
.drop-zone { border-style: dashed; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, background .2s; }
.drop-zone.dragging { border-color: var(--violet); background: rgba(156,109,255,.07); }
.drop-zone input { display: none; }
.upload-glyph { width: 55px; height: 55px; border: 1px solid rgba(162,114,255,.3); background: rgba(156,109,255,.08); border-radius: 50%; display: grid; place-items: center; color: #af86ff; font-size: 24px; }
.drop-zone h3 { font: 22px Georgia, serif; margin: 21px 0 7px; }
.drop-zone p, .drop-zone small { color: #797582; font-size: 11px; }
.drop-zone small { margin-top: 22px; color: #55525c; }
.upload-meta { padding: 30px; }
.upload-meta h3 { font: 21px Georgia, serif; margin: 0 0 27px; }
.upload-meta textarea { min-height: 90px; resize: vertical; }
.selected-file { font-size: 11px; color: #aaa4b2; padding: 11px; background: rgba(255,255,255,.03); border-radius: 7px; margin-bottom: 15px; }
.progress { height: 3px; background: #282531; margin-top: 15px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 25%; background: var(--violet); animation: progress 1.4s infinite ease-in-out; }
@keyframes progress { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
.audit-card { border: 1px solid var(--line); background: rgba(17,18,25,.75); border-radius: 11px; overflow: hidden; }
.audit-item { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 13px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.audit-item:last-child { border-bottom: 0; }
.audit-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(156,109,255,.09); color: #a67df7; display: grid; place-items: center; }
.audit-item strong { display: block; font-size: 12px; margin-bottom: 4px; }
.audit-item p, .audit-item time { margin: 0; color: #716d79; font-size: 10px; }
.users-layout { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(420px,1.28fr); gap: 28px; align-items: start; }
.user-create-card, .user-list-card { border: 1px solid var(--line); background: rgba(17,18,25,.75); border-radius: 11px; padding: 28px; }
.user-create-card h3, .user-list-head h3 { font: 21px Georgia, serif; margin: 0 0 25px; }
.permanent-access-control, .grant-permanent-control { display: inline-flex; align-items: center; gap: 6px; color: #b9a6e9; font-size: 11px; cursor: pointer; }
.permanent-access-control input, .grant-permanent-control input { width: auto; accent-color: #9064f6; }
.credential-result { margin-top: 20px; padding: 16px; border: 1px solid rgba(124,243,176,.18); background: rgba(54,141,94,.07); border-radius: 8px; display: grid; gap: 8px; }
.credential-result small { color: #719581; }
.credential-result strong { font-size: 14px; }
.credential-result code { color: #d7c3ff; word-break: break-all; }
.credential-result button, .user-actions button { border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #aaa4b2; border-radius: 5px; padding: 7px 9px; cursor: pointer; font-size: 10px; }
.user-list-card { padding: 0; overflow: hidden; }
.user-list-head { padding: 25px 25px 18px; display: flex; justify-content: space-between; }
.user-list-head h3 { margin: 0; }
.user-list-head span { color: #a985f1; }
.user-row { display: grid; grid-template-columns: 36px minmax(120px,1fr) auto auto; gap: 12px; align-items: center; padding: 15px 22px; border-top: 1px solid var(--line); }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(156,109,255,.12); color: #b991ff; font-size: 11px; }
.user-row div > strong, .user-row div > small { display: block; }
.user-row div > strong { font-size: 12px; margin-bottom: 3px; }
.user-row div > small, .user-row time { color: #716d79; font-size: 9px; }
.user-display-name { color: #cbb5ff; font-weight: 500; }
.user-display-name.empty { color: #777180; font-weight: 400; }
.user-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.user-actions select { width: 148px; padding: 7px 8px; font-size: 10px; }
.user-actions input[type="number"] { width: 62px; padding: 7px 8px; font-size: 10px; }
.user-note-control { display: inline-flex; align-items: center; gap: 5px; color: #8f8999; font-size: 11px; white-space: nowrap; }
.user-note-control input { width: 116px; padding: 7px 8px; font-size: 11px; }
.device-limit-control { display: inline-flex; align-items: center; gap: 5px; color: #8f8999; font-size: 11px; white-space: nowrap; }
.user-actions button:last-child { color: #b87783; }
.user-actions [data-delete-user] { border-color: rgba(217,117,131,.4); background: rgba(217,117,131,.07); color: #e19aa5; }
.user-manage-button { border: 1px solid rgba(156,109,255,.32); border-radius: 7px; background: rgba(156,109,255,.1); color: #cbb5ff; padding: 9px 12px; cursor: pointer; font-size: 11px; white-space: nowrap; }
.user-manage-button:hover { background: rgba(156,109,255,.2); color: #f0eaff; }
.user-manage-button span { margin-left: 5px; }
.user-actions button:disabled { opacity: .35; cursor: default; }
.course-list { display: grid; }
.course-row { padding: 20px 24px; border-top: 1px solid var(--line); }
.course-row-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.course-row-head strong, .course-row-head small { display: block; }
.course-row-head strong { font-size: 14px; }
.course-row-head small { color: #74707f; font-size: 10px; margin-top: 5px; }
.course-row-head > span { color: #a985f1; font-size: 10px; white-space: nowrap; }
.category-video-list { display: grid; gap: 8px; margin: 16px 0; }
.category-order-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 12px 0 -7px; color: #837c8d; font-size: 10px; }
.category-order-toolbar button { border: 1px solid rgba(156,109,255,.42); border-radius: 6px; background: rgba(156,109,255,.13); color: #d7c6ff; padding: 6px 9px; cursor: pointer; font-size: 10px; }
.category-order-toolbar button:hover { background: rgba(156,109,255,.23); }
.category-video-item { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.02); }
.category-video-index { color: #847c91; font-size: 10px; text-align: center; }
.category-video-info { min-width: 0; display: grid; gap: 4px; }
.category-video-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-video-item small { color: var(--muted); }
.category-video-actions { display: flex; align-items: center; gap: 6px; }
.category-video-actions button { width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.035); color: #d4c1ff; cursor: pointer; font-size: 14px; line-height: 1; }
.category-video-actions button:hover { background: rgba(156,109,255,.18); color: #fff; }
.category-video-actions button:disabled { opacity: .28; cursor: default; }
.category-video-actions > span { color: #78e1af; font-size: 11px; white-space: nowrap; margin-left: 5px; }
.empty-list, .muted-note { color: #77727f; padding: 28px; text-align: center; font-size: 11px; }
.course-workbench { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.course-tree-panel, .course-manager-panel { border: 1px solid var(--line); border-radius: 12px; background: rgba(18,19,27,.72); }
.course-tree-panel { padding: 18px 12px; position: sticky; top: 94px; }
.course-tree-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; padding: 2px 8px 15px; border-bottom: 1px solid var(--line); }
.course-tree-head .section-label { font-size: 8px; }
.course-tree-head h3, .course-toolbar h3 { margin: 6px 0 0; font: 20px Georgia, serif; font-weight: 400; }
.course-tree-head > span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(156,109,255,.12); color: #c3a7ff; font-size: 10px; }
.course-category-tree { display: grid; gap: 4px; margin-top: 13px; }
.course-category-create { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-bottom: 8px; }
.course-category-create input { min-width: 0; padding: 8px 9px; font-size: 11px; }
.course-category-create button { border: 1px solid rgba(156,109,255,.42); border-radius: 6px; background: rgba(156,109,255,.13); color: #d7c6ff; padding: 8px 9px; cursor: pointer; font-size: 10px; white-space: nowrap; }
.course-category-create button:hover { background: rgba(156,109,255,.23); }
.course-tree-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 7px; padding: 10px 9px; color: #aaa5b4; background: transparent; cursor: pointer; text-align: left; font-size: 11px; }
.course-tree-item:hover { background: rgba(255,255,255,.035); color: #ece8f1; }
.course-tree-item.active { background: rgba(120,91,220,.2); color: #e5dbff; }
.course-tree-item b { min-width: 20px; text-align: center; color: #807b8a; font-size: 10px; font-weight: 500; }
.course-tree-item.active b { color: #c8b5ff; }
.course-category-delete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 7px 4px 0; color: #958fa0; font-size: 10px; }
.course-category-delete button { border: 1px solid rgba(255,118,142,.42); border-radius: 6px; background: rgba(255,118,142,.08); color: #ffb6c4; padding: 5px 7px; cursor: pointer; font-size: 10px; }
.course-category-delete button:hover { background: rgba(255,118,142,.16); color: #ffd5dc; }
.course-tree-tip { margin: 18px 8px 2px; color: #6e6977; font-size: 9px; line-height: 1.7; }
.course-manager-panel { overflow: hidden; }
.course-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 18px; padding: 24px 25px 20px; border-bottom: 1px solid var(--line); }
.course-toolbar-title { display: flex; align-items: center; gap: 10px; }
.course-toolbar-title > span { min-width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgba(156,109,255,.12); color: #c8b1ff; font-size: 11px; }
.course-toolbar p { color: #77727f; font-size: 10px; margin: 7px 0 0; }
.course-search-box { width: min(260px, 40vw); display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.1); color: #8f899a; }
.course-search-box input { min-width: 0; border: 0; background: transparent; padding: 10px 0; font-size: 11px; }
.course-search-box input:focus { outline: 0; }
.course-rows { display: grid; }
.course-list-row { border-top: 1px solid var(--line); }
.course-row-summary { display: grid; grid-template-columns: 31px minmax(180px,1fr) 60px; gap: 12px; align-items: center; padding: 15px 24px; }
.course-list-row:hover .course-row-summary { background: rgba(255,255,255,.012); }
.course-list-row.expanded .course-row-summary { background: rgba(156,109,255,.045); }
.course-order { color: #716b79; font-size: 10px; }
.course-main { min-width: 0; }
.course-title-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.course-title-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.course-main p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #77717e; font-size: 9px; margin: 5px 0 0; }
.course-row-stats { display: grid; text-align: center; color: #77717f; }
.course-row-stats b { color: #c6afff; font-size: 12px; }
.course-row-stats span { font-size: 8px; margin-top: 1px; }
.course-open-button b { margin-left: 2px; }
.course-row-detail { padding: 18px 24px 22px 97px; border-top: 1px solid rgba(156,109,255,.13); background: rgba(0,0,0,.08); }
.course-detail-head { display: flex; justify-content: space-between; gap: 14px; align-items: end; }
.course-detail-head h4 { margin: 5px 0 0; font: 16px Georgia, serif; font-weight: 400; }
.course-detail-head > span { color: #88818f; font-size: 9px; white-space: nowrap; }
.device-row { grid-template-columns: 36px minmax(180px,1fr) auto minmax(220px,auto); }
.device-status { border-radius: 20px; padding: 6px 9px; font-size: 9px; background: rgba(255,255,255,.05); color: #aaa4b2; }
.device-status.active { background: rgba(84,217,154,.09); color: #6ee4aa; }
.device-status.revoked { background: rgba(255,182,91,.08); color: #e8ad66; }
.device-status.blacklisted { background: rgba(255,93,120,.09); color: #ed788b; }
.registration-list:empty { display: none; }
.registration-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 22px; border-top: 1px solid rgba(156,109,255,.2); background: rgba(156,109,255,.045); }
.registration-row strong, .registration-row small { display: block; }
.registration-row strong { font-size: 12px; }
.registration-row small { color: #77717f; font-size: 9px; margin-top: 4px; }
.registration-row button { border: 1px solid rgba(124,243,176,.2); background: rgba(54,141,94,.08); color: #8edbb0; border-radius: 6px; padding: 8px 10px; cursor: pointer; font-size: 10px; }

.modal { position: fixed; inset: 0; z-index: 100; background: rgba(2,3,6,.9); backdrop-filter: blur(17px); display: grid; place-items: center; padding: 30px; }
.player-shell { width: min(1080px, 100%); }
.password-shell { width: min(440px, 100%); border: 1px solid var(--line); border-radius: 13px; background: #11121a; padding: 27px; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.password-head { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.password-head h2 { font: 26px Georgia, serif; font-weight: 400; margin: 9px 0 6px; }
.password-head p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 0; }
.password-head button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: #191a23; cursor: pointer; font-size: 20px; }
.password-shell label { display: grid; gap: 9px; color: #c4c0cb; font-size: 12px; font-weight: 600; margin: 0 0 17px; }
.player-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }
.player-head h2 { font: 25px Georgia, serif; font-weight: 400; margin: 7px 0 0; }
.live-badge { color: #9b8fac; font-size: 9px; letter-spacing: 2px; }
.live-badge i { display: inline-block; width: 6px; height: 6px; background: var(--green); border-radius: 50%; margin: 0 6px 1px 0; box-shadow: 0 0 9px var(--green); }
.player-head button { border: 1px solid var(--line); background: #12131a; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; font-size: 23px; }
.video-frame { aspect-ratio: 16/9; background: #020203; border: 1px solid rgba(255,255,255,.1); position: relative; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.video-frame video { width: 100%; height: 100%; object-fit: contain; }
.watermark { position: absolute; z-index: 3; pointer-events: none; opacity: .38; color: white; text-shadow: 0 1px 3px #000; display: grid; font-size: clamp(11px, 1.2vw, 16px); transition: left 1.2s ease, top 1.2s ease; }
.watermark span, .watermark small { font-size: .67em; letter-spacing: 1px; }
.player-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; background: #050508; color: #85808e; font-size: 11px; }
.player-loading span { width: 31px; height: 31px; border: 2px solid #24212c; border-top-color: #a97cff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.player-foot { display: flex; justify-content: space-between; align-items: center; color: #77717f; font-size: 9px; padding: 13px 3px; letter-spacing: .4px; }
.player-foot span:first-child { color: #8eaf9c; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #28232f; border: 1px solid rgba(180,141,255,.3); box-shadow: 0 15px 45px rgba(0,0,0,.4); padding: 12px 17px; border-radius: 8px; z-index: 200; font-size: 12px; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 120; background: rgba(3,4,8,.58); backdrop-filter: blur(3px); }
.user-drawer { position: fixed; z-index: 121; top: 0; right: 0; width: min(540px, 100vw); height: 100vh; overflow-y: auto; background: #11121a; border-left: 1px solid rgba(173,134,255,.25); box-shadow: -22px 0 70px rgba(0,0,0,.42); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(105%); transition: transform .24s ease, opacity .16s ease, visibility 0s linear .24s; }
.user-drawer.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition: transform .24s ease, opacity .16s ease; }
.user-drawer-head { display: flex; justify-content: space-between; gap: 20px; padding: 31px 32px 25px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 100% 0, rgba(125,83,222,.18), transparent 45%); }
.user-drawer-head h2 { margin: 9px 0 6px; font: 26px Georgia, "Songti SC", serif; font-weight: 400; }
.user-drawer-head p { margin: 0; color: #8c8695; font-size: 11px; }
.user-drawer-head button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.03); color: #d1cadc; cursor: pointer; font-size: 21px; }
.user-drawer-body { padding: 8px 32px 36px; }
.drawer-section { padding: 23px 0; border-bottom: 1px solid var(--line); }
.drawer-section h3, .drawer-danger-zone h3 { margin: 0 0 15px; font-size: 14px; font-weight: 700; }
.drawer-section > label, .drawer-inline > label { display: grid; gap: 7px; color: #aaa4b2; font-size: 11px; }
.drawer-section select { margin-bottom: 11px; }
.drawer-inline { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; }
.drawer-inline > label { flex: 1 1 170px; }
.drawer-inline input { padding: 10px 11px; }
.drawer-inline button, .drawer-secondary-button { border: 1px solid rgba(156,109,255,.3); border-radius: 6px; background: rgba(156,109,255,.09); color: #cdb8ff; padding: 10px 11px; cursor: pointer; font-size: 11px; white-space: nowrap; }
.drawer-inline button:hover, .drawer-secondary-button:hover { background: rgba(156,109,255,.19); }
.drawer-grant-row { display: grid; grid-template-columns: minmax(100px, 1fr) auto auto; align-items: end; gap: 9px; width: 100%; }
.drawer-grant-row > label:first-child { min-width: 0; max-width: none; }
.drawer-grant-row > label.grant-permanent-control { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: 42px; color: #b9a6e9; white-space: nowrap; }
.drawer-grant-row > button { height: 42px; }
.drawer-secondary-button { margin-top: 12px; width: 100%; }
.drawer-secondary-button:disabled, .drawer-inline button:disabled { opacity: .4; cursor: default; }
.granted-course-list { margin-top: 21px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 16px; }
.granted-course-list h4 { margin: 0 0 9px; color: #aaa4b2; font-size: 11px; font-weight: 600; }
.granted-course-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.055); }
.granted-course-row:first-of-type { border-top: 0; }
.granted-course-row strong, .granted-course-row small { display: block; }
.granted-course-row strong { font-size: 12px; }
.granted-course-row small { margin-top: 3px; color: #797482; font-size: 10px; }
.granted-course-actions { display: flex; align-items: center; justify-content: end; gap: 6px; flex-wrap: wrap; }
.granted-course-row button { border: 1px solid rgba(232,133,149,.27); border-radius: 6px; background: rgba(210,81,105,.06); color: #e4a2ad; padding: 7px 9px; cursor: pointer; font-size: 10px; white-space: nowrap; }
.granted-course-row button:hover { background: rgba(210,81,105,.14); }
.granted-course-row [data-cancel-course-permanent] { border-color: rgba(156,109,255,.32); background: rgba(156,109,255,.08); color: #cfbaff; }
.granted-course-row [data-cancel-course-permanent]:hover { background: rgba(156,109,255,.17); }
.drawer-empty-course { margin: 0; color: #77717e; font-size: 11px; }
.account-permanent-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(156,109,255,.18); border-radius: 7px; background: rgba(156,109,255,.045); }
.account-permanent-control span { color: #a993db; font-size: 11px; }
.account-permanent-control button { border: 1px solid rgba(232,133,149,.27); border-radius: 6px; background: rgba(210,81,105,.06); color: #e4a2ad; padding: 8px 9px; cursor: pointer; font-size: 10px; white-space: nowrap; }
.account-permanent-control button:hover { background: rgba(210,81,105,.14); }
.drawer-course-summary p { margin: 0 0 14px; color: #8f8998; font-size: 11px; line-height: 1.7; }
.drawer-course-summary p strong { color: #cfbaff; font-size: 14px; }
.drawer-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer-section-title > span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(156,109,255,.13); color: #cdb7ff; font-size: 11px; }
.course-drawer-backdrop { z-index: 130; }
.course-authorization-drawer { z-index: 131; right: 540px; border-left-color: rgba(134,185,255,.28); }
.course-authorize-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 10px; }
.course-authorize-toolbar label { display: inline-flex; align-items: center; gap: 7px; color: #d1c2f6; cursor: pointer; font-size: 11px; }
.course-authorize-toolbar input, .course-authorize-option input { width: auto; accent-color: #9364ef; }
.course-authorize-toolbar small { color: #77717e; font-size: 10px; }
.course-authorize-list { max-height: 310px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.12); }
.course-authorize-option { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-top: 1px solid rgba(255,255,255,.055); cursor: pointer; }
.course-authorize-option:first-child { border-top: 0; }
.course-authorize-option:hover { background: rgba(156,109,255,.06); }
.course-authorize-option.authorized { background: rgba(84,217,154,.035); }
.course-authorize-option span { min-width: 0; }
.course-authorize-option strong, .course-authorize-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-authorize-option strong { font-size: 12px; }
.course-authorize-option small { margin-top: 3px; color: #77717e; font-size: 10px; }
.drawer-danger-zone { margin-top: 25px; padding: 18px; border: 1px solid rgba(230,112,132,.22); border-radius: 9px; background: rgba(172,67,89,.06); }
.drawer-danger-zone h3 { color: #e0a0ac; }
.drawer-danger-zone p { margin: 0 0 14px; color: #9c7f87; font-size: 11px; line-height: 1.7; }
.drawer-danger-zone > div { display: flex; gap: 9px; flex-wrap: wrap; }
.drawer-danger-zone button { border: 1px solid rgba(229,115,137,.36); border-radius: 6px; background: rgba(217,76,105,.08); color: #ecabb7; padding: 10px 11px; cursor: pointer; font-size: 11px; }
.drawer-danger-zone button:hover { background: rgba(217,76,105,.16); }

/* Readable desktop scale: this is an admin tool, so labels and actions stay legible at normal Windows scaling. */
body, body * { font-family: "Microsoft YaHei", "微软雅黑", system-ui, sans-serif !important; }
body { font-size: 15px; }
.eyebrow, .section-label { font-size: 12px; }
.trust-row span, .security-card strong, .hero-row p, .video-meta p, .drop-zone p, .drop-zone small, .selected-file, .audit-item p, .audit-item time, .user-row div > small, .user-row time, .course-main p, .course-tree-tip, .course-toolbar p, .course-detail-head > span, .player-foot { font-size: 12px; }
.login-card label, .upload-meta label, .user-create-card label, .password-shell label { font-size: 14px; }
.demo-hint, .login-card small, .security-card small, .user-chip small, .hero-metric span, .cover-lock, .video-meta footer, .video-package, .video-delete, .video-local-status, .course-tree-head > span, .course-tree-item b, .course-order, .course-row-stats span, .device-status, .registration-row small, .registration-row button, .live-badge { font-size: 11px; }
.nav-item { font-size: 14px; }
.search-box input, .user-chip strong, .video-meta h3, .audit-item strong, .user-row div > strong, .course-title-line strong, .course-row-stats b, .registration-row strong { font-size: 14px; }
.user-actions select, .user-actions input[type="number"], .credential-result button, .user-actions button, .course-tree-item, .course-search-box input, .empty-list, .muted-note, .player-loading, .toast { font-size: 12px; }
.course-row-summary { padding-top: 17px; padding-bottom: 17px; }

@media (max-width: 1000px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upload-layout { grid-template-columns: 1fr; }
  .users-layout { grid-template-columns: 1fr; }
  .course-workbench { grid-template-columns: 1fr; }
  .course-tree-panel { position: static; }
  .course-category-tree { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .course-tree-tip { display: none; }
  .drop-zone { min-height: 300px; }
}
@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-story { display: none; }
  .login-panel { min-height: 100vh; padding: 28px; }
  .mobile-brand { display: inline-flex; margin-bottom: 60px; }
  .sidebar { transform: translateX(-100%); transition: transform .25s; }
  .sidebar.open { transform: translateX(0); box-shadow: 30px 0 80px rgba(0,0,0,.7); }
  .workspace { margin-left: 0; width: 100%; }
  .menu-button { display: block; border: 0; background: none; font-size: 20px; margin-right: auto; }
  .topbar { height: 70px; padding: 0 20px; }
  .search-box { display: none; }
  .page { padding: 37px 20px 60px; }
  .hero-row { align-items: flex-start; }
  .hero-metric { display: none; }
  .video-grid { grid-template-columns: 1fr; }
  .course-toolbar { align-items: stretch; flex-direction: column; padding: 20px; }
  .course-search-box { width: 100%; }
  .course-category-tree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-row-summary { grid-template-columns: 26px minmax(0,1fr) 46px; gap: 8px; padding: 14px; }
  .course-row-detail { padding: 15px 14px 20px; }
  .course-detail-head { align-items: start; }
  .course-detail-head > span { text-align: right; }
  .modal { padding: 12px; }
  .player-foot p { display: none; }
}

/* Admin is a fixed desktop workbench, not a responsive page. It is rendered
   as a 1660 × 1038 canvas instead of expanding to fill a large monitor. Long
   pages scroll inside the work area, while the left navigation stays visible. */
.app-shell.admin-desktop {
  width: var(--desktop-canvas-width);
  min-width: var(--desktop-canvas-width);
  height: var(--desktop-canvas-height);
  min-height: var(--desktop-canvas-height);
  margin: 28px auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
}
.app-shell.admin-desktop .sidebar {
  position: relative;
  inset: auto;
  flex: 0 0 var(--sidebar);
  width: var(--sidebar);
  height: var(--desktop-canvas-height);
}
.app-shell.admin-desktop .workspace {
  flex: 1 1 auto;
  width: auto;
  margin-left: 0;
  height: var(--desktop-canvas-height);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
@media (max-width: 1000px) {
  .app-shell.admin-desktop .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-shell.admin-desktop .upload-layout { grid-template-columns: 1.15fr .85fr; }
  .app-shell.admin-desktop .users-layout { grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr); }
  .app-shell.admin-desktop .course-workbench { grid-template-columns: 230px minmax(0, 1fr); }
  .app-shell.admin-desktop .course-tree-panel { position: sticky; top: 94px; }
  .app-shell.admin-desktop .course-category-tree { grid-template-columns: 1fr; }
  .app-shell.admin-desktop .course-tree-tip { display: block; }
  .app-shell.admin-desktop .drop-zone { min-height: 420px; }
}
@media (max-width: 760px) {
  .app-shell.admin-desktop .sidebar { transform: none; box-shadow: none; }
  .app-shell.admin-desktop .workspace { margin-left: var(--sidebar); width: calc(100% - var(--sidebar)); }
  .app-shell.admin-desktop .menu-button { display: none; }
  .app-shell.admin-desktop .topbar { height: 86px; padding: 0 clamp(25px, 4.2vw, 70px); }
  .app-shell.admin-desktop .search-box { display: flex; }
  .app-shell.admin-desktop .page { padding: 58px clamp(25px, 4.2vw, 70px) 80px; }
  .app-shell.admin-desktop .hero-metric { display: grid; }
  .app-shell.admin-desktop .course-toolbar { align-items: end; flex-direction: row; padding: 24px 25px 20px; }
  .app-shell.admin-desktop .course-search-box { width: min(260px, 40vw); }
  .app-shell.admin-desktop .course-category-tree { grid-template-columns: 1fr; }
  .app-shell.admin-desktop .course-row-summary { grid-template-columns: 31px minmax(180px, 1fr) 60px; gap: 12px; padding: 17px 24px; }
  .app-shell.admin-desktop .course-row-detail { padding: 18px 24px 22px 97px; }
  .app-shell.admin-desktop .course-detail-head { align-items: end; }
  .app-shell.admin-desktop .course-detail-head > span { text-align: left; }
}