/* 画一张（生图第四阶段）：整页，四个入口共用。结构和样式照 _handoff/image-gen/phase4/preview 的 schemeD（.sd-* .hv-* .sd-dlg*）。
   JS 在 js/image-studio.js。深色在文件末尾。 */
.sx-rt{display:inline-block;border:1.6px solid currentColor;border-radius:3px;box-sizing:border-box;flex:none}
.sx-page{position:absolute;inset:0;z-index:900;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(1.02);transition:opacity 300ms ease,transform 380ms cubic-bezier(.22,.9,.3,1)}
.sx-page.in{opacity:1;transform:none}
.sx-page.out{opacity:0;transform:scale(1.02);transition-duration:240ms}
.sx-page button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sx-page svg{display:block}
@keyframes sxDev{from{filter:blur(16px) brightness(1.2);transform:scale(1.08)}}
@keyframes sbBreath{50%{opacity:.35}}

.sd{--sd-acc:var(--pri-deep);background:#f2f1f6;color:var(--ink)}
.sd-blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sd-blobs i{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.75;animation:sdDrift 14s ease-in-out infinite alternate}
.sd-blobs i:nth-child(1){left:-20%;top:-8%;background:#b9cdea}
.sd-blobs i:nth-child(2){right:-25%;top:22%;background:#dccdf0;animation-duration:17s}
.sd-blobs i:nth-child(3){left:5%;bottom:-15%;background:#f4d8cb;animation-duration:19s}
@keyframes sdDrift{to{transform:translate(12%,8%) scale(1.15)}}
.sd.busy .sd-blobs i{animation-duration:3s}
.sd>*:not(.sd-blobs){position:relative}
.sd-top{display:flex;align-items:center;justify-content:space-between;padding:calc(16px + var(--sat,0px)) 16px 0}
.sd-x{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.5);color:var(--ink);display:grid;place-items:center;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sd-x svg{width:16px;height:16px}
.sd-tog{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);max-width:calc(100% - 64px)}
.sd-tog button{height:32px;min-width:32px;border:0;border-radius:999px;background:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 9px;font-size:12.5px;color:var(--ink);flex:none}
.sd-tog button[data-p]{padding:0}
.sd-tog img{width:28px;height:28px;border-radius:50%;object-fit:cover;filter:grayscale(.6) opacity(.55);transition:filter 200ms,box-shadow 200ms}
.sd-tog button[aria-pressed="true"] img{filter:none;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--pri-deep)}
.sd-ppl{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;padding:3px 3px;scrollbar-width:none}
.sd-ppl::-webkit-scrollbar{display:none}
.sd-main{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px 0!important}
.sd-orb{position:relative;border-radius:34px;transition:width 400ms cubic-bezier(.22,.9,.3,1),height 400ms cubic-bezier(.22,.9,.3,1)}
.sd-orb::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1}
.sd-glow{position:absolute;inset:-18px;border-radius:48px;background:conic-gradient(from 0deg,#9fbbe4,#d3bdf0,#f5c7b5,#b7e0d6,#9fbbe4);filter:blur(26px);opacity:.35;z-index:0;transition:opacity 600ms}
.sd-orb[data-st="idle"] .sd-glow{animation:sdBreath 4s ease-in-out infinite}
@keyframes sdBreath{50%{opacity:.6;transform:scale(1.03)}}
.sd-orb[data-st="busy"] .sd-glow{opacity:.9;animation:sdSpin 2.4s linear infinite}
@keyframes sdSpin{to{transform:rotate(360deg)}}
.sd-orb[data-st="done"] .sd-glow{opacity:.5}
.sd-orb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:2;opacity:0}
.sd-orb[data-st="done"] img{opacity:1;animation:sxDev 1100ms cubic-bezier(.22,.9,.3,1)}
.sd-orb-ic{position:absolute;inset:0;z-index:3;display:grid;place-items:center;color:var(--sd-acc);transition:opacity 300ms}
.sd-orb-ic svg{width:34px;height:34px}
.sd-orb[data-st="busy"] .sd-orb-ic{animation:sbBreath 1.4s ease-in-out infinite}
.sd-orb[data-st="done"] .sd-orb-ic{opacity:0}
.sd-orb-fail{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;text-align:center}
.sd-orb[data-st="fail"] .sd-orb-fail{display:flex}
.sd-orb[data-st="fail"] .sd-orb-ic{opacity:0}
.sd-orb-fail b{font-size:15px;color:var(--ink)}
.sd-orb-fail span{font-size:12.5px;line-height:1.6;color:var(--ink2)}
.sd-orb-fail em{font-style:normal;font-size:11.5px;color:var(--ink2-soft)}
/* 壁纸：手机形状，完成后叠一层假时钟和四个图标 */
.sd-orb.phone{border-radius:38px}
.sd-orb.phone::before{border-radius:inherit}
.sd-fake{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;padding:13% 8% 7%;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35);pointer-events:none;border-radius:inherit}
.sd-orb.phone[data-st="done"] .sd-fake{display:flex}
.sd-fake b{font:600 34px/1.1 var(--font-display);letter-spacing:.02em}
.sd-fake small{margin-top:4px;font-size:11px;opacity:.9}
.sd-fake-ic{margin-top:auto;display:flex;gap:14px}
.sd-fake-ic i{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.sd-tog .sd-div{width:1px;height:18px;background:rgba(80,90,120,.15);margin:0 2px;flex:none}
.sd-tog [aria-expanded="true"]{background:rgba(255,255,255,.8)}
.sd-car{font-style:normal;font-size:11px;color:var(--ink2);margin-left:1px;transform:translateY(-2px)}
.sd-tog button{font-size:13px!important;letter-spacing:.02em}
.sd-pop{position:absolute;right:16px;top:calc(62px + var(--sat,0px));z-index:10;width:168px;padding:6px;border-radius:20px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 20px 40px -16px rgba(60,60,110,.4);transform-origin:top right}
.sd-pop button{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 12px;border:0;border-radius:13px;background:none;font-size:14px;color:var(--ink);text-align:left;box-sizing:border-box}
.sd-pop button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-pop button svg{width:15px;height:15px;color:var(--sd-acc);opacity:0}
.sd-pop button[aria-pressed="true"]{background:rgba(255,255,255,.75);font-weight:600}
.sd-pop button[aria-pressed="true"] svg{opacity:1}
.sd-pop-add{margin-top:2px;color:var(--ink2)!important;font-size:13.5px!important;border-radius:0 0 13px 13px!important;border-top:1px solid rgba(80,90,120,.08)!important}
.sd-rpop{position:absolute;right:16px;top:calc(62px + var(--sat,0px));z-index:10;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:min(320px,calc(100% - 32px));box-sizing:border-box;padding:8px;border-radius:22px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 20px 40px -16px rgba(60,60,110,.4);transform-origin:top right}
.sd-rpop[hidden],.sd-pop[hidden]{display:none}
.sd-rpop button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 2px 8px;border:0;border-radius:16px;background:none;color:var(--ink)}
.sd-rshape{display:grid;place-items:center;width:40px;height:40px}
.sd-rshape i{display:block;border:2px solid currentColor;border-radius:6px;box-sizing:border-box;color:var(--ink2)}
.sd-rpop b{font-size:13px;font-weight:600}
.sd-rpop small{font-size:10.5px;color:var(--ink2)}
.sd-rpop button[aria-pressed="true"]{background:rgba(255,255,255,.9);box-shadow:0 4px 12px -6px rgba(60,60,110,.35)}
.sd-rpop button[aria-pressed="true"] .sd-rshape i{color:var(--sd-acc);background:color-mix(in srgb,var(--pri-deep) 14%,transparent)}
.sd-box{position:relative;z-index:5;margin:4px 16px 12px;padding:16px 16px 12px;border-radius:26px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 14px 34px -18px rgba(70,70,120,.45)}
.sd-box textarea{display:block;width:100%;box-sizing:border-box;height:110px;padding:0 2px;border:0;background:none;resize:none;outline:none;font:15px/1.75 var(--font-display);letter-spacing:.01em;color:var(--ink);overflow-y:auto;scrollbar-width:none;transition:height 160ms}
.sd-box textarea::-webkit-scrollbar{display:none}
.sd-box textarea::placeholder{font-size:14px;color:var(--ink2);opacity:1}
.sd-top{z-index:8}
.sd-btns{display:flex;gap:10px;padding:0 20px calc(18px + var(--sab,0px))}
.sd-btns button{height:50px;border-radius:999px;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.sd-btns button[hidden]{display:none}
.sd-btns svg{width:17px;height:17px}
.sd-gen{flex:1;border:0;padding:1.5px;background:linear-gradient(100deg,#8fb0de,#c7aeea,#f0b9a4);box-shadow:0 14px 30px -14px rgba(120,110,170,.7)}
.sd-gen span{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;height:100%;border-radius:inherit;background:rgba(255,255,255,.82);color:var(--ink);font-weight:600;letter-spacing:.08em}
.sd.busy .sd-gen{opacity:.5}
.sd-gen:disabled{opacity:.45}
.sd-again{flex:0 0 128px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.55);color:var(--ink);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sd-send{flex:1;border:0;background:var(--pri-deep);color:var(--on-pri-deep);font-weight:600;letter-spacing:.06em;box-shadow:0 14px 28px -14px var(--pri-deep)}
.sd-send:disabled{opacity:.5}
.sd-help{position:relative;margin:12px -16px 0;padding:12px 16px 0;border-top:1px solid rgba(80,90,120,.07)}
.sd-help .sd-ai{flex:none;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:0;border-radius:999px;font-size:12px;font-weight:600;background:rgba(95,120,147,.1);color:var(--sd-acc)}
.sd-help .sd-ai svg{width:13px;height:13px}
.sd-ai.busy svg{animation:sdSpin 1.2s linear infinite}
.hv-top{display:flex;align-items:center;gap:12px}
.hv-tabs{flex:1;display:flex;justify-content:flex-end;gap:16px}
.hv-tabs button{position:relative;border:0;background:none;height:28px;padding:0 2px;font-size:12.5px;color:var(--ink2)}
.hv-tabs button[aria-selected="true"]{color:var(--ink);font-weight:600}
.hv-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:1px;width:12px;height:2px;border-radius:2px;background:var(--pri-deep);transform:translateX(-50%)}
.hv-tabs i{position:absolute;right:-5px;top:6px;width:4px;height:4px;border-radius:50%;background:var(--pri-deep);opacity:.55}
.hv-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hv-wrap button{height:28px;padding:0 11px;border-radius:999px;border:1px solid rgba(95,120,147,.16);background:transparent;font-size:12px;color:var(--ink2);transition:background 160ms,color 160ms}
.hv-wrap button[aria-pressed="true"]{border-color:transparent;background:var(--pri-deep);color:var(--on-pri-deep)}

.sd-dlg-ov{position:absolute!important;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,40,70,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:sxFade 200ms ease-out backwards}
@keyframes sxFade{from{opacity:0}}
@keyframes sdPop{from{opacity:0;transform:scale(.88) translateY(-4px)}}
.sd-dlg-ov.out{transition:opacity 180ms;opacity:0}
.sd-dlg{width:min(300px,100%);box-sizing:border-box;padding:22px 20px 14px;border-radius:24px;border:1px solid rgba(255,255,255,.95);background:rgba(250,250,253,.94);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);box-shadow:0 30px 60px -20px rgba(60,60,110,.45);text-align:left;animation:sdPop 300ms cubic-bezier(.34,1.56,.64,1) backwards}
.sd-dlg>b{display:block;font-size:16px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.sd-dlg>p{margin:4px 0 16px;font-size:12px;color:var(--ink2)}
.sd-dlg-in{display:block;width:100%;box-sizing:border-box;height:42px;padding:0 2px;border:0;border-bottom:1.5px solid rgba(95,120,147,.22);border-radius:0;background:none;outline:none;font:15px var(--font-display);color:var(--ink);text-align:left;transition:border-color 180ms}
.sd-dlg-in:focus{border-bottom-color:var(--pri-deep)}
.sd-dlg-in::placeholder{font-size:14px;color:var(--ink2);opacity:1}
.sd-dlg-chips{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;margin:14px 0 18px}
.sd-dlg-chips button{height:26px;padding:0 10px;border-radius:999px;border:1px solid rgba(95,120,147,.18);background:none;font-size:12px;color:var(--ink2)}
.sd-dlg-btns{display:flex;justify-content:flex-end;gap:4px}
.sd-dlg-btns button{height:36px;padding:0 16px;border:0;border-radius:999px;background:none;font-size:14px;color:var(--ink2)}
.sd-dlg-btns .pri{background:var(--pri-deep);color:var(--on-pri-deep);padding:0 20px}
.sd-dlg-btns .pri:disabled{opacity:.35}

/* 没选生图模型：页面照常打开，盖一层模糊，中间一张卡片 */
.sd-off{position:absolute!important;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:28px;background:rgba(242,241,246,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sd-off-card{width:min(300px,100%);box-sizing:border-box;padding:24px 20px 16px;border-radius:26px;border:1px solid rgba(255,255,255,.95);background:rgba(250,250,253,.92);box-shadow:0 30px 60px -20px rgba(60,60,110,.45);text-align:center}
.sd-off-card b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.sd-off-card p{margin:8px 0 18px;font-size:12.5px;line-height:1.7;color:var(--ink2)}
.sd-off-btns{display:flex;gap:10px}
.sd-off-btns button{flex:1;height:44px;border:0;border-radius:999px;background:rgba(95,120,147,.1);font-size:14px;color:var(--ink)}
.sd-off-btns .pri{background:var(--pri-deep);color:var(--on-pri-deep);font-weight:600}

/* 头像旁边的小菜单（名片页 / 我的资料）：从相册选择 · 生成头像 */
.sx-avmenu{position:fixed;z-index:950;width:210px;padding:6px;border-radius:20px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 20px 40px -16px rgba(60,60,110,.4);transform-origin:top left;animation:sdPop 240ms cubic-bezier(.34,1.56,.64,1) backwards}
.sx-avmenu button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:9px 12px;border:0;border-radius:13px;background:none;font-size:14px;color:var(--ink);text-align:left;font-family:inherit;cursor:pointer}
.sx-avmenu button small{font-size:11px;color:var(--ink2)}
.sx-avmenu button:active{background:rgba(120,130,170,.1)}
.sx-avmenu-bg{position:fixed;inset:0;z-index:949}

/* 壁纸页：「更换照片」旁边并排「生成壁纸」 */
#theme-app-root .th-wp-btns{display:flex;gap:10px;margin-top:12px}
#theme-app-root .th-wp-btns .th-wide-btn{flex:1;width:auto;margin-top:0}

/* 去掉所有滚动条 */
.sx-page *,.sx-page,.sx-avmenu{scrollbar-width:none}
.sx-page *::-webkit-scrollbar{display:none}

/* 深色 */
:root[data-theme="dark"] .sd{background:#14161c}
:root[data-theme="dark"] .sd-blobs i{opacity:.32}
:root[data-theme="dark"] .sd-x,:root[data-theme="dark"] .sd-tog,:root[data-theme="dark"] .sd-box,:root[data-theme="dark"] .sd-pop,:root[data-theme="dark"] .sd-rpop,:root[data-theme="dark"] .sx-avmenu{border-color:rgba(255,255,255,.12);background:rgba(36,40,52,.66)}
:root[data-theme="dark"] .sd-orb::before{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .sd-glow{opacity:.28}
:root[data-theme="dark"] .sd-tog button[aria-pressed="true"] img{box-shadow:0 0 0 2px #14161c,0 0 0 3.5px var(--pri-deep)}
:root[data-theme="dark"] .sd-tog [aria-expanded="true"],:root[data-theme="dark"] .sd-pop button[aria-pressed="true"],:root[data-theme="dark"] .sd-rpop button[aria-pressed="true"]{background:rgba(255,255,255,.1)}
:root[data-theme="dark"] .sd-gen span{background:#1c1f29}
:root[data-theme="dark"] .sd-again{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .sd-box textarea::placeholder{color:var(--ink2);opacity:1}
:root[data-theme="dark"] .sd-help,:root[data-theme="dark"] .sd-pop-add{border-top-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] .hv-wrap button{border-color:rgba(255,255,255,.16)}
:root[data-theme="dark"] .sd-dlg,:root[data-theme="dark"] .sd-off-card{border-color:rgba(255,255,255,.12);background:rgba(34,38,50,.94)}
:root[data-theme="dark"] .sd-dlg-ov{background:rgba(0,0,0,.4)}
:root[data-theme="dark"] .sd-off{background:rgba(20,22,28,.45)}
:root[data-theme="dark"] .sd-dlg-in{border-bottom-color:rgba(255,255,255,.22)}
:root[data-theme="dark"] .sd-dlg-chips button{border-color:rgba(255,255,255,.18)}
:root[data-theme="dark"] .sd-off-btns button:not(.pri){background:rgba(255,255,255,.08)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sd{background:#14161c}
  :root:not([data-theme="light"]) .sd-blobs i{opacity:.32}
  :root:not([data-theme="light"]) .sd-x,:root:not([data-theme="light"]) .sd-tog,:root:not([data-theme="light"]) .sd-box,:root:not([data-theme="light"]) .sd-pop,:root:not([data-theme="light"]) .sd-rpop,:root:not([data-theme="light"]) .sx-avmenu{border-color:rgba(255,255,255,.12);background:rgba(36,40,52,.66)}
  :root:not([data-theme="light"]) .sd-orb::before{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
  :root:not([data-theme="light"]) .sd-glow{opacity:.28}
  :root:not([data-theme="light"]) .sd-tog button[aria-pressed="true"] img{box-shadow:0 0 0 2px #14161c,0 0 0 3.5px var(--pri-deep)}
  :root:not([data-theme="light"]) .sd-tog [aria-expanded="true"],:root:not([data-theme="light"]) .sd-pop button[aria-pressed="true"],:root:not([data-theme="light"]) .sd-rpop button[aria-pressed="true"]{background:rgba(255,255,255,.1)}
  :root:not([data-theme="light"]) .sd-gen span{background:#1c1f29}
  :root:not([data-theme="light"]) .sd-again{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
  :root:not([data-theme="light"]) .sd-box textarea::placeholder{color:var(--ink2);opacity:1}
  :root:not([data-theme="light"]) .sd-help,:root:not([data-theme="light"]) .sd-pop-add{border-top-color:rgba(255,255,255,.08)}
  :root:not([data-theme="light"]) .hv-wrap button{border-color:rgba(255,255,255,.16)}
  :root:not([data-theme="light"]) .sd-dlg,:root:not([data-theme="light"]) .sd-off-card{border-color:rgba(255,255,255,.12);background:rgba(34,38,50,.94)}
  :root:not([data-theme="light"]) .sd-dlg-ov{background:rgba(0,0,0,.4)}
  :root:not([data-theme="light"]) .sd-off{background:rgba(20,22,28,.45)}
  :root:not([data-theme="light"]) .sd-dlg-in{border-bottom-color:rgba(255,255,255,.22)}
  :root:not([data-theme="light"]) .sd-dlg-chips button{border-color:rgba(255,255,255,.18)}
  :root:not([data-theme="light"]) .sd-off-btns button:not(.pri){background:rgba(255,255,255,.08)}
}