:root {
  --ink: #12261c;
  --muted: #5d7266;
  --line: rgba(18, 38, 28, .1);
  --paper: #f3f7f1;
  --card: rgba(255,255,255,.86);
  --brand: #1c7a52;
  --brand-2: #0f5c3c;
  --gold: #c4a35a;
  --shadow: 0 22px 50px rgba(18, 38, 28, .12);
  --radius: 20px;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
[v-cloak] { display: none; }
html, body { margin: 0; min-height: 100%; color: var(--ink); }
body {
  background:
    radial-gradient(900px 420px at 8% -8%, #d7efe3 0%, transparent 55%),
    radial-gradient(700px 380px at 100% 0%, #e4ecf8 0%, transparent 46%),
    linear-gradient(180deg, #f7faf6 0%, #eef4ee 100%);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.vx-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px;
  backdrop-filter: blur(16px);
  background: rgba(247,250,246,.78);
  border-bottom: 1px solid var(--line);
}
.vx-brand { display: flex; gap: 12px; align-items: center; }
.vx-mark {
  width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(145deg, #3aa978, #1c7a52); color: #fff; font-size: 22px;
  box-shadow: 0 10px 24px rgba(28,122,82,.28);
}
.vx-brand b { display: block; font-size: 17px; letter-spacing: .02em; }
.vx-brand small { color: var(--muted); font-size: 12px; }
.vx-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vx-nav-compact { display: none; align-items: center; gap: 8px; }
.vx-burger {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 8px 14px; cursor: pointer;
}
.vx-sheet {
  position: fixed; inset: 0; z-index: 35; background: rgba(8, 22, 16, .45);
  padding: 72px 16px 16px;
}
.vx-sheet-card {
  background: #fff; border-radius: 18px; padding: 10px;
  display: grid; gap: 6px; box-shadow: var(--shadow);
}
.vx-sheet-card a, .vx-sheet-card button {
  display: block; width: 100%; text-align: left; border: 0; background: #f3f7f1;
  border-radius: 12px; padding: 12px 14px; color: var(--ink); cursor: pointer; font: inherit;
}
.vx-sheet-card .primary { background: var(--brand); color: #fff; text-align: center; }
.vx-nav a, .vx-nav button.ghost {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 8px 14px; cursor: pointer;
}
.vx-nav .primary, button.primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
  border-radius: 999px; padding: 8px 16px; cursor: pointer;
}
.vx-hero { padding: 36px 28px 10px; max-width: 1180px; margin: 0 auto; }
.vx-hero .eyebrow { letter-spacing: .22em; font-size: 12px; color: var(--brand); margin: 0 0 8px; }
.vx-hero h1 { margin: 0 0 10px; font-size: clamp(28px, 5vw, 46px); line-height: 1.15; }
.vx-hero .lead { margin: 0 0 22px; color: var(--muted); max-width: 640px; font-size: 16px; }
.vx-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.vx-filters input, .vx-filters select {
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; min-width: 160px;
  background: #fff;
}
.vx-filters input { flex: 1; min-width: 220px; }
.vx-channels { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.vx-channels button {
  border: 0; background: #fff; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  color: var(--muted); box-shadow: 0 1px 0 var(--line);
}
.vx-channels button.on { background: var(--brand); color: #fff; }
.vx-main { padding: 18px 28px 120px; max-width: 1180px; margin: 0 auto; }
.vx-status { color: var(--muted); text-align: center; padding: 40px 0; }
.vx-status .primary { margin-left: 10px; }
.vx-result-summary { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.vx-load-more { display: flex; justify-content: center; padding: 24px 0 8px; }
.vx-load-more button { min-width: 150px; }
.vx-create-dialog { width: min(760px, calc(100vw - 28px)); max-height: 90vh; overflow: auto; }
.vx-create-hint { color: var(--muted); font-size: 13px; margin: 4px 0 16px; }
.vx-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vx-create-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.vx-create-grid .wide { grid-column: 1 / -1; }
.vx-create-grid input, .vx-create-grid select, .vx-create-grid textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px; background: #fff; color: var(--ink); font: inherit;
}
.vx-create-grid textarea { resize: vertical; }
.vx-create-actions { justify-content: flex-end; margin-top: 16px; }
.vx-replace-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vx-replace-file > div { display: grid; gap: 4px; flex: 1; min-width: 220px; }
.vx-replace-file small { color: var(--muted); }
.vx-replace-file label.primary {
  display: inline-flex; align-items: center; cursor: pointer;
  border-radius: 10px; padding: 9px 14px; color: #fff; background: var(--brand);
}
.vx-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px;
}
.vx-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  min-height: 280px;
}
.vx-cover {
  height: 148px; background: linear-gradient(160deg, #d9efe4, #c5d4c9);
  display: grid; place-items: center; font-size: 42px; overflow: hidden;
}
.vx-cover img { width: 100%; height: 100%; object-fit: cover; }
.vx-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vx-card h3 { margin: 0; font-size: 16px; }
.vx-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; min-height: 40px; }
.vx-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.vx-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.vx-tags span, .badge {
  background: #e8f5ee; color: var(--brand-2); border-radius: 999px; padding: 2px 8px; font-size: 11px;
}
.badge.paid { background: #f8ecd8; color: #8a5a12; }
.badge.official { background: #e4ecf8; color: #1d4f91; }
.vx-stars { color: var(--gold); font-size: 12px; letter-spacing: .04em; }
.vx-stars.muted { color: var(--muted); }
.vx-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.vx-actions button, .vx-actions a {
  flex: 1; min-width: 72px; text-align: center; border: 1px solid var(--line);
  background: #fff; color: var(--ink);
  border-radius: 10px; padding: 8px; cursor: pointer; font-size: 13px;
}
.vx-actions .primary, .vx-actions a.primary, button.primary.block {
  background: linear-gradient(135deg, #2f9a68, #1c7a52);
  color: #fff; border-color: transparent;
}
.vx-actions button:disabled, .vx-actions a[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed;
}
.vx-card h3 a { color: inherit; }
.vx-cover { cursor: pointer; }
.mask {
  position: fixed; inset: 0; background: rgba(8, 22, 16, .55); z-index: 40;
  display: grid; place-items: center; padding: 18px;
}
.dialog {
  width: min(860px, 100%); max-height: 88vh; overflow: auto; background: #fff;
  border-radius: 18px; padding: 22px; box-shadow: var(--shadow);
}
.dialog h2 { margin: 0 0 8px; }
.dialog .md { line-height: 1.7; }
.dialog .md img { max-width: 100%; border-radius: 12px; }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.82); display: grid; place-items: center; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; }
.vx-zoomable { cursor: zoom-in; }
.player {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30;
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(18, 38, 28, .94); color: #fff; border-radius: 16px; padding: 10px 12px;
  box-shadow: var(--shadow);
}
.player-head { display: flex; align-items: flex-start; gap: 10px; }
.player-titles { flex: 1; min-width: 0; }
.player-titles b {
  display: block; font-size: 14px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-titles small { display: block; opacity: .75; font-size: 12px; margin-top: 2px; }
.player-x {
  flex: 0 0 auto; background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
.player-stage { position: relative; width: 100%; }
.player audio, .player video { width: 100%; display: block; background: #0b1611; border-radius: 10px; }
.player.is-video video { max-height: min(42vh, 360px); }
.player.is-audio audio { height: 40px; }
.player-tap {
  position: absolute; inset: 0; margin: auto; width: 120px; height: 40px;
  border: 0; border-radius: 999px; background: #1c7a52; color: #fff; cursor: pointer;
}
.player-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.player-bar select, .player-bar button {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px; padding: 6px 8px; cursor: pointer;
}
.player-bar .primary { background: #1c7a52; border-color: #1c7a52; }
.toast {
  position: fixed; top: 18px; right: 18px; z-index: 60; background: #12261c; color: #fff;
  padding: 12px 16px; border-radius: 12px; max-width: 360px;
}
.keys { display: grid; gap: 8px; }
.keys code { display: inline-block; background: #f3f7f1; padding: 10px; border-radius: 10px; word-break: break-all; }
.keys button.ghost { margin-left: 8px; }
.lj-usage { margin-top: 14px; }
.lj-usage-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.lj-usage-tabs button {
  border: 1px solid #c9d8cc; background: #f6faf6; color: #3d5a48;
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 650;
}
.lj-usage-tabs button.active { background: #1c7a52; border-color: #1c7a52; color: #fff; }
.lj-usage textarea {
  width: 100%; min-height: 150px; margin: 0;
  font: 12px/1.55 Consolas, monospace; border: 1px solid #d7e3d8;
  border-radius: 10px; padding: 10px; background: #f7fbf7;
}
@media (max-width: 760px) {
  .vx-top {
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    gap: 10px;
  }
  .vx-nav-wide { display: none; }
  .vx-nav-compact { display: flex; }
  .vx-mark { width: 36px; height: 36px; border-radius: 12px; font-size: 18px; }
  .vx-brand b { font-size: 15px; }
  .vx-brand small { display: none; }
  .vx-hero { padding: 18px 14px 8px; }
  .vx-hero .eyebrow { margin-bottom: 4px; }
  .vx-hero h1 { font-size: 22px; margin-bottom: 6px; }
  .vx-hero .lead { font-size: 13px; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vx-filters { gap: 8px; }
  .vx-filters input { min-width: 0; width: 100%; flex: 1 1 100%; }
  .vx-filters select { flex: 1; min-width: 0; }
  .vx-channels { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; padding-bottom: 4px; }
  .vx-channels button { flex: 0 0 auto; }
  .vx-main { padding: 10px 14px 168px; }
  .vx-grid { grid-template-columns: 1fr; gap: 12px; }
  .vx-create-grid { grid-template-columns: 1fr; }
  .vx-create-grid .wide { grid-column: auto; }
  .vx-card { min-height: 0; border-radius: 16px; }
  .vx-cover { height: 168px; }
  .vx-card h3 { font-size: 16px; line-height: 1.35; }
  .vx-card p { min-height: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vx-actions button, .vx-actions a { min-width: 0; padding: 10px 8px; }
  .player {
    left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .player.is-video video { max-height: min(38vh, 280px); }
  .player-bar { justify-content: space-between; }
  .player-bar select { flex: 1; min-width: 0; }
  .dialog { padding: 16px; }
  .toast { left: 12px; right: 12px; top: auto; bottom: 18px; max-width: none; }
  .vx-item { padding: 16px 14px 80px; }
  .vx-stage { padding: 14px; }
}
.vx-item { max-width: 1320px; margin: 0 auto; padding: 24px 28px 80px; }
.vx-item-layout { display: block; }
.vx-item-layout.withSeries {
  display: grid; grid-template-columns: 260px minmax(0, 920px);
  align-items: start; justify-content: center; gap: 22px;
}
.vx-item-main { min-width: 0; width: 100%; }
.vx-item-layout:not(.withSeries) .vx-item-main { max-width: 920px; margin: 0 auto; }
.vx-series-side {
  position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow: hidden;
  display: flex; flex-direction: column; background: rgba(255,255,255,.86);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.vx-series-head { flex: 0 0 auto; display: grid; gap: 4px; padding: 16px; border-bottom: 1px solid var(--line); }
.vx-series-head small { color: var(--brand); }
.vx-series-head b { font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.vx-series-head span, .vx-series-note { color: var(--muted); font-size: 12px; }
.vx-series-list { min-height: 0; overflow: auto; padding: 8px; }
.vx-series-list a {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center; gap: 8px; padding: 10px 9px; margin: 2px 0;
  border-radius: 11px; color: var(--muted); transition: background .16s, color .16s;
}
.vx-series-list a:hover { background: #eef6f0; color: var(--ink); }
.vx-series-list a.current {
  background: linear-gradient(135deg, #e3f3e8, #edf7f0);
  color: var(--brand-2); font-weight: 600;
}
.vx-series-order {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 9px; background: #eef3ed; color: var(--muted); font-size: 11px;
}
.vx-series-list a.current .vx-series-order { background: var(--brand); color: #fff; }
.vx-series-title { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.vx-series-list a small { color: #b46b16; font-weight: 400; }
.vx-series-note { margin: 0; padding: 9px 14px; border-top: 1px solid var(--line); }
.vx-series-note.warn { color: #9a5d12; background: #fff8e8; }
.vx-series-mobile { display: none; }
.vx-sequence-nav {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch; gap: 10px; margin: 0 0 22px;
}
.vx-sequence-nav > a, .vx-sequence-nav > span {
  min-width: 0; display: grid; gap: 4px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.86);
}
.vx-sequence-nav > a:hover { border-color: rgba(28,122,82,.4); background: #fff; }
.vx-sequence-nav small { color: var(--muted); }
.vx-sequence-nav b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vx-sequence-nav .next { text-align: right; }
.vx-sequence-nav .disabled { opacity: .52; }
.vx-sequence-nav em { align-self: center; color: var(--muted); font-size: 12px; font-style: normal; }
.vx-series-drawer { display: none; }
.vx-item .lead-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.vx-item h1 { margin: 0 0 8px; font-size: clamp(24px, 4vw, 36px); line-height: 1.2; }
.vx-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; }
.vx-toolbar button, .vx-toolbar a {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 8px 16px; cursor: pointer; font-size: 13px;
}
.vx-toolbar .primary {
  background: linear-gradient(135deg, #2f9a68, #1c7a52);
  color: #fff; border-color: transparent;
}
.vx-view-count { align-self: center; color: var(--muted); font-size: 13px; padding: 0 4px; }
.vx-stage {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); margin-bottom: 22px;
}
.vx-stage img.hero { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; background: #0d1a14; }
.vx-stage video, .vx-stage audio { width: 100%; border-radius: 12px; background: #0b1611; }
.vx-stage video { max-height: min(70vh, 560px); }
.vx-unmute { margin: 10px 0 0; }
.vx-unmute button { width: 100%; }
.vx-stage .md { line-height: 1.75; }
.vx-stage .md img { max-width: 100%; border-radius: 12px; }
.vx-stage .md h1, .vx-stage .md h2, .vx-stage .md h3,
.vx-preview .md h1, .vx-preview .md h2, .vx-preview .md h3 {
  margin: 1.1em 0 .45em; line-height: 1.3;
}
.vx-stage .md h1:first-child, .vx-stage .md h2:first-child, .vx-stage .md h3:first-child,
.vx-preview .md h1:first-child, .vx-preview .md h2:first-child, .vx-preview .md h3:first-child {
  margin-top: 0;
}
.vx-stage .md p, .vx-preview .md p { margin: 0 0 .75em; }
.vx-stage .md li, .vx-preview .md li { margin: .15em 0; }
.vx-stage .md pre, .vx-stage .md code {
  background: #f3f7f1; border-radius: 8px; padding: .15em .4em;
}
.vx-stage .md pre { padding: 12px; overflow: auto; }
.vx-edit, .vx-review-box {
  display: grid; gap: 10px; margin-top: 8px;
}
.vx-edit label, .vx-review-box label { color: var(--muted); font-size: 13px; display: grid; gap: 6px; }
.vx-edit input, .vx-edit select, .vx-edit textarea,
.vx-review-box textarea {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--ink);
  background: #fff; width: 100%;
}
.vx-edit textarea { min-height: 220px; font-family: Consolas, "Sarasa Mono SC", monospace; }
.vx-editor-open { overflow: hidden; height: 100%; }
.vx-editor-shell, .vx-image-shell {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: stretch;
  background: #f7faf6;
}
.vx-image-shell {
  place-items: center;
  background: rgba(8, 22, 16, .62); backdrop-filter: blur(5px);
}
.vx-editor {
  width: 100%; height: 100%; max-width: none; max-height: none;
  display: flex; flex-direction: column; overflow: hidden;
  background: #f7faf6; border: 0; border-radius: 0; box-shadow: none;
}
.vx-editor-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 18px; background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--line);
}
.vx-editor-head > div:first-child { display: grid; gap: 2px; }
.vx-editor-head b { font-size: 18px; }
.vx-editor-head small { color: var(--muted); }
.vx-editor-head small.dirty { color: #b46b16; }
.vx-editor-actions, .vx-actions { display: flex; gap: 8px; align-items: center; }
.vx-editor-actions button, .vx-actions button, .vx-compose-tools button,
.vx-editor-tabs button, .vx-image-picker button {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 10px; padding: 8px 13px; cursor: pointer;
}
.vx-editor-actions button:disabled, .vx-image-picker button:disabled {
  opacity: .55; cursor: not-allowed;
}
.vx-editor-actions .primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.vx-editor-scroll {
  min-height: 0; flex: 1; display: flex; flex-direction: column;
  overflow: auto; padding: 12px 16px 16px;
}
.vx-editor-meta {
  flex: 0 0 auto;
  display: grid; grid-template-columns: minmax(240px, .8fr) minmax(300px, 1.2fr);
  gap: 12px; margin-bottom: 14px; padding: 15px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
}
.vx-editor-meta > label, .vx-editor-meta-grid label {
  display: grid; gap: 6px; color: var(--muted); font-size: 13px;
}
.vx-editor-meta input, .vx-editor-meta select, .vx-editor-meta textarea,
.vx-image-search input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; background: #fff; color: var(--ink); resize: vertical;
}
.vx-editor-meta details { grid-column: 1 / -1; }
.vx-editor-meta summary { cursor: pointer; color: var(--brand); font-size: 13px; padding: 2px 0; }
.vx-editor-meta-grid {
  display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px; padding-top: 12px;
}
.vx-editor-content {
  min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.vx-editor-tabs { display: none; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.vx-editor-tabs button.on, .vx-image-tabs button.on {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.vx-editor-split { min-height: 0; flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
.vx-compose { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.vx-compose-tools {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 10px;
  background: #f6f9f5; border-bottom: 1px solid var(--line);
}
.vx-compose-tools button { padding: 6px 10px; font-size: 12px; }
.vx-compose textarea {
  min-height: 0; flex: 1; width: 100%; border: 0; outline: 0; resize: none;
  padding: 18px; color: var(--ink); background: #fff; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: break-word; tab-size: 4;
  font: 14px/1.65 Consolas, "Sarasa Mono SC", "Microsoft YaHei", monospace;
}
.vx-editor-hint {
  flex: 0 0 auto; padding: 8px 12px; color: var(--muted);
  background: #f6f9f5; border-top: 1px solid var(--line);
}
.vx-preview { min-width: 0; overflow: auto; padding: 20px; background: #fbfcfa; }
.vx-preview .md { line-height: 1.75; overflow-wrap: anywhere; }
.vx-preview .md img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 12px auto; }
.vx-preview .md pre { overflow: auto; padding: 12px; border-radius: 10px; background: #eef3ed; }
.vx-preview-state { color: var(--muted); text-align: center; padding: 32px 10px; }
.vx-image-shell { z-index: 95; }
.vx-image-picker {
  width: min(760px, calc(100vw - 28px)); max-height: min(720px, calc(100vh - 28px));
  display: flex; flex-direction: column; overflow: hidden; padding: 16px;
  background: #fff; border-radius: 20px; box-shadow: 0 28px 80px rgba(8,22,16,.35);
}
.vx-image-picker > header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.vx-image-picker > header > div { display: grid; gap: 4px; }
.vx-image-picker > header b { font-size: 18px; }
.vx-image-picker > header small { color: var(--muted); }
.vx-image-tabs { display: flex; gap: 8px; padding: 14px 0 10px; }
.vx-image-drop {
  min-height: 240px; display: grid; place-content: center; gap: 7px; text-align: center;
  border: 2px dashed rgba(28,122,82,.35); border-radius: 16px;
  background: #f3f8f3; color: var(--brand); cursor: pointer;
}
.vx-image-drop span { color: var(--muted); font-size: 12px; }
.vx-image-library { min-height: 260px; overflow: auto; }
.vx-image-search { display: flex; gap: 8px; margin-bottom: 10px; }
.vx-image-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.vx-image-grid button {
  min-width: 0; display: grid; gap: 6px; padding: 6px; text-align: left;
}
.vx-image-grid img {
  width: 100%; aspect-ratio: 1.3; object-fit: cover; border-radius: 8px; background: #eef3ed;
}
.vx-image-grid span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.vx-image-error { color: #b42318; background: #fff2f0; border-radius: 10px; padding: 9px 11px; }
.vx-series-manager { max-width: 680px; }
.vx-series-rename { display: flex; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.vx-series-rename input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 10px; font: inherit;
}
.vx-series-reorder { overflow: auto; padding: 8px 16px; }
.vx-series-reorder > div {
  display: grid; grid-template-columns: 30px minmax(0,1fr) auto auto;
  align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line);
}
.vx-series-reorder b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-series-save { justify-content: flex-end; padding: 12px 16px 16px; }
.vx-report-dialog { max-width: 560px; }
.vx-report-form { display: grid; gap: 12px; padding: 16px; }
.vx-report-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.vx-report-form select, .vx-report-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px; background: #fff; color: var(--ink); font: inherit;
}
@media (max-width: 760px) {
  .vx-editor { width: 100%; height: 100%; border-radius: 0; }
  .vx-editor-head { padding: 10px 12px; }
  .vx-editor-head b { font-size: 16px; }
  .vx-editor-actions button { padding: 7px 10px; }
  .vx-editor-scroll { padding: 10px; }
  .vx-editor-meta { grid-template-columns: 1fr; padding: 12px; }
  .vx-editor-meta-grid { grid-template-columns: 1fr; }
  .vx-editor-content { min-height: 0; }
  .vx-editor-tabs { display: flex; }
  .vx-editor-split { display: block; }
  .vx-compose { border-right: 0; min-height: 55vh; }
  .vx-compose textarea { min-height: 48vh; }
  .vx-preview { min-height: 55vh; }
  .vx-editor-split .mobileHidden { display: none; }
  .vx-image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .vx-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-editor-head small { font-size: 11px; }
}
@media (max-width: 860px) {
  .vx-item { padding: 16px 14px 80px; }
  .vx-item-layout.withSeries { display: block; }
  .vx-series-side { display: none; }
  .vx-series-mobile {
    display: inline-flex; align-items: center; border: 1px solid rgba(28,122,82,.25);
    border-radius: 999px; padding: 6px 11px; color: var(--brand);
    background: #eef7f0; cursor: pointer; font-size: 12px;
  }
  .vx-series-drawer {
    position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end;
    background: rgba(8,22,16,.58); backdrop-filter: blur(4px);
  }
  .vx-series-drawer > aside {
    width: 100%; max-height: min(78vh, 720px); display: flex; flex-direction: column;
    overflow: hidden; background: #fff; border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -20px 60px rgba(8,22,16,.26);
  }
  .vx-series-drawer header {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line);
  }
  .vx-series-drawer header > div { display: grid; gap: 3px; min-width: 0; }
  .vx-series-drawer header small { color: var(--brand); }
  .vx-series-drawer header b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .vx-series-drawer header button {
    border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px;
    background: #fff; color: var(--ink);
  }
  .vx-series-drawer .vx-series-list { padding: 8px 12px 14px; }
  .vx-sequence-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vx-sequence-nav em { display: none; }
  .vx-sequence-nav > a, .vx-sequence-nav > span { padding: 11px 12px; }
}
.vx-star-pick { display: flex; gap: 4px; font-size: 22px; }
.vx-star-pick button { border: 0; background: transparent; cursor: pointer; color: #d7d2c4; padding: 0 2px; }
.vx-star-pick button.on { color: var(--gold); }
.vx-review-list { display: grid; gap: 12px; }
.vx-review {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.vx-review header { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.vx-review p { margin: 8px 0 0; line-height: 1.55; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card {
  width: min(420px, 100%); background: var(--card); border: 1px solid var(--line);
  border-radius: 24px; padding: 28px; box-shadow: var(--shadow);
}
.auth-card h1 { margin: 0 0 6px; }
.auth-card .sub { color: var(--muted); margin: 0 0 18px; }
.fg { display: grid; gap: 6px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.fg input {
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; color: var(--ink);
}
.auth-switch { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-switch button { flex: 1; border-radius: 10px; padding: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.auth-switch button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-go {
  width: 100%; border: 0; background: linear-gradient(135deg, #2f9a68, #1c7a52);
  color: #fff; border-radius: 12px; padding: 12px; font-weight: 700; cursor: pointer;
}
.le { color: #b42318; min-height: 1.4em; }
.home-link { display: inline-block; margin-top: 14px; color: var(--brand); }

/* 回收站样式 */
.vx-trash-header { margin-bottom: 18px; }
.vx-trash-header h2 { margin: 0 0 6px; }
.vx-trash-header p { margin: 0; color: var(--muted); }
.vx-card.is-deleted { opacity: .75; }
.vx-deleted-badge {
  position: absolute; top: 8px; right: 8px;
  background: #b42318; color: #fff;
  border-radius: 999px; padding: 2px 8px; font-size: 11px;
}

/* 详情弹窗样式 */
.detail-dialog { max-width: 680px; }
.detail-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.detail-header h2 { margin: 0; font-size: 18px; }
.detail-body { max-height: 70vh; overflow-y: auto; }
.detail-section { margin-bottom: 18px; }
.detail-section h4 { margin: 0 0 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.detail-item { display: flex; flex-direction: column; gap: 4px; }
.detail-item label { color: var(--muted); font-size: 11px; }
.detail-item span { font-size: 13px; }
.detail-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.detail-notes { display: flex; flex-direction: column; gap: 8px; }
.detail-notes p { margin: 0; font-size: 14px; color: var(--muted); }
.detail-notes button { align-self: flex-start; }
.detail-notes-edit { display: flex; flex-direction: column; gap: 8px; }
.detail-notes-edit textarea {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  font-size: 14px; resize: vertical; width: 100%;
}
.notes-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.char-count { color: var(--muted); font-size: 12px; }
.mono { font-family: Consolas, monospace; font-size: 11px; word-break: break-all; }

/* 状态徽章 */
.badge.offline { background: #f4e8e8; color: #b42318; }
.badge.pending { background: #f8ecd8; color: #8a5a12; }
.badge.approved { background: #e8f5ee; color: #1c7a52; }

/* 危险按钮样式 */
button.danger, button.danger-text {
  border-color: #b42318 !important; color: #b42318 !important;
}
button.danger { background: #b42318; color: #fff !important; }

/* 选中状态 */
.vx-filters button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.vx-note-hint { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.vx-lesson-note {
  width: 100%; min-height: 180px; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; resize: vertical; background: #fff;
}
.vx-lesson-note-html {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: #f6faf7; color: var(--ink); line-height: 1.6; overflow-wrap: anywhere;
}
.vx-lesson-note-html p { margin: 0 0 8px; }
.vx-player-tools {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
  margin: 0 0 10px; color: var(--muted); font-size: 13px;
}
.vx-player-tools select {
  margin-left: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px;
}
.vx-series-head a { color: var(--brand); font-size: 13px; margin-top: 4px; }
.vx-course { max-width: 860px; margin: 0 auto; padding: 0 20px 48px; }
.vx-course-hero { padding-left: 0; padding-right: 0; }
.vx-course-source { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.vx-course-source a { color: var(--brand); margin-left: 8px; text-decoration: underline; }
.vx-course-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.vx-course-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.vx-course-settings {
  margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--line);
  border-radius: 14px; background: #fff; max-width: 420px;
}
.vx-course-settings label { display: grid; gap: 6px; font-size: 14px; }
.vx-course-settings select {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
.vx-course-settings small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
.vx-course-list { margin-top: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.vx-course-list h2 { margin: 0; padding: 16px 18px 8px; font-size: 16px; }
.vx-course-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--line); color: inherit;
}
.vx-course-row:hover { background: #eef6f0; }
.vx-course-row.current { background: #e7f4ec; }
.vx-course-row-main { min-width: 0; display: grid; gap: 4px; }
.vx-course-row-main b { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.vx-course-row-main small { color: var(--muted); }
.vx-done {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; margin-top: 2px;
  background: #1c7a52; color: #fff; font-size: 12px;
}
.vx-course-row.done .vx-course-row-main b,
.vx-series-list a.done .vx-series-title { color: #1c7a52; }
.vx-attribution { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.vx-attribution a { color: var(--brand); margin-left: 6px; text-decoration: underline; }
.vx-marks { margin: 0 0 12px; }
.vx-marks-add { display: flex; gap: 8px; margin-bottom: 10px; }
.vx-marks-add input {
  flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
.vx-mark-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0;
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 6px 10px; cursor: pointer; max-width: 100%;
}
.vx-mark-chip span { color: var(--muted); }
.vx-import {
  max-width: 1100px; margin: 0 auto 18px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.vx-import h2 { margin: 0 0 6px; font-size: 16px; }
.vx-import-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vx-import-row input[type=url], .vx-import-row input[type=text] {
  flex: 1 1 280px; min-width: 200px; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px;
}
.vx-import-row input[type=number] {
  width: 72px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px;
}
.vx-import-job { margin-top: 12px; color: var(--muted); font-size: 13px; }
.vx-import-job li { margin: 4px 0; }
.vx-course-strip { max-width: 1100px; margin: 0 auto 18px; padding: 0 4px; }
.vx-course-strip h2 { font-size: 16px; margin: 0 0 10px; }
.vx-course-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.vx-course-card {
  display: block; padding: 14px 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
}
.vx-course-card small { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}