:root {
  --bg: #0f1117;
  --bg-soft: #171a23;
  --card: #1c2029;
  --card-hover: #232836;
  --border: #2a2f3a;
  --text: #e8eaf0;
  --text-dim: #9aa1b0;
  --primary: #6c5ce7;
  --primary-2: #a29bfe;
  --green: #2ecc71;
  --red: #ff6b6b;
}


:root[data-theme="light"] {
  --bg: #f5f6fa;
  --bg-soft: #eceef5;
  --card: #ffffff;
  --card-hover: #f0f2f8;
  --border: #dde1ec;
  --text: #1f2430;
  --text-dim: #6b7280;
  --primary: #6c5ce7;
  --primary-2: #5b4bd6;
  --green: #16a34a;
  --red: #dc2626;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
}


.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #2b2350 0%, var(--bg) 60%);
}
.login-card {
  width: 360px; background: var(--card);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 36px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.brand { text-align: center; margin-bottom: 24px; }
.brand-logo { font-size: 44px; }
.brand h1 { font-size: 20px; margin: 8px 0 4px; }
.brand-sub { color: var(--text-dim); font-size: 13px; }
.login-card label { display: block; font-size: 13px; color: var(--text-dim); margin: 14px 0 6px; }
.login-card input {
  width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  font-size: 14px;
}
.login-card input:focus { outline: none; border-color: var(--primary); }
.hint { text-align: center; color: var(--text-dim); font-size: 12px; margin-top: 18px; }


.login-card-wide { width: 400px; }
.auth-tabs { display: flex; gap: 4px; background: var(--bg-soft); border-radius: 10px; padding: 4px; margin-bottom: 8px; }
.auth-tab {
  flex: 1; padding: 8px 0; border: none; background: transparent; color: var(--text-dim);
  font-size: 13px; cursor: pointer; border-radius: 8px; transition: .15s;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active { background: var(--card); color: var(--text); font-weight: 600; }
.auth-panel { padding-top: 4px; }

.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; }
.code-row .btn { flex-shrink: 0; padding: 11px 14px; white-space: nowrap; }
.code-row .btn:disabled { opacity: .5; cursor: not-allowed; }
.code-hint { font-size: 12px; color: var(--green); margin: 6px 0 0; word-break: break-all; }

.oauth-divider {
  display: flex; align-items: center; gap: 12px; color: var(--text-dim);
  font-size: 12px; margin: 22px 0 12px;
}
.oauth-divider::before, .oauth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.oauth-btns { display: flex; gap: 10px; }
.oauth-btn {
  flex: 1; padding: 10px 0; border-radius: 10px; border: 1px solid var(--border);
  background: transparent; color: var(--text); font-size: 14px; cursor: pointer; transition: .15s;
}
.oauth-btn:hover { border-color: var(--text-dim); }
.oauth-wechat:hover { background: rgba(46,204,113,.1); border-color: var(--green); }
.oauth-douyin:hover { background: rgba(108,92,231,.12); border-color: var(--primary); }


.qr-box { text-align: center; margin: 4px 0 12px; }
.qr-frame {
  width: 200px; height: 200px; margin: 0 auto; background: #fff;
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.qr-frame img { width: 100%; height: 100%; transition: opacity .3s; }
.qr-loading { color: var(--text-dim); font-size: 13px; }
.qr-tip { color: var(--text-dim); font-size: 12px; margin-top: 10px; }
.qr-success { text-align: center; padding: 20px 0; }
.qr-success-icon { font-size: 48px; }
.qr-success h2 { margin: 8px 0 4px; }
.qr-success p { color: var(--text-dim); font-size: 13px; }


.btn {
  display: inline-block; padding: 10px 16px; border-radius: 10px;
  border: none; cursor: pointer; font-size: 14px; text-decoration: none;
  transition: .15s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-2); }
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); }
.btn-block { width: 100%; margin-top: 20px; padding: 12px; font-size: 15px; }


.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar-brand { font-weight: 700; font-size: 16px; color: var(--text); text-decoration: none; }
.topbar-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topbar-nav a {
  color: var(--text-dim); text-decoration: none; font-size: 14px;
  padding: 6px 12px; border-radius: 8px; transition: .15s;
}
.topbar-nav a:hover { color: var(--text); background: var(--card); }
.topbar-nav a.active { color: #fff; background: var(--primary); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.user-badge { color: var(--text-dim); font-size: 14px; }


.nav-more { position: relative; }
.nav-more-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 14px; font-family: inherit;
  padding: 6px 12px; border-radius: 8px; transition: .15s;
}
.nav-more-btn:hover { color: var(--text); background: var(--card); }
.nav-more-btn.active { color: #fff; background: var(--primary); }
.nav-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 340px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.25);
  display: none; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px; z-index: 30;
}
.nav-more-menu.open { display: grid; }
.nav-more-menu a {
  display: block; padding: 9px 14px; border-radius: 8px;
  color: var(--text-dim); text-decoration: none; font-size: 14px;
}
.nav-more-menu a:hover { color: var(--text); background: var(--card); }
.nav-more-menu a.active { color: #fff; background: var(--primary); }
.nav-more-menu .admin-link {
  grid-column: 1 / -1;
  color: var(--primary-2); font-weight: 600;
  margin-top: 4px; padding-top: 11px;
  border-top: 1px dashed var(--border);
  border-radius: 0 0 8px 8px;
}
.nav-more-menu .admin-link:hover { background: rgba(255,107,107,.12); }
.nav-more-menu .admin-link.active { color: #fff; background: var(--primary); }


.side-join {
  position: fixed; left: 0; top: 50vh;
  z-index: 999;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 28%, #ffd76e, #ffb347);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(255, 160, 60, .45);
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.side-join:hover { transform: scale(1.1); box-shadow: 0 8px 26px rgba(255, 160, 60, .6); }
.side-join.dragging { cursor: grabbing; transform: scale(1.05); box-shadow: 0 10px 30px rgba(255, 160, 60, .7); }
.side-join-figure { width: 46px; height: 46px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); pointer-events: none; }
.side-join-tip {
  position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%) translateX(-8px);
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 7px 13px; border-radius: 10px; font-size: 13px; font-weight: 600;
  white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none; transition: .18s;
}
.side-join:hover .side-join-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

.side-join.tip-left .side-join-tip {
  left: auto; right: calc(100% + 8px);
  transform: translateY(-50%) translateX(8px);
}
.side-join.tip-left:hover .side-join-tip { transform: translateY(-50%) translateX(0); }
@media (max-width: 640px) {
  .side-join { width: 48px; height: 48px; }
  .side-join-figure { width: 38px; height: 38px; }
}


.container { max-width: 1200px; margin: 0 auto; padding: 28px 24px 60px; }

.hero h1 { font-size: 28px; }
.synopsis { color: var(--text-dim); margin-top: 8px; max-width: 820px; }

.section { margin-top: 36px; }
.section h2 { font-size: 18px; margin-bottom: 16px; border-left: 3px solid var(--primary); padding-left: 10px; }
.sub-title { font-size: 15px; margin: 20px 0 10px; color: var(--text); }
.count {
  display: inline-block; background: var(--bg-soft); color: var(--text-dim);
  border-radius: 20px; padding: 1px 10px; font-size: 12px; margin-left: 6px; vertical-align: middle;
}


.stage-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.stage-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.stage-card.done { border-color: var(--green); }
.stage-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-dim); margin-bottom: 10px;
}
.stage-card.done .stage-dot { background: var(--green); }
.stage-label { font-weight: 600; font-size: 14px; }
.stage-detail { color: var(--text-dim); font-size: 12px; margin-top: 4px; }


.stage-timeline {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start;
  padding: 10px 0 6px; overflow-x: auto;
}
.tl-step {
  flex: 1 1 0; min-width: 96px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; padding: 0 8px;
}

.tl-step::before {
  content: ''; position: absolute; top: 16px; left: -50%; width: 100%; height: 3px;
  background: var(--border); z-index: 0; border-radius: 2px;
}
.tl-step:first-child::before { display: none; }
.tl-step.done::before { background: var(--green); }
.tl-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--text-dim);
  z-index: 1; position: relative; transition: .2s;
}
.tl-step.done .tl-dot { background: var(--green); border-color: var(--green); color: #fff; }
.tl-step.active .tl-dot { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px rgba(99,102,241,.16); }
.tl-step.active .tl-dot::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--primary); opacity: .5; animation: tlPulse 1.4s infinite;
}
@keyframes tlPulse {
  0% { transform: scale(.8); opacity: .6; }
  100% { transform: scale(1.28); opacity: 0; }
}
.tl-label { font-weight: 600; font-size: 13px; margin-top: 9px; }
.tl-step.done .tl-label { color: var(--green); }
.tl-detail { color: var(--text-dim); font-size: 11px; margin-top: 3px; }
.tl-eta { color: var(--text-dim); font-size: 10px; margin-top: 3px; opacity: .75; }

.tl-bar {
  width: 100%; height: 4px; border-radius: 2px;
  background: var(--border); margin-top: 7px; overflow: hidden;
}
.tl-bar-fill {
  height: 100%; width: 0; border-radius: 2px;
  background: var(--primary); transition: width .5s;
}
.tl-step.done .tl-bar-fill { background: var(--green); }
.tl-step.active .tl-bar-fill { background: var(--primary); }
.tl-pct { font-size: 11px; font-weight: 600; margin-top: 4px; color: var(--primary); min-height: 15px; }
.tl-step.done .tl-pct { color: var(--green); }


.global-toast {
  position: fixed; top: 74px; left: 50%; transform: translateX(-50%) translateY(-14px);
  z-index: 1200;
  background: var(--card); border: 1px solid var(--green); color: var(--text);
  padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; transition: .25s; max-width: 90vw;
}
.global-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


.gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.tile {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; text-align: center;
  transition: .15s;
}
.tile:hover { border-color: var(--primary-2); transform: translateY(-2px); }
.tile img { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; }
.tile figcaption { padding: 8px; font-size: 13px; color: var(--text-dim); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.tile-name { word-break: break-all; }
.tile-rerender-btn { color: var(--primary-2); }
.tile-rerender-btn:disabled { opacity: .6; cursor: not-allowed; }


.shot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.shot-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
}
.shot-card img { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; }
.shot-noimg {
  width: 100%; aspect-ratio: 9/16; display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--text-dim); font-size: 13px;
}
.shot-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.tag {
  font-size: 11px; background: var(--bg-soft); color: var(--text-dim);
  border-radius: 6px; padding: 2px 8px;
}
.shot-dialogue {
  padding: 8px 12px 0; font-size: 13px; color: #f6d365;
}
.shot-visual {
  padding: 8px 12px 12px; font-size: 12px; color: var(--text-dim);
}
.shot-text { display: flex; flex-direction: column; }
.shot-edit-btn { margin-left: auto; }
.shot-rerender-btn { color: var(--primary-2); }
.shot-rerender-btn:disabled { opacity: .6; cursor: not-allowed; }
.shot-video-btn { color: #f6a5c0; }
.shot-video-btn:disabled { opacity: .6; cursor: not-allowed; }
.shot-tts-btn { color: #a5d6a7; }
.shot-tts-btn:disabled { opacity: .6; cursor: not-allowed; }
.shot-edit-label {
  display: block; padding: 10px 12px 0; font-size: 12px; font-weight: 600; color: var(--text-dim);
}
.shot-edit-input {
  width: calc(100% - 24px); margin: 6px 12px 0; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft);
  color: var(--text); font-size: 13px; font-family: inherit; resize: vertical; box-sizing: border-box;
}
.shot-edit-input:focus { outline: none; border-color: var(--primary-2); }
.shot-edit-actions {
  display: flex; gap: 8px; padding: 10px 12px 12px;
}


.video-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;
}
.video-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.video-card video { width: 100%; aspect-ratio: 9/16; background: #000; display: block; }
.video-card figcaption { padding: 10px 12px; font-size: 12px; color: var(--text-dim); word-break: break-all; }
.dim { opacity: .7; }


.proj-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.proj-card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px; transition: .15s;
}
.proj-card:hover { border-color: var(--primary-2); transform: translateY(-2px); }
.proj-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.proj-title { font-weight: 700; font-size: 16px; }
.proj-idea { color: var(--text-dim); font-size: 13px; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.proj-meta { display: flex; gap: 14px; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.proj-stage { font-size: 12px; color: var(--primary-2); }
.refund-tag { color: var(--red); font-size: 12px; }
.empty-box { text-align: center; padding: 40px 0; }
.empty-box .empty { margin-bottom: 16px; }


.status-pill {
  display: inline-block; padding: 3px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.st-queued { background: rgba(154,161,176,.15); color: var(--text-dim); }
.st-running { background: rgba(108,92,231,.2); color: var(--primary-2); }
.st-done { background: rgba(46,204,113,.15); color: var(--green); }
.st-error { background: rgba(255,107,107,.15); color: var(--red); }


.queue-pos {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: rgba(246,211,101,.18); color: #f6d365;
  border: 1px solid rgba(246,211,101,.35);
}


.topbar-nav .admin-link { color: var(--primary-2); font-weight: 600; }


.sub-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 16px; font-size: 13px; font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.sub-expiring { background: rgba(246,211,101,.12); color: #f6d365; }
.sub-expired { background: rgba(255,107,107,.12); color: var(--red); }
.sub-banner-link {
  color: inherit; font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap;
}


.proj-link { color: var(--primary-2); font-weight: 600; text-decoration: none; }
.proj-link:hover { text-decoration: underline; }


.task-banner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
}
.task-banner.st-running { border-color: var(--primary); }
.task-banner.st-done { border-color: var(--green); }
.task-banner.st-error { border-color: var(--red); }
.task-left { display: flex; align-items: center; gap: 14px; }
.task-stage { color: var(--text-dim); font-size: 13px; }
.task-idea { color: var(--text-dim); font-size: 13px; max-width: 420px; }

.log-panel { margin-top: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.log-panel summary {
  cursor: pointer; padding: 12px 16px; font-size: 14px; color: var(--text-dim);
  user-select: none;
}
.log-view {
  margin: 0; padding: 14px 16px; max-height: 320px; overflow-y: auto;
  background: #0a0c12; border-top: 1px solid var(--border);
  border-radius: 0 0 12px 12px; font-family: "Consolas", "Courier New", monospace;
  font-size: 12px; line-height: 1.7; color: #b8c0cc; white-space: pre-wrap; word-break: break-all;
}


.container.narrow { max-width: 720px; }
.form-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px; margin-top: 20px;
}
.form-card label { display: block; font-size: 13px; color: var(--text-dim); margin: 16px 0 6px; }
.form-card textarea, .form-card input {
  width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  font-size: 14px; font-family: inherit;
}
.form-card textarea { resize: vertical; }
.form-card textarea:focus, .form-card input:focus { outline: none; border-color: var(--primary); }
.check-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check-item {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
.check-item input { width: auto; }


.account-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.account-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px;
}
.ac-label { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.ac-value { font-size: 22px; font-weight: 700; }
.ac-value.big { font-size: 30px; }
.ac-unit { font-size: 13px; color: var(--text-dim); font-weight: 400; }
.dim-unit { font-size: 14px; color: var(--text-dim); font-weight: 400; }
.ac-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.ac-sub.expired { color: var(--red); }
.ac-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.tier-badge {
  display: inline-block; padding: 4px 14px; border-radius: 20px;
  font-size: 14px; font-weight: 700;
}
.tier-normal { background: rgba(154,161,176,.15); color: var(--text-dim); }
.tier-free_trial { background: rgba(46,204,113,.15); color: var(--green); }
.tier-vip { background: rgba(108,92,231,.2); color: var(--primary-2); }
.tier-svip { background: rgba(246,211,101,.2); color: #f6d365; }
.tier-enterprise_vip { background: rgba(255,107,107,.15); color: var(--red); }
.tier-admin { background: rgba(46,204,113,.2); color: var(--green); }


.table-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow-x: auto;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table th { color: var(--text-dim); font-weight: 600; font-size: 12px; background: var(--bg-soft); }
.data-table tr:last-child td { border-bottom: none; }
.data-table .pos { color: var(--green); font-weight: 600; }
.data-table .neg { color: var(--red); font-weight: 600; }
.data-table .reason { color: var(--text); white-space: normal; min-width: 160px; }
.tag-in { background: rgba(46,204,113,.15); color: var(--green); }
.tag-out { background: rgba(255,107,107,.15); color: var(--red); }


.plan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px;
}
.plan-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; display: flex; flex-direction: column;
  transition: .15s; position: relative;
}
.plan-card:hover { transform: translateY(-3px); border-color: var(--primary-2); }
.plan-card.current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.plan-name { font-size: 18px; font-weight: 700; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.price-num { font-size: 32px; font-weight: 800; }
.price-period { color: var(--text-dim); font-size: 13px; }
.plan-bonus { font-size: 13px; color: #f6d365; margin-bottom: 14px; }
.plan-features { list-style: none; margin: 0 0 20px; flex: 1; }
.plan-features li { font-size: 13px; color: var(--text-dim); padding: 5px 0; }


.plan-hot { border-color: #f6d365; }
.plan-hot .plan-name { color: #f6d365; }
.plan-yen { font-size: 18px; font-weight: 700; color: var(--primary-2); }
.plan-per { color: var(--text-dim); font-size: 13px; }
.plan-custom { font-size: 20px; font-weight: 700; color: var(--text-dim); }
.plan-days { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.plan-feats { list-style: none; margin: 0 0 16px; flex: 1; }
.plan-feats li { font-size: 13px; color: var(--text-dim); padding: 5px 0; }
.plan-toolbar { margin-top: 16px; display: flex; justify-content: flex-end; }


.admin-users .strong { font-weight: 600; }
.admin-users .admin-ops { display: flex; gap: 6px; flex-wrap: nowrap; }
.admin-ops .btn { white-space: nowrap; }


.recharge-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
}
.recharge-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 14px; text-align: center; cursor: pointer;
  transition: .15s; color: var(--text); font-family: inherit;
}
.recharge-card:hover { border-color: var(--primary-2); transform: translateY(-2px); }
.rc-credits { font-size: 18px; font-weight: 700; }
.rc-yuan { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.rc-bonus { font-size: 12px; color: #f6d365; margin-top: 8px; }
.recharge-custom { display: flex; gap: 10px; }
.recharge-custom input { flex: 1; }


.pay-body { text-align: center; }
.pay-info { margin-bottom: 16px; }
.pay-desc { font-size: 15px; font-weight: 600; }
.pay-amount { font-size: 34px; font-weight: 800; color: var(--primary); margin-top: 6px; }
.pay-channel-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.channel-tab {
  padding: 8px 20px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--card); color: var(--text-dim); cursor: pointer; font-size: 13px;
}
.channel-tab.active { border-color: var(--primary); color: var(--primary-2); background: rgba(108,92,231,.12); }
.pay-qr-wrap {
  width: 200px; height: 200px; margin: 0 auto 12px;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.pay-qr-wrap img { width: 100%; height: 100%; object-fit: contain; }


.estimate-box {
  background: var(--bg-soft); border: 1px dashed var(--primary);
  border-radius: 12px; padding: 14px 16px; margin-top: 20px;
}
.est-head { font-size: 13px; color: var(--primary-2); font-weight: 600; margin-bottom: 10px; }
.est-rows { display: flex; flex-direction: column; gap: 6px; }
.est-row {
  display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim);
}
.est-total {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--text);
}
.est-total strong { color: #f6d365; font-size: 18px; }
.est-insufficient strong { color: var(--red); }
.est-warn { margin-top: 8px; font-size: 12px; color: var(--red); }
.est-ok { margin-top: 8px; font-size: 12px; color: var(--green); }

.balance-bar {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 14px; margin-top: 12px; font-size: 13px;
}
.balance-bar strong { color: #f6d365; font-size: 15px; }
.btn-sm { padding: 4px 12px; font-size: 12px; }


.dist-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.dist-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; text-decoration: none; color: var(--text);
  transition: border-color .15s, transform .15s;
}
.dist-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.dist-card-head { display: flex; align-items: center; justify-content: space-between; }
.dist-emoji { font-size: 26px; }
.dist-name { font-weight: 700; font-size: 16px; }
.dist-meta { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.dist-mode {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(246, 211, 101, .12); color: #f6d365; white-space: nowrap;
}
.dist-summary { font-size: 13px; color: var(--text-dim); line-height: 1.6; flex: 1; }
.dist-foot { font-size: 12px; color: var(--text-dim); border-top: 1px dashed var(--border); padding-top: 8px; }
.dist-contact { word-break: break-all; }

.dist-status {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.dist-open { background: rgba(76, 217, 100, .12); color: #4cd964; }
.dist-review { background: rgba(246, 211, 101, .12); color: #f6d365; }
.dist-closed { background: var(--bg-soft); color: var(--text-dim); }


.back-row { margin-bottom: 14px; }
.dist-detail-summary { font-size: 14px; line-height: 1.8; color: var(--text); margin-bottom: 10px; }
.dist-list-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.dist-list { list-style: none; margin: 0; padding: 0; }
.dist-list li {
  position: relative; padding: 6px 0 6px 22px; font-size: 13px; color: var(--text); line-height: 1.6;
}
.dist-list li::before { content: "✓"; position: absolute; left: 0; color: #4cd964; font-weight: 700; }

.dist-process { display: flex; flex-direction: column; gap: 10px; }
.dist-step {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px;
}
.dist-step-no {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(246, 211, 101, .15); color: #f6d365;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.dist-step-text { font-size: 13px; color: var(--text); }
.dist-contact-big { font-size: 15px; color: var(--text); word-break: break-all; margin-bottom: 8px; }


.dist-hist-line { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.5; }
.dist-hist-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: #f6d365; margin-right: 2px;
}


.modal-lg { max-width: 680px; }
.dist-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.dist-form-col { display: flex; flex-direction: column; gap: 6px; }
.dist-form-col label { font-size: 13px; color: var(--text-dim); }


.book-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px;
  max-height: 300px; overflow-y: auto; padding: 4px;
}
.book-card {
  cursor: pointer; border: 2px solid var(--border); border-radius: 10px;
  padding: 6px; text-align: center; transition: border-color .15s, transform .15s;
  background: var(--card); position: relative;
}
.book-card:hover { border-color: var(--primary-2); transform: translateY(-2px); }
.book-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,.25); }
.book-cover {
  position: relative; aspect-ratio: 3/4; border-radius: 7px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 6px; box-sizing: border-box;
}
.book-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.book-cover-cat {
  color: rgba(255,255,255,.92); font-size: 9px; line-height: 1.2; padding: 1px 6px; border-radius: 999px;
  background: rgba(0,0,0,.28); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  position: relative; z-index: 1;
}
.book-cover-text {
  color: #fff; font-weight: 700; font-size: 12px; line-height: 1.4;
  text-align: left; text-shadow: 0 1px 4px rgba(0,0,0,.45);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-all; width: 100%; position: relative; z-index: 1;
}
.book-cover-platform {
  color: rgba(255,255,255,.85); font-size: 9px; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1;
}
.book-tag {
  position: absolute; top: -6px; left: -4px; z-index: 2;
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: linear-gradient(135deg,#ff6a88,#ff9a3d); color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); white-space: nowrap;
}
.book-ready-dot {
  position: absolute; top: -5px; right: -4px; z-index: 2;
  width: 18px; height: 18px; border-radius: 50%; background: #4cd964;
  color: #fff; font-size: 10px; line-height: 18px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.book-card-title {
  font-size: 12px; font-weight: 600; color: var(--text); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.book-card-meta {
  font-size: 11px; color: var(--text-dim); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.book-cover-mini { width: 52px; aspect-ratio: 3/4; border-radius: 6px; flex: none; padding: 4px; justify-content: center; align-items: center; }
.book-cover-mini .book-cover-text { font-size: 10px; padding: 0; -webkit-line-clamp: 3; text-align: center; }
.book-cover-mini .book-cover-cat, .book-cover-mini .book-cover-platform { display: none; }
.cover-upload-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 4px; }
.cover-upload-btns { display: flex; flex-direction: column; gap: 6px; }


.groups-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px;
}
.group-card {
  display: flex; flex-direction: column; text-align: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 16px 16px; transition: .18s;
}
.group-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.group-qr {
  width: 180px; height: 180px; margin: 0 auto 14px; border-radius: 12px;
  overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.group-qr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.group-qr-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--text-dim); font-size: 13px;
}
.group-qr-placeholder span { font-size: 12px; }
.group-qr-mini { width: 48px; height: 48px; margin: 0; border-radius: 8px; }
.group-qr-mini .group-qr-placeholder { font-size: 10px; }
.group-qr-mini .group-qr-placeholder span { font-size: 9px; }
.group-body { flex: 1; }
.group-name { font-size: 16px; margin-bottom: 6px; }
.group-desc { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0; }
.group-tip {
  margin-top: 12px; font-size: 12px; color: var(--primary-2);
  background: var(--bg-soft); border-radius: 8px; padding: 6px 10px;
}



.book-filter-row { display: flex; gap: 8px; margin-bottom: 10px; }
.book-filter-row select { flex: 0 0 130px; }
.book-filter-row input { flex: 1; }


.modal-book { max-width: 460px; }
.book-detail-body { display: flex; gap: 16px; align-items: flex-start; }
.book-detail-cover {
  flex: 0 0 120px; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 8px; box-sizing: border-box; position: relative;
}
.book-detail-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book-detail-cover-title { font-size: 15px; }
.book-detail-info { flex: 1; min-width: 0; }
.book-detail-title { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.4; }
.book-detail-meta { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.6; }
.book-detail-summary {
  font-size: 13px; color: var(--text); line-height: 1.7; margin-top: 12px;
  padding: 10px 12px; background: var(--bg-soft); border-radius: 8px; border: 1px solid var(--border);
}
.book-tag-static {
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: linear-gradient(135deg,#ff6a88,#ff9a3d); color: #fff; white-space: nowrap;
}


.queue-card .dist-summary { flex: 1; }
.queue-actions { display: flex; gap: 8px; justify-content: flex-end; }
.queue-actions .btn { flex: 1; text-align: center; }


.file-list { list-style: none; }
.file-list li {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; font-size: 13px;
}
.empty { color: var(--text-dim); font-size: 14px; }
.alert { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.alert-error { background: rgba(255,107,107,.12); color: var(--red); border: 1px solid rgba(255,107,107,.3); }
.alert-warn { background: rgba(246,211,101,.12); color: #f6d365; border: 1px solid rgba(246,211,101,.3); }
.alert-link { color: #f6d365; font-weight: 600; text-decoration: underline; }
.footer { text-align: center; color: var(--text-dim); font-size: 12px; padding: 24px; border-top: 1px solid var(--border); }


.proj-card { display: flex; flex-direction: column; overflow: hidden; }
.proj-main { text-decoration: none; color: var(--text); display: block; padding: 18px 18px 12px; flex: 1; }
.proj-actions {
  display: flex; gap: 8px; padding: 10px 18px;
  border-top: 1px solid var(--border); background: var(--bg-soft);
}
.proj-actions .btn { flex: 1; text-align: center; }
.btn-danger { color: var(--red); border-color: rgba(255,107,107,.3); }
.btn-danger:hover { background: rgba(255,107,107,.1); border-color: var(--red); color: var(--red); }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; background: rgba(255,107,107,.05); }
.btn-danger:disabled:hover { background: rgba(255,107,107,.05); }


.rights-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.right-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.right-icon { font-size: 20px; line-height: 1.4; }
.right-name { font-size: 12px; color: var(--text-dim); margin-bottom: 2px; }
.right-val { font-size: 14px; }
.right-val .dim { font-size: 12px; }

.delete-form-box {
  background: rgba(255,107,107,.05); border: 1px solid rgba(255,107,107,.25);
  border-radius: 12px; padding: 16px;
}
.ack-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--text); cursor: pointer;
  padding: 10px 12px; background: rgba(255,107,107,.08);
  border-radius: 8px; margin-bottom: 14px;
}
.ack-row input { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.form-row input {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  font-size: 14px; box-sizing: border-box;
}
.form-row input:focus { outline: none; border-color: var(--red); }


.realname-card {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.realname-card.verified { border-color: rgba(46,204,113,.4); }
.realname-status { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.realname-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.realname-field {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--card); border-radius: 8px;
}
.field-label { font-size: 12px; color: var(--text-dim); min-width: 60px; }
.field-value { font-size: 14px; font-weight: 600; letter-spacing: .5px; }
.realname-warn { border-color: rgba(246,211,101,.4); background: rgba(246,211,101,.08); }
.realname-warn a { color: #f6d365; font-weight: 600; }


.profile-card {
  display: flex; align-items: center; gap: 20px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px; margin-bottom: 16px;
}
.profile-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.profile-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--primary);
  background: var(--bg-soft);
}
.profile-avatar-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.avatar-upload-btn { cursor: pointer; }
.profile-info { display: flex; flex-direction: column; gap: 6px; }
.profile-name { font-size: 20px; font-weight: 700; }
.profile-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; }


.topbar-user {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text);
}
.topbar-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--primary);
}


.topbar-bell {
  position: relative; text-decoration: none; font-size: 18px;
  color: var(--text); line-height: 1;
}
.bell-badge {
  position: absolute; top: -7px; right: -9px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--red); color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 16px;
  text-align: center; box-sizing: border-box;
}


.notif-list { display: flex; flex-direction: column; gap: 10px; }
.notif-item {
  display: flex; gap: 14px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
}
.notif-item.unread { border-color: var(--primary); background: rgba(99,102,241,.04); }
.notif-icon { font-size: 22px; flex: none; }
.notif-main { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.notif-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none;
}
.notif-content { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.7; white-space: pre-wrap; }
.notif-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12px; }
.notif-link { color: var(--primary-2); text-decoration: none; font-weight: 600; }
.notif-del { background: transparent; border: 1px solid rgba(220,53,69,.4); color: #dc3545; padding: 3px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.notif-del:hover { background: rgba(220,53,69,.1); }


.notif-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.notif-filters .chip { display: inline-flex; align-items: center; gap: 6px; }
.chip-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
}
.chip.active .chip-badge { background: rgba(255,255,255,.28); color: #fff; }
.chip:not(.active) .chip-badge { background: var(--red); }


.hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hero-actions { display: flex; gap: 8px; }


.zoomable { cursor: zoom-in; }
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.88); align-items: center; justify-content: center;
  padding: 40px;
}
.lightbox.show { display: flex; }
.lightbox-inner { max-width: 92vw; max-height: 92vh; text-align: center; }
.lightbox-inner img {
  max-width: 92vw; max-height: 82vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.lightbox-caption { color: var(--text); margin-top: 12px; font-size: 14px; }


.script-body { padding: 16px; max-height: 480px; overflow-y: auto; }
.script-block { margin-bottom: 20px; }
.script-title { font-weight: 600; font-size: 14px; color: var(--primary-2); margin-bottom: 8px; }
.script-pre {
  background: #0a0c12; border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; font-family: "Consolas","Courier New",monospace; font-size: 12px;
  line-height: 1.7; color: #b8c0cc; white-space: pre-wrap; word-break: break-all;
  max-height: 300px; overflow-y: auto;
}
.loading { color: var(--text-dim); font-size: 13px; }


.artifact-body { padding: 16px; }
.artifact-list { list-style: none; }
.artifact-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.artifact-list li:last-child { border-bottom: none; }
.artifact-list .file-name { flex: 1; word-break: break-all; }
.file-name { flex: 1; word-break: break-all; }
.file-list li { display: flex; align-items: center; gap: 12px; }
.file-list .file-name { flex: 1; }


.pre-line { white-space: pre-line; }


.key-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 14px;
}
.key-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.key-name { font-weight: 700; font-size: 15px; }
.key-stage { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.key-masked { margin-bottom: 8px; }
.key-masked code {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 8px; font-size: 13px; color: #a29bfe;
}
.key-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.key-form-row { display: flex; gap: 8px; }
.key-form-row input {
  flex: 1; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  font-size: 13px; font-family: "Consolas", monospace;
}
.key-form-row input:focus { outline: none; border-color: var(--primary); }
.key-form-tip { font-size: 12px; color: var(--text-dim); margin-top: 8px; }


.stage-group {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 18px;
}
.stage-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.stage-group-emoji { font-size: 22px; }
.stage-group-title { flex: 1; }
.stage-group-name { font-weight: 700; font-size: 16px; }
.stage-group-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.stage-group-status {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-dim); border: 1px solid var(--border);
}
.stage-group-status.ok { background: rgba(76, 217, 100, .12); color: #4cd964; border-color: rgba(76, 217, 100, .3); }


.model-intro { margin-bottom: 14px; }
.model-intro-title { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.model-intro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.model-intro-list li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 12px; border-radius: 8px; background: var(--bg-soft);
  border: 1px solid var(--border); font-size: 13px;
}
.model-intro-list li.active { border-color: rgba(246, 211, 101, .4); background: rgba(246, 211, 101, .08); }
.mi-name { font-weight: 600; color: var(--text); white-space: nowrap; }
.mi-intro { color: var(--text-dim); flex: 1; }
.mi-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(246, 211, 101, .15); color: #f6d365; white-space: nowrap;
}
.mi-badge.configured { background: rgba(76, 217, 100, .12); color: #4cd964; }


.key-config { border-top: 1px dashed var(--border); padding-top: 14px; }
.key-config-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.model-select {
  flex: 1; max-width: 320px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  font-size: 13px;
}
.model-select:focus { outline: none; border-color: var(--primary); }
.key-masked-inline code {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 8px; font-size: 13px; color: #a29bfe;
}

.note-box {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; font-size: 13px; color: var(--text-dim);
}
.note-box p { margin-top: 8px; line-height: 1.7; }
.note-box code { color: #a29bfe; }


.copyright-tip {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 18px; padding: 12px 16px;
  background: rgba(255, 176, 32, 0.08); border: 1px solid rgba(255, 176, 32, 0.35);
  border-radius: 12px; font-size: 13px; line-height: 1.7; color: var(--text-dim);
}
.copyright-tip-icon { flex-shrink: 0; font-size: 16px; line-height: 1.5; }
.copyright-tip-text b { color: var(--text); }



.style-filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px;
}
.chip {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  background: var(--bg-soft); color: var(--text-dim);
  border: 1px solid var(--border); font-size: 13px;
  transition: all .15s ease;
}
.chip:hover { color: var(--text); border-color: var(--primary); }
.chip.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.style-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.style-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .15s ease, border-color .15s ease;
}
.style-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.style-card-emoji { font-size: 40px; line-height: 1; }
.style-card-head { display: flex; align-items: center; gap: 8px; }
.style-card-head h3 { font-size: 17px; margin: 0; }
.badge {
  font-size: 11px; background: rgba(155,89,182,.18); color: #c39bd3;
  border-radius: 6px; padding: 2px 8px;
}
.style-card-desc { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0; }
.style-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.style-card-meta { font-size: 12px; color: var(--text-dim); }
.style-card-actions { margin-top: auto; }


.style-card-cover {
  position: relative; height: 180px; border-radius: 10px; overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--border);
}
.style-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.style-cover-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 64px; background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(155,89,182,.08));
}
.style-card-actions-top {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 6px;
}
.style-cover-hint {
  position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px;
}


.style-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;
  margin-bottom: 8px;
}
.style-option {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: var(--bg-soft); border: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim);
  transition: all .15s ease; user-select: none;
}
.style-option:hover { border-color: var(--primary); color: var(--text); }
.style-option.active {
  border-color: var(--primary); background: rgba(99,102,241,.12);
  color: var(--text); box-shadow: 0 0 0 1px var(--primary);
}
.style-option-emoji { font-size: 18px; }
.style-option-name { white-space: nowrap; }


.style-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.icon-btn {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease; padding: 0; line-height: 1;
}
.icon-btn:hover { border-color: var(--primary); }
.fav-btn.fav-on { border-color: #f8586b; background: rgba(248,88,107,.12); }
.badge-lock { background: rgba(246,211,101,.15); color: #f6d365; }
.style-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.style-card-meta .hot { color: #f6a35c; }


.style-sort { display: inline-flex; gap: 6px; margin-left: auto; align-items: center; }
.style-sort::before { content: "排序："; font-size: 12px; color: var(--text-dim); }


.style-create { margin-bottom: 8px; }
.style-create > summary {
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--primary-2);
  padding: 4px 0;
}
.style-create-body { padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.style-create-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}
.style-create-body label { font-size: 13px; color: var(--text-dim); }
.style-create-body input, .style-create-body textarea {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  font-size: 13px; box-sizing: border-box;
}
.style-create-body input:focus, .style-create-body textarea:focus {
  outline: none; border-color: var(--primary);
}
.style-create-actions { display: flex; align-items: center; gap: 12px; }


.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  padding: 20px;
}
.modal-mask[hidden] { display: none; }
.modal {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
  padding: 20px 24px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-body { display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.modal-body label { font-size: 13px; color: var(--text-dim); }
.modal-body input, .modal-body textarea {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  font-size: 13px; box-sizing: border-box;
}
.modal-body input:focus, .modal-body textarea:focus {
  outline: none; border-color: var(--primary);
}
.modal-body select {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  font-size: 13px; box-sizing: border-box;
}
.modal-body select:focus { outline: none; border-color: var(--primary); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-meta .hot { color: #f6a35c; }
.detail-block { display: flex; flex-direction: column; gap: 6px; }
.detail-label { font-size: 13px; color: var(--primary-2); font-weight: 600; }
.detail-text {
  font-size: 13px; line-height: 1.7; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; white-space: pre-wrap; word-break: break-all;
}


.timeline { display: flex; flex-direction: column; gap: 0; padding-left: 6px; }
.timeline-item { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before {
  content: ""; position: absolute; left: 7px; top: 18px; bottom: 0;
  width: 2px; background: var(--border);
}
.timeline-dot {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-soft); border: 2px solid var(--border);
  margin-top: 2px; position: relative; z-index: 1;
}
.timeline-dot.done { background: #4cd964; border-color: #4cd964; }
.timeline-body { flex: 1; }
.timeline-head { display: flex; align-items: center; justify-content: space-between; }
.timeline-status { font-weight: 600; font-size: 14px; color: var(--text); }
.timeline-note { font-size: 13px; color: var(--text-dim); margin-top: 4px; line-height: 1.6; }
.timeline-actor { font-size: 12px; margin-top: 4px; }


.usage-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
}
.usage-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.usage-val { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.2; }
.usage-label { font-size: 13px; color: var(--text-dim); }
.usage-sub { font-size: 12px; color: var(--text-dim); opacity: .8; }
.usage-total { border-color: var(--primary); background: rgba(99,102,241,.06); }
.usage-total .usage-val { color: var(--primary-2); }


.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px;
  margin-bottom: 18px;
}
.stat-item {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; text-align: center;
}
.stat-val { font-size: 24px; font-weight: 700; }
.stat-label { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.stat-item.st-run .stat-val { color: #f6a35c; }
.stat-item.st-que .stat-val { color: #f6d365; }
.stat-item.st-done .stat-val { color: #46d17c; }
.stat-item.st-err .stat-val { color: #f8586b; }


.proj-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px;
}
.proj-toolbar input[type="search"] {
  flex: 1; min-width: 200px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  font-size: 13px;
}
.proj-toolbar input[type="search"]:focus { outline: none; border-color: var(--primary); }
.proj-filters { display: flex; flex-wrap: wrap; gap: 8px; }


.eco-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px;
}
.eco-tab {
  flex: 1; min-width: 120px; padding: 10px 14px; border: none; border-radius: 9px;
  background: transparent; color: var(--text-dim); font-size: 14px; cursor: pointer;
  transition: .15s; white-space: nowrap;
}
.eco-tab:hover { color: var(--text); background: var(--card); }
.eco-tab.active { background: var(--primary); color: #fff; font-weight: 600; }
.eco-new {
  display: inline-block; font-size: 10px; font-weight: 700; margin-left: 4px;
  padding: 0 5px; border-radius: 999px; background: #ff6a88; color: #fff;
  vertical-align: middle;
}

.eco-panel { display: none; margin-top: 16px; }
.eco-panel.active { display: block; }
.eco-panel-desc {
  font-size: 13px; color: var(--text-dim); margin-bottom: 16px;
  padding: 10px 14px; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 10px;
}
.eco-panel-desc strong { color: var(--text); }

.eco-upload { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.eco-upload-btn {
  display: inline-block; padding: 10px 18px; border-radius: 10px; cursor: pointer;
  border: 1px dashed var(--text-dim); color: var(--text-dim); font-size: 14px;
  transition: .15s; background: var(--bg-soft);
}
.eco-upload-btn:hover { border-color: var(--primary); color: var(--primary-2); }
.eco-upload-previews { display: flex; gap: 10px; flex-wrap: wrap; }
.eco-preview {
  position: relative; width: 84px; height: 112px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
}
.eco-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eco-preview button {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: none;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 11px;
  cursor: pointer; line-height: 20px; text-align: center; padding: 0;
}

.form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-top: 16px;
}
.form-field { display: flex; flex-direction: column; }
.form-label { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.form-label .dim { font-size: 12px; }
.form-input {
  padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--text); font-size: 14px; width: 100%;
}
.form-input:focus { outline: none; border-color: var(--primary); }
select.form-input { cursor: pointer; }

.eco-generate { margin-top: 20px; padding: 12px 26px; font-size: 15px; }
.eco-generate:disabled { opacity: .5; cursor: not-allowed; }
.eco-status { margin-top: 12px; font-size: 13px; color: var(--text-dim); min-height: 20px; }


.err-goto {
  display: inline-block; margin-left: 6px; padding: 2px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  color: #fff; background: var(--primary); text-decoration: none;
  transition: .15s; white-space: nowrap;
}
.err-goto:hover { filter: brightness(1.1); color: #fff; }
.eco-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.eco-actions .btn { margin-top: 0; }


.eco-toolbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.eco-toggle {
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-dim);
  transition: .15s;
}
.eco-toggle:hover { border-color: var(--primary); }
.eco-toggle.on {
  background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600;
}


.eco-textrow { display: flex; flex-direction: column; gap: 6px; }
.eco-textrow .form-input { min-height: 60px; }
.ai-assist-btn {
  align-self: flex-start; padding: 5px 12px; border-radius: 8px; cursor: pointer; font-size: 12px;
  border: 1px dashed var(--primary-2); background: rgba(108,92,231,.06); color: var(--primary-2);
  transition: .15s;
}
.ai-assist-btn:hover { border-color: var(--primary); background: rgba(108,92,231,.14); }


.eco-cost {
  display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600;
  padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.22); color: #fff;
  vertical-align: middle;
}


.eco-upload-divider { color: var(--text-dim); font-size: 13px; align-self: center; }
.eco-url-input { flex: 1; min-width: 220px; max-width: 360px; }


.eco-charged { color: var(--primary-2); font-weight: 600; }


.eco-subtabs {
  display: flex; gap: 6px; margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.eco-subtab {
  padding: 6px 16px; border-radius: 999px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-dim);
  transition: .15s;
}
.eco-subtab:hover { color: var(--text); border-color: var(--text-dim); }
.eco-subtab.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.eco-subtab-count {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  background: rgba(255,255,255,.25); font-size: 11px; font-weight: 700;
}
.eco-subtab:not(.active) .eco-subtab-count { background: var(--bg-soft); color: var(--text-dim); border: 1px solid var(--border); }
.eco-subpane { display: none; margin-top: 12px; }
.eco-subpane.active { display: block; }

.eco-materials { display: flex; gap: 10px; flex-wrap: wrap; min-height: 40px; align-items: center; }
.eco-materials .empty, .eco-subpane .empty { width: 100%; }

.eco-records { display: flex; flex-direction: column; gap: 8px; }
.eco-record {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
}
.eco-record-emoji { font-size: 22px; }
.eco-record-info { flex: 1; min-width: 0; }
.eco-record-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eco-record-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--text-dim); }
.empty.small { padding: 10px 0; font-size: 13px; }


.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--border); background: var(--card); color: var(--text-dim); transition: .15s;
}
.chip:hover { border-color: var(--primary-2); color: var(--text); }
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }


.editbox-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  width: min(680px, 92vw); padding: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.editbox-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
  font-size: 15px; font-weight: 600; color: var(--text);
}
.editbox-panel textarea { min-height: 240px; resize: vertical; }


.eco-preview.is-video {
  width: auto; height: auto; padding: 10px 14px; display: flex; align-items: center;
  justify-content: center; font-size: 12px; color: var(--text-dim); background: var(--bg-soft);
}


.eco-work.zoom-on .eco-work-imgs img { cursor: zoom-in; }
.eco-work.zoom-on .eco-work-imgs img:hover {
  transform: scale(1.85); position: relative; z-index: 5;
  box-shadow: 0 12px 34px rgba(0,0,0,.4); border-radius: 8px;
}


.model-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.model-tab {
  padding: 7px 16px; border-radius: 9px; border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); font-size: 13px; cursor: pointer; transition: .15s;
}
.model-tab:hover { color: var(--text); border-color: var(--text-dim); }
.model-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.model-pane { padding-top: 4px; }
.model-presets { display: flex; flex-wrap: wrap; gap: 10px; }
.model-preset {
  position: relative; width: 92px; padding: 10px 6px 12px; border-radius: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); text-align: center;
  transition: .15s; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.model-preset:hover { border-color: var(--primary-2); transform: translateY(-2px); }
.model-preset.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,.25); }
.model-preset-emoji { font-size: 30px; line-height: 1.2; }
.model-preset-name { font-size: 12px; color: var(--text); white-space: nowrap; }
.model-preset-tag {
  position: absolute; top: 4px; left: 4px; font-size: 9px; font-weight: 700;
  padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg,#ff6a88,#ff9a3d); color: #fff;
}
.model-preset-upload {
  border-style: dashed; color: var(--text-dim); justify-content: center;
}
.model-upload-tip { font-size: 12px; color: var(--green); margin-top: 8px; }


.scene-custom-btn {
  margin-top: 6px; padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 12px;
  border: 1px dashed var(--text-dim); background: transparent; color: var(--text-dim); transition: .15s;
}
.scene-custom-btn:hover { border-color: var(--primary); color: var(--primary-2); }
.form-field input[hidden], .model-pane[hidden], .form-row input[hidden] { display: none; }
#custom-scene-tryon, #custom-scene-gallery, #custom-scene-detail, #custom-scene-video,
#custom-scene-clone, #custom-scene-grass { margin-top: 6px; }


.eco-work-ops { display: flex; align-items: center; gap: 6px; }
.eco-work-dl {
  display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 6px; color: var(--text-dim); text-decoration: none; font-size: 13px;
}
.eco-work-dl:hover { background: rgba(46,204,113,.15); color: var(--green); }


.eco-work-status {
  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  margin-left: auto; margin-right: 8px; white-space: nowrap;
}
.eco-work-status.st-done { background: rgba(46,209,124,.12); color: #46d17c; }
.eco-work-status.st-processing { background: rgba(246,163,92,.14); color: #f6a35c; }
.eco-work-status.st-failed { background: rgba(248,88,107,.14); color: #f8586b; }
.eco-work-video { padding: 8px; background: var(--bg-soft); }
.eco-work-video video { width: 100%; border-radius: 6px; display: block; background: #000; aspect-ratio: 9/16; max-height: 420px; object-fit: contain; }
.eco-work-progress {
  padding: 8px 12px; font-size: 12px; color: #f6a35c; text-align: center;
  background: rgba(246,163,92,.08); border-top: 1px solid rgba(246,163,92,.2);
}
.eco-work-failed {
  padding: 8px 12px; font-size: 12px; color: #f8586b; text-align: center;
  background: rgba(248,88,107,.08); border-top: 1px solid rgba(248,88,107,.2);
  word-break: break-all;
}


.eco-work-imgs img { cursor: zoom-in; transition: transform .18s ease; }
.eco-work-imgs img:hover { transform: scale(1.06); }
.lightbox-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 100;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.lightbox-mask img { max-width: 90vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox-mask[hidden] { display: none; }

.eco-work-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.eco-work {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; transition: .15s;
}
.eco-work:hover { border-color: var(--primary-2); transform: translateY(-2px); }
.eco-work-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.eco-work-type { font-size: 13px; font-weight: 600; color: var(--text); }
.eco-work-del {
  border: none; background: transparent; color: var(--text-dim); cursor: pointer;
  font-size: 13px; width: 22px; height: 22px; border-radius: 6px; line-height: 22px;
  text-align: center; padding: 0;
}
.eco-work-del:hover { background: rgba(255,107,107,.15); color: var(--red); }
.eco-work-imgs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px;
  background: var(--bg-soft);
}
.eco-work-img-item { position: relative; border-radius: 6px; overflow: hidden; }
.eco-work-imgs img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px;
  display: block; background: var(--card);
}
.eco-work-img-item:only-child { grid-column: 1 / -1; }
.eco-work-img-item:only-child img { aspect-ratio: 16/10; }


.eco-regen-btn {
  position: absolute; top: 5px; right: 5px; width: 26px; height: 26px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: 13px; cursor: pointer; opacity: 0; transition: .15s; z-index: 3;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.eco-work-img-item:hover .eco-regen-btn { opacity: 1; }
.eco-regen-btn:hover { background: var(--primary); transform: scale(1.1); }
.eco-regen-btn:disabled { opacity: .5; cursor: not-allowed; }
.eco-work-body { padding: 10px 12px 12px; }
.eco-work-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eco-work-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
  font-size: 12px; color: var(--text-dim);
}


.eco-filterbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
  margin: 12px 0 16px;
}
.eco-filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.eco-filter-btn {
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-dim);
  transition: .15s; white-space: nowrap;
}
.eco-filter-btn:hover { border-color: var(--primary-2); color: var(--text); }
.eco-filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }

.eco-pagination {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 18px;
}
.eco-page-btn {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; cursor: pointer;
  font-size: 13px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-dim);
  transition: .15s;
}
.eco-page-btn:hover:not(:disabled) { border-color: var(--primary-2); color: var(--text); }
.eco-page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.eco-page-btn:disabled { opacity: .4; cursor: not-allowed; }



.topbar-credits {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 5px 10px; border-radius: 999px; background: var(--bg-soft);
  border: 1px solid var(--border); font-size: 13px; color: var(--text); transition: .15s;
}
.topbar-credits:hover { border-color: var(--primary); }
.credits-val { font-weight: 700; color: var(--primary-2); }
.credits-recharge {
  font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff;
}
.theme-toggle {
  border: none; background: transparent; font-size: 16px; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; line-height: 30px; text-align: center;
  transition: .15s;
}
.theme-toggle:hover { background: var(--card); }


.landing-body { background: var(--bg); }
.landing-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px; position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
}
.landing-brand { font-weight: 800; font-size: 17px; color: var(--text); text-decoration: none; }
.landing-nav { display: flex; gap: 22px; }
.landing-nav a { color: var(--text-dim); text-decoration: none; font-size: 14px; transition: .15s; }
.landing-nav a:hover { color: var(--text); }
.landing-actions { display: flex; align-items: center; gap: 10px; }

.landing-hero {
  padding: 90px 32px 70px; text-align: center;
  background: radial-gradient(1000px 500px at 50% -10%, rgba(108,92,231,.28) 0%, transparent 60%);
}
.landing-hero-inner { max-width: 820px; margin: 0 auto; }
.landing-badge {
  display: inline-block; padding: 6px 16px; border-radius: 999px; font-size: 13px;
  background: rgba(108,92,231,.15); color: var(--primary-2); border: 1px solid rgba(108,92,231,.3);
  margin-bottom: 22px;
}
.landing-title { font-size: 56px; line-height: 1.15; font-weight: 800; letter-spacing: 1px; }
.landing-sub { color: var(--text-dim); font-size: 18px; margin: 18px 0 28px; }
.landing-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-lg { padding: 14px 32px; font-size: 16px; border-radius: 12px; }
.landing-quick { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.landing-quick-card {
  padding: 12px 22px; border-radius: 12px; text-decoration: none; font-size: 14px;
  background: var(--card); border: 1px solid var(--border); color: var(--text); transition: .15s;
}
.landing-quick-card:hover { border-color: var(--primary); transform: translateY(-2px); }


.demo-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.demo-modal[hidden] { display: none; }
.demo-modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.demo-modal-box {
  position: relative; width: min(880px, 92vw); background: var(--card);
  border: 1px solid var(--border); border-radius: 14px; padding: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.demo-modal-close {
  position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  font-size: 16px; cursor: pointer; z-index: 2;
}
.demo-modal-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.demo-modal-box video { width: 100%; border-radius: 10px; background: #000; display: block; aspect-ratio: 16/9; }
.demo-modal-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.demo-modal-count { font-size: 13px; color: var(--text-dim); }

.landing-section { max-width: 1080px; margin: 0 auto; padding: 64px 24px 0; }
.landing-h2 { text-align: center; font-size: 28px; margin-bottom: 36px; }
.landing-h2-sub { text-align: center; color: var(--text-dim); font-size: 14px; margin: -24px 0 36px; }

.landing-stats {
  margin: 56px 24px 0; padding: 34px 24px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--border);
}
.landing-stats-grid {
  max-width: 960px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; text-align: center;
}
.landing-stat { display: flex; flex-direction: column; gap: 4px; }
.ls-value {
  font-size: 34px; font-weight: 800;
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ls-label { font-size: 13px; color: var(--text-dim); }

.landing-plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px;
  max-width: 960px; margin: 0 auto;
}
.landing-plan {
  position: relative; padding: 28px 24px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.landing-plan-hot { border-color: var(--primary); box-shadow: 0 10px 30px rgba(108,92,231,.18); }
.lp-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 20px; white-space: nowrap;
}
.lp-name { font-size: 18px; margin-bottom: 14px; }
.lp-price { margin-bottom: 6px; display: flex; align-items: baseline; gap: 2px; }
.lp-amount { font-size: 34px; font-weight: 800; }
.lp-negotiable { font-size: 26px; }
.lp-period { font-size: 14px; color: var(--text-dim); }
.lp-bonus { font-size: 12px; color: var(--primary-2); margin-bottom: 16px; }
.lp-features { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.lp-features li { font-size: 13px; color: var(--text-dim); line-height: 1.9; }
.lp-btn { width: 100%; text-align: center; }

.landing-cases {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px;
  max-width: 1080px; margin: 0 auto;
}
.landing-case {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--border);
  transition: .18s;
}
.landing-case:hover { border-color: var(--primary); transform: translateY(-3px); }
.case-cover {
  height: 150px; display: flex; align-items: center; justify-content: center; position: relative;
}
.case-emoji { font-size: 56px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.case-g1 { background: linear-gradient(135deg, #ff9a9e, #fecfef); }
.case-g2 { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.case-g3 { background: linear-gradient(135deg, #434343, #8e9eab); }
.case-g4 { background: linear-gradient(135deg, #f83600, #f9d423); }
.case-g5 { background: linear-gradient(135deg, #ff6b6b, #ee5a24); }
.case-g6 { background: linear-gradient(135deg, #0ba360, #3cba92); }
.case-body { padding: 16px 18px 20px; }
.case-tags { display: flex; gap: 6px; margin-bottom: 8px; }
.case-tag {
  font-size: 11px; padding: 2px 10px; border-radius: 20px;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-dim);
}
.case-body h3 { font-size: 16px; margin-bottom: 6px; }
.case-body p { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0; }

.landing-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.landing-faq-item {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 0; overflow: hidden;
}
.landing-faq-item summary {
  cursor: pointer; padding: 18px 22px; font-size: 15px; font-weight: 600;
  list-style: none; position: relative; user-select: none;
}
.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item summary::after {
  content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: var(--text-dim); transition: .2s;
}
.landing-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.landing-faq-item summary:hover { color: var(--primary-2); }
.landing-faq-item p {
  padding: 0 22px 18px; margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.8;
}
.landing-features {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px;
}
.landing-feature {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  padding: 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--border);
  color: var(--text); transition: .18s;
}
.landing-feature:hover { border-color: var(--primary); transform: translateY(-3px); }
.lf-emoji { font-size: 34px; }
.landing-feature h3 { font-size: 17px; }
.landing-feature p { font-size: 13px; color: var(--text-dim); line-height: 1.6; flex: 1; }
.lf-more { font-size: 13px; color: var(--primary-2); font-weight: 600; }

.landing-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.landing-step {
  padding: 26px 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--border);
  text-align: center;
}
.ls-num {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.landing-step h3 { font-size: 16px; margin-bottom: 6px; }
.landing-step p { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

.landing-cta-band {
  margin: 72px 24px 0; padding: 60px 24px; text-align: center; border-radius: 20px;
  background: linear-gradient(135deg, rgba(108,92,231,.25), rgba(155,89,182,.18));
  border: 1px solid rgba(108,92,231,.3);
}
.landing-cta-band h2 { font-size: 26px; }
.landing-cta-band p { color: var(--text-dim); margin: 10px 0 24px; }

.landing-footer {
  margin-top: 72px; padding: 40px 32px 24px; border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.landing-footer-grid {
  max-width: 1080px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px;
}
.landing-footer-grid h4 { font-size: 14px; margin-bottom: 12px; }
.landing-footer-grid a { display: block; color: var(--text-dim); text-decoration: none; font-size: 13px; margin-bottom: 8px; }
.landing-footer-grid a:hover { color: var(--text); }
.landing-footer-desc { color: var(--text-dim); font-size: 13px; margin-top: 8px; line-height: 1.6; }
.landing-copyright { text-align: center; color: var(--text-dim); font-size: 12px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }


.legal-para { color: var(--text); font-size: 14px; line-height: 1.8; margin: 8px 0; }


.prompt-models { display: flex; flex-direction: column; gap: 10px; }
.prompt-model {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-soft); color: var(--text); cursor: pointer; transition: all .15s;
}
.prompt-model:hover { border-color: var(--primary); }
.prompt-model.active { border-color: var(--primary); background: var(--primary-soft, rgba(99,102,241,.12)); box-shadow: 0 0 0 1px var(--primary) inset; }
.pm-emoji { font-size: 22px; }
.pm-body { display: flex; flex-direction: column; gap: 2px; }
.pm-name { font-size: 14px; font-weight: 600; }
.pm-desc { font-size: 12px; color: var(--text-dim); }
.prompt-result {
  min-height: 90px; padding: 14px; border: 1px dashed var(--border); border-radius: 10px;
  background: var(--bg-soft); color: var(--text); font-size: 14px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
.prompt-presets { display: flex; flex-direction: column; gap: 10px; }
.prompt-preset {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-soft); cursor: pointer; transition: all .15s;
}
.prompt-preset:hover { border-color: var(--primary); }
.pp-text { font-size: 13px; color: var(--text); line-height: 1.6; margin-bottom: 8px; }
.pp-ops { display: flex; gap: 8px; }


.comic-source { display: flex; gap: 16px; flex-wrap: wrap; }
.comic-source-row { display: flex; gap: 8px; align-items: flex-start; }
.comic-source-row .form-input { flex: 1; }
.comic-tools { display: flex; align-items: center; gap: 6px; }
.comic-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 14px;
}
.comic-panel { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); }
.comic-panel-canvas { position: relative; width: 100%; aspect-ratio: 3/4; background: #1c1f2a; overflow: hidden; }
.comic-panel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.comic-panel-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(160deg, #4f46e5, #9333ea); color: #fff; padding: 16px; text-align: center;
}
.cph-num { font-size: 22px; font-weight: 700; }
.cph-text { font-size: 13px; opacity: .9; line-height: 1.5; }
.comic-panel-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border);
}
.comic-panel-desc { flex: 1; font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comic-bubble {
  position: absolute; padding: 6px 12px; min-width: 36px; cursor: grab;
  background: #fff; color: #111; border-radius: 14px; font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); z-index: 3;
}
.comic-bubble.bs-rect { border-radius: 4px; }
.comic-bubble.bs-tail { border-radius: 14px 14px 14px 2px; }
.comic-bubble.dragging { cursor: grabbing; opacity: .92; }
.comic-bubble-text { outline: none; display: inline-block; min-width: 14px; max-width: 200px; }
.comic-bubble-del {
  position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%;
  border: none; background: #ef4444; color: #fff; font-size: 11px; line-height: 1; cursor: pointer;
  display: none;
}
.comic-bubble:hover .comic-bubble-del { display: block; }


.voice-works { display: flex; flex-direction: column; gap: 12px; }
.voice-work { border: 1px solid var(--border); border-radius: 10px; background: var(--card); padding: 12px; }
.voice-work-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.voice-work audio { width: 100%; margin-bottom: 8px; }
.voice-work-body { display: flex; flex-direction: column; gap: 4px; }
.voice-work-text { font-size: 13px; color: var(--text); line-height: 1.5; }


.dh-works { display: flex; flex-direction: column; gap: 14px; }
.dh-work { border: 1px solid var(--border); border-radius: 10px; background: var(--card); padding: 12px; }
.dh-work-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dh-work-head .eco-work-ops { margin-left: auto; }
.dh-work video { width: 100%; border-radius: 8px; background: #000; display: block; margin-bottom: 8px; aspect-ratio: 16/9; }
.dh-work-face img { width: 100%; border-radius: 8px; object-fit: cover; aspect-ratio: 16/9; display: block; margin-bottom: 8px; }
.dh-work-body { display: flex; flex-direction: column; gap: 4px; }
.dh-work-prompt { font-size: 13px; color: var(--text); line-height: 1.5; }


.promo-channel-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.promo-channel {
  padding: 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--border);
  transition: .15s;
}
.promo-channel:hover { border-color: var(--primary); transform: translateY(-2px); }
.pc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pc-emoji { font-size: 26px; }
.pc-name { font-size: 16px; font-weight: 700; color: var(--text); }
.pc-desc { font-size: 13px; color: var(--text); line-height: 1.6; }
.pc-tips {
  margin-top: 10px; font-size: 12px; color: var(--text-dim); line-height: 1.6;
  padding: 8px 10px; border-radius: 8px; background: var(--bg-soft);
}
.promo-copies { margin-top: 20px; }
.promo-copy-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px;
  border-radius: 10px; background: var(--card); border: 1px solid var(--border);
}
.promo-copy-text { flex: 1; font-size: 13px; color: var(--text); line-height: 1.6; word-break: break-all; }


.cover-layout {
  display: grid; grid-template-columns: 300px 1fr 320px; gap: 18px; align-items: start;
  margin-top: 8px;
}
.cover-side, .cover-main, .cover-preview-col {
  display: flex; flex-direction: column; gap: 16px;
}
.cover-block {
  padding: 18px; border-radius: 14px; background: var(--card);
  border: 1px solid var(--border);
}
.cover-block-title {
  font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 14px;
}
.cover-block-title .dim { font-weight: 400; font-size: 12px; }


.ratio-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ratio-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 6px; border-radius: 10px; cursor: pointer;
  background: var(--bg-soft); border: 1px solid var(--border);
  transition: all .15s ease; user-select: none;
}
.ratio-btn:hover { border-color: var(--primary); }
.ratio-btn.active {
  border-color: var(--primary); background: rgba(108,92,231,.12);
  box-shadow: 0 0 0 2px rgba(108,92,231,.2);
}
.ratio-shape {
  display: block; border-radius: 3px; background: var(--text-dim);
  transition: background .15s;
}
.ratio-btn.active .ratio-shape { background: var(--primary); }
.ratio-9-16 { width: 18px; height: 32px; }
.ratio-16-9 { width: 32px; height: 18px; }
.ratio-1-1 { width: 24px; height: 24px; }
.ratio-3-4 { width: 24px; height: 32px; }
.ratio-4-3 { width: 32px; height: 24px; }
.ratio-label { font-size: 11px; color: var(--text-dim); }


.cover-ref-tools { margin-bottom: 10px; }
.cover-ref-tools select { width: 100%; }
.ref-ops { display: flex; gap: 6px; margin-bottom: 10px; }
.ref-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  max-height: 200px; overflow-y: auto; margin-bottom: 10px;
}
.ref-empty {
  grid-column: 1 / -1; padding: 18px 8px; text-align: center;
  color: var(--text-dim); font-size: 12px; border: 1px dashed var(--border);
  border-radius: 10px;
}
.ref-item {
  position: relative; border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--bg-soft);
  transition: border-color .15s;
}
.ref-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.ref-item-name {
  display: block; padding: 4px 6px; font-size: 11px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-item.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(108,92,231,.25); }
.ref-item.selected::after {
  content: '✓'; position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--primary);
  color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.ref-item-upload { border-style: dashed; border-color: var(--border); }
.ref-remove {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ref-upload { display: flex; justify-content: center; cursor: pointer; width: 100%; }


.cover-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cover-style {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--bg-soft); border: 1px solid var(--border);
  transition: all .15s ease; user-select: none;
}
.cover-style:hover { border-color: var(--primary); }
.cover-style.active {
  border-color: var(--primary); background: rgba(108,92,231,.12);
  box-shadow: 0 0 0 2px rgba(108,92,231,.2);
}
.cover-style-emoji { font-size: 22px; line-height: 1; }
.cover-style-label { font-size: 13px; font-weight: 600; color: var(--text); }
.cover-style-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(155,89,182,.18); color: #c39bd3;
}
.cover-style.active .cover-style-tag { background: var(--primary); color: #fff; }


.cover-actions { display: flex; gap: 10px; margin-top: 18px; }
.cover-actions .btn-primary { flex: 1; }
.cover-cost {
  margin-top: 12px; font-size: 12px; color: var(--text-dim);
  padding: 10px 12px; border-radius: 10px; background: var(--bg-soft);
}
.cover-cost strong { color: var(--primary-2); }


.preview-box {
  position: relative; width: 100%; border-radius: 14px; overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 9 / 16; max-height: 560px;
}
.preview-empty {
  color: var(--text-dim); font-size: 13px; text-align: center; padding: 20px;
}
.preview-img-wrap { position: absolute; inset: 0; }
.preview-img-wrap img {
  width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in;
  transition: transform .25s ease;
}
.preview-img-wrap img:hover { transform: scale(1.12); }

.empty-tip {
  padding: 30px; text-align: center; color: var(--text-dim); font-size: 13px;
  border: 1px dashed var(--border); border-radius: 14px;
}


@media (max-width: 1100px) {
  .cover-layout { grid-template-columns: 1fr; }
  .preview-box { max-width: 360px; }
}


.pg-layout {
  display: grid; grid-template-columns: 380px 1fr; gap: 18px; align-items: start;
  margin-top: 8px;
}
.pg-left, .pg-right { display: flex; flex-direction: column; gap: 16px; }
.pg-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pg-ref-preview {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px;
}
.pg-ref-item {
  position: relative; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-soft);
}
.pg-ref-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.pg-ref-item button {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.pg-result-tabs { display: flex; gap: 8px; }
.pg-work-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;
}
.pg-work {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; transition: .18s; display: flex; flex-direction: column;
}
.pg-work:hover { border-color: var(--primary-2); transform: translateY(-2px); }
.pg-work-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.pg-work-head .eco-work-ops { margin-left: auto; }
.pg-work-imgs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px;
  background: var(--bg-soft);
}
.pg-work-imgs img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px;
  cursor: zoom-in; transition: transform .18s ease; display: block;
}
.pg-work-imgs img:hover { transform: scale(1.06); }
.pg-work-imgs img:only-child { grid-column: 1 / -1; aspect-ratio: 16/10; }

.pg-work-imgs .eco-work-img-item { position: relative; border-radius: 6px; overflow: hidden; }
.pg-work-imgs .eco-work-img-item:only-child { grid-column: 1 / -1; }
.pg-work-imgs .eco-work-img-item:only-child img { aspect-ratio: 16/10; }
.pg-work-imgs .eco-work-img-item img { display: block; }
.pg-work-body { padding: 10px 12px 12px; }
.pg-work-prompt {
  font-size: 12px; color: var(--text); line-height: 1.5; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-all;
}
.pg-work .eco-work-meta { margin: 0; }

@media (max-width: 900px) {
  .pg-layout { grid-template-columns: 1fr; }
}


[hidden] { display: none !important; }


.hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hero-actions { display: flex; gap: 8px; flex-shrink: 0; }

.ms-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 18px;
}
.ms-stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; text-align: center;
}
.ms-stat.ok { border-color: rgba(52, 199, 123, .45); }
.ms-stat-value { font-size: 30px; font-weight: 800; color: var(--text); line-height: 1.1; }
.ms-stat.ok .ms-stat-value { color: var(--success, #34c77b); }
.ms-stat-total { font-size: 16px; font-weight: 500; color: var(--text-dim); margin-left: 2px; }
.ms-stat-label { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.ms-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ms-tabs .chip {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
  transition: .15s;
}
.ms-tabs .chip:hover { border-color: var(--primary-2); }
.ms-tabs .chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.ms-groups { display: flex; flex-direction: column; gap: 18px; }
.ms-group {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px;
}
.ms-models { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ms-model {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--bg-soft); transition: .15s;
}
.ms-model:hover { border-color: var(--primary-2); }
.ms-model.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; background: var(--bg-soft); }
.ms-model-main { min-width: 0; }
.ms-model-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ms-model-id { font-size: 11px; color: var(--text-dim); margin-left: 8px; }
.ms-model-intro { font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
.ms-model-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ms-badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ms-badge-active { background: var(--primary); color: #fff; }
.ms-badge-configured { background: rgba(52, 199, 123, .16); color: var(--success, #2c9c62); }
.ms-badge-none { background: var(--bg-soft); color: var(--text-dim); border: 1px dashed var(--border); }
.ms-masked { font-size: 12px; color: var(--text-dim); }
.ms-link { font-size: 12px; color: var(--primary-2); text-decoration: none; }
.ms-link:hover { text-decoration: underline; }

.ms-activity { display: flex; flex-direction: column; gap: 0; }
.ms-activity-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}
.ms-activity-item:last-child { border-bottom: none; }
.ms-activity-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--primary);
  flex-shrink: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
.ms-activity-body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ms-activity-label { font-size: 14px; color: var(--text); }
.ms-activity-time { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .ms-stats { grid-template-columns: 1fr 1fr; }
  .ms-model { flex-direction: column; align-items: flex-start; }
  .ms-model-meta { flex-wrap: wrap; }
}


.icv-gate {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 48px 32px; text-align: center; margin-top: 20px;
  background-image: radial-gradient(600px 300px at 50% -20%, rgba(108,92,231,.18), transparent 70%);
}
.icv-gate-badge {
  display: inline-block; background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: #fff; font-weight: 700; font-size: 13px; padding: 4px 14px;
  border-radius: 999px; margin-bottom: 16px;
}
.icv-gate h1 { font-size: 24px; margin-bottom: 10px; }
.icv-gate .synopsis { margin-bottom: 24px; }
.icv-gate-features {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 28px;
}
.icv-gate-feat {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 16px; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px;
}
.icv-gate-feat span { font-size: 16px; }
.icv-gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.icv-shell {
  display: flex; flex-direction: column; height: calc(100vh - 60px); min-height: 420px;
  overflow: hidden;
}
.icv-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--bg-soft);
  flex-wrap: wrap;
}
.icv-toolbar-left { display: flex; align-items: center; gap: 12px; }
.icv-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.icv-title { font-weight: 700; font-size: 15px; }
.icv-pro {
  font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  padding: 2px 8px; border-radius: 999px; vertical-align: 2px; margin-left: 4px;
}
.nav-pro-badge {
  font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  padding: 1px 6px; border-radius: 999px; vertical-align: 1px; margin-left: 2px;
}
.icv-hint { font-size: 12px; }
.icv-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.icv-zoom-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1; transition: .15s;
}
.icv-zoom-btn:hover { border-color: var(--primary); color: var(--primary-2); }
.icv-import-btn { cursor: pointer; }

.icv-viewport {
  flex: 1; position: relative; overflow: hidden; cursor: default;
  background: var(--bg);
}
.icv-viewport.icv-panning { cursor: grabbing; }
.icv-viewport.icv-pan-cursor { cursor: grab; }
.icv-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }

.icv-tool-btn {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); color: var(--text-dim); font-size: 12px; cursor: pointer; transition: .15s;
}
.icv-tool-btn:hover { color: var(--text); border-color: var(--text-dim); }
.icv-tool-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }

.icv-edges {
  position: absolute; top: 0; left: 0; overflow: visible;
  pointer-events: none; width: 1px; height: 1px;
}
.icv-edge {
  fill: none; stroke: #a29bfe; stroke-width: 2.5;
  pointer-events: visibleStroke; cursor: pointer;
}
.icv-edge:hover { stroke: #ff6b6b; stroke-width: 3.5; }
.icv-edge.icv-temp { stroke: #9aa1b0; stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }

.icv-selection-box {
  position: absolute; border: 1px dashed var(--primary-2);
  background: rgba(108, 92, 231, .08); pointer-events: none; z-index: 5;
  border-radius: 2px;
}

.icv-port {
  position: absolute; right: -7px; bottom: -7px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--primary); border: 2px solid #fff; cursor: crosshair;
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff;
  opacity: 0; transition: .15s; padding: 0; line-height: 1; z-index: 6;
}
.icv-node:hover .icv-port, .icv-node.selected .icv-port { opacity: 1; }
.icv-port:hover { background: var(--primary-2); transform: scale(1.15); }

.icv-node.selected .icv-node-imgwrap img,
.icv-node.selected .icv-note {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.icv-grid {
  position: absolute; left: -2000px; top: -2000px; width: 6000px; height: 4000px;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(154,161,176,.22) 1px, transparent 1px);
  background-size: 28px 28px;
}
.icv-coords {
  position: absolute; left: 16px; bottom: 14px; font-size: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 10px; pointer-events: none;
}

.icv-node { position: absolute; user-select: none; }
.icv-node-image { cursor: grab; }
.icv-node-image:active { cursor: grabbing; }
.icv-node-imgwrap { position: relative; }
.icv-node-imgwrap img {
  width: 100%; display: block; border-radius: 10px; border: 2px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,.35); pointer-events: none;
}
.icv-node-del {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: none;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: .15s;
}
.icv-node:hover .icv-node-del { opacity: 1; }
.icv-node-del:hover { background: var(--red); }
.icv-node-cap {
  margin-top: 6px; font-size: 11px; color: var(--text-dim); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-all;
}
.icv-note {
  min-height: 120px; background: #fff7cf; color: #4a4300; border: 1px solid #e7dc9e;
  border-radius: 4px 4px 4px 16px; padding: 14px 16px; font-size: 13px; line-height: 1.6;
  box-shadow: 0 6px 16px rgba(0,0,0,.28); cursor: text; word-break: break-word;
  outline: none;
}
:root[data-theme="light"] .icv-note { background: #fff7cf; color: #4a4300; }
.icv-note:empty::before { content: "双击输入灵感…"; color: #b8ae6e; }

.icv-gen-modal .modal-head span { font-weight: 700; font-size: 16px; }
.modal-close {
  border: none; background: transparent; color: var(--text-dim); font-size: 16px;
  cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: .15s;
}
.modal-close:hover { color: var(--text); background: var(--bg-soft); }
.icv-gen-modal .form-field { gap: 6px; }
.icv-gen-modal .form-field label { font-size: 13px; color: var(--text-dim); }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

@media (max-width: 720px) {
  .icv-toolbar { gap: 8px; }
  .icv-hint { display: none; }
  .form-row-3 { grid-template-columns: 1fr; }
}


.howto {
  background: linear-gradient(135deg, rgba(108,92,231,.10), rgba(162,155,254,.04));
  border: 1px solid rgba(108,92,231,.28);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 4px 0 18px;
}
.howto-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.howto-icon { font-size: 16px; }
.howto-title { font-weight: 700; font-size: 14px; }
.howto-toggle {
  margin-left: auto; background: transparent; border: none; color: var(--text-dim);
  font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: .15s;
}
.howto-toggle::after { content: '收起'; }
.howto-toggle:hover { color: var(--text); background: var(--bg-soft); }
.howto-steps {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0;
}
.howto-step { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text); }
.howto-num {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.howto-text { line-height: 1.55; }
.howto.collapsed .howto-steps { display: none; }
.howto.collapsed .howto-toggle::after { content: '展开'; }


.help-toc {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 20px;
}
.help-toc-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); text-decoration: none;
  font-size: 13px; transition: .15s;
}
.help-toc-item:hover { border-color: var(--primary); color: var(--primary-2); }
.help-toc-emoji { font-size: 15px; }

.help-section { scroll-margin-top: 80px; }
.help-section-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.help-section-emoji {
  font-size: 28px; width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(108,92,231,.18), rgba(162,155,254,.08));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.help-section-head h2 { font-size: 20px; margin: 0; }
.help-section-desc { font-size: 13px; color: var(--text-dim); margin-top: 2px; }

.help-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
}
.help-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; transition: .18s; display: flex; flex-direction: column;
}
.help-card:hover { border-color: var(--primary-2); transform: translateY(-2px); }
.help-card-head { display: flex; align-items: center; gap: 8px; }
.help-card-emoji { font-size: 20px; }
.help-card-head h3 { font-size: 15px; margin: 0; }
.help-card-link {
  margin-left: auto; font-size: 12px; color: var(--primary-2); text-decoration: none; white-space: nowrap;
}
.help-card-link:hover { text-decoration: underline; }
.help-card-desc { font-size: 12px; color: var(--text-dim); margin: 6px 0 10px; }
.help-card-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.help-card-steps li {
  display: flex; gap: 8px; font-size: 13px; color: var(--text); line-height: 1.5;
}
.help-step-num {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-dim);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .help-cards { grid-template-columns: 1fr; }
}


.ref-section {
  margin: 8px 0 4px; padding: 14px 16px; border: 1px dashed var(--border);
  border-radius: 14px; background: var(--bg-soft);
}
.ref-section label { font-weight: 600; }
.ref-upload-box {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 14px 16px; border: 1px dashed var(--primary-2); border-radius: 10px;
  color: var(--text-dim); font-size: 13px; transition: .15s; background: var(--card);
}
.ref-upload-box:hover { border-color: var(--primary); color: var(--primary-2); background: rgba(108,92,231,.05); }
.ref-upload-plus {
  font-size: 20px; line-height: 1; color: var(--primary-2); font-weight: 700;
}
.ref-preview {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;
}
.ref-preview:empty { display: none; }
.ref-preview-item {
  position: relative; width: 84px; display: flex; flex-direction: column; gap: 4px;
}
.ref-preview-del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: 50%; border: 1px solid var(--border); background: #e5484d; color: #fff;
  font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; z-index: 2; transition: .15s;
}
.ref-preview-del:hover { background: #c53030; transform: scale(1.15); }
.ref-preview-item img {
  width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border);
}
.ref-preview-item.is-video {
  width: 84px; height: 84px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-soft); display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-dim); text-align: center; padding: 6px; word-break: break-all;
}
.ref-preview-name {
  font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}