:root {
  color-scheme: dark;
  --bg: #060a12;
  --panel: rgba(12, 20, 34, 0.78);
  --panel-strong: rgba(16, 27, 46, 0.94);
  --line: rgba(148, 163, 184, 0.18);
  --text: #eef6ff;
  --muted: #8ea1b8;
  --blue: #2f83ff;
  --cyan: #35d4ff;
  --violet: #8b5cf6;
  --green: #35e5a5;
  --danger: #ff5d78;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); letter-spacing: 0; }
button, input, textarea { font: inherit; }
button { color: inherit; border: 0; cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shell-bg { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 10% 0%, rgba(47, 131, 255, .24), transparent 35%), radial-gradient(circle at 80% 12%, rgba(139, 92, 246, .2), transparent 34%), linear-gradient(135deg, #06111f, #05070d 42%, #0a1220); }
.app-shell { position: relative; display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; animation: pageIn .7s cubic-bezier(.2,.8,.2,1); }
.app-shell.no-enter { animation: none; }
.app-shell.no-enter .tag-card,
.app-shell.no-enter .input-panel,
.app-shell.no-enter .result-shell,
.app-shell.no-enter .upload-section,
.app-shell.no-enter .favorite-card { animation: none; }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; border-right: 1px solid var(--line); background: rgba(4, 10, 19, .62); backdrop-filter: blur(22px); display: flex; flex-direction: column; gap: 26px; }
.brand { display: flex; gap: 13px; align-items: center; }
.brand > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #bda2ff; background: linear-gradient(135deg, rgba(53, 212, 255, .16), rgba(139, 92, 246, .26)); box-shadow: inset 0 0 0 1px var(--line); }
.brand strong { display: block; font-size: 22px; }
.brand small, .quota small { color: var(--muted); }
.side-nav { display: grid; gap: 10px; }
.side-nav button, .account button, .toolbar button, .generator-bar button, .input-panel button, .result-shell button, .favorite-card button, .favorites-empty button { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 11px 13px; background: rgba(255,255,255,.045); color: var(--muted); transition: transform .2s, background .2s, color .2s, box-shadow .2s; }
.side-nav button.active, .side-nav button:hover, .account button:hover, .toolbar button:hover, .generator-bar button:hover, .input-panel button:hover, .result-shell button:hover, .favorite-card button:hover, .favorites-empty button:hover { color: var(--text); background: linear-gradient(135deg, rgba(47,131,255,.22), rgba(139,92,246,.15)); box-shadow: inset 0 0 0 1px rgba(53,212,255,.18); transform: translateY(-1px); }
.quota { margin-top: auto; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); }
.quota span { color: var(--muted); }
.quota strong { display: block; margin: 10px 0; }
.quota div { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.quota i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }

.workspace { min-width: 0; padding: 16px 22px 80px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7, 13, 24, .74); backdrop-filter: blur(20px); box-shadow: var(--shadow); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 8px; background: transparent; color: var(--muted); transition: color .2s, background .2s; }
.tabs button.active { color: white; background: rgba(255,255,255,.055); }
.tabs button.active::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.account { display: flex; align-items: center; gap: 12px; color: var(--muted); }

.tool-page { max-width: 1240px; margin: 0 auto; }
.tool-heading { padding: 28px 4px; text-align: center; }
.tool-heading h1 { margin: 0 0 10px; font-size: clamp(26px, 4vw, 38px); }
.tool-heading p { margin: 0; color: var(--muted); }
.toolbar { display: grid; grid-template-columns: 1fr auto; gap: 14px; margin-bottom: 16px; }
.search-box { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.045); color: var(--muted); }
.search-box.wide { max-width: 620px; margin: 0 auto 24px; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.search-jump-highlight { position: relative; border-color: rgba(53,212,255,.82) !important; box-shadow: 0 0 0 4px rgba(53,212,255,.12), 0 16px 36px rgba(47,131,255,.22) !important; animation: jumpGlow 1.3s ease both; }
@keyframes jumpGlow { 0% { transform: scale(.985); } 35% { transform: scale(1.025); } 100% { transform: none; } }
.card-grid, .split-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0; }
.tag-card, .input-panel, .result-shell, .upload-section { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 14px 44px rgba(0,0,0,.22); backdrop-filter: blur(18px); animation: cardIn .55s both; animation-delay: var(--delay, 0ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.tag-card { padding: 18px; min-height: 220px; }
.tag-card header, .result-shell header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.tag-card h3, .result-shell h2, .input-panel h2 { margin: 0; font-size: 18px; }
.result-shell h2 { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.source-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; }
.source-badge.api { color: #b9ffe6; background: rgba(53, 229, 165, .12); border: 1px solid rgba(53, 229, 165, .34); }
.source-badge.error { color: #ffd3db; background: rgba(255, 93, 120, .12); border: 1px solid rgba(255, 93, 120, .34); }
.result-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.tag-card header button, .tag-card header span { color: #b99dff; background: transparent; padding: 4px; font-size: 13px; }
.tag-list { display: grid; gap: 8px; max-height: 245px; overflow: auto; padding-right: 4px; }
.tag-list.compact { display: flex; flex-wrap: wrap; }
.check-chip, .pill { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid rgba(148,163,184,.16); border-radius: 8px; background: rgba(255,255,255,.04); color: #cbd7e8; transition: transform .16s, border .16s, background .16s; }
.check-chip:hover, .pill:hover { transform: translateY(-1px); border-color: rgba(53,212,255,.45); }
.check-chip.active, .pill.active, .prompt-card.active { background: linear-gradient(135deg, rgba(47,131,255,.24), rgba(139,92,246,.18)); border-color: rgba(53,212,255,.5); color: white; }
.check-chip input, .prompt-card input { accent-color: var(--blue); }
.scene-tag-list { max-height: 280px; }
.scene-chip { align-items: flex-start; }
.scene-chip span { font-weight: 650; line-height: 1.35; }
.scene-chip em { margin-left: auto; color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.35; text-align: right; }
.scene-chip.active em { color: #d9e7ff; }
.pill { display: inline-flex; }
.generator-bar { position: sticky; bottom: 16px; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,13,24,.82); backdrop-filter: blur(18px); }
.primary-btn { justify-content: center; color: white !important; background: linear-gradient(135deg, var(--blue), var(--violet)) !important; box-shadow: 0 14px 40px rgba(47,131,255,.28) !important; }
.primary-btn:active, button:active { transform: scale(.98); }
.music-input-panel { margin-top: 22px; }
.composer-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.composer-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.composer-head span { color: var(--muted); font-size: 13px; }
.music-generate-center, .image-generate-center { display: grid; justify-items: center; gap: 10px; margin: 18px 0 24px; text-align: center; color: var(--muted); }
.music-generate-center .primary-btn, .image-generate-center .primary-btn { min-width: 230px; width: auto; padding: 14px 22px; border-radius: 999px; }
.music-generate-center p, .image-generate-center p { margin: 0; font-size: 13px; }
.scene-generate-center .primary-btn { min-width: 280px; }
.music-results { display: grid; gap: 18px; margin-bottom: 26px; }
.music-result .result-body { min-height: 92px; align-content: start; }
.music-result:first-child .result-body { background: rgba(53, 212, 255, .08); border-color: rgba(53, 212, 255, .24); }
.music-result:last-child .result-body { background: rgba(236, 72, 153, .07); border-color: rgba(236, 72, 153, .22); }
.lyrics-mode-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 18px; }
.lyrics-mode-row button { padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid rgba(148,163,184,.12); }
.lyrics-mode-row button.active { color: #fff; border-color: rgba(53,212,255,.52); background: linear-gradient(135deg, rgba(47,131,255,.32), rgba(139,92,246,.24)); box-shadow: 0 12px 30px rgba(47,131,255,.16); }
.lyrics-panel { margin-top: 0; }
.lyrics-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.lyrics-form-grid label, .lyrics-wide-label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.lyrics-form-grid input, .lyrics-form-grid select { width: 100%; border: 1px solid rgba(148,163,184,.18); border-radius: 8px; background: rgba(255,255,255,.05); color: var(--text); outline: 0; padding: 11px 12px; }
.lyrics-form-grid select option { background: #0b1220; color: var(--text); }
.lyrics-wide-label textarea { min-height: 96px; }
.lyrics-generate-center .primary-btn { min-width: 220px; }
.lyrics-results { display: grid; gap: 16px; margin-bottom: 28px; }
.lyrics-results .result-shell:nth-child(2) .result-body,
.lyrics-results .result-shell:nth-child(3) .result-body { align-content: start; min-height: 220px; }
.favorites-list { display: grid; gap: 16px; margin-bottom: 30px; }
.favorite-card { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 14px 44px rgba(0,0,0,.22); animation: cardIn .45s both; }
.favorite-card header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.favorite-title-wrap { min-width: 0; flex: 1; }
.favorite-card strong { display: block; font-size: 17px; }
.favorite-card span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
.favorite-title-input { width: min(420px, 100%); border: 1px solid rgba(53,212,255,.46); border-radius: 8px; background: rgba(255,255,255,.06); color: var(--text); outline: 0; padding: 9px 10px; font-weight: 700; box-shadow: 0 0 0 4px rgba(53,212,255,.08); }
.favorite-card pre { min-height: 110px; white-space: pre-wrap; word-break: break-word; margin: 0; padding: 16px; border: 1px solid rgba(148,163,184,.14); border-radius: 10px; background: rgba(2,8,17,.42); color: #dcecff; line-height: 1.7; }
.favorites-empty { display: grid; justify-items: center; gap: 12px; }
.favorites-empty strong { color: var(--text); }
.favorites-empty span { color: var(--muted); }

.locked-preview { display: grid; grid-template-columns: 1fr 460px; gap: 18px; filter: saturate(.86); }
.preview-result { padding-top: 90px; }
.modal-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(2,6,13,.48); backdrop-filter: blur(6px); }
.login-card { position: relative; width: min(430px, 100%); padding: 32px; border: 1px solid rgba(110,168,255,.36); border-radius: 12px; background: linear-gradient(145deg, rgba(13,23,40,.96), rgba(19,31,52,.92)); box-shadow: 0 30px 120px rgba(0,0,0,.55); animation: modalIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
.modal-icon { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; color: white; background: radial-gradient(circle, rgba(139,92,246,.35), rgba(47,131,255,.16)); border: 1px solid rgba(53,212,255,.36); }
.login-card h2, .login-card p { text-align: center; margin: 0; }
.login-card p { margin: 8px 0 22px; color: var(--muted); }
.login-card label { display: grid; gap: 8px; margin: 14px 0; color: #c9d7ec; }
.login-card input, .input-panel textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.04); color: var(--text); outline: 0; padding: 14px; transition: border .2s, box-shadow .2s; }
.login-card input:focus, .input-panel textarea:focus { border-color: rgba(53,212,255,.6); box-shadow: 0 0 0 4px rgba(53,212,255,.09); }
.login-card small { display: block; margin-top: 14px; text-align: center; color: var(--muted); }
.error-msg, .loading-msg { padding: 12px; margin-bottom: 12px; border-radius: 8px; text-align: center; }
.error-msg { color: #ffd3db; background: rgba(255,93,120,.12); }
.loading-msg { color: #bfefff; background: rgba(53,212,255,.1); }
.spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid rgba(255,255,255,.22); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

.upload-section { min-height: 180px; display: grid; place-items: center; margin-bottom: 24px; border-style: dashed; text-align: center; transition: border-color .22s, background .22s, transform .22s; }
.upload-section.has-image { gap: 12px; padding: 18px; }
.upload-section.drag-over { border-color: rgba(53,212,255,.72); background: rgba(53,212,255,.08); transform: translateY(-1px); }
.upload-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload-placeholder { display: grid; place-items: center; gap: 9px; color: var(--muted); cursor: pointer; width: 100%; min-height: 180px; padding: 22px; }
.upload-placeholder svg { width: 42px; height: 42px; }
.upload-placeholder strong { color: var(--text); }
.upload-pick, .upload-actions button { border-radius: 8px; padding: 10px 18px; background: linear-gradient(135deg, var(--blue), var(--violet)); color: #fff; }
.upload-pick { display: inline-flex; align-items: center; justify-content: center; }
.upload-section img { position: relative; z-index: 1; max-height: 280px; max-width: min(100%, 620px); border-radius: 10px; box-shadow: var(--shadow); }
.upload-actions { position: relative; z-index: 2; display: flex; gap: 10px; margin-top: 0; justify-content: center; }
.upload-actions button:disabled { cursor: wait; opacity: .62; }
.input-panel { padding: 22px; margin-bottom: 22px; }
.input-panel p, .input-panel span { color: var(--muted); }
.input-panel textarea { min-height: 120px; resize: vertical; margin: 14px 0; }
.input-panel div { display: flex; flex-wrap: wrap; gap: 10px; }
.result-panel { display: grid; gap: 14px; }
.image-result-panel { margin-bottom: 26px; }
.result-shell { padding: 18px; }
.result-body { min-height: 190px; display: grid; align-content: center; border: 1px solid rgba(148,163,184,.14); border-radius: 10px; background: rgba(2,8,17,.42); padding: 18px; }
.result-body pre { white-space: pre-wrap; word-break: break-word; margin: 0; color: #dcecff; line-height: 1.7; }
.result-body.loading { text-align: center; justify-items: center; }
.orb-loader { width: 86px; height: 86px; border-radius: 50%; border: 2px solid rgba(53,212,255,.22); box-shadow: inset 0 0 24px rgba(47,131,255,.22), 0 0 34px rgba(139,92,246,.25); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); box-shadow: inset 0 0 34px rgba(47,131,255,.38), 0 0 44px rgba(139,92,246,.38); } }
.result-body ol { display: flex; gap: 24px; padding: 0; margin: 14px 0 0; color: var(--muted); list-style: none; }
.category-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.category-tabs button { padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--muted); }
.category-tabs button.active { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #06111f; }
.prompt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.prompt-card { min-height: 112px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.04); transition: transform .2s, border .2s, background .2s; }
.prompt-card:hover { transform: translateY(-2px); border-color: rgba(53,212,255,.42); }
.prompt-card strong, .prompt-card em, .prompt-card span { display: block; margin-left: 28px; }
.prompt-card em { margin-top: 6px; color: #b9c9db; }
.prompt-card span { margin-top: 8px; color: var(--muted); font-size: 13px; }
.scene-results { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.empty-state { grid-column: 1/-1; padding: 30px; text-align: center; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 70; padding: 13px 16px; border: 1px solid rgba(53,212,255,.34); border-radius: 10px; background: rgba(8,20,36,.92); box-shadow: var(--shadow); animation: toastIn .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quota { display: none; }
  .locked-preview, .scene-results { grid-template-columns: 1fr; }
  .preview-result { padding-top: 0; }
  .card-grid, .prompt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .workspace { padding: 12px 12px 90px; }
  .topbar, .toolbar, .generator-bar { align-items: stretch; flex-direction: column; display: flex; }
  .tabs { display: grid; grid-template-columns: 1fr; width: 100%; }
  .account { justify-content: space-between; }
  .side-nav, .card-grid, .split-grid, .prompt-grid { grid-template-columns: 1fr; }
  .lyrics-form-grid { grid-template-columns: 1fr; }
  .sidebar { padding: 18px 14px; }
  .brand strong { font-size: 19px; }
  .tool-heading { padding: 22px 0; text-align: left; }
  .login-card { padding: 24px; }
  .result-body ol { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 上传记录：公共提示词共享 */
.upload-record-form { margin-bottom: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 14px 44px rgba(0,0,0,.18); }
.upload-record-form-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.upload-record-form-head strong { display: block; font-size: 17px; }
.upload-record-form-head span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
.upload-record-form-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); gap: 14px; }
.upload-record-form label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.upload-record-form input, .upload-record-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.04); color: var(--text); outline: 0; padding: 12px 13px; }
.upload-record-form input:focus, .upload-record-form textarea:focus { border-color: rgba(53,212,255,.6); box-shadow: 0 0 0 4px rgba(53,212,255,.08); }
.upload-record-content-label { margin-top: 14px; }
.upload-record-form textarea { min-height: 150px; resize: vertical; line-height: 1.65; }
.upload-record-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.upload-record-submit-row > span { color: var(--muted); font-size: 13px; }
.upload-record-submit-row .primary-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; justify-content: center; }

.upload-record-share-btn {
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(111, 167, 255, .28);
  border-radius: 10px;
  background: linear-gradient(135deg, #2f83ff 0%, #6d67ff 56%, #8b5cf6 100%) !important;
  box-shadow: 0 10px 28px rgba(47,131,255,.22), inset 0 1px 0 rgba(255,255,255,.14) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.upload-record-share-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 14px 34px rgba(47,131,255,.30), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.upload-record-share-btn:disabled { opacity: .58; cursor: not-allowed; }

.upload-record-favorite-btn,
.upload-record-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid rgba(104, 145, 198, .30);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(25,39,62,.86), rgba(13,24,41,.92));
  color: #b8c8dc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.16);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.upload-record-favorite-btn:hover,
.upload-record-copy-btn:hover {
  color: #eef6ff;
  border-color: rgba(53,212,255,.46);
  background: linear-gradient(135deg, rgba(47,131,255,.18), rgba(139,92,246,.14));
  box-shadow: inset 0 0 0 1px rgba(53,212,255,.08), 0 10px 26px rgba(47,131,255,.15);
  transform: translateY(-1px);
}
.upload-record-favorite-btn svg, .upload-record-copy-btn svg, .upload-record-share-btn svg { width: 16px; height: 16px; }

.upload-record-tool-picker { position: relative; width: 100%; }
.upload-record-tool-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 43px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(180deg, rgba(20,32,53,.96), rgba(12,22,39,.96)); color: var(--text); text-align: left; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.upload-record-tool-trigger:hover, .upload-record-tool-picker.open .upload-record-tool-trigger { border-color: rgba(53,212,255,.55); background: linear-gradient(180deg, rgba(24,39,64,.98), rgba(13,25,44,.98)); box-shadow: 0 0 0 3px rgba(53,212,255,.07); }
.upload-record-tool-trigger i { width: 8px; height: 8px; border-right: 2px solid #a8bad1; border-bottom: 2px solid #a8bad1; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.upload-record-tool-picker.open .upload-record-tool-trigger i { transform: rotate(225deg) translate(-1px,-1px); }
.upload-record-tool-menu { position: absolute; z-index: 40; top: calc(100% + 7px); left: 0; right: 0; display: grid; gap: 4px; padding: 7px; border: 1px solid rgba(70,105,146,.48); border-radius: 10px; background: rgba(8,17,31,.985); box-shadow: 0 18px 55px rgba(0,0,0,.48), 0 0 0 1px rgba(53,212,255,.035); backdrop-filter: blur(16px); }
.upload-record-tool-menu button { width: 100%; padding: 10px 11px; border: 0; border-radius: 7px; background: transparent; color: #c9d7e9; text-align: left; font-size: 13px; transition: background .16s ease, color .16s ease, transform .16s ease; }
.upload-record-tool-menu button:hover { background: rgba(53,212,255,.09); color: #f0f7ff; transform: translateX(2px); }
.upload-record-tool-menu button.selected { background: linear-gradient(90deg, rgba(50,133,255,.18), rgba(125,85,255,.16)); color: #fff; box-shadow: inset 2px 0 0 rgba(53,212,255,.75); }

.upload-record-list-toolbar { display: grid; grid-template-columns: 1fr minmax(280px, 420px); align-items: center; gap: 18px; margin: 4px 0 14px; }
.upload-record-list-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; }
.upload-record-list-head strong { font-size: 16px; }
.upload-record-list-head span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.upload-record-search { display: flex; align-items: center; gap: 9px; width: 100%; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.035); color: var(--muted); transition: border-color .18s ease, box-shadow .18s ease; }
.upload-record-search:focus-within { border-color: rgba(53,212,255,.58); box-shadow: 0 0 0 4px rgba(53,212,255,.07); }
.upload-record-search svg { width: 17px; height: 17px; flex: 0 0 auto; stroke: #7690ae; }
.upload-record-search input { width: 100%; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.upload-record-search input::placeholder { color: #60758f; }
.upload-record-search input::-webkit-search-cancel-button { filter: invert(.75); cursor: pointer; }

.upload-record-list { display: grid; gap: 16px; margin-bottom: 30px; }
.upload-record-card { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 14px 44px rgba(0,0,0,.18); animation: cardIn .35s both; }
.upload-record-card header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.upload-record-title-wrap { min-width: 0; flex: 1; }
.upload-record-title-wrap strong { display: block; font-size: 17px; }
.upload-record-title-wrap span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
.upload-record-card pre { min-height: 76px; white-space: pre-wrap; word-break: break-word; margin: 0; padding: 16px; border: 1px solid rgba(148,163,184,.14); border-radius: 10px; background: rgba(2,8,17,.42); color: #dcecff; line-height: 1.7; }
.upload-record-empty { display: grid; justify-items: center; gap: 10px; }
.upload-record-empty strong { color: var(--text); }
.upload-record-empty span { color: var(--muted); }

@media (max-width: 900px) {
  .upload-record-list-toolbar { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .upload-record-form-grid { grid-template-columns: 1fr; }
  .upload-record-submit-row, .upload-record-card header { align-items: stretch; flex-direction: column; }
  .upload-record-submit-row .primary-btn { width: 100%; }
  .upload-record-list-head { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* 歌曲检测：酷狗 TOP100 */
.song-detection-page { max-width: 1320px; }
.song-detection-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, rgba(20,38,64,.82), rgba(17,18,42,.78)); box-shadow: 0 18px 50px rgba(0,0,0,.2); }
.song-detection-update { display: grid; gap: 4px; min-width: 0; }
.song-detection-update > span { color: var(--muted); font-size: 12px; }
.song-detection-update > strong { font-size: 18px; }
.song-detection-update > small { color: #8fa7c2; font-size: 13px; }
.song-auto-schedule { display: grid; justify-items: end; gap: 4px; min-width: 210px; text-align: right; }
.song-auto-schedule > span { color: var(--muted); font-size: 12px; }
.song-auto-schedule > strong { color: #dbeafe; font-size: 17px; }
.song-auto-schedule > small { color: #8fa7c2; font-size: 12px; }

.song-stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.song-stat-card { position: relative; overflow: hidden; width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: rgba(12,20,34,.76); color: inherit; text-align: left; cursor: pointer; box-shadow: 0 12px 36px rgba(0,0,0,.15); transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.song-stat-card:hover { transform: translateY(-2px); border-color: rgba(96,165,250,.42); background: rgba(18,31,52,.9); }
.song-stat-card.active { border-color: rgba(96,165,250,.72); background: linear-gradient(145deg, rgba(34,69,116,.88), rgba(27,26,69,.88)); box-shadow: 0 0 0 3px rgba(59,130,246,.08), 0 18px 42px rgba(0,0,0,.24); }
.song-stat-card::after { content: ""; position: absolute; inset: auto -24px -34px auto; width: 88px; height: 88px; border-radius: 50%; background: rgba(94,143,255,.08); filter: blur(2px); }
.song-stat-card span { display: block; color: var(--muted); font-size: 12px; }
.song-stat-card strong { display: block; margin-top: 8px; font-size: 27px; letter-spacing: -.03em; }
.song-stat-card small { display: block; margin-top: 7px; color: #7087a2; font-size: 11px; }
.song-stat-card.active small { color: #9fc5ff; }
.song-stat-card.new strong { color: #7dd3fc; }
.song-stat-card.up strong { color: #6ee7b7; }
.song-stat-card.down strong { color: #fda4af; }
.song-stat-card.dropped strong { color: #f0abfc; }

.song-detection-toolbar { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(340px, .78fr); gap: 14px; align-items: end; margin-bottom: 16px; }
.song-detection-search { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); color: var(--muted); transition: border-color .18s ease, box-shadow .18s ease; }
.song-detection-search:focus-within { border-color: rgba(53,212,255,.55); box-shadow: 0 0 0 4px rgba(53,212,255,.07); }
.song-detection-search svg { flex: 0 0 auto; stroke: #7891ae; }
.song-detection-search input { width: 100%; height: 42px; border: 0; outline: 0; background: transparent; color: var(--text); }
.song-detection-search input::placeholder { color: #627995; }
.song-history-select-wrap { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.song-history-select-wrap select { width: 100%; min-height: 44px; padding: 0 38px 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #0d1828; color: #dbe8f6; }
.song-history-select-wrap select:focus { border-color: rgba(53,212,255,.55); box-shadow: 0 0 0 4px rgba(53,212,255,.07); }

.song-rank-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 4px 0 11px; }
.song-rank-section-head > div { display: flex; align-items: baseline; gap: 12px; }
.song-rank-section-head strong { font-size: 16px; }
.song-rank-section-head span, .song-rank-section-head small { color: var(--muted); font-size: 12px; }
.song-rank-table { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(8,15,27,.72); box-shadow: 0 16px 44px rgba(0,0,0,.18); }
.song-rank-row { display: grid; grid-template-columns: 78px minmax(210px, 1.55fr) minmax(150px, 1fr) 76px 140px 86px 110px; gap: 14px; align-items: center; min-height: 58px; padding: 10px 16px; border-top: 1px solid rgba(148,163,184,.11); }
.song-rank-row:first-child { border-top: 0; }
.song-rank-header { min-height: 46px; border-top: 0; background: rgba(54,83,124,.14); color: #7f95b1; font-size: 12px; }
.song-rank-row strong, .song-rank-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-rank-row strong { color: #eef6ff; font-size: 14px; }
.song-rank-row > span { color: #a6b8cd; font-size: 13px; }
.song-rank-number { font-size: 17px !important; font-weight: 800; color: #dbeafe !important; font-variant-numeric: tabular-nums; }
.song-rank-status { display: inline-flex !important; align-items: center; justify-content: center; width: max-content; min-width: 84px; max-width: 100%; padding: 6px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 12px !important; line-height: 1; }
.song-rank-status.new { color: #a5e7ff !important; border-color: rgba(56,189,248,.28); background: rgba(56,189,248,.11); }
.song-rank-status.up { color: #8cf2c8 !important; border-color: rgba(52,211,153,.28); background: rgba(52,211,153,.1); }
.song-rank-status.down { color: #ffb0bd !important; border-color: rgba(251,113,133,.3); background: rgba(251,113,133,.1); }
.song-rank-status.same { color: #aebed1 !important; border-color: rgba(148,163,184,.2); background: rgba(148,163,184,.08); }
.song-rank-status.dropped { min-width: 74px; color: #f2b8ff !important; border-color: rgba(217,70,239,.26); background: rgba(217,70,239,.1); }
.song-rank-no-results { padding: 24px 16px; color: var(--muted); text-align: center; font-size: 13px; }
.song-play-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 11px; border: 1px solid rgba(52,211,153,.28); border-radius: 9px; background: rgba(16,82,67,.28); color: #9cebc9; font-size: 12px; white-space: nowrap; text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.song-play-btn:hover:not(.disabled) { transform: translateY(-1px); border-color: rgba(52,211,153,.58); background: rgba(20,104,83,.4); }
.song-play-btn.disabled { cursor: default; opacity: .48; }
.song-lyric-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 11px; border: 1px solid rgba(96,165,250,.28); border-radius: 9px; background: rgba(30,58,95,.42); color: #b9d8ff; font-size: 12px; white-space: nowrap; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.song-lyric-btn:hover { transform: translateY(-1px); border-color: rgba(96,165,250,.58); background: rgba(37,78,129,.58); }
.song-lyric-btn svg { width: 14px; height: 14px; }

.song-lyric-modal { position: fixed; inset: 0; z-index: 2200; display: grid; place-items: center; padding: 22px; background: rgba(1,7,17,.72); backdrop-filter: blur(10px); }
.song-lyric-dialog { width: min(760px, 94vw); max-height: min(760px, 88vh); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid rgba(99,130,173,.35); border-radius: 16px; background: linear-gradient(160deg, rgba(10,21,37,.98), rgba(10,13,30,.98)); box-shadow: 0 28px 90px rgba(0,0,0,.48); }
.song-lyric-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid rgba(148,163,184,.13); }
.song-lyric-dialog header > div { display: grid; gap: 5px; min-width: 0; }
.song-lyric-dialog header strong { overflow: hidden; color: #f2f7ff; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.song-lyric-dialog header span { color: #8399b4; font-size: 12px; }
.song-lyric-close { width: 34px; height: 34px; border: 1px solid rgba(148,163,184,.18); border-radius: 9px; background: rgba(255,255,255,.035); color: #aebed1; font-size: 22px; line-height: 1; }
.song-lyric-body { min-height: 260px; overflow: auto; padding: 20px; }
.song-lyric-body pre { margin: 0; white-space: pre-wrap; word-break: break-word; color: #dbe8f6; font-family: inherit; font-size: 14px; line-height: 1.9; }
.song-lyric-loading { min-height: 280px; display: grid; place-items: center; align-content: center; gap: 12px; color: #a8bad0; }
.song-lyric-dialog footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid rgba(148,163,184,.13); background: rgba(255,255,255,.018); }
.song-lyric-dialog footer > button { min-height: 38px; padding: 0 15px; border-radius: 9px; }


.song-dropped-section { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(11,18,31,.65); }
.song-dropped-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; background: rgba(255,255,255,.025); color: #dbe7f5; text-align: left; }
.song-dropped-toggle > span { display: flex; align-items: center; gap: 10px; }
.song-dropped-toggle small { padding: 3px 7px; border-radius: 999px; background: rgba(217,70,239,.1); color: #d8a9e4; }
.song-dropped-toggle i { color: var(--muted); font-style: normal; font-size: 12px; }
.song-dropped-list { display: grid; }
.song-dropped-row { display: grid; grid-template-columns: 70px minmax(220px,1.5fr) minmax(160px,1fr) 120px; gap: 14px; align-items: center; min-height: 54px; padding: 10px 16px; border-top: 1px solid rgba(148,163,184,.1); }
.song-dropped-row strong, .song-dropped-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-dropped-row > span { color: #a7b8cc; font-size: 13px; }
.song-dropped-row small { color: var(--muted); text-align: right; }
.song-detection-loading, .song-detection-empty { display: grid; justify-items: center; gap: 10px; padding: 50px 24px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,17,29,.64); color: var(--muted); text-align: center; }
.song-detection-loading strong, .song-detection-empty strong { color: var(--text); }

@media (max-width: 1180px) {
  .song-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .song-rank-row { grid-template-columns: 66px minmax(170px,1.45fr) minmax(130px,1fr) 70px 122px 82px 104px; gap: 10px; }
}

@media (max-width: 820px) {
  .song-detection-hero { align-items: stretch; flex-direction: column; }
  .song-auto-schedule { justify-items: start; text-align: left; }
  .song-detection-toolbar { grid-template-columns: 1fr; }
  .song-rank-table { overflow-x: auto; }
  .song-rank-row { min-width: 960px; }
  .song-dropped-row { grid-template-columns: 60px minmax(180px,1.5fr) minmax(130px,1fr) 110px; min-width: 620px; }
  .song-dropped-list { overflow-x: auto; }
}

@media (max-width: 560px) {
  .song-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .song-stat-card strong { font-size: 23px; }
  .song-rank-section-head { align-items: flex-start; flex-direction: column; }
  .song-rank-section-head > div { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* =========================================================
   课程下载 / 课程管理后台
========================================================= */
.course-download-page { max-width: 1460px; }
.course-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 34px; align-items: center; min-height: 290px; padding: 34px 38px; margin: 8px 0 20px; border: 1px solid rgba(92,150,255,.24); border-radius: 24px; background: radial-gradient(circle at 78% 14%, rgba(139,92,246,.24), transparent 28%), radial-gradient(circle at 10% 92%, rgba(53,212,255,.13), transparent 34%), linear-gradient(145deg, rgba(10,20,36,.96), rgba(7,12,24,.9)); box-shadow: 0 26px 80px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.05); }
.course-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.025) 48%, transparent 55%); }
.course-hero-copy { position: relative; z-index: 1; }
.course-kicker { display: inline-flex; align-items:center; gap:8px; margin-bottom:14px; color:#7ce3ff; font-size:12px; letter-spacing:.18em; font-weight:800; }
.course-hero h1 { margin:0; font-size:clamp(34px,5vw,58px); line-height:1.05; letter-spacing:-.04em; background:linear-gradient(110deg,#fff,#bdeeff 42%,#c6b3ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.course-hero p { max-width:820px; margin:18px 0 0; color:#a9bad0; line-height:1.8; font-size:15px; }
.course-hero-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:24px; }
.course-search { flex:1; min-width:300px; max-width:620px; display:flex; align-items:center; gap:10px; height:50px; padding:0 15px; border:1px solid rgba(116,169,255,.22); border-radius:14px; background:rgba(3,9,19,.5); color:#8099b8; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.course-search:focus-within { border-color:rgba(53,212,255,.48); box-shadow:0 0 0 4px rgba(53,212,255,.07); }
.course-search input { width:100%; border:0; outline:0; background:transparent; color:var(--text); }
.course-admin-entry { display:inline-flex; align-items:center; gap:9px; height:50px; padding:0 18px; border:1px solid rgba(139,92,246,.35); border-radius:14px; color:#f3edff; background:linear-gradient(135deg,rgba(47,131,255,.22),rgba(139,92,246,.26)); box-shadow:0 12px 34px rgba(59,73,210,.15); }
.course-hero-orbit { position:relative; width:190px; height:190px; margin:auto; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(86,198,255,.16); background:radial-gradient(circle,rgba(61,128,255,.16),rgba(20,31,55,.05) 60%,transparent 61%); box-shadow:0 0 80px rgba(84,102,255,.15); }
.course-hero-orbit::before,.course-hero-orbit::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(144,116,255,.16); }
.course-hero-orbit::before { inset:24px; }
.course-hero-orbit::after { inset:52px; }
.course-hero-orbit strong { position:relative; z-index:2; display:grid; place-items:center; width:74px; height:74px; border-radius:22px; color:white; background:linear-gradient(145deg,rgba(47,131,255,.8),rgba(139,92,246,.78)); box-shadow:0 18px 55px rgba(90,82,230,.42), inset 0 1px rgba(255,255,255,.22); }
.course-hero-orbit strong svg { width:34px; height:34px; }
.course-hero-orbit i { position:absolute; width:8px; height:8px; border-radius:50%; background:#7bdcff; box-shadow:0 0 18px #53cfff; }
.course-hero-orbit i:nth-child(1) { top:18px; left:50%; }
.course-hero-orbit i:nth-child(2) { bottom:35px; left:14px; background:#a88bff; }
.course-hero-orbit i:nth-child(3) { right:20px; top:58%; background:#66f0bf; }
.course-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
.course-stat { position:relative; overflow:hidden; padding:18px 20px; border:1px solid rgba(148,163,184,.15); border-radius:16px; background:linear-gradient(160deg,rgba(15,27,45,.84),rgba(9,16,29,.76)); box-shadow:0 16px 42px rgba(0,0,0,.18); }
.course-stat::after { content:""; position:absolute; right:-28px; top:-32px; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle,rgba(71,144,255,.17),transparent 67%); }
.course-stat span,.course-stat small { display:block; color:var(--muted); }
.course-stat strong { display:block; margin:7px 0 5px; font-size:30px; letter-spacing:-.04em; }
.course-stat small { font-size:12px; }
.course-latest-section { margin-bottom:24px; }
.course-section-title { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:12px; }
.course-section-title span { color:#6fdcff; font-size:11px; font-weight:800; letter-spacing:.18em; }
.course-section-title h2 { margin:4px 0 0; font-size:22px; }
.course-section-title small { color:var(--muted); }
.course-latest-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.course-latest-card { min-width:0; text-align:left; padding:15px; border:1px solid rgba(148,163,184,.14); border-radius:15px; background:rgba(13,23,39,.72); transition:.2s ease; }
.course-latest-card:hover { transform:translateY(-2px); border-color:rgba(53,212,255,.34); background:linear-gradient(145deg,rgba(23,45,72,.86),rgba(24,23,55,.78)); }
.course-latest-card div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.course-latest-card div span { padding:3px 7px; border-radius:999px; color:#c6f7ff; background:rgba(53,212,255,.11); font-size:10px; font-weight:800; letter-spacing:.08em; }
.course-latest-card small,.course-latest-card em { color:var(--muted); font-size:11px; font-style:normal; }
.course-latest-card strong { display:block; margin:12px 0 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.course-viewbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:18px 0 14px; }
.course-viewbar > span { color:var(--muted); font-size:13px; }
.course-view-switch { display:inline-flex; padding:4px; border:1px solid rgba(148,163,184,.16); border-radius:12px; background:rgba(5,11,21,.58); }
.course-view-switch button { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 14px; border-radius:9px; background:transparent; color:var(--muted); }
.course-view-switch button.active { color:white; background:linear-gradient(135deg,rgba(47,131,255,.28),rgba(139,92,246,.24)); box-shadow:inset 0 0 0 1px rgba(86,179,255,.16); }
.course-loading,.course-empty,.course-no-match { display:grid; place-items:center; gap:10px; min-height:180px; padding:30px; border:1px dashed rgba(148,163,184,.2); border-radius:18px; color:var(--muted); background:rgba(10,18,31,.52); }
.course-mindmap-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; }
.course-mindmap { position:relative; min-height:620px; overflow:auto; padding:26px; border:1px solid rgba(111,151,220,.17); border-radius:20px; background:radial-gradient(circle at 10% 10%,rgba(47,131,255,.1),transparent 28%), linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px), rgba(6,12,23,.72); background-size:auto,28px 28px,28px 28px,auto; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.course-mindmap-root { position:sticky; left:0; z-index:3; display:flex; align-items:center; gap:12px; width:max-content; min-width:250px; padding:14px 16px; margin:0 0 18px; border:1px solid rgba(53,212,255,.36); border-radius:15px; background:linear-gradient(135deg,rgba(26,73,120,.9),rgba(53,34,105,.9)); box-shadow:0 16px 42px rgba(29,75,162,.2); }
.course-mindmap-root > span { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.1); color:#93e9ff; }
.course-mindmap-root small { display:block; margin-bottom:3px; color:#8fcfe4; font-size:9px; letter-spacing:.15em; }
.course-mindmap-root strong { font-size:15px; }
.course-mindmap-branches { min-width:720px; display:grid; gap:12px; }
.course-mind-branch { position:relative; margin-left:0; }
.course-mind-node-shell { position:relative; display:flex; align-items:center; width:max-content; max-width:540px; }
.course-mind-node { position:relative; display:grid; grid-template-columns:auto minmax(150px,1fr) auto; align-items:center; gap:11px; min-width:310px; max-width:540px; padding:11px 12px; text-align:left; border:1px solid rgba(148,163,184,.16); border-radius:13px; background:rgba(12,22,38,.92); box-shadow:0 10px 30px rgba(0,0,0,.18); transition:.18s ease; }
.course-mind-node:hover,.course-mind-node.selected { transform:translateX(2px); border-color:rgba(73,196,255,.48); background:linear-gradient(135deg,rgba(23,49,78,.96),rgba(30,28,65,.93)); box-shadow:0 14px 34px rgba(24,76,157,.18),0 0 0 3px rgba(53,212,255,.045); }
.course-mind-node.resource { border-left:3px solid rgba(53,229,165,.6); }
.course-mind-node.group { border-left:3px solid rgba(70,157,255,.72); }
.course-mind-node.note { border-left:3px solid rgba(174,135,255,.6); }
.course-node-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#8bdfff; background:rgba(47,131,255,.12); }
.course-node-copy { min-width:0; }
.course-node-copy strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.course-node-copy small { display:block; margin-top:4px; color:#7f93ad; font-size:10px; }
.course-node-badges { display:flex; gap:5px; }
.course-node-badges i { padding:3px 6px; border-radius:999px; color:#ffdba0; background:rgba(245,166,35,.12); font-size:9px; font-style:normal; font-weight:800; }
.course-node-badges i.new { color:#aaf7d7; background:rgba(53,229,165,.11); }
.course-mind-toggle { display:grid; place-items:center; flex:0 0 auto; width:24px; height:24px; margin-left:7px; padding:0; border-radius:7px; color:#8aa4c2; background:#0c1728; border:1px solid rgba(148,163,184,.16); transition:.18s ease; }
.course-mind-toggle:hover { color:#c8f4ff; border-color:rgba(73,196,255,.4); background:rgba(20,37,61,.96); }
.course-mind-toggle svg { display:block; width:14px; height:14px; transform:rotate(-90deg); transform-origin:50% 50%; transition:transform .18s ease; }
.course-mind-toggle.expanded { color:#8ee8ff; }
.course-mind-toggle.expanded svg { transform:rotate(0deg); }
.course-mind-children { position:relative; display:grid; gap:9px; margin:9px 0 0 44px; padding-left:28px; }
.course-mind-children::before { content:""; position:absolute; left:8px; top:-9px; bottom:15px; width:1px; background:linear-gradient(#3a72a9,rgba(77,107,147,.16)); }
.course-mind-children > .course-mind-branch::before { content:""; position:absolute; left:-20px; top:23px; width:20px; height:1px; background:#3a72a9; }
.course-detail-panel { position:sticky; top:92px; min-height:480px; overflow:hidden; padding:24px; border:1px solid rgba(117,154,221,.18); border-radius:20px; background:linear-gradient(160deg,rgba(18,31,51,.94),rgba(9,16,29,.94)); box-shadow:0 22px 60px rgba(0,0,0,.28); }
.course-detail-glow { position:absolute; width:220px; height:220px; right:-100px; top:-90px; border-radius:50%; background:radial-gradient(circle,rgba(105,79,255,.24),transparent 70%); pointer-events:none; }
.course-detail-badges { position:relative; display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.course-detail-badges span,.course-detail-badges em { padding:4px 8px; border-radius:999px; color:#ffdca8; background:rgba(245,166,35,.1); border:1px solid rgba(245,166,35,.15); font-size:10px; font-style:normal; font-weight:800; }
.course-detail-badges span.new { color:#b8ffe2; background:rgba(53,229,165,.1); border-color:rgba(53,229,165,.17); }
.course-detail-badges em { margin-left:auto; color:#9eb2ca; border-color:rgba(148,163,184,.13); background:rgba(255,255,255,.04); }
.course-detail-panel h2 { position:relative; margin:18px 0 10px; font-size:25px; line-height:1.25; }
.course-breadcrumb { display:flex; flex-wrap:wrap; gap:6px; color:#7187a4; font-size:11px; }
.course-breadcrumb b { color:#445b76; }
.course-detail-panel > p { min-height:80px; margin:18px 0; color:#9cafc5; line-height:1.75; font-size:13px; }
.course-code-box { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; padding:13px 14px; border:1px solid rgba(53,212,255,.16); border-radius:13px; background:rgba(53,212,255,.055); }
.course-code-box small { display:block; color:#7089a5; font-size:10px; }
.course-code-box strong { display:block; margin-top:3px; letter-spacing:.15em; }
.course-code-box button { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.05); color:#a9dff2; }
.course-download-btn { display:grid; grid-template-columns:auto 1fr; column-gap:10px; padding:14px 16px; margin-top:14px; border-radius:14px; color:white; text-decoration:none; background:linear-gradient(135deg,#2878e6,#7650db); box-shadow:0 15px 36px rgba(57,82,211,.23); }
.course-download-btn svg { grid-row:1/3; align-self:center; width:23px; height:23px; }
.course-download-btn span { font-weight:800; }
.course-download-btn small { margin-top:2px; color:#d3ddff; font-size:10px; }
.course-detail-edit { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; padding:11px; border-radius:12px; color:#aebed4; background:rgba(255,255,255,.045); }
.course-detail-actions { position:relative; display:grid; gap:10px; margin-top:12px; }
.course-detail-actions .course-detail-edit { margin-top:0; }
.course-detail-bundle-download { width:100%; min-height:48px; display:inline-flex; text-decoration:none !important; align-items:center; justify-content:center; border:1px solid rgba(92,213,255,.34); border-radius:13px; color:#ecfbff; background:linear-gradient(135deg,rgba(24,153,221,.88),rgba(108,76,236,.92)); box-shadow:0 14px 34px rgba(64,96,223,.26),inset 0 1px 0 rgba(255,255,255,.16); font-size:14px; font-weight:800; letter-spacing:.08em; transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,filter .22s ease; }
.course-detail-bundle-download:hover { text-decoration:none !important; transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 18px 38px rgba(64,96,223,.34),inset 0 1px 0 rgba(255,255,255,.2); }
.course-detail-bundle-download:active { transform:translateY(0) scale(.99); }
.course-card-groups { display:grid; gap:22px; }
.course-card-group { padding:20px; border:1px solid rgba(148,163,184,.14); border-radius:19px; background:rgba(10,18,31,.66); }
.course-card-group-head { display:flex; align-items:center; gap:11px; margin-bottom:15px; }
.course-card-group-head > span { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:#78dfff; background:rgba(47,131,255,.11); }
.course-card-group-head h2 { margin:0; font-size:19px; }
.course-card-group-head small { color:var(--muted); }
.course-resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.course-resource-card { display:flex; flex-direction:column; min-height:270px; padding:16px; border:1px solid rgba(148,163,184,.14); border-radius:16px; background:linear-gradient(155deg,rgba(19,32,52,.88),rgba(9,16,29,.86)); box-shadow:0 12px 34px rgba(0,0,0,.14); }
.course-resource-card header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.course-resource-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:#89eaff; background:linear-gradient(145deg,rgba(47,131,255,.18),rgba(139,92,246,.14)); }
.course-resource-tags { display:flex; gap:5px; }
.course-resource-tags span { padding:3px 7px; border-radius:999px; color:#ffdba6; background:rgba(244,169,52,.1); font-size:9px; font-weight:800; }
.course-resource-tags span.new { color:#aef8da; background:rgba(53,229,165,.1); }
.course-resource-path { display:block; margin-top:14px; color:#617895; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.course-resource-card h3 { margin:8px 0; font-size:17px; line-height:1.35; }
.course-resource-card p { flex:1; margin:0; color:#8fa3ba; line-height:1.65; font-size:12px; }
.course-resource-code { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:13px; padding:8px 10px; border-radius:10px; background:rgba(53,212,255,.05); color:#8ca6bf; font-size:11px; }
.course-resource-code strong { color:#dffaff; letter-spacing:.1em; }
.course-resource-code button { padding:5px 8px; border-radius:7px; color:#9addf2; background:rgba(255,255,255,.05); }
.course-resource-card footer { display:flex; gap:8px; margin-top:13px; }
.course-resource-card footer button,.course-resource-card footer a { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; min-height:38px; border-radius:10px; text-decoration:none; font-size:12px; }
.course-resource-card footer button { color:#9bb0ca; background:rgba(255,255,255,.045); }
.course-resource-card footer a { color:white; background:linear-gradient(135deg,rgba(47,131,255,.82),rgba(139,92,246,.76)); }
.course-admin-modal { position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:18px; background:rgba(2,6,13,.72); backdrop-filter:blur(12px); }
.course-admin-dialog { width:min(1400px,98vw); height:min(880px,94vh); overflow:hidden; border:1px solid rgba(104,153,234,.25); border-radius:22px; background:linear-gradient(145deg,rgba(10,19,33,.99),rgba(8,13,24,.99)); box-shadow:0 34px 120px rgba(0,0,0,.62); }
.course-admin-head { height:94px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px; border-bottom:1px solid rgba(148,163,184,.13); background:linear-gradient(90deg,rgba(47,131,255,.07),rgba(139,92,246,.055)); }
.course-admin-head span { color:#72dbff; font-size:10px; font-weight:800; letter-spacing:.16em; }
.course-admin-head h2 { margin:3px 0 2px; font-size:24px; }
.course-admin-head p { margin:0; color:var(--muted); font-size:12px; }
.course-admin-head > button { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.055); color:#a7b8cc; font-size:22px; }
.course-admin-body { height:calc(100% - 94px); display:grid; grid-template-columns:minmax(420px,.92fr) minmax(520px,1.08fr); }
.course-admin-list { min-width:0; overflow:hidden; display:flex; flex-direction:column; border-right:1px solid rgba(148,163,184,.12); background:rgba(5,11,20,.54); }
.course-admin-list-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid rgba(148,163,184,.11); }
.course-admin-list-head strong,.course-admin-list-head small { display:block; }
.course-admin-list-head small { margin-top:3px; color:var(--muted); }
.course-admin-list-head button,.course-admin-form-title button { display:inline-flex; align-items:center; gap:6px; padding:9px 11px; border-radius:10px; color:#b9eaff; background:rgba(47,131,255,.11); }
.course-admin-tree { flex:1; overflow:auto; padding:12px; }
.course-admin-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; margin:4px 0 4px calc(var(--course-depth) * 18px); padding:6px; border:1px solid transparent; border-radius:11px; }
.course-admin-row:hover,.course-admin-row.active { border-color:rgba(67,171,255,.2); background:rgba(47,131,255,.055); }
.course-admin-row-main { min-width:0; display:flex; align-items:center; gap:9px; padding:5px; text-align:left; background:transparent; }
.course-admin-row-main > span { flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:8px; color:#81dfff; background:rgba(47,131,255,.08); }
.course-admin-row-main div { min-width:0; }
.course-admin-row-main strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.course-admin-row-main small { display:block; margin-top:2px; color:#6f8299; font-size:9px; }
.course-admin-row-actions { display:flex; gap:4px; opacity:.46; transition:.15s; }
.course-admin-row:hover .course-admin-row-actions,.course-admin-row.active .course-admin-row-actions { opacity:1; }
.course-admin-row-actions button { display:grid; place-items:center; width:26px; height:26px; border-radius:7px; color:#93a9c2; background:rgba(255,255,255,.045); }
.course-admin-row-actions button:last-child:hover { color:#ffc1cc; background:rgba(255,93,120,.1); }
.course-admin-form { overflow:auto; padding:24px; }
.course-admin-form-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.course-admin-form-title span { color:#6cdbff; font-size:10px; font-weight:800; letter-spacing:.16em; }
.course-admin-form-title h3 { margin:4px 0 0; font-size:21px; }
.course-admin-form > label,.course-admin-fields > label { display:grid; gap:7px; margin-bottom:14px; color:#aabbd0; font-size:12px; }
.course-admin-form input,.course-admin-form textarea,.course-admin-form select { width:100%; border:1px solid rgba(148,163,184,.16); border-radius:11px; outline:0; padding:11px 12px; background:rgba(255,255,255,.035); color:var(--text); }
.course-admin-form input:focus,.course-admin-form textarea:focus,.course-admin-form select:focus { border-color:rgba(53,212,255,.42); box-shadow:0 0 0 4px rgba(53,212,255,.055); }
.course-admin-form textarea { min-height:118px; resize:vertical; }
.course-admin-fields.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.course-admin-switches { display:flex; gap:8px; align-items:center; min-height:64px; }
.course-admin-switches label { flex:1; display:flex; align-items:center; gap:8px; min-height:42px; padding:0 11px; border:1px solid rgba(148,163,184,.14); border-radius:10px; background:rgba(255,255,255,.03); color:#a9bbcf; }
.course-admin-switches input { width:auto; margin:0; accent-color:#5aa7ff; }
.course-admin-form-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:16px; border-top:1px solid rgba(148,163,184,.11); }
.course-admin-form-actions button { display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 16px; border-radius:10px; color:#a9b8ca; background:rgba(255,255,255,.045); }
.course-admin-form-actions .primary-btn { color:white; background:linear-gradient(135deg,#2f83ff,#7954e5); }
.course-admin-empty { padding:30px; text-align:center; color:var(--muted); }

@media (max-width: 1180px) {
  .course-mindmap-layout { grid-template-columns:1fr; }
  .course-detail-panel { position:relative; top:auto; min-height:0; }
  .course-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .course-latest-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .course-admin-body { grid-template-columns:minmax(330px,.8fr) minmax(430px,1.2fr); }
}
@media (max-width: 900px) {
  .course-hero { grid-template-columns:1fr; padding:28px; }
  .course-hero-orbit { display:none; }
  .course-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .course-admin-dialog { height:96vh; }
  .course-admin-body { grid-template-columns:1fr; overflow:auto; }
  .course-admin-list { min-height:320px; max-height:42vh; border-right:0; border-bottom:1px solid rgba(148,163,184,.12); }
  .course-admin-form { overflow:visible; }
}
@media (max-width: 650px) {
  .course-hero { padding:22px 18px; border-radius:18px; }
  .course-hero h1 { font-size:34px; }
  .course-search { min-width:100%; }
  .course-admin-entry { width:100%; justify-content:center; }
  .course-stat-grid,.course-latest-strip,.course-resource-grid { grid-template-columns:1fr; }
  .course-viewbar,.course-section-title { align-items:flex-start; flex-direction:column; }
  .course-mindmap { padding:16px; }
  .course-mindmap-branches { min-width:620px; }
  .course-admin-modal { padding:6px; }
  .course-admin-dialog { width:100%; height:98vh; border-radius:16px; }
  .course-admin-head { height:auto; padding:15px; }
  .course-admin-body { height:calc(100% - 96px); }
  .course-admin-fields.two { grid-template-columns:1fr; }
  .course-admin-form { padding:16px; }
}

/* 课程思维导图：仅管理员可见的手动排序控件 */
.course-mind-admin-move { display:inline-flex; flex:0 0 auto; gap:4px; margin-left:7px; padding:3px; border:1px solid rgba(111,151,220,.16); border-radius:9px; background:rgba(7,14,25,.9); box-shadow:0 8px 20px rgba(0,0,0,.16); }
.course-mind-admin-move button { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; color:#89a4c3; background:rgba(255,255,255,.045); font-size:12px; font-weight:800; transition:.16s ease; }
.course-mind-admin-move button:hover { color:#c8f4ff; background:linear-gradient(135deg,rgba(47,131,255,.22),rgba(139,92,246,.2)); box-shadow:inset 0 0 0 1px rgba(90,186,255,.18); }
.course-mind-admin-move .course-mind-add-child { color:#7ee7c1; background:rgba(36,189,145,.09); }
.course-mind-admin-move .course-mind-add-child:hover { color:#d9fff1; background:linear-gradient(135deg,rgba(31,190,142,.24),rgba(47,131,255,.18)); }

/* 课程思维导图：高级展开/收起动画 */
.course-mindmap { overflow-anchor:none; }
.course-mind-children-wrap {
  display:grid;
  grid-template-rows:0fr;
  opacity:.86;
  pointer-events:none;
  transition:grid-template-rows .32s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
  will-change:grid-template-rows;
}
.course-mind-children-wrap.expanded {
  grid-template-rows:1fr;
  opacity:1;
  pointer-events:auto;
}
.course-mind-children-clip {
  min-height:0;
  overflow:hidden;
}
.course-mind-children {
  opacity:0;
  transform:translateY(-8px);
  transform-origin:top left;
  transition:opacity .22s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
  will-change:opacity,transform;
}
.course-mind-children-wrap.expanded > .course-mind-children-clip > .course-mind-children {
  opacity:1;
  transform:translateY(0);
}
.course-mind-children > .course-mind-branch {
  opacity:0;
  transform:translateY(-7px) scale(.995);
  transition:opacity .22s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
  transition-delay:0ms;
}
.course-mind-children-wrap.expanded > .course-mind-children-clip > .course-mind-children > .course-mind-branch {
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:var(--course-stagger, 0ms);
}
.course-mind-children::before {
  opacity:0;
  transform:scaleY(.6);
  transform-origin:top center;
  transition:opacity .22s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.course-mind-children-wrap.expanded > .course-mind-children-clip > .course-mind-children::before {
  opacity:1;
  transform:scaleY(1);
}
.course-mind-children > .course-mind-branch::before {
  opacity:0;
  transform:scaleX(.55);
  transform-origin:right center;
  transition:opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.course-mind-children-wrap.expanded > .course-mind-children-clip > .course-mind-children > .course-mind-branch::before {
  opacity:1;
  transform:scaleX(1);
  transition-delay:var(--course-stagger, 0ms);
}
.course-mind-toggle svg {
  transition:transform .28s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .course-mind-children-wrap,
  .course-mind-children,
  .course-mind-children > .course-mind-branch,
  .course-mind-children::before,
  .course-mind-children > .course-mind-branch::before,
  .course-mind-toggle svg {
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    animation:none !important;
  }
}


/* 课程管理：高级自定义下拉、保存结果弹窗、搜索结果动画 */
.course-admin-dialog { position:relative; }
.course-admin-custom-field { position:relative; display:grid; gap:7px; margin-bottom:14px; color:#aabbd0; font-size:12px; }
.course-admin-select { position:relative; min-width:0; }
.course-admin-select-trigger {
  width:100%; min-height:44px; display:grid; grid-template-columns:minmax(0,1fr) 20px; align-items:center; gap:10px;
  padding:0 12px; border:1px solid rgba(148,163,184,.16); border-radius:11px; outline:0;
  background:linear-gradient(180deg,rgba(17,29,48,.9),rgba(10,18,31,.92)); color:var(--text); text-align:left;
  box-shadow:inset 0 1px rgba(255,255,255,.025); transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.course-admin-select-trigger:hover { border-color:rgba(90,177,255,.32); background:linear-gradient(180deg,rgba(21,36,58,.94),rgba(11,21,36,.94)); }
.course-admin-select.open .course-admin-select-trigger { border-color:rgba(67,205,255,.55); box-shadow:0 0 0 4px rgba(53,212,255,.07),0 12px 34px rgba(0,0,0,.18); }
.course-admin-select-value { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.course-admin-select-trigger svg { width:18px; height:18px; display:block; color:#7794b4; transition:transform .24s cubic-bezier(.22,1,.36,1),color .2s ease; }
.course-admin-select-trigger svg path { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.course-admin-select.open .course-admin-select-trigger svg { transform:rotate(180deg); color:#7edfff; }
.course-admin-select-menu {
  position:absolute; z-index:120; left:0; right:0; top:calc(100% + 8px); padding:7px;
  border:1px solid rgba(104,153,234,.25); border-radius:13px;
  background:linear-gradient(155deg,rgba(14,25,43,.985),rgba(8,15,27,.99));
  box-shadow:0 22px 60px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.035);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.985); transform-origin:top center;
  transition:opacity .2s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility 0s linear .24s;
}
.course-admin-select.open .course-admin-select-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); transition-delay:0s; }
.course-admin-select-option { width:100%; min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:9px; color:#9fb2c9; text-align:left; background:transparent; transition:background .16s ease,color .16s ease,transform .16s ease; }
.course-admin-select-option:hover { color:#e7f8ff; background:rgba(47,131,255,.105); transform:translateX(2px); }
.course-admin-select-option.selected { color:#dff8ff; background:linear-gradient(90deg,rgba(47,131,255,.16),rgba(139,92,246,.11)); }
.course-admin-select-option i { flex:0 0 auto; opacity:0; color:#75e9c3; font-style:normal; font-weight:800; }
.course-admin-select-option.selected i { opacity:1; }
.course-admin-parent-menu { padding:9px; }
.course-admin-parent-search { display:flex; align-items:center; gap:8px; margin-bottom:7px; padding:0 10px; height:39px; border:1px solid rgba(116,169,255,.17); border-radius:9px; background:rgba(2,8,16,.48); color:#738ca9; }
.course-admin-parent-search svg { width:16px; height:16px; }
.course-admin-parent-search input { min-width:0; width:100%; padding:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important; color:#dcecff; outline:0; }
.course-admin-parent-options { max-height:330px; overflow:auto; padding-right:3px; scrollbar-width:thin; scrollbar-color:rgba(94,143,207,.42) transparent; }
.course-admin-parent-options::-webkit-scrollbar { width:7px; }
.course-admin-parent-options::-webkit-scrollbar-thumb { border-radius:999px; background:rgba(94,143,207,.4); }
.course-admin-parent-options::-webkit-scrollbar-track { background:transparent; }
.course-admin-parent-empty { padding:16px 10px; text-align:center; color:#6f8299; font-size:12px; }

.course-admin-notice-layer { position:absolute; inset:0; z-index:160; display:grid; place-items:center; padding:24px; background:rgba(2,7,15,.62); backdrop-filter:blur(8px); animation:courseAdminNoticeBackdrop .2s ease both; }
.course-admin-notice-card { width:min(390px,92%); padding:28px 28px 24px; text-align:center; border:1px solid rgba(105,154,229,.26); border-radius:20px; background:linear-gradient(155deg,rgba(15,28,48,.99),rgba(8,16,29,.99)); box-shadow:0 28px 90px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.04); animation:courseAdminNoticeIn .3s cubic-bezier(.22,1,.36,1) both; }
.course-admin-notice-icon { width:66px; height:66px; display:grid; place-items:center; margin:0 auto 15px; border-radius:20px; font-size:31px; font-weight:900; }
.course-admin-notice-layer.success .course-admin-notice-icon { color:#d9fff2; background:linear-gradient(145deg,rgba(33,195,144,.3),rgba(47,131,255,.18)); box-shadow:0 0 0 1px rgba(95,235,190,.22),0 15px 38px rgba(19,163,116,.16); }
.course-admin-notice-layer.error .course-admin-notice-icon { color:#ffe0e6; background:linear-gradient(145deg,rgba(255,74,112,.28),rgba(139,92,246,.14)); box-shadow:0 0 0 1px rgba(255,106,133,.2),0 15px 38px rgba(215,53,89,.14); }
.course-admin-notice-card > span { color:#74dfff; font-size:9px; font-weight:800; letter-spacing:.18em; }
.course-admin-notice-card h3 { margin:7px 0 8px; font-size:25px; }
.course-admin-notice-card p { margin:0; color:#91a5bd; line-height:1.7; font-size:13px; white-space:pre-wrap; }
.course-admin-notice-card button { min-width:118px; height:42px; margin-top:20px; border-radius:11px; color:white; background:linear-gradient(135deg,#2f83ff,#7954e5); box-shadow:0 12px 30px rgba(66,88,222,.2); }
@keyframes courseAdminNoticeBackdrop { from { opacity:0; } to { opacity:1; } }
@keyframes courseAdminNoticeIn { from { opacity:0; transform:translateY(12px) scale(.965); } to { opacity:1; transform:translateY(0) scale(1); } }

.course-search-results { transition:min-height .3s cubic-bezier(.22,1,.36,1); }
.course-search-results.refreshing .course-viewbar,
.course-search-results.refreshing .course-mindmap-layout,
.course-search-results.refreshing .course-card-groups,
.course-search-results.refreshing .course-loading,
.course-search-results.refreshing .course-empty { animation:courseSearchReveal .34s cubic-bezier(.22,1,.36,1) both; }
.course-search-results.searching .course-mindmap-branches > .course-mind-branch { animation:courseSearchReveal .34s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--course-stagger,0ms); }
.course-search-results.searching .course-resource-card { animation:courseSearchReveal .32s cubic-bezier(.22,1,.36,1) both; }
.course-search-results.searching .course-resource-card:nth-child(2n) { animation-delay:25ms; }
.course-search-results.searching .course-resource-card:nth-child(3n) { animation-delay:50ms; }
.course-search-hit { padding:0 .08em; border-radius:4px; color:#e9fbff; background:linear-gradient(180deg,transparent 45%,rgba(53,212,255,.23) 45%); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
@keyframes courseSearchReveal { from { opacity:0; transform:translateY(9px) scale(.995); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .course-admin-select-menu,
  .course-admin-select-trigger svg,
  .course-admin-notice-layer,
  .course-admin-notice-card,
  .course-search-results.refreshing .course-viewbar,
  .course-search-results.refreshing .course-mindmap-layout,
  .course-search-results.refreshing .course-card-groups,
  .course-search-results.searching .course-mind-branch,
  .course-search-results.searching .course-resource-card { transition-duration:.001ms !important; animation-duration:.001ms !important; animation-delay:0ms !important; }
}


/* 课程顶级板块整包下载 */
.course-admin-bundle-block { margin:4px 0 14px; padding:14px 14px 0; border:1px solid rgba(68,187,255,.15); border-radius:13px; background:linear-gradient(145deg,rgba(47,131,255,.055),rgba(139,92,246,.04)); }
.course-admin-bundle-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.course-admin-bundle-title span,.course-admin-bundle-title strong { display:block; }
.course-admin-bundle-title span { color:#68dfff; font-size:8px; font-weight:900; letter-spacing:.15em; }
.course-admin-bundle-title strong { margin-top:3px; color:#d6e9ff; font-size:12px; }
.course-admin-bundle-title small { max-width:290px; color:#6f8299; line-height:1.5; font-size:10px; text-align:right; }
@media (max-width: 820px) {
  .course-admin-bundle-title { flex-direction:column; }
  .course-admin-bundle-title small { text-align:left; }
}

/* 版税换算预估：深蓝黑 + 蓝紫玻璃风格 */
.royalty-estimator-page { max-width: 1380px; }
.royalty-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 28px; align-items: center;
  min-height: 250px; margin: 8px 0 20px; padding: 34px 38px; border: 1px solid rgba(92,150,255,.23); border-radius: 24px;
  background: radial-gradient(circle at 82% 16%,rgba(139,92,246,.26),transparent 29%), radial-gradient(circle at 8% 95%,rgba(53,212,255,.13),transparent 32%), linear-gradient(145deg,rgba(10,20,36,.97),rgba(7,12,24,.92));
  box-shadow: 0 26px 82px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.05);
}
.royalty-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg,transparent 0 44%,rgba(255,255,255,.025) 49%,transparent 56%); }
.royalty-hero-copy { position:relative; z-index:1; min-width:0; }
.royalty-kicker { display:inline-flex; margin-bottom:12px; color:#72e1ff; font-size:11px; font-weight:900; letter-spacing:.2em; }
.royalty-hero h1 { margin:0; font-size:clamp(34px,4.5vw,54px); line-height:1.05; letter-spacing:-.04em; background:linear-gradient(110deg,#fff,#c5efff 46%,#c3adff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.royalty-hero p { max-width:780px; margin:16px 0 0; color:#a8bad0; line-height:1.8; font-size:14px; }
.royalty-reference-strip { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:22px; padding:11px 13px; width:max-content; max-width:100%; border:1px solid rgba(100,161,240,.14); border-radius:12px; background:rgba(3,10,20,.42); color:#8da4be; font-size:11px; }
.royalty-reference-strip > span { color:#75dfff; font-weight:800; letter-spacing:.08em; }
.royalty-reference-strip b { color:#b9cae0; font-weight:650; }
.royalty-reference-strip i { width:3px; height:3px; border-radius:50%; background:#50677f; }
.royalty-reference-strip strong { color:#9cf4cd; font-weight:800; }
.royalty-hero-visual { position:relative; display:grid; place-items:center; min-height:190px; }
.royalty-orbit { position:relative; width:180px; height:180px; display:grid; place-items:center; border:1px solid rgba(86,198,255,.16); border-radius:50%; background:radial-gradient(circle,rgba(58,123,255,.14),rgba(16,29,55,.04) 62%,transparent 63%); box-shadow:0 0 78px rgba(88,88,255,.17); }
.royalty-orbit::before,.royalty-orbit::after { content:""; position:absolute; border:1px solid rgba(147,117,255,.17); border-radius:50%; }
.royalty-orbit::before { inset:23px; animation:royaltyOrbit 12s linear infinite; }
.royalty-orbit::after { inset:50px; }
.royalty-orbit > strong { position:relative; z-index:2; display:grid; place-items:center; width:72px; height:72px; border-radius:22px; color:#fff; background:linear-gradient(145deg,rgba(47,131,255,.88),rgba(139,92,246,.82)); box-shadow:0 18px 58px rgba(83,79,230,.42), inset 0 1px rgba(255,255,255,.24); }
.royalty-orbit > strong svg { width:34px; height:34px; }
.royalty-orbit > i { position:absolute; width:7px; height:7px; border-radius:50%; background:#73ddff; box-shadow:0 0 18px currentColor; }
.royalty-orbit > i:nth-child(1) { top:13px; left:50%; }
.royalty-orbit > i:nth-child(2) { left:15px; bottom:38px; background:#a98cff; }
.royalty-orbit > i:nth-child(3) { right:13px; top:57%; background:#66f0bf; }
@keyframes royaltyOrbit { to { transform:rotate(360deg); } }

.royalty-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(380px,.65fr); gap:18px; align-items:stretch; }
.royalty-input-panel,.royalty-result-card { border:1px solid rgba(148,163,184,.16); border-radius:20px; background:linear-gradient(155deg,rgba(13,24,41,.9),rgba(7,14,25,.88)); box-shadow:0 20px 58px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.03); }
.royalty-input-panel { position:relative; overflow:visible; padding:24px; }
.royalty-panel-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:24px; align-items:start; margin-bottom:20px; }
.royalty-panel-head > div:first-child > span { color:#6fdcff; font-size:10px; font-weight:900; letter-spacing:.18em; }
.royalty-panel-head h2 { margin:5px 0 4px; font-size:26px; }
.royalty-panel-head p { margin:0; color:#7e94ae; font-size:12px; }
.royalty-mode-field { position:relative; z-index:30; display:grid; gap:6px; }
.royalty-mode-field > label { color:#aebfd2; font-size:11px; }
.royalty-mode-field > small { color:#647a93; font-size:10px; line-height:1.5; }
.royalty-mode-select { position:relative; }
.royalty-mode-trigger { width:100%; min-height:46px; display:grid; grid-template-columns:minmax(0,1fr) 20px; align-items:center; gap:10px; padding:0 13px; border:1px solid rgba(108,165,243,.2); border-radius:12px; background:linear-gradient(180deg,rgba(18,32,53,.94),rgba(9,18,31,.96)); color:#e6f2ff; text-align:left; box-shadow:inset 0 1px rgba(255,255,255,.025); transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.royalty-mode-trigger:hover { border-color:rgba(84,190,255,.4); background:linear-gradient(180deg,rgba(22,39,64,.96),rgba(11,22,38,.98)); }
.royalty-mode-trigger svg { width:17px; height:17px; color:#7594b7; transition:transform .24s cubic-bezier(.22,1,.36,1),color .2s ease; }
.royalty-mode-select.open .royalty-mode-trigger { border-color:rgba(69,205,255,.58); box-shadow:0 0 0 4px rgba(53,212,255,.07),0 12px 34px rgba(0,0,0,.2); }
.royalty-mode-select.open .royalty-mode-trigger svg { transform:rotate(180deg); color:#7ee4ff; }
.royalty-mode-menu { position:absolute; z-index:60; left:0; right:0; top:calc(100% + 8px); display:grid; gap:4px; padding:7px; border:1px solid rgba(104,153,234,.25); border-radius:13px; background:linear-gradient(155deg,rgba(14,25,43,.99),rgba(8,15,27,.995)); box-shadow:0 24px 64px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.035); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.985); transform-origin:top center; transition:opacity .2s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility 0s linear .24s; }
.royalty-mode-select.open .royalty-mode-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); transition-delay:0s; }
.royalty-mode-option { width:100%; min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:9px; background:transparent; color:#9fb2ca; text-align:left; transition:background .16s ease,color .16s ease,transform .16s ease; }
.royalty-mode-option:hover { transform:translateX(2px); color:#e7f8ff; background:rgba(47,131,255,.1); }
.royalty-mode-option.selected { color:#e0f9ff; background:linear-gradient(90deg,rgba(47,131,255,.16),rgba(139,92,246,.11)); }
.royalty-mode-option i { opacity:0; color:#71e7bd; font-style:normal; font-weight:900; }
.royalty-mode-option.selected i { opacity:1; }

.royalty-input-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.royalty-input-card { display:grid; gap:8px; padding:16px; border:1px solid rgba(115,153,206,.13); border-radius:15px; background:linear-gradient(150deg,rgba(18,31,51,.72),rgba(8,16,29,.62)); transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.royalty-input-card:focus-within { transform:translateY(-2px); border-color:rgba(65,204,255,.4); box-shadow:0 14px 34px rgba(26,96,170,.12),0 0 0 4px rgba(53,212,255,.045); }
.royalty-input-card > span { color:#a7bad1; font-size:12px; font-weight:650; }
.royalty-input-card > small { min-height:16px; color:#68809b; font-size:10px; }
.royalty-input-wrap { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; min-height:52px; border:1px solid rgba(118,164,226,.17); border-radius:12px; background:rgba(2,9,18,.48); overflow:hidden; }
.royalty-input-wrap input { min-width:0; width:100%; padding:0 14px; border:0; outline:0; background:transparent; color:#f3f9ff; font-size:22px; font-weight:800; letter-spacing:-.02em; }
.royalty-input-wrap input::placeholder { color:#465d78; font-size:14px; font-weight:500; }
.royalty-input-wrap input::-webkit-inner-spin-button,.royalty-input-wrap input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.royalty-input-unit { height:100%; min-width:50px; display:grid; place-items:center; border-left:1px solid rgba(118,164,226,.13); color:#8adfff; background:rgba(53,212,255,.045); font-size:13px; }

.royalty-result-card { position:relative; overflow:hidden; min-height:100%; background:radial-gradient(circle at 86% 8%,rgba(139,92,246,.2),transparent 30%),linear-gradient(155deg,rgba(14,28,48,.96),rgba(7,14,26,.94)); }
.royalty-result-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(130deg,transparent 0 55%,rgba(53,212,255,.025)); }
.royalty-result-inner { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; padding:24px; }
.royalty-result-card.refreshing .royalty-result-inner { animation:royaltyResultIn .34s cubic-bezier(.22,1,.36,1) both; }
@keyframes royaltyResultIn { from { opacity:.35; transform:translateY(8px) scale(.995); } to { opacity:1; transform:none; } }
.royalty-result-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.royalty-result-head > span { color:#6edfff; font-size:10px; font-weight:900; letter-spacing:.16em; }
.royalty-result-head > em { padding:5px 8px; border:1px solid rgba(132,112,255,.2); border-radius:999px; color:#c8baff; background:rgba(139,92,246,.08); font-size:9px; font-style:normal; }
.royalty-money-block { padding:32px 0 22px; border-bottom:1px solid rgba(148,163,184,.12); }
.royalty-money-block > small { color:#8ea4bd; font-size:12px; }
.royalty-money-main { display:flex; align-items:flex-start; gap:5px; margin:10px 0 8px; color:#fff; font-size:clamp(44px,5vw,66px); line-height:.95; letter-spacing:-.055em; text-shadow:0 10px 42px rgba(68,142,255,.14); }
.royalty-money-main > i { padding-top:7px; color:#77dfff; font-size:22px; font-style:normal; letter-spacing:0; }
.royalty-money-block > p { margin:0; color:#84a0bf; font-size:11px; line-height:1.6; }
.royalty-metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0 16px; }
.royalty-metric-grid > div { padding:13px; border:1px solid rgba(123,157,204,.12); border-radius:12px; background:rgba(5,13,24,.42); }
.royalty-metric-grid span,.royalty-metric-grid small { display:block; color:#738ba6; font-size:9px; }
.royalty-metric-grid strong { display:block; margin:6px 0 4px; color:#e9f6ff; font-size:24px; }
.royalty-range-bar { height:5px; margin-top:auto; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06); }
.royalty-range-bar > i { display:block; width:var(--royalty-fill); height:100%; border-radius:inherit; background:linear-gradient(90deg,#2f83ff,#35d4ff 55%,#8b5cf6); box-shadow:0 0 18px rgba(53,212,255,.3); transition:width .34s cubic-bezier(.22,1,.36,1); }
.royalty-result-note { display:flex; align-items:flex-start; gap:10px; margin-top:12px; }
.royalty-result-note > span { flex:0 0 auto; padding:4px 6px; border-radius:7px; color:#9cecd0; background:rgba(53,229,165,.08); font-size:9px; font-weight:800; }
.royalty-result-note p { margin:1px 0 0; color:#667d98; font-size:9px; line-height:1.6; }
.royalty-footnote { display:flex; align-items:center; justify-content:center; gap:9px; margin:16px 0 0; padding:12px 14px; color:#6e839b; font-size:11px; }
.royalty-footnote p { margin:0; }
.royalty-footnote svg { width:15px; height:15px; color:#6487b0; }

@media (max-width: 1180px) {
  .royalty-layout { grid-template-columns:1fr; }
  .royalty-result-card { min-height:390px; }
}
@media (max-width: 860px) {
  .royalty-hero { grid-template-columns:1fr; padding:28px; }
  .royalty-hero-visual { display:none; }
  .royalty-panel-head { grid-template-columns:1fr; }
  .royalty-input-grid { grid-template-columns:1fr; }
  .royalty-reference-strip { width:100%; }
}
@media (max-width: 560px) {
  .royalty-hero,.royalty-input-panel,.royalty-result-inner { padding:20px; }
  .royalty-hero h1 { font-size:36px; }
  .royalty-reference-strip i { display:none; }
  .royalty-reference-strip { align-items:flex-start; flex-direction:column; }
  .royalty-metric-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .royalty-orbit::before { animation:none !important; }
  .royalty-mode-menu,.royalty-mode-trigger svg,.royalty-input-card,.royalty-result-card.refreshing .royalty-result-inner,.royalty-range-bar > i { transition-duration:.001ms !important; animation-duration:.001ms !important; }
}