body.xs9-locked { overflow: hidden !important; }

.xs9-job-shell { position: fixed; inset: 0; z-index: 30020; display: flex; align-items: center; justify-content: center; background: rgba(3,5,8,.78); backdrop-filter: blur(4px); }
.xs9-job-modal { width: min(900px, 92vw); max-height: 80vh; display: flex; flex-direction: column; background: #0d1116; border: 1px solid rgba(229,201,135,.28); border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.55); color: #e1e4e8; }
.xs9-job-modal header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.xs9-job-modal header h3 { margin: 0; font-size: 15px; font-weight: 600; }
.xs9-job-modal header button { border: 0; background: transparent; color: #a9b0ba; cursor: pointer; font-size: 13px; }
.xs9-job-modal header button:hover { color: #e5c987; }
.xs9-job-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.xs9-job-table th, .xs9-job-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; }
.xs9-job-table th { color: #9aa3ad; font-weight: 500; background: rgba(255,255,255,.03); position: sticky; top: 0; }
.xs9-job-table td { color: #c9ced4; }
.xs9-job-table td:nth-child(1) { font-family: ui-monospace, monospace; color: #8b949e; font-size: 11px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.xs9-job-table td:nth-child(5) { color: #ff8a8a; max-width: 260px; word-break: break-word; }
.xs9-status { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; }
.xs9-status-pending, .xs9-status-queued { background: rgba(233,196,106,.15); color: #e9c46a; }
.xs9-status-running { background: rgba(74,144,226,.18); color: #6aa8ff; }
.xs9-status-succeeded { background: rgba(88,166,86,.18); color: #7bd67a; }
.xs9-status-failed { background: rgba(235,87,87,.18); color: #ff7b7b; }
.xs9-status-canceled { background: rgba(142,142,147,.18); color: #adadb8; }
@media (max-width: 760px) {
  .xs9-job-table td:nth-child(1), .xs9-job-table th:nth-child(1) { max-width: 90px; }
  .xs9-job-table td:nth-child(5), .xs9-job-table th:nth-child(5) { display: none; }
}

/* The settings route deliberately owns the viewport. Give the asset workspace
   that scroll container so all existing families remain reachable. */
body[data-workflow-route="settings"].xs9-locked #view {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.settings-page.xs9-host {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.settings-page.xs9-host > :not(#xs9-workspace) { position: absolute !important; left: -100000px !important; top: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
#xs9-workspace {
  --x9-canvas: #0d1015;
  --x9-panel: #15191f;
  --x9-raised: #1b2027;
  --x9-hover: #212730;
  --x9-line: rgba(255,255,255,.085);
  --x9-line-strong: rgba(255,255,255,.15);
  --x9-text: #f1f2f4;
  --x9-body: #c7cbd1;
  --x9-muted: #8b929d;
  --x9-soft: #636b77;
  --x9-accent: #d5aa61;
  --x9-ok: #7fc49d;
  height: 100%;
  min-height: 0;
  padding: 10px 18px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  color: var(--x9-text);
  background: radial-gradient(circle at 84% -10%, rgba(112,122,142,.12), transparent 30%), var(--x9-canvas);
  font-size: 13px;
  line-height: 1.5;
}
#xs9-workspace *, #xs9-layer * { box-sizing: border-box; }
#xs9-workspace button, #xs9-workspace input, #xs9-workspace select, #xs9-workspace textarea { font: inherit; }
#xs9-workspace button, #xs9-workspace select { transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }

.xs9-hero { min-height: 118px; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid var(--x9-line); border-radius: 18px; background: linear-gradient(125deg, rgba(213,170,97,.065), transparent 42%), rgba(21,25,31,.94); box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.xs9-hero > div { max-width: 700px; }
.xs9-hero > div > span, .xs9-gallery > header span { color: #bda57e; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.xs9-hero h1 { margin: 5px 0 4px; color: #f5f6f7; font-size: clamp(24px,2.25vw,33px); line-height: 1.22; letter-spacing: -.025em; }
.xs9-hero p { margin: 0; color: #9aa1ab; font-size: 13px; }
.xs9-hero dl { min-width: 390px; margin: 0; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--x9-line); border-radius: 13px; background: rgba(9,12,16,.34); overflow: hidden; }
.xs9-hero dl div { min-width: 0; padding: 12px 13px; border-left: 1px solid var(--x9-line); }
.xs9-hero dl div:first-child { border-left: 0; }
.xs9-hero dt { color: var(--x9-muted); font-size: 10px; }
.xs9-hero dd { margin: 4px 0 0; color: #eef0f2; font-size: 14px; font-weight: 780; white-space: nowrap; }

.xs9-categories { margin-top: 0; padding: 7px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; border: 1px solid var(--x9-line); border-radius: 15px; background: rgba(20,24,30,.9); }
.xs9-category { position: relative; min-height: 66px; padding: 10px 14px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 11px; color: #a9afb8; background: transparent; text-align: left; cursor: pointer; }
.xs9-category:hover { color: #f1f2f4; border-color: rgba(255,255,255,.06); background: var(--x9-hover); transform: translateY(-1px); }
.xs9-category.is-active { color: #f3f4f6; border-color: var(--x9-line-strong); background: #242a32; box-shadow: inset 0 -2px rgba(213,170,97,.65); }
.xs9-category > b { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #d2b682; background: rgba(213,170,97,.1); font-size: 13px; }
.xs9-category span { min-width: 0; }
.xs9-category strong, .xs9-category small { display: block; }
.xs9-category strong { color: inherit; font-size: 14px; }
.xs9-category small { margin-top: 2px; overflow: hidden; color: #7f8792; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.xs9-category em { color: #9aa1ab; font-size: 11px; font-style: normal; white-space: nowrap; }

.xs9-toolbar { margin-top: 12px; padding: 11px; display: grid; grid-template-columns: minmax(260px,1.4fr) minmax(170px,.7fr) minmax(145px,.52fr) minmax(145px,.52fr) 108px; align-items: end; gap: 8px; border: 1px solid var(--x9-line); border-radius: 14px 14px 0 0; background: #151a20; }
.xs9-toolbar label { min-width: 0; display: block; }
.xs9-toolbar label > span { min-height: 18px; display: block; color: #7f8792; font-size: 10px; font-weight: 650; }
.xs9-toolbar input, .xs9-toolbar select { width: 100%; height: 38px; border: 1px solid var(--x9-line); border-radius: 9px; outline: none; color: #dfe2e6; background: #0f1318; }
.xs9-toolbar input { padding: 0 12px 0 34px; }
.xs9-toolbar select { padding: 0 31px 0 11px; cursor: pointer; color-scheme: dark; }
.xs9-toolbar input:hover, .xs9-toolbar select:hover { border-color: rgba(213,170,97,.32); background: #12171d; }
.xs9-toolbar input:focus, .xs9-toolbar select:focus { border-color: rgba(213,170,97,.55); box-shadow: 0 0 0 3px rgba(213,170,97,.08); }
.xs9-search { position: relative; }
.xs9-search > span { position: absolute; z-index: 2; left: 12px; bottom: 9px; color: #8d95a0 !important; font-size: 18px !important; }

.xs9-rule { padding: 11px 14px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--x9-line); border-top: 0; border-radius: 0 0 14px 14px; background: #12171d; }
.xs9-rule > b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #c7af84; background: rgba(213,170,97,.085); }
.xs9-rule strong { display: block; color: #d9dce0; font-size: 12px; }
.xs9-rule p { margin: 2px 0 0; color: #7e8792; font-size: 10px; }
.xs9-rule > span { color: var(--x9-ok); font-size: 10px; font-weight: 650; }

.xs9-gallery { margin-top: 12px; padding: 20px; border: 1px solid var(--x9-line); border-radius: 16px; background: rgba(18,22,28,.82); }
.xs9-gallery > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.xs9-gallery > header h2 { margin: 3px 0 2px; color: #eff1f3; font-size: 19px; }
.xs9-gallery > header p { margin: 0; color: #808894; font-size: 11px; }
.xs9-gallery > header em { color: #9ba2ac; font-size: 11px; font-style: normal; }
.xs9-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 12px; }
.xs9-family-card { min-width: 0; overflow: hidden; border: 1px solid var(--x9-line); border-radius: 14px; color: var(--x9-text); background: #171c22; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.12); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.xs9-family-card:hover { transform: translateY(-3px); border-color: rgba(213,170,97,.32); box-shadow: 0 18px 36px rgba(0,0,0,.24); }
.xs9-family-card:focus-visible { outline: 2px solid rgba(213,170,97,.7); outline-offset: 2px; }
.xs9-cover { position: relative; width: 100%; aspect-ratio: 16/9; margin: 0; overflow: hidden; border-bottom: 1px solid var(--x9-line); background: #0a0d11; }
.xs9-cover > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; transition: transform 280ms ease, filter 200ms ease; }
.xs9-family-card:hover .xs9-cover > img { transform: scale(1.025); filter: brightness(.76); }
.xs9-cover-actions { position: absolute; z-index: 4; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; opacity: 0; background: rgba(7,9,12,.42); backdrop-filter: blur(2px); transition: opacity 160ms ease; }
.xs9-family-card:hover .xs9-cover-actions, .xs9-family-card:focus-within .xs9-cover-actions { opacity: 1; }
.xs9-cover-actions button { padding: 8px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; color: #edf0f3; background: rgba(23,28,34,.9); font-size: 11px; cursor: pointer; }
.xs9-cover-actions button:first-child { color: #1b160e; border-color: #d3ad69; background: #d3ad69; font-weight: 750; }
.xs9-cover figcaption { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; display: flex; justify-content: space-between; gap: 8px; border: 1px solid rgba(255,255,255,.11); border-radius: 7px; color: #e8e1d6; background: rgba(8,11,14,.76); backdrop-filter: blur(8px); font-size: 9px; }
.xs9-cover figcaption em { color: #a9b0ba; font-style: normal; }
.xs9-media-empty { width: 100%; height: 100%; min-height: 90px; display: grid; place-content: center; justify-items: center; gap: 4px; color: #79828e; background: radial-gradient(circle at 72% 18%,rgba(125,136,156,.12),transparent 38%), linear-gradient(145deg,#161b22,#0d1116); }
.xs9-media-empty span { font-size: 12px; font-weight: 650; }
.xs9-media-empty small { color: #5f6874; font-size: 9px; }
[data-xs9-media].is-missing { display: none !important; }
.has-missing { position: relative; }
.has-missing::before { content: '图片记录已保留\A原图源暂不可用'; white-space: pre; position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; padding: 12px; color: #76818e; background: linear-gradient(145deg,#171d24,#0d1217); font-size: 10px; line-height: 1.7; text-align: center; }
.xs9-card-copy { padding: 13px; }
.xs9-card-copy > header { min-height: 42px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.xs9-card-copy header > div { min-width: 0; }
.xs9-card-copy small { display: block; overflow: hidden; color: #69727e; font-size: 8px; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.xs9-card-copy h3 { margin: 2px 0 0; overflow: hidden; color: #f1f2f4; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.xs9-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 6px; color: #9aa3ae; background: rgba(255,255,255,.055); font-size: 8px; }
.xs9-status-usable { color: #8fd0aa; background: rgba(93,173,128,.1); }
.xs9-status-record { color: #d0ae78; background: rgba(213,170,97,.09); }
.xs9-card-copy > p { height: 39px; margin: 8px 0 0; overflow: hidden; color: #a5abb4; font-size: 11px; line-height: 1.7; }
.xs9-inherit { min-height: 42px; margin-top: 9px; padding: 8px 9px; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 7px; border: 1px solid rgba(213,170,97,.1); border-radius: 8px; background: rgba(213,170,97,.035); }
.xs9-inherit b { padding: 2px 5px; border-radius: 4px; color: #c8a86f; background: rgba(213,170,97,.09); font-size: 8px; }
.xs9-inherit span { height: 29px; overflow: hidden; color: #7f8995; font-size: 9px; line-height: 1.6; }
.xs9-rail { min-height: 78px; margin-top: 10px; display: flex; gap: 6px; overflow-x: auto; }
.xs9-mini, .xs9-more-images { position: relative; flex: 0 0 70px; width: 70px; height: 74px; padding: 0; overflow: hidden; border: 1px solid var(--x9-line); border-radius: 8px; color: #9da5af; background: #0e1217; cursor: pointer; }
.xs9-mini:hover, .xs9-more-images:hover { border-color: rgba(213,170,97,.48); transform: translateY(-1px); }
.xs9-mini img { width: 100%; height: 51px; display: block; object-fit: cover; }
.xs9-mini span { display: block; padding: 4px; overflow: hidden; color: #8e97a2; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.xs9-mini.has-missing::before { content: '源文件失效'; font-size: 8px; }
.xs9-more-images { display: grid; place-items: center; color: #c0a574; font-size: 12px; }
.xs9-rail-empty { min-width: 150px; display: grid; place-items: center; border: 1px dashed var(--x9-line); border-radius: 8px; color: #68717d; font-size: 9px; }
.xs9-card-copy > footer { margin-top: 10px; padding-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--x9-line); }
.xs9-card-copy > footer span { color: #747d89; font-size: 9px; }
.xs9-card-copy > footer button { border: 0; color: #cbb07d; background: transparent; font-size: 10px; cursor: pointer; }
.xs9-card-copy > footer button:hover { color: #ead19e; transform: translateX(2px); }

.xs9-pager { margin-top: 16px; padding-top: 13px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--x9-line); color: #7f8792; font-size: 10px; }
.xs9-pager > div { display: flex; align-items: center; gap: 8px; }
.xs9-pager button { min-width: 70px; height: 32px; border: 1px solid var(--x9-line); border-radius: 8px; color: #b9bec6; background: #1a2027; cursor: pointer; }
.xs9-pager button:hover:not(:disabled) { border-color: rgba(213,170,97,.35); color: #e1cda7; }
.xs9-pager button:disabled { opacity: .35; cursor: default; }
.xs9-pager em { min-width: 54px; color: #8f97a2; font-style: normal; text-align: center; }
.xs9-empty, .xs9-load-error { grid-column: 1/-1; min-height: 320px; display: grid; place-content: center; justify-items: center; gap: 7px; border: 1px dashed var(--x9-line); border-radius: 13px; color: #9aa2ac; background: rgba(12,15,19,.32); }
.xs9-empty span, .xs9-load-error span { color: #69737f; }
.xs9-load-error button { margin-top: 8px; padding: 8px 12px; border: 1px solid var(--x9-line); border-radius: 8px; color: #d7dbe0; background: #1c222a; cursor: pointer; }

.xs9-detail { margin-top: 12px; padding: 18px; border: 1px solid var(--x9-line); border-radius: 16px; background: rgba(18,22,28,.9); }
.xs9-detail-header { padding-bottom: 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 15px; border-bottom: 1px solid var(--x9-line); }
.xs9-detail-header > button { height: 35px; padding: 0 11px; border: 1px solid var(--x9-line); border-radius: 9px; color: #c4c9d0; background: #1b2027; cursor: pointer; }
.xs9-detail-header > button:hover { color: #f0f1f3; border-color: var(--x9-line-strong); background: var(--x9-hover); }
.xs9-detail-header span { color: #6f7884; font-size: 9px; letter-spacing: .06em; }
.xs9-detail-header h2 { margin: 3px 0; color: #f1f2f4; font-size: 21px; }
.xs9-detail-header p { max-width: 720px; margin: 0; color: #838c98; font-size: 11px; }
.xs9-detail-header em { color: #8f98a3; font-size: 10px; font-style: normal; }
.xs9-detail-grid { margin-top: 15px; display: grid; grid-template-columns: minmax(340px,.82fr) minmax(520px,1.18fr); align-items: start; gap: 14px; }
.xs9-detail-media, .xs9-detail-body { min-width: 0; border: 1px solid var(--x9-line); border-radius: 14px; background: #151a20; }
.xs9-detail-media { position: sticky; top: 12px; padding: 12px; }
.xs9-detail-media > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xs9-detail-media > header span { color: #c5a872; font-size: 9px; }
.xs9-detail-media > header b { overflow: hidden; color: #e8eaed; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.xs9-detail-media > figure { position: relative; width: 100%; aspect-ratio: 16/10; margin: 10px 0 0; overflow: hidden; border: 1px solid var(--x9-line); border-radius: 11px; background: #090c10; cursor: zoom-in; }
.xs9-detail-media > figure > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.xs9-detail-media > figure figcaption { position: absolute; right: 8px; bottom: 8px; left: 8px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: #bbc1c9; background: rgba(8,10,13,.74); font-size: 9px; }
.xs9-detail-image-rail { margin-top: 9px; padding-bottom: 3px; display: flex; gap: 7px; overflow-x: auto; }
.xs9-detail-thumb { position: relative; flex: 0 0 88px; width: 88px; height: 82px; padding: 4px; overflow: hidden; border: 1px solid var(--x9-line); border-radius: 8px; color: #8f98a3; background: #10151a; cursor: pointer; }
.xs9-detail-thumb:hover { border-color: rgba(213,170,97,.36); transform: translateY(-1px); }
.xs9-detail-thumb.is-active { border-color: rgba(213,170,97,.72); box-shadow: 0 0 0 2px rgba(213,170,97,.08); }
.xs9-detail-thumb img { width: 100%; height: 53px; display: block; object-fit: cover; border-radius: 4px; }
.xs9-detail-thumb span { display: block; margin-top: 3px; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.xs9-detail-body { overflow: hidden; }
.xs9-variant-section { padding: 13px; border-bottom: 1px solid var(--x9-line); }
.xs9-variant-section > header { display: flex; justify-content: space-between; gap: 10px; }
.xs9-variant-section strong, .xs9-variant-section small { display: block; }
.xs9-variant-section strong { color: #e3e5e8; font-size: 12px; }
.xs9-variant-section small { margin-top: 2px; color: #7d8691; font-size: 9px; }
.xs9-variant-section > header > span { color: #89929d; font-size: 9px; }
.xs9-variant-rail { margin-top: 10px; display: flex; gap: 8px; overflow-x: auto; }
.xs9-variant { flex: 0 0 176px; min-width: 0; padding: 6px; display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; border: 1px solid var(--x9-line); border-radius: 9px; color: #b7bdc5; background: #11161c; text-align: left; cursor: pointer; }
.xs9-variant:hover { border-color: rgba(213,170,97,.35); background: #171d24; transform: translateY(-1px); }
.xs9-variant.is-active { border-color: rgba(213,170,97,.62); background: rgba(213,170,97,.07); }
.xs9-variant > img, .xs9-variant > .xs9-media-empty { width: 62px; height: 50px; min-height: 0; display: block; object-fit: cover; border-radius: 6px; }
.xs9-variant > span { min-width: 0; }
.xs9-variant b, .xs9-variant strong, .xs9-variant small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs9-variant b { color: #bda477; font-size: 7px; }
.xs9-variant strong { margin-top: 2px; color: #dfe2e5; font-size: 10px; }
.xs9-variant small { margin-top: 2px; color: #727c88; font-size: 7px; }
.xs9-facts { padding: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.xs9-facts article { min-height: 72px; padding: 10px; border: 1px solid var(--x9-line); border-radius: 9px; background: #11161b; }
.xs9-facts span { color: #888f99; font-size: 8px; font-weight: 750; }
.xs9-facts p { margin: 4px 0 0; color: #afb5bd; font-size: 10px; line-height: 1.7; }
.xs9-inheritance-panel { margin: 0 13px 11px; padding: 10px; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 9px; border: 1px solid rgba(213,170,97,.13); border-radius: 9px; background: rgba(213,170,97,.045); }
.xs9-inheritance-panel > b { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; color: #d1b178; background: rgba(213,170,97,.09); font-size: 8px; text-align: center; }
.xs9-inheritance-panel strong { color: #d9dce0; font-size: 10px; }
.xs9-inheritance-panel p { margin: 2px 0 0; color: #89929d; font-size: 9px; }
.xs9-disclosure { margin: 0 13px 10px; overflow: hidden; border: 1px solid var(--x9-line); border-radius: 9px; background: #11161b; }
.xs9-disclosure summary { padding: 10px 11px; display: flex; justify-content: space-between; gap: 10px; color: #c9cdd3; cursor: pointer; list-style: none; }
.xs9-disclosure summary:hover { background: var(--x9-hover); }
.xs9-disclosure summary span { color: #737d89; font-size: 8px; }
.xs9-disclosure textarea { width: calc(100% - 20px); min-height: 100px; margin: 0 10px 10px; padding: 10px; resize: vertical; border: 1px solid var(--x9-line); border-radius: 8px; outline: none; color: #adb4bd; background: #0c1014; font-size: 10px; line-height: 1.7; }
.xs9-api-actions { padding: 0 10px 10px; display: flex; gap: 7px; }
.xs9-api-actions button { height: 33px; padding: 0 10px; border: 1px solid var(--x9-line); border-radius: 8px; color: #bfc5cd; background: #1b2128; cursor: pointer; }
.xs9-api-actions button:hover { color: #e4cc9f; border-color: rgba(213,170,97,.35); }
.xs9-generation-dock { padding: 12px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--x9-line); background: #12171d; }
.xs9-generation-dock span, .xs9-generation-dock strong { display: block; }
.xs9-generation-dock span { color: #818a95; font-size: 8px; }
.xs9-generation-dock strong { margin-top: 2px; color: #aeb5be; font-size: 9px; font-weight: 550; }
.xs9-generation-dock > div:last-child { display: flex; gap: 7px; }
.xs9-generation-dock button { height: 35px; padding: 0 11px; border: 1px solid var(--x9-line); border-radius: 8px; color: #c3c8cf; background: #1c2229; cursor: pointer; }
.xs9-generation-dock button:hover { border-color: rgba(213,170,97,.34); color: #e5d2ad; }
.xs9-generation-dock button.is-primary { color: #1d170e; border-color: #d2ad6a; background: #d2ad6a; font-weight: 760; }
.xs9-generation-dock button.is-primary:hover { background: #e0bd79; transform: translateY(-1px); }

.xs9-json[hidden], .xs9-viewer[hidden], .xs9-toast[hidden] { display: none !important; }
.xs9-json { position: fixed; z-index: 20020; inset: 0; display: grid; grid-template-columns: 1fr min(720px,90vw); }
.xs9-shade { border: 0; background: rgba(4,6,9,.72); backdrop-filter: blur(3px); }
.xs9-json > section { height: 100vh; display: grid; grid-template-rows: auto minmax(0,1fr) auto; border-left: 1px solid rgba(255,255,255,.1); color: #edf0f3; background: #10151b; box-shadow: -22px 0 70px rgba(0,0,0,.4); }
.xs9-json header { padding: 20px 22px; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.xs9-json header span { color: #c7aa76; font-size: 9px; letter-spacing: .14em; }
.xs9-json header h2 { margin: 4px 0 2px; font-size: 19px; }
.xs9-json header p { margin: 0; color: #7f8995; font-size: 10px; }
.xs9-json header button { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; color: #cdd2d8; background: #1b2128; cursor: pointer; }
.xs9-json pre { margin: 0; padding: 20px 22px; overflow: auto; color: #a8d0b8; background: #0b0f13; font: 11px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; }
.xs9-json footer { padding: 12px 18px; display: flex; justify-content: flex-end; gap: 7px; border-top: 1px solid rgba(255,255,255,.08); }
.xs9-json footer button { height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #c9cfd6; background: #1b2128; cursor: pointer; }
.xs9-json footer button:first-child { color: #dfc28d; border-color: rgba(213,170,97,.3); }
.xs9-viewer { position: fixed; z-index: 20030; inset: 0; padding: 5vh 5vw; display: grid; place-items: center; background: rgba(3,5,8,.92); }
.xs9-viewer > button { position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: #fff; background: #171d24; font-size: 20px; cursor: pointer; }
.xs9-viewer img { max-width: 90vw; max-height: 89vh; display: block; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: #080b0f; box-shadow: 0 30px 90px rgba(0,0,0,.65); object-fit: contain; }
.xs9-toast { position: fixed; z-index: 20050; left: 50%; bottom: 28px; transform: translateX(-50%); max-width: min(560px,88vw); padding: 10px 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; color: #e4e7ea; background: rgba(24,29,36,.96); box-shadow: 0 14px 38px rgba(0,0,0,.3); font-size: 11px; }

#xs9-workspace * { scrollbar-color: #424b57 transparent; scrollbar-width: thin; }
#xs9-workspace *::-webkit-scrollbar { width: 7px; height: 7px; }
#xs9-workspace *::-webkit-scrollbar-track { background: transparent; }
#xs9-workspace *::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #424b57; background-clip: padding-box; }
#xs9-workspace *::-webkit-scrollbar-thumb:hover { border-width: 1px; background: #596474; background-clip: padding-box; }

@media (max-width: 1320px) {
  .xs9-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .xs9-toolbar { grid-template-columns: minmax(250px,1fr) repeat(3,minmax(140px,.55fr)); }
  .xs9-page-size { display: none !important; }
  .xs9-hero dl { min-width: 330px; }
}
@media (max-width: 980px) {
  #xs9-workspace { padding: 12px; }
  .xs9-hero { align-items: stretch; flex-direction: column; }
  .xs9-hero dl { width: 100%; min-width: 0; }
  .xs9-detail-grid { grid-template-columns: 1fr; }
  .xs9-detail-media { position: static; }
}
@media (max-width: 760px) {
  .xs9-categories, .xs9-grid { grid-template-columns: 1fr; }
  .xs9-toolbar { grid-template-columns: 1fr 1fr; }
  .xs9-search { grid-column: 1/-1; }
  .xs9-rule { grid-template-columns: 36px 1fr; }
  .xs9-rule > span { grid-column: 2; }
  .xs9-hero dl { grid-template-columns: 1fr 1fr; }
  .xs9-hero dl div:nth-child(3) { border-left: 0; border-top: 1px solid var(--x9-line); }
  .xs9-hero dl div:nth-child(4) { border-top: 1px solid var(--x9-line); }
  .xs9-detail-header { grid-template-columns: 1fr; }
  .xs9-facts { grid-template-columns: 1fr; }
  .xs9-generation-dock { align-items: stretch; flex-direction: column; }
  .xs9-generation-dock > div:last-child { flex-wrap: wrap; }
  .xs9-json { grid-template-columns: 1fr; }
  .xs9-shade { display: none; }
}

/* v10 — compact XUANYA asset wall + reversible right-side detail drawer */
.xs9-gallery { padding: 16px; }
.xs9-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
}
.xs9-family-card {
  min-height: 184px;
  display: flex;
  flex-direction: column;
  border-radius: 13px;
  background: #1a1e24;
}
.xs9-compact-head {
  min-height: 55px;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--x9-line);
}
.xs9-compact-head > div:first-child { min-width: 0; }
.xs9-compact-head small { display: block; color: #717986; font-size: 8px; letter-spacing: .05em; }
.xs9-compact-head h3 { margin: 3px 0 0; overflow: hidden; color: #f1f2f4; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.xs9-compact-head > div:last-child { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.xs9-compact-head > div:last-child > span { color: #858d99; font-size: 8px; }
.xs9-compact-head button {
  height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(213,170,97,.28);
  border-radius: 7px;
  color: #e7c984;
  background: rgba(213,170,97,.1);
  font-size: 9px;
  cursor: pointer;
}
.xs9-compact-head button:hover { color: #20180d; border-color: #ddb567; background: #ddb567; transform: translateY(-1px); }
.xs9-card-panels {
  min-height: 108px;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0,1.14fr) minmax(0,1fr) minmax(74px,.78fr);
  gap: 7px;
}
.xs9-card-panels > * { min-width: 0; height: 100%; }
.xs9-card-panels .xs9-cover {
  aspect-ratio: auto;
  border: 1px solid var(--x9-line);
  border-radius: 9px;
}
.xs9-card-panels .xs9-cover > img { object-fit: cover; object-position: center top; }
.xs9-card-panels .xs9-cover figcaption { right: 5px; bottom: 5px; left: 5px; padding: 4px 5px; font-size: 7px; }
.xs9-card-secondary,
.xs9-child-count {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--x9-line);
  border-radius: 9px;
  color: #9ba3ae;
  background: #22262e;
  cursor: pointer;
}
.xs9-card-secondary:hover,
.xs9-child-count:hover { border-color: rgba(213,170,97,.36); background: #272c35; transform: translateY(-1px); }
.xs9-card-secondary { padding: 0; }
.xs9-card-secondary > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.xs9-card-secondary > .xs9-media-empty { min-height: 0; }
.xs9-card-secondary > span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  left: 5px;
  padding: 4px 5px;
  border-radius: 5px;
  background: rgba(8,10,13,.76);
  text-align: left;
}
.xs9-card-secondary b,
.xs9-card-secondary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs9-card-secondary b { color: #e1e4e8; font-size: 7px; }
.xs9-card-secondary small { margin-top: 1px; color: #858e9a; font-size: 6px; }
.xs9-child-count { padding: 10px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; }
.xs9-child-count span { color: #757e8a; font-size: 7px; }
.xs9-child-count strong { margin: 3px 0; color: #eff1f4; font-size: 22px; line-height: 1; }
.xs9-child-count small { color: #7e8793; font-size: 7px; line-height: 1.35; }
.xs9-compact-foot {
  min-height: 32px;
  margin-top: auto;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--x9-line);
}
.xs9-compact-foot > button { border: 0; color: #a9b0ba; background: transparent; font-size: 8px; cursor: pointer; }
.xs9-compact-foot > button:hover { color: #e5c987; }

.xs9-detail-shell {
  position: fixed;
  z-index: 20010;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(44px,8vw) minmax(0,1fr);
  overflow: hidden;
}
.xs9-detail-shade {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: rgba(3,5,8,.72);
  backdrop-filter: blur(3px);
  cursor: w-resize;
  animation: xs9ShadeIn 190ms ease both;
}
.xs9-detail-drawer {
  min-width: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,.12);
  color: var(--x9-text);
  background: #0d1116;
  box-shadow: -30px 0 80px rgba(0,0,0,.46);
  animation: xs9DrawerIn 230ms cubic-bezier(.22,.8,.28,1) both;
}
.xs9-detail-shell.is-closing .xs9-detail-shade { animation: xs9ShadeOut 210ms ease both; }
.xs9-detail-shell.is-closing .xs9-detail-drawer { animation: xs9DrawerOut 210ms ease both; }
.xs9-detail-drawer .xs9-detail {
  min-height: 100%;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at 88% 0,rgba(111,120,139,.11),transparent 28%),#0d1116;
}
.xs9-detail-drawer .xs9-detail-header {
  position: sticky;
  z-index: 8;
  top: 0;
  margin: -16px -16px 14px;
  padding: 14px 16px;
  background: rgba(13,17,22,.95);
  backdrop-filter: blur(14px);
}
.xs9-detail-drawer .xs9-detail-grid {
  grid-template-columns: minmax(310px,.84fr) minmax(460px,1.16fr);
  margin-top: 0;
}
.xs9-detail-drawer .xs9-detail-media { top: 78px; }
.xs9-detail-drawer .xs9-generation-dock { position: sticky; z-index: 5; bottom: 0; }
@keyframes xs9DrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes xs9DrawerOut { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes xs9ShadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes xs9ShadeOut { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 1700px) { .xs9-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 1180px) { .xs9-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 820px) {
  .xs9-grid { grid-template-columns: 1fr; }
  .xs9-detail-shell { grid-template-columns: 38px minmax(0,1fr); }
  .xs9-detail-drawer .xs9-detail-grid { grid-template-columns: 1fr; }
  .xs9-detail-drawer .xs9-detail-media { position: static; }
}

/* 生成图片画幅选择器（2026-09-03 修复：资产库生成无比例选择、默认竖图） */
.xs9-ratio-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  font-size: 13px;
  color: var(--text-soft, #b8b2a7);
}
.xs9-ratio-pick select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(212,175,55,.45);
  color: #f3eede;
  border-radius: 8px;
  padding: 6px 26px 6px 10px;
  font-size: 13px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23d4af37' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.xs9-ratio-pick select:focus { outline: none; border-color: #d4af37; box-shadow: 0 0 0 2px rgba(212,175,55,.25); }