/* 独立贴图工坊：左侧创作，右侧监视器与私人贴图库。 */


* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { min-width:320px; }
body { margin:0; color:var(--text); background:var(--bg); font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; }
button,textarea { font:inherit; color:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.studio-page { min-height:100vh; }

.studio-topbar {
  position:sticky; top:0; z-index:20; min-height:58px; display:flex; align-items:center; gap:11px;
  padding:7px max(18px,calc((100vw - 1220px)/2)); border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 92%,transparent); backdrop-filter:blur(16px);
}
.studio-back,.studio-profile {
  flex:none; padding:8px 12px; border:1px solid var(--line); border-radius:9px;
  color:var(--text); background:var(--panel); text-decoration:none; transition:.18s ease;
}
.studio-back:hover,.studio-profile:hover { border-color:var(--green); color:var(--green); }
.studio-brand { display:flex; align-items:center; gap:9px; margin-right:auto; }
.studio-brand img { width:34px; height:34px; object-fit:contain; border-radius:8px; }
.studio-brand b,.studio-brand small { display:block; line-height:1.28; }
.studio-brand b { font-size:14px; }
.studio-brand small { color:var(--muted); font-size:10px; }
.studio-independent {
  padding:6px 10px; border:1px solid color-mix(in srgb,var(--green) 24%,var(--line));
  border-radius:999px; color:var(--green); background:var(--green-soft); font-size:11px; font-weight:700;
}
.studio-theme { flex:none; width:38px; height:38px; border:0; border-radius:9px; color:var(--muted); background:transparent; cursor:pointer; }
.studio-theme:hover { color:var(--text); background:var(--green-soft); }

.studio-page-shell { width:min(1220px,calc(100% - 32px)); margin:0 auto; padding:22px 0 36px; }
.studio-page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:14px; padding:0 2px; }
.studio-page-intro small { color:var(--green); font-weight:750; }
.studio-page-intro h1 { margin:2px 0; font-size:clamp(24px,2.5vw,31px); line-height:1.18; letter-spacing:-.8px; }
.studio-page-intro p { margin:0; color:var(--muted); }
.studio-reference-total { flex:none; min-width:132px; padding:9px 13px; text-align:right; border-left:2px solid var(--green); }
.studio-reference-total b,.studio-reference-total span { display:block; }
.studio-reference-total b { font-size:19px; line-height:1.1; color:var(--green); }
.studio-reference-total span { margin-top:3px; color:var(--muted); font-size:11px; }

.studio-workspace {
  min-height:610px; display:grid; grid-template-columns:330px minmax(0,1fr); overflow:hidden;
  border:1px solid var(--line); border-radius:15px; background:var(--panel); box-shadow:var(--shadow);
}
.studio-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.studio-toast { position:fixed; right:24px; bottom:24px; z-index:50; max-width:min(420px,calc(100vw - 32px)); padding:11px 15px; border-radius:10px; color:#fff; background:#253322; box-shadow:var(--shadow); }

/* ---------- 左侧创作控制 ---------- */
.studio-compose { min-width:0; display:flex; flex-direction:column; gap:14px; padding:18px; border-right:1px solid var(--line); background:var(--panel); }
.studio-panel-title { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.studio-panel-title span { font-size:14px; font-weight:750; }
.studio-panel-title small { color:var(--green); font-size:11px; }
.studio-field-label b,.studio-field-label small { display:block; }
.studio-field-label b { margin-bottom:3px; font-size:14px; }
.studio-field-label small { color:var(--muted); font-size:11px; }
.studio-compose textarea {
  width:100%; min-height:100px; margin-top:-7px; padding:11px 12px; resize:vertical; outline:none;
  color:var(--text); background:var(--panel-2); border:1px solid var(--line); border-radius:11px;
  transition:border-color .18s,box-shadow .18s;
}
.studio-compose textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 14%,transparent); }
.studio-compose textarea::placeholder { color:color-mix(in srgb,var(--muted) 75%,transparent); }
.studio-compose textarea:disabled { color:var(--muted); background:color-mix(in srgb,var(--panel-2) 72%,#aeb5ac); cursor:not-allowed; }
.studio-compose.is-busy .studio-field-label,
.studio-compose.is-busy .studio-model-settings,
.studio-compose.is-busy .studio-upload-reference,
.studio-compose.is-busy .studio-reference-box,
.studio-compose.is-busy .studio-output-settings { opacity:.5; filter:grayscale(.7); }
.studio-compose.is-busy .studio-reference-opt,
.studio-compose.is-busy .studio-switch { cursor:not-allowed; }

.studio-model-settings { padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
.studio-model-options { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:9px; }
.studio-model-options button { min-width:0; padding:8px 7px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--panel); text-align:left; cursor:pointer; transition:.18s; }
.studio-model-options button b,.studio-model-options button small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-model-options button b { color:var(--text); font-size:11px; }
.studio-model-options button small { margin-top:2px; font-size:9.5px; }
.studio-model-options button:hover:not(:disabled) { border-color:color-mix(in srgb,var(--green) 65%,var(--line)); }
.studio-model-options button.active { border-color:var(--green); color:var(--green); background:var(--green-soft); box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 10%,transparent); }
.studio-model-options button.active b { color:var(--green); }
.studio-model-options button:disabled { opacity:.45; cursor:not-allowed; }

.studio-upload-reference { padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); transition:.18s; }
.studio-upload-reference header b,.studio-upload-reference header small { display:block; }
.studio-upload-reference header b { font-size:12.5px; }
.studio-upload-reference header b em { margin-left:4px; color:var(--muted); font-size:9px; font-style:normal; font-weight:500; }
.studio-upload-reference header small { color:var(--muted); font-size:9.5px; font-weight:400; }
.studio-upload-reference-empty { display:flex; align-items:center; gap:7px; margin-top:8px; }
.studio-upload-reference-empty button { flex:none; padding:7px 9px; border:1px dashed color-mix(in srgb,var(--green) 55%,var(--line)); border-radius:8px; color:var(--green); background:var(--panel); font-size:10.5px; font-weight:700; cursor:pointer; }
.studio-upload-reference-empty button span { font-size:13px; }
.studio-upload-reference-empty button:hover:not(:disabled) { border-style:solid; background:var(--green-soft); }
.studio-upload-reference-empty button:disabled { opacity:.5; cursor:not-allowed; }
.studio-upload-reference-empty small { color:var(--muted); font-size:9px; }
.studio-upload-reference-card { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr) 26px; align-items:center; gap:9px; margin-top:8px; padding:6px; border:1px solid color-mix(in srgb,var(--green) 45%,var(--line)); border-radius:9px; background:var(--panel); }
.studio-upload-reference-card img { width:48px; height:48px; object-fit:contain; border-radius:7px; background:var(--checker-b); }
.studio-upload-reference-card div { min-width:0; }
.studio-upload-reference-card div b,.studio-upload-reference-card div small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-upload-reference-card div b { font-size:11px; }
.studio-upload-reference-card div small { color:var(--green); font-size:9.5px; }
.studio-upload-reference-card > button { width:26px; height:26px; padding:0; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--panel-2); font-size:17px; line-height:1; cursor:pointer; }
.studio-upload-reference-card > button:hover:not(:disabled) { border-color:var(--bad); color:var(--bad); }
.studio-upload-reference-card > button:disabled { opacity:.45; cursor:not-allowed; }
.studio-upload-reference.is-uploading { opacity:.62; }

.studio-reference-box { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.studio-reference-box > header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border-bottom:1px solid var(--line); }
.studio-reference-box header b,.studio-reference-box header small { display:block; }
.studio-reference-box header b { font-size:13px; }
.studio-reference-box header small { color:var(--muted); font-size:10px; font-weight:400; }
.studio-reference-box header > span { flex:none; padding:3px 7px; border-radius:99px; color:var(--green); background:var(--green-soft); font-size:10px; font-weight:700; }
.studio-reference-opt { flex:none; display:flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--panel); font-size:10px; font-weight:700; cursor:pointer; user-select:none; transition:.18s; }
.studio-reference-opt input { position:absolute; opacity:0; pointer-events:none; }
.studio-reference-opt:has(input:disabled) { cursor:not-allowed; }
.studio-reference-opt i { position:relative; width:23px; height:13px; border-radius:99px; background:#cbd1c8; transition:.18s; }
.studio-reference-opt i::after { content:""; position:absolute; top:2px; left:2px; width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:.18s; }
.studio-reference-opt input:checked + i { background:var(--green); }
.studio-reference-opt input:checked + i::after { transform:translateX(10px); }
.studio-reference-opt:has(input:checked) { border-color:color-mix(in srgb,var(--green) 55%,var(--line)); color:var(--green); background:var(--green-soft); }
.studio-refs { min-height:82px; display:flex; align-items:flex-start; gap:7px; overflow-x:auto; padding:9px; scrollbar-width:thin; }
.studio-refs figure { flex:0 0 50px; margin:0; text-align:center; }
.studio-refs img { width:46px; height:46px; padding:5px; object-fit:contain; image-rendering:pixelated; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.studio-refs figcaption { margin-top:4px; overflow:hidden; color:var(--muted); font-size:10.5px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.studio-refs figure.is-user-reference img { filter:blur(3px); transform:scale(1.08); }
.studio-refs figure.is-uploaded-reference img { border-color:var(--green); background:var(--green-soft); box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 12%,transparent); }
.studio-refs figure.is-uploaded-reference figcaption { color:var(--green); font-weight:700; }
.studio-reference-empty { align-self:center; width:100%; margin:0; padding:8px; color:var(--muted); font-size:11.5px; text-align:center; }

.studio-output-settings { padding:10px; border:1px solid var(--line); border-radius:10px; }
.studio-setting-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.studio-setting-head b,.studio-setting-head small { display:block; }
.studio-setting-head b { font-size:13px; }
.studio-setting-head small { color:var(--muted); font-size:10px; font-weight:400; }
.studio-switch { flex:none; position:relative; width:38px; height:22px; }
.studio-switch input { position:absolute; opacity:0; pointer-events:none; }
.studio-switch:has(input:disabled) { cursor:not-allowed; }
.studio-switch input:disabled + i { cursor:not-allowed; }
.studio-switch i { position:absolute; inset:0; border-radius:99px; background:#cbd1c8; cursor:pointer; transition:.2s; }
.studio-switch i::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:.2s; }
.studio-switch input:checked + i { background:var(--green); }
.studio-switch input:checked + i::after { transform:translateX(16px); }
.studio-size-options { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; }
.studio-size-options button { padding:7px 3px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--panel-2); font-size:11px; cursor:pointer; }
.studio-size-options button.active { border-color:var(--green); color:var(--green); background:var(--green-soft); font-weight:700; }
.studio-size-options.is-disabled { opacity:.42; }
.studio-size-options button:disabled { cursor:not-allowed; }
.studio-batch-count { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; margin-top:10px; }
.studio-batch-count button { min-width:0; padding:6px 0; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--panel-2); font-size:10px; cursor:pointer; }
.studio-batch-count button.active { border-color:var(--green); color:var(--green); background:var(--green-soft); font-weight:700; }
.studio-batch-count.is-disabled { opacity:.42; }
.studio-batch-count button:disabled { cursor:not-allowed; }
.studio-hint { margin:8px 0 0; color:var(--muted); font-size:10.5px; line-height:1.45; }
.studio-submit-row { display:flex; align-items:center; gap:10px; margin-top:0; }
.studio-price { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.studio-price s { opacity:.62; }
.studio-price b { color:var(--green); font-size:11px; }
.studio-go { margin-left:auto; min-width:126px; padding:9px 14px; border:0; border-radius:9px; color:var(--on-accent); background:var(--green); font-weight:750; cursor:pointer; box-shadow:0 7px 15px color-mix(in srgb,var(--green) 22%,transparent); transition:.18s; }
.studio-go:hover:not(:disabled) { background:var(--green-hover); transform:translateY(-1px); }
.studio-go:disabled { opacity:.52; cursor:not-allowed; box-shadow:none; }
.studio-note { margin:0; color:var(--muted); font-size:12px; }
.studio-status { min-height:19px; margin-top:-11px; text-align:right; }
.studio-optimization-note { margin:-8px 0 0; padding-top:9px; border-top:1px dashed var(--line); color:var(--muted); font-size:9.5px; line-height:1.45; }

/* ---------- 右侧监视器 ---------- */
.studio-right { min-width:0; display:grid; grid-template-rows:minmax(340px,1.15fr) minmax(230px,.85fr); background:var(--panel-2); }
.studio-monitor { min-width:0; min-height:0; display:flex; flex-direction:column; border-bottom:1px solid var(--line); }
.studio-monitor-head { flex:none; min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--panel); }
.studio-monitor-head b,.studio-monitor-head small { display:block; }
.studio-monitor-head b { font-size:13px; }
.studio-monitor-head small { color:var(--muted); font-size:10.5px; font-weight:400; }
.studio-zoom { flex:none; display:flex; padding:3px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); }
.studio-zoom button { min-width:34px; padding:4px 7px; border:0; border-radius:5px; color:var(--muted); background:transparent; font-size:11px; cursor:pointer; }
.studio-zoom button.active { color:var(--text); background:var(--panel); box-shadow:0 1px 4px rgba(0,0,0,.08); font-weight:700; }
.studio-result { min-height:0; flex:1; display:flex; flex-direction:column; }
.studio-monitor-empty { flex:1; display:grid; place-content:center; justify-items:center; padding:30px; color:var(--muted); text-align:center; }
.studio-monitor-empty i { width:58px; height:58px; display:grid; place-items:center; margin-bottom:10px; border:1px dashed var(--line); border-radius:16px; color:var(--green); background:var(--green-soft); font-size:23px; font-style:normal; }
.studio-monitor-empty b { color:var(--text); font-size:14px; }
.studio-monitor-empty small { margin-top:2px; font-size:11px; }
.studio-preview-stage {
  min-height:0; flex:1; display:grid; place-items:center; overflow:auto; padding:20px;
  background-color:var(--checker-b);
  background-image:linear-gradient(45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-a) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-a) 75%);
  background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0;
}
.studio-preview-image { --preview-zoom:1; width:calc(180px * var(--preview-zoom)); height:auto; max-width:none; object-fit:contain; filter:drop-shadow(0 12px 16px rgba(0,0,0,.16)); }
.studio-preview-image.studio-pixel { image-rendering:pixelated; }
.studio-preview-footer { flex:none; display:flex; align-items:center; gap:10px; min-height:52px; padding:7px 12px; border-top:1px solid var(--line); background:var(--panel); }
.studio-preview-info { min-width:0; margin-right:auto; }
.studio-preview-info b,.studio-preview-info small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-preview-info b { max-width:260px; font-size:12.5px; }
.studio-preview-info small { color:var(--muted); font-size:10.5px; }
.studio-variant-tabs { flex:none; display:flex; gap:5px; }
.studio-variant-tabs button,.studio-download { padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); font-size:11px; cursor:pointer; }
.studio-variant-tabs button.active { border-color:var(--green); color:var(--green); background:var(--green-soft); font-weight:700; }
.studio-download { color:var(--on-accent); border-color:var(--green); background:var(--green); font-weight:700; }

/* ---------- 私人贴图库 ---------- */
.studio-library { min-width:0; min-height:0; display:flex; flex-direction:column; padding:11px 14px 14px; }
.studio-library-head { flex:none; display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:11px; }
.studio-library-head b,.studio-library-head small { display:block; }
.studio-library-head b { font-size:13px; }
.studio-library-head small { color:var(--muted); font-size:10.5px; font-weight:400; }
.studio-library-head > span { flex:none; color:var(--muted); font-size:11px; }
.studio-grid { min-height:0; flex:1; display:grid; grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:8px; align-content:start; overflow-y:auto; padding-right:3px; scrollbar-width:thin; }
.studio-card { min-width:0; padding:7px; border:1px solid var(--line); border-radius:9px; background:var(--panel); cursor:pointer; outline:none; transition:.16s; }
.studio-card:hover,.studio-card:focus-visible { border-color:color-mix(in srgb,var(--green) 65%,var(--line)); transform:translateY(-1px); }
.studio-card.active { border-color:var(--green); box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 12%,transparent); }
.studio-card-thumb { aspect-ratio:1; display:grid; place-items:center; overflow:hidden; margin-bottom:5px; border-radius:7px; background-color:var(--checker-b); background-image:linear-gradient(45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-a) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-a) 75%); background-size:12px 12px; background-position:0 0,0 6px,6px -6px,-6px 0; }
.studio-card-thumb img { width:82%; height:82%; object-fit:contain; image-rendering:auto; }
.studio-card-meta b,.studio-card-meta small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-card-meta b { font-size:11.5px; }
.studio-card-meta small { color:var(--muted); font-size:9.5px; }
.studio-card-actions { display:flex; gap:4px; margin-top:7px; }
.studio-card-actions button { flex:1; min-width:0; padding:4px 2px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--panel-2); font-size:9.5px; cursor:pointer; }
.studio-card-actions button:hover { border-color:var(--green); color:var(--green); }
.studio-card-actions button.danger:hover { border-color:var(--bad); color:var(--bad); }
.studio-library-empty { grid-column:1/-1; min-height:170px; display:grid; place-content:center; justify-items:center; padding:20px; color:var(--muted); text-align:center; }
.studio-library-empty i { font-size:26px; font-style:normal; color:var(--green); }
.studio-library-empty b { color:var(--text); font-size:12px; }
.studio-library-empty small { max-width:280px; font-size:10.5px; }
.studio-thumb-missing { display:grid; place-items:center; min-height:54px; color:var(--muted); font-size:10px; }

@media (max-width:980px) {
  .studio-workspace { grid-template-columns:305px minmax(0,1fr); }
  .studio-compose { padding:16px; }
  .studio-reference-total { display:none; }
  .studio-independent { display:none; }
}
@media (max-width:760px) {
  .studio-topbar { padding:8px 10px; gap:7px; }
  .studio-brand small,.studio-profile { display:none; }
  .studio-back { padding:7px 9px; }
  .studio-page-shell { width:calc(100% - 16px); padding:18px 0 28px; }
  .studio-page-intro { padding:0 6px; }
  .studio-page-intro h1 { font-size:27px; }
  .studio-page-intro p { font-size:12px; }
  .studio-workspace { display:flex; flex-direction:column; overflow:visible; border-radius:14px; }
  .studio-compose { border-right:0; border-bottom:1px solid var(--line); }
  .studio-submit-row { margin-top:4px; }
  .studio-right { grid-template-rows:430px auto; }
  .studio-library { min-height:360px; }
  .studio-grid { grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); max-height:520px; }
  .studio-preview-image { width:calc(160px * var(--preview-zoom)); }
  .studio-preview-footer { flex-wrap:wrap; gap:7px; }
  .studio-preview-info { flex:1 1 100%; }
  .studio-preview-info b { max-width:100%; }
}