:root {
  color-scheme: light;
  --orange: #f97316;
  --orange-dark: #ea580c;
  --canvas: #f5f5f5;
  --text: #23252a;
  --muted: #7c818a;
  --line: #e5e7eb;
  --shadow: 0 12px 34px rgba(15, 23, 42, .10);
  font-family: "Noto Sans SC Variable", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--text); background: var(--canvas); font-size: 13px; user-select: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; background: transparent; cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }

.home-view { display: grid; grid-template-columns: 64px minmax(0,1fr); width: 100vw; height: 100vh; background: #f8f7f3; }
.home-sidebar { position: relative; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 17px 9px 14px; border-right: 1px solid #e8e6e1; background: rgba(255,255,255,.9); }
.home-brand { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(145deg,#ff7c46,#ed5437); box-shadow: 0 8px 22px rgba(232,81,49,.22); }
.home-brand svg { width: 25px; height: 25px; fill: currentColor; stroke: none; }
.home-nav { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 8px; }
.home-nav-button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #85817b; transition: .16s ease; }
.home-nav-button:hover, .home-nav-button.active { color: #22211f; background: #f0eee9; }
.home-nav-button.primary { margin-bottom: 9px; color: #fff; background: #22211f; box-shadow: 0 7px 18px rgba(24,23,21,.16); }
.home-nav-button svg { width: 18px; height: 18px; }
.home-account-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 3px; border: 1px solid #ddd9d0; border-radius: 50%; background: #fff; }
.home-account-button svg { width: 20px; height: 20px; }
.home-main { display: grid; grid-template-rows: 68px minmax(0,1fr); min-width: 0; min-height: 0; }
.home-header { display: grid; grid-template-columns: 230px minmax(280px,520px) 1fr; align-items: center; gap: 24px; padding: 0 34px; border-bottom: 1px solid rgba(225,222,216,.8); background: rgba(250,249,246,.92); -webkit-app-region: drag; }
.home-heading span, .home-heading small { display: block; }
.home-heading span { font-size: 14px; font-weight: 720; letter-spacing: -.01em; }
.home-heading small { margin-top: 2px; color: #9b968d; font-size: 8px; }
.home-search { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid #e2dfd9; border-radius: 12px; background: rgba(255,255,255,.9); box-shadow: 0 5px 18px rgba(38,34,29,.035); -webkit-app-region: no-drag; }
.home-search svg { width: 16px; height: 16px; color: #aaa59d; }
.home-search input { min-width: 0; outline: 0; border: 0; background: transparent; user-select: text; }
.home-search input::placeholder { color: #aaa69e; }
.home-search kbd { padding: 3px 6px; border: 1px solid #e5e2dc; border-radius: 6px; color: #a29e96; background: #f7f6f3; font-family: inherit; font-size: 8px; }
.home-header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; -webkit-app-region: no-drag; }
.home-site-button { height: 34px; padding: 0 14px; border: 1px solid #d7e2f0; border-radius: 10px; color: #45658f; background: rgba(255,255,255,.92); font-size: 12px; font-weight: 700; cursor: pointer; }
.home-site-button:hover { color: #235fca; border-color: #b9cdee; background: #f3f7fd; }
.home-round-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e1ded8; border-radius: 10px; color: #7c7770; background: #fff; }
.home-round-button:hover { background: #f1efeb; }
.home-round-button svg { width: 16px; height: 16px; }
.home-scroll { overflow: auto; scroll-behavior: smooth; }
.home-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 58px; align-items: center; min-height: 410px; padding: 52px max(64px,calc((100vw - 1280px)/2)); border-bottom: 1px solid #ebe8e2; background: radial-gradient(circle at 82% 18%,rgba(255,211,189,.48),transparent 33%), linear-gradient(135deg,#fbfaf7,#f3eee7); }
.home-kicker { color: #d8663f; font-size: 9px; font-weight: 750; letter-spacing: .18em; }
.home-hero-copy h1 { margin: 13px 0 14px; color: #211f1c; font-size: clamp(34px,3.4vw,54px); font-weight: 670; line-height: 1.12; letter-spacing: -.045em; }
.home-hero-copy p { max-width: 500px; margin: 0; color: #7f786f; font-size: 13px; line-height: 1.9; }
.home-create-card { padding: 24px; border: 1px solid rgba(255,255,255,.9); border-radius: 20px; background: rgba(255,255,255,.82); box-shadow: 0 24px 70px rgba(61,48,38,.12), inset 0 1px rgba(255,255,255,.9); backdrop-filter: blur(16px); }
.home-create-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.home-create-title span { font-size: 14px; font-weight: 680; }
.home-create-title small { color: #9b958d; font-size: 8px; }
.home-create-card > input { width: 100%; height: 52px; outline: 0; border: 1px solid #dfdbd4; border-radius: 13px; padding: 0 15px; background: #fff; font-size: 12px; user-select: text; }
.home-create-card > input:focus { border-color: #e78662; box-shadow: 0 0 0 4px rgba(225,109,69,.09); }
.home-create-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.home-create-actions button { height: 41px; border-radius: 11px; font-size: 10px; font-weight: 650; }
.home-create-primary { display: flex; justify-content: space-between; align-items: center; padding: 0 14px; color: #fff; background: #25221f; }
.home-create-primary:hover { background: #d96139; }
.home-create-primary span { font-size: 17px; }
.home-create-secondary { padding: 0 13px; border: 1px solid #e0ddd7; color: #6f6962; background: #fff; }
.home-model-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.home-model-tags span { padding: 5px 8px; border-radius: 999px; color: #827b73; background: #f2f0ec; font-size: 8px; }
.home-section { max-width: 1320px; margin: 0 auto; padding: 46px 54px 12px; }
.home-section + .home-section { padding-top: 54px; }
.home-section:last-child { padding-bottom: 90px; }
.home-section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 19px; }
.home-section-head small { color: #c26a49; font-size: 8px; font-weight: 730; letter-spacing: .15em; }
.home-section-head h2 { margin: 4px 0 0; font-size: 19px; font-weight: 680; letter-spacing: -.02em; }
.home-section-head > button { color: #777169; font-size: 10px; }
.home-section-head > button:hover { color: #d45f38; }
.home-project-count { color: #99938b; font-size: 9px; }
.home-project-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 22px 16px; }
.recent-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.home-project-card { min-width: 0; text-align: left; }
.home-project-preview { position: relative; display: grid; place-items: center; aspect-ratio: 16/10; overflow: hidden; border: 1px solid #e1ded8; border-radius: 14px; color: #a19b93; background: linear-gradient(145deg,#eeeae3,#faf9f6); transition: .2s ease; }
.home-project-card:hover .home-project-preview { border-color: #d5c8bd; box-shadow: 0 14px 32px rgba(56,45,36,.12); transform: translateY(-3px); }
.home-project-preview img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; background: rgba(255,255,255,.72); }
.home-project-preview.asset-missing img, .home-project-preview img.asset-broken { display: none; }
.home-project-preview .project-fallback-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #d16d47; background: rgba(255,255,255,.76); box-shadow: 0 8px 24px rgba(63,48,36,.08); }
.home-project-preview .project-fallback-mark svg { width: 20px; height: 20px; }
.home-project-preview .project-node-count { position: absolute; z-index: 2; right: 8px; bottom: 8px; padding: 4px 7px; border-radius: 999px; color: #fff; background: rgba(25,23,21,.64); backdrop-filter: blur(8px); font-size: 8px; }
.home-project-copy { padding: 10px 3px 0; }
.home-project-copy strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.home-project-copy span { display: block; margin-top: 5px; color: #98928a; font-size: 8px; }
.home-new-project-card .home-project-preview { border-style: dashed; background: rgba(255,255,255,.48); }
.home-new-project-card .home-project-preview::before { content: "+"; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #6d675f; background: #fff; box-shadow: 0 9px 28px rgba(39,34,29,.09); font-size: 24px; font-weight: 300; }
.home-project-empty { padding: 36px; border: 1px dashed #dcd8d1; border-radius: 14px; color: #9a948c; text-align: center; }
.home-account-panel { position: fixed; z-index: 160; left: 72px; bottom: 14px; width: 310px; padding: 15px; border: 1px solid #dedad3; border-radius: 17px; background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(28,25,22,.18); backdrop-filter: blur(18px); }
.home-account-head { display: flex; justify-content: space-between; align-items: center; color: #817b73; font-size: 9px; }
.home-account-head button { width: 27px; height: 27px; border-radius: 8px; color: #8f8981; font-size: 19px; }
.home-account-head button:hover { background: #f1efeb; }
.home-profile { display: flex; align-items: center; gap: 11px; padding: 13px 0 16px; border-bottom: 1px solid #ece9e4; }
.home-profile i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#655447,#25221f); font-style: normal; font-weight: 700; }
.home-profile strong, .home-profile span { display: block; }
.home-profile strong { font-size: 12px; }
.home-profile span { margin-top: 4px; color: #9b958d; font-size: 8px; }
.home-account-row { display: flex; justify-content: space-between; padding-top: 12px; color: #8c867f; font-size: 9px; }
.home-account-row strong { color: #4a4641; font-weight: 650; }
.home-account-panel code { display: block; overflow: hidden; margin: 13px 0 9px; padding: 9px; border-radius: 8px; color: #8a847c; background: #f5f3ef; font-family: Consolas,monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; user-select: text; }
.home-account-action { width: 100%; height: 34px; margin-top: 7px; border: 1px solid #dedad3; border-radius: 9px; color: #6f6962; background: #fff; font-size: 9px; }
.home-account-action.primary { color: #fff; border-color: #25221f; background: #25221f; }
.inspiration-head { align-items: flex-end; }
.inspiration-head p { margin: 7px 0 0; color: #969087; font-size: 9px; }
.inspiration-filters { display: flex; gap: 6px; }
.inspiration-filters button { height: 29px; padding: 0 10px; border-radius: 999px; color: #8b857d; background: #efede9; font-size: 8px; }
.inspiration-filters button.active { color: #fff; background: #25221f; }
.inspiration-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.inspiration-card { overflow: hidden; border: 1px solid #e0dcd5; border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgba(51,41,33,.07); transition: .2s ease; }
.inspiration-card:hover { box-shadow: 0 19px 46px rgba(51,41,33,.14); transform: translateY(-4px); }
.inspiration-image { aspect-ratio: 4/3; }
.inspiration-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; }
.inspiration-meta span, .inspiration-meta strong { display: block; }
.inspiration-meta span { color: #b06d51; font-size: 7px; }
.inspiration-meta strong { margin-top: 3px; font-size: 10px; }
.inspiration-meta button { flex: 0 0 auto; padding: 6px 8px; border-radius: 7px; color: #625d57; background: #f1efeb; font-size: 7px; }
.inspiration-meta button:hover { color: #fff; background: #d96139; }

.canvas-app { display: grid; grid-template-rows: 56px minmax(0, 1fr); width: 100vw; height: 100vh; }
.canvas-topbar {
  position: relative; z-index: 80; display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 12px; border-bottom: 1px solid #e4e6e9; background: rgba(255,255,255,.97);
  -webkit-app-region: drag;
}
.no-drag { -webkit-app-region: no-drag; }
.topbar-left, .topbar-right, .topbar-center { display: flex; align-items: center; gap: 6px; }
.topbar-center { position: absolute; left: 50%; transform: translateX(-50%); }
.logo-button {
  display: flex; align-items: center; justify-content: center; gap: 5px; width: auto; min-width: 66px; height: 34px; padding: 0 10px; border-radius: 10px; color: #fff;
  background: linear-gradient(145deg, #ff7a45, #f05035); box-shadow: 0 5px 15px rgba(239, 76, 45, .19), inset 0 1px rgba(255,255,255,.25);
}
.logo-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.logo-button span { font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.project-menu-button, .topbar-text-button { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border-radius: 8px; color: #303238; font-weight: 600; }
.project-menu-button:hover, .topbar-text-button:hover { background: #f3f4f6; }
.project-menu-button span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-menu-button svg, .topbar-text-button svg { width: 14px; height: 14px; color: #9ca0a8; }
.topbar-text-button { margin-left: 4px; color: #6b7079; font-size: 12px; font-weight: 500; }
.topbar-format { display:flex; align-items:center; gap:5px; height:32px; margin-left:4px; padding:0 5px 0 9px; border:1px solid #dfe7f4; border-radius:9px; color:#7b8493; background:#f8faff; font-size:9px; }
.topbar-format select { height:24px; outline:0; border:0; color:#4b63a1; background:transparent; font-size:10px; font-weight:700; cursor:pointer; }
.top-icon-button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #656a73; transition: background .15s, color .15s; }
.top-icon-button:hover { color: #202328; background: #f1f2f4; }
.top-icon-button svg { width: 16px; height: 16px; }
.top-icon-button.disabled { color: #c7c9ce; cursor: default; }
.top-icon-button.disabled:hover { background: transparent; }
.top-divider { width: 1px; height: 20px; margin: 0 4px; background: #e3e5e8; }
.zoom-number { width: 45px; height: 30px; border-radius: 7px; color: #62666e; font-size: 11px; font-weight: 600; }
.zoom-number:hover { background: #f1f2f4; }
.save-status { margin-right: 4px; color: #a0a4ab; font-size: 10px; }
.save-status.error { color: #dc5a50; }

.canvas-layout { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.canvas-stage {
  position: absolute; inset: 0; overflow: hidden; outline: none; cursor: crosshair; background: #f6f6f5;
}
.canvas-stage.panning { cursor: grabbing; }
.canvas-stage.selecting { cursor: crosshair; }
.canvas-world { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; transform-style: flat; }
.canvas-stage.panning .canvas-world { will-change: transform; }
.canvas-node-proxy { display:grid; place-items:center; align-content:center; gap:8px; width:100%; height:100%; overflow:hidden; border:1px solid #dce4f2; border-radius:12px; color:#7484a5; background:linear-gradient(145deg,#fbfdff,#eef3fb); box-shadow:0 9px 24px rgba(63,84,122,.08); cursor:move; }
.canvas-node-proxy svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; }
.canvas-node-proxy span { max-width:85%; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.canvas-node-proxy.proxy-generator { color:#6577dc; border-color:#cfd9f5; background:linear-gradient(145deg,#f8faff,#edf1ff); }

.selection-box { position: absolute; z-index: 55; border: 1px solid #f97316; background: rgba(249,115,22,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.65) inset; pointer-events: none; }
.batch-toolbar { position: absolute; z-index: 65; left: 50%; top: 14px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 7px 5px 13px; border: 1px solid #e2e4e7; border-radius: 12px; color: #5f646d; background: rgba(255,255,255,.97); box-shadow: 0 14px 38px rgba(15,23,42,.14); transform: translateX(-50%); backdrop-filter: blur(12px); }
.batch-toolbar span { margin-right: 3px; font-size: 10px; font-weight: 600; }
.batch-toolbar button { height: 30px; padding: 0 11px; border-radius: 8px; color: #6a6f77; background: #f3f4f6; font-size: 9px; }
.batch-toolbar #batchDownloadButton { color: #fff; background: linear-gradient(135deg,#fb7c22,#e95a15); }
.batch-toolbar button:hover { filter: brightness(.97); }
.batch-toolbar #batchDownloadButton { position: relative; min-width: 82px; overflow: hidden; font-weight: 720; letter-spacing: .01em; }
.batch-toolbar #batchDownloadButton.downloading { color: #fff; background: linear-gradient(110deg,#6658e9,#42cdbf,#6658e9); background-size: 220% 100%; animation: download-flow 1.4s linear infinite; }
@keyframes download-flow { to { background-position: -220% 0; } }

.canvas-toolbar {
  position: absolute; z-index: 40; left: 12px; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 46px; padding: 7px 5px; border: 1px solid rgba(255,255,255,.94); border-radius: 16px;
  background: rgba(255,255,255,.72); box-shadow: inset 0 1px rgba(255,255,255,.85), 0 15px 38px rgba(15,23,42,.13); backdrop-filter: blur(18px) saturate(150%); transform: translateY(-50%);
}
.toolbar-item { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #7d8490; transition: .16s; }
.toolbar-item:hover { color: #20242a; background: rgba(255,255,255,.8); box-shadow: 0 5px 14px rgba(15,23,42,.08); transform: translateY(-1px); }
.toolbar-item.active { color: #22252a; background: rgba(255,255,255,.84); box-shadow: inset 0 0 0 1px rgba(148,163,184,.17), 0 5px 16px rgba(15,23,42,.09); }
.toolbar-item svg { width: 17px; height: 17px; }
.toolbar-item::after {
  content: attr(data-tip); position: absolute; left: 44px; top: 50%; padding: 7px 9px; border-radius: 8px; color: #fff; background: #25272c;
  font-size: 10px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(4px,-50%); transition: .15s; box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.toolbar-item:hover::after { opacity: 1; transform: translate(0,-50%); }
.toolbar-item.disabled-tool { color: #a7abb2; }
.toolbar-item.limited-tool { color: #8e939b; }
.toolbar-separator { width: 25px; height: 1px; margin: 4px 0; background: linear-gradient(90deg, transparent, #d8dade, transparent); }
.tool-live-dot { position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border: 1.5px solid #fff; border-radius: 50%; background: #22a36a; }

.empty-canvas { position: absolute; left: 50%; top: 46%; display: grid; justify-items: center; width:min(620px,calc(100% - 40px)); text-align:center; transform: translate(-50%,-50%); pointer-events: none; transition: opacity .2s; }
.empty-canvas.inactive { opacity: 0; visibility: hidden; }
.empty-illustration { position: relative; width: 120px; height: 84px; margin-bottom: 12px; }
.empty-card { position: absolute; width: 70px; height: 62px; border: 1px solid #e0e2e6; border-radius: 12px; background: #fff; box-shadow: 0 10px 25px rgba(15,23,42,.07); }
.empty-card::before { content: ""; position: absolute; inset: 10px; border-radius: 7px; background:#dcecff; }
.empty-card.one { left: 12px; top: 12px; transform: rotate(-9deg); }
.empty-card.two { right: 10px; top: 2px; transform: rotate(8deg); }
.empty-card.two::before { background:#91c2ff; }
.empty-spark { position: absolute; right: 1px; top: 48px; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #fff; background:#1473e6; box-shadow: 0 8px 18px rgba(20,115,230,.18); }
.empty-canvas h1 { margin: 5px 0 0; font-size: 18px; font-weight: 650; }
.empty-canvas p { margin: 8px 0 18px; color: #8a8f98; font-size: 11px; }
.empty-actions { display: flex; gap: 8px; margin-top:18px; pointer-events: auto; }
.orange-button, .white-button, .wide-button { height: 36px; padding: 0 14px; border-radius: 9px; font-size: 11px; }
.orange-button { color: #fff; background: linear-gradient(135deg,#fb7b23,#ed5a18); box-shadow: 0 7px 17px rgba(234,88,12,.16); }
.orange-button:hover { filter: brightness(1.04); }
.white-button, .wide-button { border: 1px solid #dfe2e6; color: #60656d; background: #fff; }
.white-button:hover, .wide-button:hover { background: #f7f8f9; }
.empty-help { margin-top: 16px; color: #b0b3b9; font-size: 9px; }

.canvas-node { position: absolute; contain: layout style; border-radius: 13px; transform-origin: center; transform-style: flat; }
.canvas-node img,.canvas-node video { backface-visibility: visible; image-rendering: auto; }
.canvas-node.selected > .image-card, .canvas-node.selected > .note-card, .canvas-node.selected > .generation-card, .canvas-node.selected > .generator-shell .generator-card { box-shadow: 0 0 0 2px rgba(249,115,22,.45), var(--shadow); }
.node-drag-handle { cursor: grab; }
.node-drag-handle:active { cursor: grabbing; }
.image-card { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid #e0e2e5; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.image-card img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; image-rendering: auto; cursor: grab; }
.image-card img:active { cursor: grabbing; }
.node-topline { position: absolute; z-index: 2; left: 7px; right: 7px; top: 7px; display: flex; align-items: center; justify-content: space-between; opacity: 0; transition: .15s; }
.image-card:hover .node-topline, .generation-card:hover .node-topline, .selected .node-topline { opacity: 1; }
.node-label { flex: 1; min-width: 0; overflow: hidden; padding: 6px 8px; border-radius: 7px; color: #fff; background: rgba(20,22,26,.68); backdrop-filter: blur(8px); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.node-top-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; margin-left: 5px; }
.node-action { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: rgba(239,104,30,.9); box-shadow: 0 5px 14px rgba(234,88,12,.2); }
.node-action:hover { background: #ed651d; transform: scale(1.05); }
.node-action svg { width: 12px; height: 12px; margin-left: 1px; }
.node-action.subtle { color: #fff; background: rgba(20,22,26,.72); box-shadow: none; }
.node-action.subtle:hover { background: rgba(239,104,30,.95); }
.reference-drag-handle { cursor: copy; }
.node-delete { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: rgba(20,22,26,.72); }
.node-delete:hover { background: #dc5448; }
.node-delete svg { width: 13px; height: 13px; }
.note-card { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border: 1px solid #e6d9bd; border-radius: 12px; background: #fff9df; box-shadow: var(--shadow); }
.note-head { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 7px 0 12px; border-bottom: 1px solid rgba(148,118,57,.12); color: #8b774d; font-size: 9px; }
.note-editor { flex: 1; min-height: 0; width: 100%; resize: none; outline: 0; border: 0; padding: 13px; color: #5c533f; background: transparent; line-height: 1.7; user-select: text; }
.note-title-input { flex: 1; min-width: 0; outline: 0; border: 0; color: #7f6c45; background: transparent; font-size: 10px; font-weight: 650; user-select: text; }
.note-head-actions { display: flex; align-items: center; gap: 4px; }
.note-add-cell { width: 25px; height: 25px; border-radius: 7px; color: #8a7448; background: rgba(151,119,54,.09); font-size: 16px; }
.note-prompt-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; overflow: auto; padding: 9px; scrollbar-width: thin; }
.note-prompt-cell { position: relative; min-height: 74px; border: 1px solid rgba(151,119,54,.16); border-radius: 9px; background: rgba(255,255,255,.46); }
.note-prompt-cell b { position: absolute; left: 7px; top: 7px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #947a49; background: rgba(151,119,54,.1); font-size: 7px; }
.note-prompt-cell textarea { width: 100%; height: 100%; min-height: 74px; resize: none; outline: 0; border: 0; padding: 8px 7px 7px 32px; color: #5c533f; background: transparent; font-size: 9px; line-height: 1.55; user-select: text; }
.note-prompt-cell textarea::placeholder { color: #b7aa8e; }
.note-prompt-cell button { position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; border-radius: 5px; color: #a18c65; background: transparent; opacity: 0; }
.note-prompt-cell:hover button { opacity: 1; }
.note-prompt-cell button:hover { color: #fff; background: #c26b55; }

.generator-shell { display: flex; align-items: flex-start; gap: 10px; width: 100%; height: 100%; }
.generator-card { display: flex; flex-direction: column; width: calc(100% - 64px); height: 100%; overflow: hidden; border: 1px solid #dedfe2; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.generator-head { display: flex; align-items: center; justify-content: space-between; min-height: 43px; padding: 0 10px 0 14px; border-bottom: 1px solid #eef0f2; background: rgba(255,255,255,.96); }
.generator-title { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; font-size: 11px; font-weight: 650; }
.generator-title > span { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.generator-title i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #f56d20; background: #fff2e9; font-style: normal; }
.generator-title i svg { width: 14px; height: 14px; }
.generator-title small { margin-left: 3px; color: #aaadb4; font-size: 8px; font-weight: 500; }
.generator-price-hint { flex: 0 0 auto; max-width: 122px; margin: 0 5px 0 auto; overflow: hidden; padding: 4px 7px; border-radius: 999px; color: #5269c9; background: #eef2ff; font-size: 7px; font-weight: 700; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.generator-head-actions { display: flex; flex: 0 0 auto; gap: 3px; }
.generator-mini-button { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: #92969e; }
.generator-mini-button:hover { color: #444950; background: #f3f4f6; }
.generator-mini-button svg { width: 13px; height: 13px; }
.generator-body { flex: 1; min-height: 0; padding: 10px 12px 12px; overflow: hidden; }
.reference-head { display: flex; align-items: center; justify-content: space-between; margin: 0 1px 8px; }
.reference-head strong { color: #656a72; font-size: 10px; font-weight: 600; }
.reference-head span { color: #a0a4ab; font-size: 9px; }
.reference-strip { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 62px; gap: 6px; height: 142px; overflow-x: hidden; overflow-y: auto; padding: 1px 3px 3px 1px; border-radius: 10px; scrollbar-width: thin; scrollbar-color: #d7d9dd transparent; }
.reference-strip.empty { display: grid; grid-template-columns: 1fr; align-content: stretch; grid-auto-rows: 132px; padding: 5px; border: 1px dashed #d2d5da; background: #fafafa; }
.reference-card, .reference-add { position: relative; min-width: 0; height: 62px; border-radius: 8px; }
.reference-strip.empty .reference-add { height: 132px; border: 0; background: transparent; }
.reference-card { overflow: hidden; border: 1px solid #dfe1e5; background: #f7f8f9; }
.reference-card img { width: 100%; height: 100%; object-fit: contain; }
.remote-placeholder { display: grid; place-items: center; align-content: center; gap: 3px; width: 100%; height: 100%; color: #9ca1a9; background: linear-gradient(145deg,#fafafa,#f0f2f4); }
.remote-placeholder svg { width: 19px; height: 19px; }
.remote-placeholder small { font-size: 7px; }
.reference-card .remote-badge { position: absolute; left: 4px; bottom: 4px; padding: 2px 4px; border-radius: 4px; color: #fff; background: rgba(16,128,79,.78); font-size: 7px; }
.reference-card .local-badge { position: absolute; left: 4px; bottom: 4px; padding: 2px 4px; border-radius: 4px; color: #fff; background: rgba(89,94,104,.76); font-size: 7px; }
.reference-remove { position: absolute; right: 3px; top: 3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: rgba(27,29,33,.72); opacity: 0; }
.reference-card:hover .reference-remove { opacity: 1; }
.reference-add { display: grid; place-items: center; align-content: center; gap: 3px; border: 1px dashed #ced2d7; color: #969ba4; background: #fafafa; font-size: 7px; }
.reference-add:hover, .reference-dropzone.drag-over { color: #ef6c21; border-color: #fb923c; background: #fff7ed; }
.reference-dropzone.drop-target-active { color: #ef6c21; outline: 2px solid #f97316; outline-offset: 2px; background: #fff7ed; box-shadow: 0 0 0 7px rgba(249,115,22,.10); }
.reference-add svg { width: 17px; height: 17px; }
.reference-limit { display: grid; place-items: center; min-width: 0; height: 62px; padding: 4px; color: #b2b5bb; border-radius: 8px; background: #f4f5f6; font-size: 7px; text-align: center; }
.prompt-wrap { position: relative; margin-top: 9px; border: 1px solid #dfe1e4; border-radius: 10px; background: #fff; transition: .15s; }
.prompt-wrap:focus-within { border-color: #fb923c; box-shadow: 0 0 0 3px rgba(251,146,60,.09); }
.generator-prompt { display: block; width: 100%; height: 105px; resize: none; outline: 0; border: 0; padding: 10px 11px 43px; color: #40444b; background: transparent; line-height: 1.55; user-select: text; }
.generator-prompt::placeholder { color: #b2b5bb; }
.prompt-count { position: absolute; right: 8px; top: 8px; color: #b0b3b9; font-size: 7px; }
.generator-options { position: absolute; left: 7px; right: 7px; bottom: 6px; display: flex; align-items: center; gap: 4px; min-width: 0; }
.option-select { min-width: 0; height: 28px; outline: 0; border: 0; border-radius: 7px; padding: 0 18px 0 6px; color: #60656e; background: #f5f6f7; font-size: 8px; }
.generator-options .option-select:first-child { flex: 1; min-width: 140px; max-width: 160px; }
.generator-options.wasai-image-v2-options { display: grid; grid-template-columns: minmax(105px,1.6fr) repeat(4,minmax(0,.8fr)); }
.generator-options.wasai-image-v2-options .option-select,
.generator-options.wasai-image-v2-options .option-select:first-child { width: 100%; min-width: 0; max-width: none; }
.generator-options .spacer { flex: 1; }
.flash-check { position: absolute; left: 7px; top: -25px; display: flex; flex: 0 0 auto; align-items: center; gap: 4px; color: #747981; font-size: 7px; white-space: nowrap; }
.flash-check input { accent-color: #f97316; }
.reference-warning { position: absolute; right: 0; top: -25px; display: flex; align-items: center; gap: 3px; color: #a06a36; font-size: 7px; }
.reference-warning svg { width: 12px; height: 12px; }
.execute-column { display: flex; flex-direction: column; align-items: center; width: 54px; margin-top: 70px; color: #a0a4ab; }
.execute-button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#fb7c22,#e95a15); box-shadow: 0 10px 24px rgba(234,88,12,.25); transition: .18s; }
.execute-button:hover { transform: scale(1.07); }
.execute-button:disabled { color: #aeb2b8; background: #d9dce0; box-shadow: none; cursor: not-allowed; transform: none; }
.execute-button svg { width: 19px; height: 19px; margin-left: 2px; }
.execute-line { width: 28px; height: 1px; margin: 8px 0 5px; background: #d3d5d9; }
.execute-column span { font-size: 9px; }

.generation-card { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid #dfe1e4; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.generation-card img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; cursor: grab; }
.generation-card video { display:block; width:100%; height:100%; object-fit:contain; background:#0d1220; }
.generation-card img:active { cursor: grabbing; }
.generation-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; background: linear-gradient(145deg,#fff,#f6f7f8); }
.generation-loading::before { content: ""; width: 32px; height: 32px; border: 2px solid #e6e8eb; border-top-color: var(--orange); border-radius: 50%; animation: spin 1s linear infinite; }
.generation-loading.failed::before { content: "!"; display: grid; place-items: center; border-color: #f1b3ad; color: #d84d43; background: #fff4f3; animation: none; font-weight: 700; }
.generation-loading strong { margin-top: 12px; color: #62666e; font-size: 10px; }
.generation-loading span { max-width: 230px; margin-top: 5px; color: #9ba0a8; font-size: 8px; line-height: 1.5; text-align: center; }
.video-generator-card .generator-body { overflow:auto; scrollbar-width:thin; }
.video-frame-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.video-frame-slot { position:relative; display:grid; place-items:center; align-content:center; min-height:112px; overflow:hidden; border:1px dashed #bfd0f3; border-radius:11px; color:#7484a5; background:#f8faff; }
.video-frame-slot img { width:100%; height:112px; object-fit:contain; }
.video-frame-slot strong { font-size:10px; }
.video-frame-slot small { margin-top:5px; font-size:7px; color:#9ba8bf; }
.video-frame-slot .reference-remove { opacity:1; }
.video-reference-row { display:flex; gap:6px; min-height:68px; margin-top:8px; overflow:auto; padding:4px; border:1px dashed #d4def1; border-radius:10px; }
.video-reference-row .reference-card,.video-reference-row .reference-add { flex:0 0 72px; height:58px; }
.video-reference-row .reference-card img { width:100%; height:100%; object-fit:contain; }
.video-prompt { height:84px; padding-bottom:10px; }
.video-mention-bar { display:flex; align-items:center; gap:5px; min-height:30px; padding:4px 8px 7px; overflow-x:auto; color:#7d8aa2; border-top:1px solid #edf0f6; white-space:nowrap; }
.video-mention-bar > span { flex:0 0 auto; font-size:8px; font-weight:650; }
.video-mention-bar > button { flex:0 0 auto; height:21px; padding:0 7px; border:1px solid #ccd8f4; border-radius:7px; color:#526ee0; background:#f3f6ff; font-size:10px; font-weight:700; }
.video-mention-bar > button:hover { border-color:#8fa7ed; background:#eaf0ff; }
.video-mention-bar > small { flex:0 0 auto; color:#a0a9ba; font-size:7px; }
.video-options { display:grid; grid-template-columns:1.5fr .8fr .8fr 1.25fr; gap:5px; margin-top:8px; }
.video-options .option-select { width:100%; min-width:0; }
.video-toggles { display:flex; align-items:center; gap:14px; margin-top:8px; color:#69748a; font-size:8px; }
.video-toggles label { display:flex; align-items:center; gap:5px; }
.video-toggles input[type="number"] { width:105px; height:27px; outline:0; border:1px solid #dce4f1; border-radius:7px; padding:0 7px; }
.retry-button { margin-top: 9px; padding: 6px 9px; border: 1px solid #dee1e5; border-radius: 7px; color: #6f747d; background: #fff; font-size: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

.drop-overlay { position: absolute; z-index: 70; inset: 12px; display: grid; place-items: center; border: 2px dashed #fb923c; border-radius: 18px; background: rgba(255,247,237,.88); backdrop-filter: blur(6px); pointer-events: none; }
.drop-overlay > div { display: grid; justify-items: center; gap: 8px; color: #c75d1d; }
.drop-overlay svg { width: 32px; height: 32px; }
.drop-overlay strong { font-size: 16px; }
.drop-overlay span { color: #a97855; font-size: 10px; }

.history-panel { position: absolute; z-index: 60; top: 0; right: 0; bottom: 0; width: 288px; border-left: 1px solid #e2e4e7; background: rgba(255,255,255,.96); box-shadow: -14px 0 35px rgba(15,23,42,.08); backdrop-filter: blur(14px); transition: transform .22s ease; }
.history-panel.collapsed { transform: translateX(100%); }
.history-head { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 15px; border-bottom: 1px solid #ebedf0; }
.history-head small, .history-head strong { display: block; }
.history-head small { color: #a0a4ac; font-size: 8px; }
.history-head strong { margin-top: 2px; font-size: 13px; }
.history-head button { width: 28px; height: 28px; border-radius: 7px; color: #8e929a; font-size: 20px; }
.history-head button:hover { background: #f2f3f5; }
.history-list { height: calc(100% - 60px); overflow: auto; padding: 11px; }
.history-item { display: grid; grid-template-columns: 50px 1fr; gap: 9px; padding: 8px; border: 1px solid #e7e9ec; border-radius: 10px; background: #fff; margin-bottom: 8px; }
.history-thumb { display: grid; place-items: center; width: 50px; height: 50px; overflow: hidden; border-radius: 7px; color: #e36b25; background: #fff5ed; font-size: 9px; }
.history-thumb img { width: 100%; height: 100%; object-fit: cover; }
.history-copy { min-width: 0; }
.history-copy strong { display: block; overflow: hidden; color: #555a63; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.history-copy span { display: block; margin-top: 5px; color: #a0a4ac; font-size: 8px; }
.history-empty { padding: 60px 15px; color: #a2a6ae; text-align: center; font-size: 10px; line-height: 1.8; }
.history-limit-note { padding:7px 9px; color:#8b96aa; font-size:8px; text-align:center; }

.popover { position: fixed; z-index: 100; border: 1px solid #e0e2e5; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 18px 50px rgba(15,23,42,.16); backdrop-filter: blur(16px); }
.project-popover { left: 52px; top: 50px; width: 270px; }
.popover-head { display: flex; align-items: center; justify-content: space-between; height: 45px; padding: 0 11px 0 14px; border-bottom: 1px solid #eceef0; font-weight: 600; }
.popover-head button { height: 28px; padding: 0 8px; border-radius: 7px; color: #ef681e; background: #fff4eb; font-size: 9px; }
.project-list { max-height: 350px; overflow: auto; padding: 7px; }
.project-item { display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: center; width: 100%; min-height: 51px; padding: 6px 8px; border-radius: 9px; text-align: left; }
.project-item:hover, .project-item.active { background: #f3f4f6; }
.project-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: #d16628; background: #fff1e7; }
.project-icon svg { width: 16px; height: 16px; }
.project-info { min-width: 0; }
.project-info strong { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.project-info span { display: block; margin-top: 3px; color: #a0a4ac; font-size: 8px; }
.popover-foot { padding: 7px; border-top: 1px solid #eceef0; }
.popover-foot button { width: 100%; height: 30px; border-radius: 7px; color: #777c84; font-size: 9px; }
.popover-foot button:hover { background: #f4f5f6; }
.model-popover { left: 250px; top: 50px; width: 260px; padding: 13px; }
.model-popover label { display: block; margin-bottom: 10px; color: #737780; font-size: 9px; }
.model-popover select { display: block; width: 100%; height: 34px; margin-top: 5px; outline: 0; border: 1px solid #dfe2e5; border-radius: 8px; padding: 0 8px; background: #fff; font-size: 10px; }
.model-popover p { margin: 5px 0 0; color: #9da1a8; font-size: 8px; line-height: 1.55; }

.modal-backdrop { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(35,38,43,.38); backdrop-filter: blur(7px); }
.modal-card { width: min(500px, 94vw); max-height: min(780px, 92vh); overflow: auto; border: 1px solid rgba(255,255,255,.8); border-radius: 16px; background: #fff; box-shadow: 0 30px 90px rgba(15,23,42,.24); }
.compact-modal { width: min(440px, 94vw); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 19px; border-bottom: 1px solid #eceef0; }
.modal-head small { color: #f06c20; font-size: 8px; letter-spacing: .12em; }
.modal-head h2 { margin: 3px 0 0; font-size: 16px; }
.modal-head > button { width: 29px; height: 29px; border-radius: 8px; color: #898d95; font-size: 20px; }
.modal-head > button:hover { background: #f2f3f5; }
.modal-card section { padding: 18px 19px; }
.modal-card section + section { border-top: 1px solid #eceef0; }
.section-title { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.section-title i { padding: 4px 7px; border-radius: 999px; color: #898e97; background: #f1f2f4; font-size: 8px; font-style: normal; font-weight: 500; }
.section-title i.connected, .section-title .safe-tag { color: #28835d; background: #edf8f2; }
.modal-card p { margin: 8px 0 12px; color: #858a93; font-size: 9px; line-height: 1.65; }
.key-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.key-row input, .full-input { height: 38px; outline: 0; border: 1px solid #dfe2e5; border-radius: 9px; padding: 0 10px; background: #fafbfc; user-select: text; }
.key-row input:focus, .full-input:focus { border-color: #fb923c; box-shadow: 0 0 0 3px rgba(251,146,60,.08); }
.key-row button { padding: 0 12px; border: 1px solid #dfe2e5; border-radius: 9px; color: #71767f; background: #fff; }
.check-row { display: flex; align-items: center; gap: 7px; margin-top: 11px; color: #777c85; font-size: 9px; }
.check-row input { accent-color: #f97316; }
.modal-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.modal-actions.end { justify-content: flex-end; }
.danger-link { color: #bd5d55; font-size: 9px; }
.modal-card code { display: block; overflow: hidden; margin-top: 10px; padding: 10px; border: 1px solid #e2e4e7; border-radius: 8px; color: #646972; background: #f7f8f9; font-family: Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; user-select: text; }
.wide-button { width: 100%; }
.settings-password-form { display: grid; gap: 11px; margin-top: 14px; }
.settings-password-form label { display: grid; gap: 6px; color: #6d727b; font-size: 9px; }
.settings-password-form input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #dfe2e5; border-radius: 9px; color: #535962; background: #fafbfc; outline: 0; user-select: text; }
.settings-password-form input:focus { border-color: #7289ed; box-shadow: 0 0 0 3px rgba(100,119,224,.10); background: #fff; }
.input-label { display: block; margin: 10px 0 6px; color: #6d727b; font-size: 9px; }
.full-input { width: 100%; }

.image-preview-modal { position: fixed; z-index: 260; inset: 0; display: grid; grid-template-rows: 56px minmax(0,1fr); padding: 0 18px 18px; background: rgba(18,20,24,.92); backdrop-filter: blur(10px); }
.image-preview-toolbar { display: flex; align-items: center; gap: 8px; color: #fff; }
.image-preview-toolbar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-preview-toolbar button { height: 32px; padding: 0 12px; border-radius: 8px; color: #fff; background: rgba(255,255,255,.13); }
.image-preview-toolbar button:hover { background: rgba(249,115,22,.9); }
.image-preview-toolbar #closeImagePreviewButton { width: 32px; padding: 0; font-size: 22px; }
.image-preview-modal > img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; image-rendering: auto; user-select: none; }

.toast-stack { position: fixed; z-index: 300; right: 18px; top: 70px; display: flex; flex-direction: column; gap: 7px; pointer-events: none; }
.toast { min-width: 230px; max-width: 380px; padding: 10px 12px; border: 1px solid #e0e2e5; border-radius: 9px; color: #5f646d; background: rgba(255,255,255,.97); box-shadow: 0 14px 40px rgba(15,23,42,.16); font-size: 10px; line-height: 1.5; animation: toast-in .2s ease-out; }
.toast.error { color: #bf5149; border-color: #f2c7c3; }
.toast.success { color: #2e7c5d; border-color: #cbe7d9; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 1050px) {
  .topbar-text-button { display: none; }
  .topbar-center { position: static; transform: none; margin-left: auto; }
  .save-status { display: none; }
}

@media (max-width: 1250px) {
  .home-header { grid-template-columns: 180px minmax(240px,440px) 1fr; padding: 0 22px; }
  .home-hero { gap: 32px; padding-left: 46px; padding-right: 46px; }
  .recent-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .recent-grid > :nth-child(n+5) { display: none; }
  .inspiration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* 独立视觉：深墨工作台 + 青紫光谱，不复用参考网站的侧栏与浅色首页布局。 */
.home-view { display: block; color: #eef2ff; background: #080c16; }
.home-sidebar {
  position: fixed; z-index: 90; left: 50%; right: auto; top: auto; bottom: 20px; display: flex; flex-direction: row;
  width: auto; height: 58px; padding: 7px 9px; border: 1px solid rgba(149,166,205,.22); border-radius: 20px;
  background: rgba(14,20,34,.82); box-shadow: 0 22px 70px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(22px) saturate(140%); transform: translateX(-50%);
}
.home-brand { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(145deg,#7868ff,#38ddcf); box-shadow: 0 10px 28px rgba(95,91,255,.34); }
.home-nav { flex: 0 0 auto; flex-direction: row; gap: 4px; padding: 0 8px; border-left: 1px solid rgba(156,170,204,.17); border-right: 1px solid rgba(156,170,204,.17); }
.home-nav-button { width: 40px; height: 40px; color: #8d99b7; }
.home-nav-button:hover, .home-nav-button.active { color: #f5f7ff; background: rgba(127,139,176,.16); }
.home-nav-button.primary { margin: 0; color: #08141c; background: #63ead8; box-shadow: 0 8px 23px rgba(54,224,203,.2); }
.home-account-button { width: 40px; height: 40px; border-color: rgba(152,169,210,.23); background: rgba(255,255,255,.06); }
.home-main { width: 100%; height: 100%; grid-template-rows: 76px minmax(0,1fr); }
.home-header { grid-template-columns: 240px minmax(300px,560px) 1fr; padding: 0 42px; border-bottom-color: rgba(142,159,198,.13); background: rgba(8,12,22,.72); backdrop-filter: blur(18px); }
.home-heading span { color: #f5f7ff; }
.home-heading small { color: #71809f; }
.home-search { border-color: rgba(133,151,193,.2); background: rgba(19,27,45,.78); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.home-search svg, .home-search input, .home-search input::placeholder { color: #8290af; }
.home-search input { color: #eef2ff; }
.home-search kbd { color: #6f7c99; border-color: rgba(136,151,188,.18); background: rgba(255,255,255,.04); }
.home-round-button { color: #8996b4; border-color: rgba(137,154,194,.2); background: rgba(19,27,45,.8); }
.home-round-button:hover { color: #f1f4ff; background: rgba(113,127,164,.16); }
.home-hero {
  position: relative; min-height: 500px; grid-template-columns: 1.08fr .92fr; gap: 70px; padding: 78px max(74px,calc((100vw - 1340px)/2));
  border-bottom-color: rgba(141,157,194,.11); background:
    radial-gradient(circle at 14% 18%,rgba(111,83,255,.22),transparent 31%),
    radial-gradient(circle at 83% 24%,rgba(45,222,203,.16),transparent 27%),
    linear-gradient(155deg,#080c16 12%,#0c1323 58%,#09101c);
}
.home-hero::after { content: ""; position: absolute; right: 7%; bottom: 7%; width: 340px; height: 220px; border: 1px solid rgba(107,231,215,.12); border-radius: 46% 54% 62% 38%; filter: blur(.2px); transform: rotate(-11deg); pointer-events: none; }
.home-kicker { color: #68e4d5; }
.home-hero-copy h1 { color: #f5f7ff; font-size: clamp(38px,4vw,62px); font-weight: 620; letter-spacing: -.055em; }
.home-hero-copy p { color: #8e9ab6; }
.home-create-card { position: relative; z-index: 2; border-color: rgba(139,156,199,.19); background: linear-gradient(145deg,rgba(23,32,53,.88),rgba(15,22,38,.86)); box-shadow: 0 32px 90px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.055); }
.home-create-title span { color: #f0f3ff; }
.home-create-title small { color: #6f7c99; }
.home-create-card > input { color: #eef2ff; border-color: rgba(139,156,199,.2); background: rgba(5,9,17,.55); }
.home-create-card > input::placeholder { color: #63708e; }
.home-create-card > input:focus { border-color: #7268ff; box-shadow: 0 0 0 4px rgba(114,104,255,.12); }
.home-create-primary { color: #071316; background: linear-gradient(120deg,#63ead8,#8d82ff); }
.home-create-primary:hover { background: linear-gradient(120deg,#7af3e3,#9c92ff); }
.home-create-secondary { color: #a4afc9; border-color: rgba(137,153,191,.2); background: rgba(255,255,255,.04); }
.home-model-tags span { color: #8996b4; border: 1px solid rgba(135,152,191,.13); background: rgba(255,255,255,.035); }
.home-scroll { background: #0a0f1b; }
.home-section { max-width: 1400px; }
.home-section-head small { color: #68e4d5; }
.home-section-head h2 { color: #eef2ff; }
.home-section-head > button, .home-project-count, .inspiration-head p { color: #7d89a6; }
.home-section-head > button:hover { color: #6ce6d7; }
.home-project-preview { color: #8390ae; border-color: rgba(132,149,190,.16); background: linear-gradient(145deg,#151e31,#0f1728); }
.home-project-card:hover .home-project-preview { border-color: rgba(104,228,213,.38); box-shadow: 0 18px 46px rgba(0,0,0,.32),0 0 0 1px rgba(104,228,213,.08); }
.home-project-preview .project-fallback-mark { color: #72eadb; background: rgba(98,234,216,.09); box-shadow: inset 0 0 0 1px rgba(98,234,216,.14); }
.home-project-preview .project-node-count { color: #cbd3ea; background: rgba(5,9,17,.68); }
.home-project-copy strong { color: #e9edfb; }
.home-project-copy span { color: #74809c; }
.home-new-project-card .home-project-preview { background: rgba(18,26,43,.68); }
.home-new-project-card .home-project-preview::before { color: #081418; background: linear-gradient(145deg,#62ead8,#8c80ff); box-shadow: 0 12px 32px rgba(77,206,194,.2); }
.home-project-empty { color: #7a86a2; border-color: rgba(133,151,192,.2); }
.inspiration-filters button { color: #8490ac; background: rgba(126,143,181,.1); }
.inspiration-filters button.active { color: #071417; background: #62ead8; }
.inspiration-card { border-color: rgba(135,152,192,.16); background: #11192a; box-shadow: 0 16px 44px rgba(0,0,0,.22); }
.inspiration-card:hover { box-shadow: 0 24px 56px rgba(0,0,0,.4),0 0 0 1px rgba(111,225,214,.12); }
.inspiration-meta span { color: #6de4d6; }
.inspiration-meta strong { color: #e9edfb; }
.inspiration-meta button { color: #9da8c1; background: rgba(126,143,181,.12); }
.inspiration-meta button:hover { color: #071417; background: #62ead8; }
.home-account-panel { left: 50%; bottom: 88px; color: #e9edfb; border-color: rgba(137,154,194,.22); background: rgba(15,22,38,.96); box-shadow: 0 30px 80px rgba(0,0,0,.48); transform: translateX(-50%); }
.home-account-head, .home-profile span, .home-account-row { color: #7f8ba7; }
.home-profile { border-bottom-color: rgba(135,152,191,.14); }
.home-profile i { background: linear-gradient(145deg,#7368ff,#42d8c7); }
.home-account-row strong { color: #dce2f4; }
.home-account-panel code { color: #8591ad; background: rgba(255,255,255,.04); }
.home-account-action { color: #a5afc7; border-color: rgba(135,152,191,.2); background: rgba(255,255,255,.04); }
.home-account-action.primary { color: #071417; border-color: #62ead8; background: #62ead8; }

:root { --orange: #7567ff; --orange-dark: #5c50e8; }
.logo-button, .orange-button, .execute-button, .batch-toolbar #batchDownloadButton { background: linear-gradient(135deg,#7567ff,#42d8c7); }
.logo-button { box-shadow: 0 7px 20px rgba(102,90,239,.24); }
.generator-title i { color: #6d5eff; background: #f0efff; }
.selection-box { border-color: #7567ff; background: rgba(117,103,255,.09); }
.canvas-node.selected > .image-card, .canvas-node.selected > .note-card, .canvas-node.selected > .generation-card, .canvas-node.selected > .generator-shell .generator-card { box-shadow: 0 0 0 2px rgba(117,103,255,.48),var(--shadow); }
.reference-add:hover, .reference-dropzone.drag-over { color: #6658ee; border-color: #8176ff; background: #f5f4ff; }
.reference-dropzone.drop-target-active { color: #6658ee; outline-color: #7567ff; background: #f5f4ff; box-shadow: 0 0 0 7px rgba(117,103,255,.1); }
.prompt-wrap:focus-within { border-color: #8176ff; box-shadow: 0 0 0 3px rgba(117,103,255,.09); }
.flash-check input, .check-row input { accent-color: #7567ff; }
.node-action { background: rgba(112,94,242,.9); box-shadow: 0 5px 14px rgba(101,82,228,.22); }
.node-action:hover, .node-action.subtle:hover { background: #6758ee; }
.drop-overlay { border-color: #7567ff; background: rgba(244,243,255,.9); }
.drop-overlay > div { color: #5e51dc; }
.drop-overlay span { color: #7f78ab; }

@media (max-width: 1100px) {
  .home-header { grid-template-columns: 180px minmax(240px,420px) 1fr; padding: 0 24px; }
  .home-hero { gap: 34px; padding-left: 44px; padding-right: 44px; }
}

/* 最终首页主题：AI 产品式克制留白 + WASAI 蓝紫识别色；布局采用独立的底部浮动工作坞。 */
.home-view { color: #202123; background: #f7f7f5; }
.home-sidebar { border-color: #deded9; background: rgba(255,255,255,.9); box-shadow: 0 18px 55px rgba(25,27,31,.16),inset 0 1px rgba(255,255,255,.9); }
.home-brand { color: #202123; background: #f3d75e; box-shadow: 0 9px 26px rgba(187,151,25,.22); }
.home-nav { border-color: #e7e7e2; }
.home-nav-button { color: #777972; }
.home-nav-button:hover, .home-nav-button.active { color: #202123; background: #f1f1ed; }
.home-nav-button.primary { color: #202123; background: #f3d75e; box-shadow: 0 7px 20px rgba(185,149,26,.18); }
.home-account-button { border-color: #deded8; background: #fff; }
.home-header { border-bottom-color: #e8e8e3; background: rgba(250,250,248,.88); }
.home-heading span { color: #202123; }
.home-heading small { color: #8b8d86; }
.home-search { border-color: #deded8; background: #fff; box-shadow: 0 4px 18px rgba(30,32,36,.045); }
.home-search svg, .home-search input::placeholder { color: #999b94; }
.home-search input { color: #202123; }
.home-search kbd { color: #8c8e87; border-color: #e5e5e0; background: #f5f5f2; }
.home-round-button { color: #777972; border-color: #dfdfda; background: #fff; }
.home-round-button:hover { color: #202123; background: #f2f2ee; }
.home-scroll { background: #f7f7f5; }
.home-hero { border-bottom-color: #e9e9e4; background: radial-gradient(circle at 82% 18%,rgba(244,216,95,.26),transparent 29%),radial-gradient(circle at 18% 20%,rgba(171,163,255,.12),transparent 28%),#fbfbf9; }
.home-hero::after { border-color: rgba(210,178,54,.2); }
.home-kicker { color: #9b7900; }
.home-hero-copy h1 { color: #202123; }
.home-hero-copy p { color: #767871; }
.home-create-card { border-color: #e2e2dc; background: rgba(255,255,255,.88); box-shadow: 0 28px 75px rgba(34,35,38,.1),inset 0 1px rgba(255,255,255,.95); }
.home-create-title span { color: #202123; }
.home-create-title small { color: #8d8f88; }
.home-create-card > input { color: #202123; border-color: #deded8; background: #fff; }
.home-create-card > input::placeholder { color: #a0a29b; }
.home-create-card > input:focus { border-color: #cab036; box-shadow: 0 0 0 4px rgba(224,191,58,.13); }
.home-create-primary { color: #fff; background: #202123; }
.home-create-primary span { color: #f3d75e; }
.home-create-primary:hover { background: #323338; }
.home-create-secondary { color: #666861; border-color: #dfdfd9; background: #fff; }
.home-model-tags span { color: #777971; border-color: #e7e7e2; background: #f3f3ef; }
.home-section-head small { color: #9b7900; }
.home-section-head h2 { color: #202123; }
.home-section-head > button, .home-project-count, .inspiration-head p { color: #858780; }
.home-section-head > button:hover { color: #8c6e00; }
.home-project-preview { color: #8c8e87; border-color: #dfdfd9; background: linear-gradient(145deg,#f0f0ec,#fbfbf9); }
.home-project-card:hover .home-project-preview { border-color: #cfc8a7; box-shadow: 0 16px 38px rgba(34,35,38,.12),0 0 0 1px rgba(218,184,54,.08); }
.home-project-preview .project-fallback-mark { color: #7e6500; background: #f6e58e; box-shadow: inset 0 0 0 1px rgba(150,119,0,.08); }
.home-project-preview .project-node-count { color: #fff; background: rgba(32,33,35,.66); }
.home-project-copy strong { color: #202123; }
.home-project-copy span { color: #8c8e87; }
.home-new-project-card .home-project-preview { background: rgba(255,255,255,.64); }
.home-new-project-card .home-project-preview::before { color: #202123; background: #f3d75e; box-shadow: 0 10px 28px rgba(180,145,23,.16); }
.home-project-empty { color: #888a83; border-color: #dcdcd6; }
.inspiration-filters button { color: #777971; background: #ecece8; }
.inspiration-filters button.active { color: #202123; background: #f3d75e; }
.inspiration-card { border-color: #dfdfd9; background: #fff; box-shadow: 0 13px 36px rgba(31,32,35,.07); }
.inspiration-card:hover { box-shadow: 0 21px 48px rgba(31,32,35,.14),0 0 0 1px rgba(217,182,48,.12); }
.inspiration-meta span { color: #9b7900; }
.inspiration-meta strong { color: #202123; }
.inspiration-meta button { color: #5e605a; background: #f1f1ed; }
.inspiration-meta button:hover { color: #202123; background: #f3d75e; }
.home-account-panel { color: #202123; border-color: #deded8; background: rgba(255,255,255,.98); box-shadow: 0 28px 75px rgba(28,29,32,.2); }
.home-account-head, .home-profile span, .home-account-row { color: #7e8079; }
.home-profile { border-bottom-color: #e9e9e4; }
.home-profile i { color: #202123; background: #f3d75e; }
.home-account-row strong { color: #34353a; }
.home-account-panel code { color: #777971; background: #f4f4f0; }
.home-account-action { color: #5f615a; border-color: #deded8; background: #fff; }
.home-account-action.primary { color: #202123; border-color: #f3d75e; background: #f3d75e; }

:root { --orange: #c6a300; --orange-dark: #9f8200; }
.logo-button { color: #202123; background: #f3d75e; box-shadow: 0 6px 18px rgba(177,142,17,.2); }
.orange-button, .execute-button, .batch-toolbar #batchDownloadButton { color: #fff; background: #202123; }
.generator-title i { color: #725a00; background: #fbf2c3; }
.selection-box { border-color: #c2a000; background: rgba(231,198,64,.12); }
.canvas-node.selected > .image-card, .canvas-node.selected > .note-card, .canvas-node.selected > .generation-card, .canvas-node.selected > .generator-shell .generator-card { box-shadow: 0 0 0 2px rgba(197,163,0,.48),var(--shadow); }
.reference-add:hover, .reference-dropzone.drag-over { color: #806700; border-color: #d2b32c; background: #fffbee; }
.reference-dropzone.drop-target-active { color: #806700; outline-color: #c6a300; background: #fffbee; box-shadow: 0 0 0 7px rgba(214,181,40,.12); }
.prompt-wrap:focus-within { border-color: #caae26; box-shadow: 0 0 0 3px rgba(205,170,31,.1); }
.flash-check input, .check-row input { accent-color: #c6a300; }
.node-action { color: #202123; background: rgba(243,215,94,.96); box-shadow: 0 5px 14px rgba(168,133,0,.17); }
.node-action:hover, .node-action.subtle:hover { color: #202123; background: #edcf50; }
.drop-overlay { border-color: #c6a300; background: rgba(255,251,232,.9); }
.drop-overlay > div { color: #806700; }
.drop-overlay span { color: #91824c; }

/* 当前视觉：浅雾蓝基底、低饱和玻璃层与蓝紫渐变交互色。 */
:root {
  --orange: #5b7cff;
  --orange-dark: #7256ee;
  --canvas: #f3f7fc;
  --text: #20304c;
  --muted: #71809a;
  --line: #dce5f2;
  --shadow: 0 18px 48px rgba(53,77,117,.11);
}
body { color: #20304c; background: #f3f7fc; }

.home-view { color: #20304c; background: #f3f7fc; }
.home-sidebar {
  height: 62px; bottom: 18px; padding: 8px 10px; border-color: rgba(154,177,213,.34); border-radius: 22px;
  background: rgba(255,255,255,.88); box-shadow: 0 22px 64px rgba(60,82,120,.18),inset 0 1px rgba(255,255,255,.98);
  backdrop-filter: blur(24px) saturate(135%);
}
.home-brand { color: #fff; background: linear-gradient(135deg,#68a5ff,#816ef5); box-shadow: 0 10px 28px rgba(92,121,233,.24); }
.home-nav { border-color: rgba(177,195,220,.42); }
.home-nav-button { color: #7c8ca7; }
.home-nav-button:hover, .home-nav-button.active { color: #315693; background: #edf3fc; }
.home-nav-button.primary { color: #fff; background: linear-gradient(135deg,#62a3ff,#806cf2); box-shadow: 0 8px 22px rgba(90,119,229,.24); }
.home-nav-button.primary:hover { transform: translateY(-1px); filter: saturate(1.08); }
.home-account-button { border-color: #d9e4f2; background: #fff; }

.home-header { border-bottom-color: rgba(187,202,224,.42); background: rgba(250,252,255,.9); box-shadow: 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(18px); }
.home-heading span { color: #233552; }
.home-heading small { color: #8b99af; }
.home-search { border-color: #dce6f3; background: rgba(255,255,255,.9); box-shadow: 0 7px 24px rgba(61,84,123,.055); transition: .2s ease; }
.home-search:focus-within { border-color: #94b9f8; box-shadow: 0 0 0 4px rgba(92,137,238,.09),0 10px 30px rgba(61,84,123,.07); }
.home-search svg, .home-search input::placeholder { color: #97a6bc; }
.home-search input { color: #263957; }
.home-search kbd { color: #8695ab; border-color: #e0e8f3; background: #f3f6fb; }
.home-round-button { color: #72829c; border-color: #dce5f2; background: rgba(255,255,255,.92); }
.home-round-button:hover { color: #496aa2; background: #edf3fc; }

.home-scroll { background: linear-gradient(180deg,#f6f9fe,#f3f7fc 38%,#f7f9fd); }
.home-hero {
  isolation: isolate; min-height: 470px; border-bottom-color: rgba(187,202,224,.38);
  background: radial-gradient(circle at 80% 18%,rgba(147,193,255,.25),transparent 32%),radial-gradient(circle at 20% 12%,rgba(196,180,255,.17),transparent 30%),linear-gradient(145deg,#fbfdff,#eff5fd);
}
.home-hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0; opacity: .32; pointer-events: none;
  background-image: linear-gradient(rgba(114,151,207,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(114,151,207,.12) 1px,transparent 1px);
  background-size: 72px 72px; mask-image: linear-gradient(to bottom,rgba(0,0,0,.8),transparent 90%);
}
.home-hero::after { z-index: -1; right: 8%; bottom: 7%; width: 360px; height: 220px; border: 0; border-radius: 50%; background: rgba(156,183,255,.19); filter: blur(46px); }
.home-kicker { color: #567bc7; }
.home-hero-copy h1 { color: #203455; background: linear-gradient(120deg,#203455 12%,#4d73bc 58%,#735fc9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.home-hero-copy p { color: #6e7f9a; }
.home-create-card {
  border-color: rgba(181,201,230,.58); background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,248,255,.86));
  box-shadow: 0 30px 80px rgba(65,88,128,.14),inset 0 1px rgba(255,255,255,1); backdrop-filter: blur(22px);
}
.home-create-title span { color: #263a59; }
.home-create-title small { color: #8998af; }
.home-create-card > input { color: #263a59; border-color: #d8e3f2; background: rgba(255,255,255,.93); }
.home-create-card > input::placeholder { color: #9aa9bd; }
.home-create-card > input:focus { border-color: #91b5f5; box-shadow: 0 0 0 4px rgba(87,130,232,.1); }
.home-create-primary { color: #fff; background: linear-gradient(110deg,#5797f5,#716ce9 58%,#8b61e7); box-shadow: 0 11px 26px rgba(89,103,219,.2); transition: .2s ease; }
.home-create-primary span { color: #fff; }
.home-create-primary:hover { background: linear-gradient(110deg,#4d8ff0,#675fe0 58%,#8156de); box-shadow: 0 14px 32px rgba(89,103,219,.27); transform: translateY(-1px); }
.home-create-secondary { color: #657692; border-color: #d9e3f1; background: rgba(255,255,255,.88); }
.home-create-secondary:hover { color: #4d68a0; border-color: #bfcfeb; background: #f7f9fe; }
.home-model-tags span { color: #687b9b; border-color: #dfe7f3; background: rgba(236,243,253,.82); }

.home-section-head small { color: #617fbd; }
.home-section-head h2 { color: #233654; }
.home-section-head > button, .home-project-count, .inspiration-head p { color: #8493aa; }
.home-section-head > button:hover { color: #5679bd; }
.home-project-card { position: relative; min-width: 0; }
.home-project-open { display: block; width: 100%; padding: 0; text-align: left; }
.home-project-preview { color: #8191aa; border-color: #dce5f2; background: linear-gradient(145deg,#edf3fc,#fbfdff); }
.home-project-card:hover .home-project-preview { border-color: #b9cdeb; box-shadow: 0 18px 44px rgba(58,81,120,.13),0 0 0 1px rgba(109,142,221,.06); }
.home-project-preview .project-fallback-mark { color: #5d7dc0; background: linear-gradient(145deg,#dceaff,#eee9ff); box-shadow: inset 0 0 0 1px rgba(100,128,193,.08); }
.home-project-preview .project-node-count { color: #fff; background: rgba(38,57,88,.58); }
.home-project-copy strong { color: #263956; }
.home-project-copy span { color: #8b9ab0; }
.home-new-project-card .home-project-preview { background: rgba(255,255,255,.66); }
.home-new-project-card .home-project-preview::before { color: #fff; background: linear-gradient(135deg,#64a2f5,#7c6be8); box-shadow: 0 12px 30px rgba(88,111,211,.2); }
.home-project-delete {
  position: absolute; z-index: 8; right: 9px; top: 9px; display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid rgba(207,219,235,.9); border-radius: 10px; color: #8c9ab0; background: rgba(255,255,255,.9);
  box-shadow: 0 8px 24px rgba(48,66,96,.13); backdrop-filter: blur(10px); opacity: 0; transform: translateY(-3px); transition: .18s ease;
}
.home-project-delete svg { width: 15px; height: 15px; }
.home-project-card:hover .home-project-delete, .home-project-delete:focus-visible { opacity: 1; transform: none; }
.home-project-delete:hover { color: #c45665; border-color: #efcbd1; background: #fff7f8; }

.inspiration-head { align-items: flex-start; gap: 26px; }
.inspiration-filters { max-width: 820px; flex-wrap: wrap; justify-content: flex-end; }
.inspiration-filters button { color: #6f819e; background: #eaf0f8; transition: .16s ease; }
.inspiration-filters button:hover { color: #536fa9; background: #e0eafa; }
.inspiration-filters button.active { color: #fff; background: linear-gradient(110deg,#609af0,#7769e7); box-shadow: 0 7px 18px rgba(91,109,213,.18); }
.inspiration-toolbar { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 15px; color: #8494aa; font-size: 8px; }
.inspiration-toolbar span:first-child { color: #526eaa; font-size: 9px; font-weight: 650; }
.inspiration-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 17px; }
.inspiration-card { border-color: #dce6f2; border-radius: 17px; background: rgba(255,255,255,.94); box-shadow: 0 14px 38px rgba(54,77,114,.075); }
.inspiration-card:hover { box-shadow: 0 24px 56px rgba(54,77,114,.15),0 0 0 1px rgba(105,139,215,.08); transform: translateY(-5px); }
.inspiration-image { position: relative; aspect-ratio: 5/4; overflow: hidden; background: #eef3f9; transition: filter .2s ease; }
.inspiration-tile { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit:contain; }
.inspiration-tile[data-tile-state="loading"] { opacity: 0; }
.inspiration-tile[data-tile-state="ready"] { opacity: 1; transition: opacity .16s ease; }
.inspiration-tile[data-tile-state="error"] { opacity: 0; }
.inspiration-card:hover .inspiration-image { filter: saturate(1.04) contrast(1.02); }
.inspiration-case-number { position: absolute; left: 9px; top: 9px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; color: #fff; background: rgba(36,57,91,.38); box-shadow: 0 5px 15px rgba(28,42,70,.12); backdrop-filter: blur(9px); font-size: 7px; }
.inspiration-meta span { color: #6681bc; }
.inspiration-meta strong { color: #263955; }
.inspiration-meta button { color: #5f76a3; background: #edf3fc; }
.inspiration-meta button:hover { color: #fff; background: linear-gradient(110deg,#609af0,#7769e7); }

.home-account-panel { color: #263955; border-color: #d9e4f2; background: rgba(251,253,255,.98); box-shadow: 0 30px 80px rgba(51,72,107,.2); }
.home-account-head, .home-profile span, .home-account-row { color: #7f8fa7; }
.home-profile { border-bottom-color: #e4ebf4; }
.home-profile i { color: #fff; background: linear-gradient(135deg,#68a4f5,#7e6ce9); }
.home-account-row strong { color: #334867; }
.home-account-panel code { color: #71829d; background: #f0f4fa; }
.home-account-action { color: #60728f; border-color: #d8e3f1; background: #fff; }
.home-account-action.primary { color: #fff; border-color: transparent; background: linear-gradient(110deg,#609af0,#7669e7); }

.delete-project-card { border-color: #dbe5f2; box-shadow: 0 34px 90px rgba(42,60,91,.25); }
.delete-project-card section p { color: #72829b; font-size: 10px; }
.delete-project-card section p strong { color: #334966; }
.delete-project-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.delete-project-actions button { height: 36px; padding: 0 14px; border: 1px solid #dbe4f0; border-radius: 10px; color: #6c7d97; background: #fff; }
.delete-project-actions #confirmDeleteProjectButton { color: #fff; border-color: #d86b78; background: linear-gradient(110deg,#e17b86,#c95668); }
.delete-project-actions #confirmDeleteProjectButton:disabled { opacity: .58; cursor: wait; }

.canvas-topbar { border-bottom-color: #dce5f1; background: rgba(252,253,255,.94); box-shadow: 0 6px 24px rgba(56,76,111,.045); backdrop-filter: blur(16px); }
.canvas-stage { background: #f3f7fc; background-image: none; }
.logo-button { color: #fff; background:#1473e6; box-shadow: 0 7px 20px rgba(20,115,230,.18); transition:background-color .15s ease; }
.logo-button:hover { background:#1065cd; }
.orange-button, .execute-button, .batch-toolbar #batchDownloadButton { color: #fff; background: linear-gradient(135deg,#5f9bf1,#7669e7); box-shadow: 0 10px 26px rgba(86,105,211,.21); }
.execute-button:hover { box-shadow: 0 13px 32px rgba(86,105,211,.28); }
.execute-button.is-running {
  background: linear-gradient(135deg,#2f3f63,#536989);
  box-shadow: 0 10px 26px rgba(45,62,95,.22);
}
.execute-button.is-running:hover { background: linear-gradient(135deg,#263553,#455b7c); }
.execute-button.is-running svg { margin-left: 0; }
.generator-title i { color: #5f78bd; background: #eaf1ff; }
.selection-box { border-color: #6689e8; background: rgba(101,136,232,.09); }
.canvas-node.selected > .image-card, .canvas-node.selected > .note-card, .canvas-node.selected > .generation-card, .canvas-node.selected > .generator-shell .generator-card { box-shadow: 0 0 0 2px rgba(101,132,225,.5),var(--shadow); }
.canvas-toolbar { border-color: rgba(255,255,255,.96); background: rgba(255,255,255,.77); box-shadow: inset 0 1px rgba(255,255,255,.95),0 18px 42px rgba(58,79,115,.13); }
.toolbar-button:hover, .toolbar-button.active { color: #5978b8; background: #edf3fc; }
.node-action { color: #fff; background: linear-gradient(135deg,rgba(92,150,238,.96),rgba(117,102,229,.96)); box-shadow: 0 6px 16px rgba(83,103,202,.21); }
.node-action:hover, .node-action.subtle:hover { color: #fff; background: linear-gradient(135deg,#4f8de9,#6a5fdc); }
.reference-add:hover, .reference-dropzone.drag-over { color: #5878bc; border-color: #8fb2f1; background: #f2f6ff; }
.reference-dropzone.drop-target-active { color: #5878bc; outline-color: #6c8ee8; background: #f2f6ff; box-shadow: 0 0 0 7px rgba(102,137,231,.1); }
.prompt-wrap:focus-within { border-color: #8eaff0; box-shadow: 0 0 0 3px rgba(100,135,228,.09); }
.flash-check input, .check-row input { accent-color: #687fe1; }
.key-row input:focus, .full-input:focus { border-color: #8eaff0; box-shadow: 0 0 0 3px rgba(100,135,228,.09); }
.modal-head small { color: #6683c3; }
.popover-head button { color: #5d78b5; background: #edf3ff; }
.project-icon { color: #5f7fc3; background: #eaf1ff; }
.drop-overlay { border-color: #7294e8; background: rgba(241,246,255,.91); }
.drop-overlay > div { color: #5677bc; }
.drop-overlay span { color: #7b8eae; }
.image-preview-toolbar button:hover { background: rgba(103,123,224,.92); }

.note-card { border-color: #cbdaf0; background: linear-gradient(145deg,#fbfdff,#edf4ff); box-shadow: 0 20px 48px rgba(65,88,128,.12); }
.note-head { color: #5672a8; border-bottom-color: rgba(102,132,188,.16); }
.note-title-text { flex: 1; min-width: 0; color: #405d91; font-size: 10px; font-weight: 680; }
.note-add-cell { color: #5875ac; background: rgba(112,146,207,.11); }
.note-prompt-grid { flex: 1; min-height: 0; }
.note-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; padding: 7px 9px 9px; border-top: 1px solid rgba(102,132,188,.13); }
.note-save-status { min-width: 0; overflow: hidden; color: #7f8fa8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.note-save-button { min-width: 86px; height: 29px; padding: 0 12px; border-radius: 8px; color: #fff; background: linear-gradient(110deg,#609af0,#7669e7); box-shadow: 0 7px 18px rgba(91,109,213,.16); font-size: 9px; font-weight: 650; }
.note-save-button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.note-save-button:disabled { opacity: .72; cursor: wait; transform: none; }
.note-prompt-cell { border-color: rgba(114,145,200,.2); background: rgba(255,255,255,.68); }
.note-prompt-cell b { color: #5d79ad; background: #e7effc; }
.note-prompt-cell textarea { color: #435a7c; }
.note-prompt-cell textarea::placeholder { color: #9cacbf; }
.note-prompt-cell button { color: #8292aa; }
.note-prompt-cell button:hover { color: #fff; background: #7183d9; }

.rename-project-button { color: #7587a3; }
.rename-project-button:hover { color: #5a6fc4; background: #eef2ff; }

.home-project-rename, .home-project-delete {
  position: absolute; z-index: 8; top: 9px; display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid rgba(207,219,235,.9); border-radius: 10px; color: #8c9ab0; background: rgba(255,255,255,.92);
  box-shadow: 0 8px 24px rgba(48,66,96,.13); backdrop-filter: blur(10px); opacity: 0; transform: translateY(-3px); transition: .18s ease;
}
.home-project-rename { right: 49px; }
.home-project-delete { right: 9px; }
.home-project-rename svg, .home-project-delete svg { width: 15px; height: 15px; }
.home-project-card:hover .home-project-rename, .home-project-card:hover .home-project-delete,
.home-project-rename:focus-visible, .home-project-delete:focus-visible { opacity: 1; transform: none; }
.home-project-rename:hover { color: #596fd0; border-color: #cbd5f4; background: #f5f7ff; }

.home-project-grid.project-vertical-scroll {
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); align-items: start;
  max-height: 690px; overflow-x: hidden; overflow-y: auto; padding: 4px 9px 18px 4px;
  scrollbar-width: thin; scrollbar-color: #bccbea transparent; overscroll-behavior: contain;
}
.home-project-grid.project-vertical-scroll::-webkit-scrollbar { width: 8px; }
.home-project-grid.project-vertical-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: linear-gradient(180deg,#9db8e7,#a69be9); }

.rename-project-card { border-color: #dbe5f2; box-shadow: 0 34px 90px rgba(42,60,91,.25); }
.rename-project-field { display: grid; gap: 8px; color: #536985; font-size: 10px; font-weight: 650; }
.rename-project-field input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #d7e1ef; border-radius: 11px; color: #263955; background: #f9fbfe; outline: none; user-select: text; }
.rename-project-field input:focus { border-color: #7895eb; background: #fff; box-shadow: 0 0 0 4px rgba(100,123,224,.1); }
.rename-project-card section > p { margin: 9px 0 0; color: #8090a8; }
.rename-project-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.rename-project-actions button { height: 36px; padding: 0 15px; border: 1px solid #dbe4f0; border-radius: 10px; color: #6c7d97; background: #fff; }
.rename-project-actions #confirmRenameProjectButton { color: #fff; border-color: transparent; background: linear-gradient(110deg,#609af0,#7669e7); }
.rename-project-actions #confirmRenameProjectButton:disabled { opacity: .58; cursor: wait; }

.home-header { grid-template-columns: minmax(220px,1fr) auto; }
.home-project-tools { display: flex; align-items: center; gap: 13px; }
.home-project-search { width: min(430px,42vw); height: 40px; }
.home-project-count { min-width: 58px; text-align: right; }

.canvas-toolbar .toolbar-item.active {
  color: #fff; border: 1px solid rgba(255,255,255,.9); background: linear-gradient(135deg,#5d9af2,#7568e7);
  box-shadow: 0 10px 24px rgba(83,105,211,.29),0 0 0 4px rgba(106,128,229,.11),inset 0 1px rgba(255,255,255,.26);
  transform: translateX(5px) scale(1.06);
}
.canvas-toolbar .toolbar-item.active:hover { color: #fff; background: linear-gradient(135deg,#508eea,#695ddd); transform: translateX(5px) scale(1.08); }

#canvasApp .canvas-toolbar {
  left: 50%; top: auto; bottom: max(24px, env(safe-area-inset-bottom));
  width: max-content; max-width: calc(100% - 24px); flex-direction: row;
  gap: 7px; padding: 9px 12px; transform: translateX(-50%);
}
#canvasApp .canvas-toolbar::before { content: "W"; display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; margin-right: 2px; border-radius: 9px; color: #fff; background:#1473e6; box-shadow: 0 7px 17px rgba(20,115,230,.18); font-size: 11px; font-weight: 820; }
#canvasApp .canvas-toolbar .toolbar-item { flex-shrink: 0; }
#canvasApp .canvas-toolbar .toolbar-item.active { transform: translateY(-3px) scale(1.06); }
#canvasApp .canvas-toolbar .toolbar-item.active:hover { transform: translateY(-4px) scale(1.08); }
#canvasApp .toolbar-item::after { left: 50%; top: auto; bottom: calc(100% + 12px); transform: translate(-50%,4px); }
#canvasApp .toolbar-item:hover::after { transform: translate(-50%,0); }
#canvasApp .toolbar-separator { width: 1px; height: 25px; margin: 0 3px; }
@media (max-width: 420px) { #canvasApp .canvas-toolbar { gap: 2px; padding: 8px; bottom: 16px; } }

.reference-role { position: absolute; right: 4px; bottom: 4px; padding: 2px 4px; border-radius: 4px; color: #fff; background: linear-gradient(110deg,rgba(80,142,234,.88),rgba(109,91,218,.88)); font-size: 7px; }

@media (max-width: 1250px) {
  .inspiration-head { display: block; }
  .inspiration-filters { max-width: none; justify-content: flex-start; margin-top: 16px; }
  .inspiration-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}


/* 批量卡片基础样式，文件末尾覆盖为逐行配对。 */
.generator-body.batch-generator-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.batch-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(156px, auto);
  align-content: start;
  gap: 10px;
  flex: 1;
  min-height: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 3px 5px 8px 2px;
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: #bfc9eb transparent;
}
.batch-reference-grid.empty {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 220px;
  padding: 6px;
  border: 1px dashed #c7d2f6;
  background: linear-gradient(145deg, rgba(246,248,255,.96), rgba(250,249,255,.96));
}
.batch-reference-item {
  min-width: 0;
  padding: 7px;
  border: 1px solid #dfe5f5;
  border-radius: 12px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 8px 22px rgba(67,86,146,.07);
}
.batch-reference-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  margin-bottom: 6px;
  color: #5f6f99;
  font-size: 9px;
}
.batch-reference-head strong { font-size: 9px; letter-spacing: .04em; }
.batch-reference-remove {
  padding: 3px 7px;
  border-radius: 7px;
  color: #8993ae;
  background: #f3f5fb;
  font-size: 8px;
}
.batch-reference-remove:hover { color: #fff; background: linear-gradient(135deg,#5b8def,#805ee8); }
.batch-reference-frame {
  display: grid;
  place-items: center;
  width: 100%;
  height: 78px;
  overflow: hidden;
  border-radius: 9px;
  background: #f5f7fc;
}
.batch-reference-frame img { width: 100%; height: 100%; object-fit: contain; }
.batch-reference-prompt {
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin-top: 7px;
  padding: 7px 8px;
  resize: none;
  border: 1px solid #e0e5f2;
  border-radius: 9px;
  color: #36425f;
  background: #fbfcff;
  font-size: 9px;
  line-height: 1.45;
  outline: none;
}
.batch-reference-prompt:focus {
  border-color: #7792ee;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.10);
}
.batch-reference-add {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  align-content: center;
  gap: 5px;
  min-height: 150px;
  border: 1px dashed #bdc9ee;
  border-radius: 12px;
  color: #7886aa;
  background: linear-gradient(145deg,#f7f9ff,#fbfaff);
}
.batch-reference-add:hover,
.batch-reference-grid.drag-over {
  color: #5a61d8;
  border-color: #7c83ed;
  background: #f4f3ff;
}
.batch-reference-add svg { width: 21px; height: 21px; }
.batch-reference-add span { font-size: 10px; font-weight: 700; }
.batch-reference-add small { font-size: 8px; opacity: .76; }
.batch-reference-limit {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  min-height: 34px;
  border-radius: 9px;
  color: #7d87a4;
  background: #f3f5fa;
  font-size: 9px;
}
.batch-auto-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 0 10px;
  border-radius: 9px;
  color: #5063c8;
  background: #eef1ff;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.batch-generator-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #697596;
  background: linear-gradient(90deg,#f1f5ff,#f5f1ff);
  font-size: 8px;
}
.batch-generator-help strong { color: #4f60c8; font-size: 9px; white-space: nowrap; }
.batch-generator-help span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-generator-body > .generator-options {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  margin-top: 8px;
  padding: 5px;
  border-radius: 10px;
  background: #f8f9fd;
}
.batch-generator-body > .generator-options .option-select:first-child { min-width: 150px; max-width: none; }
.batch-generator-help > span:not(.reference-warning) { flex: 1; min-width: 0; }
.batch-generator-help .reference-warning {
  position: static;
  flex: 0 0 auto;
  margin-left: auto;
  color: #9b6b39;
  white-space: nowrap;
}

@media (max-height: 760px) {
  .batch-reference-grid { min-height: 180px; }
}

/* 批量生成：左右素材只展示一次，后台按图一 × 图二建立全组合任务。 */
.batch-reference-grid.batch-pair-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 190px;
  padding: 2px 5px 8px 2px;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
  border: 0;
}
.batch-pair-columns,
.batch-pair-add-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.batch-pair-columns {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 7px 9px;
  border: 1px solid #dfe6f7;
  border-radius: 10px;
  color: #53658e;
  background: rgba(246,249,255,.96);
  box-shadow: 0 4px 14px rgba(70,91,150,.06);
  font-size: 9px;
}
.batch-pair-columns strong:last-child { padding-left: 2px; }
.batch-pair-list { display: grid; gap: 10px; }
.batch-pair-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px 10px;
  padding: 8px;
  border: 1px solid #dde5f7;
  border-radius: 12px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 22px rgba(67,86,146,.065);
}
.batch-pair-row.incomplete { border-style: dashed; background: linear-gradient(135deg,#fbfcff,#faf9ff); }
.batch-pair-row.complete { border-color: #cfdafa; }
.batch-pair-cell {
  position: relative;
  min-width: 0;
  height: 96px;
  overflow: hidden;
  border: 1px solid #e2e7f4;
  border-radius: 10px;
  background: #f5f7fc;
}
.batch-pair-cell.empty { border-style: dashed; border-color: #c8d3f3; background: #f8faff; }
.batch-pair-cell.drag-over,
.batch-pair-cell.drop-target-active { border-color: #6f83ed; box-shadow: 0 0 0 3px rgba(102,112,232,.14); }
.batch-pair-cell .batch-reference-frame { box-sizing: border-box; width: 100%; height: 100%; padding: 6px; border-radius: 9px; background: #fff; }
.batch-pair-cell .batch-reference-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain !important;
  object-position: center;
}
.batch-pair-role {
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 5px;
  padding: 3px 6px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg,rgba(69,121,222,.94),rgba(111,83,221,.94));
  font-size: 8px;
  font-weight: 700;
}
.batch-pair-cell > .batch-reference-remove { position: absolute; z-index: 2; top: 5px; right: 5px; }
.batch-pair-cell.linked { border-style: dashed; border-color: #bdc9ee; background: linear-gradient(145deg,#f5f8ff,#faf9ff); }
.batch-linked-button { display: grid; place-items: center; align-content: center; gap: 5px; width: 100%; height: 100%; padding: 12px; color: #7181a9; background: transparent; text-align: center; }
.batch-linked-button:hover { color: #5264ce; background: rgba(235,240,255,.72); }
.batch-linked-button strong { color: #596bc8; font-size: 9px; }
.batch-linked-button span { font-size: 8px; }
.batch-linked-button small { font-size: 7px; opacity: .72; }
.batch-pair-empty-button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  width: 100%;
  height: 100%;
  color: #7484ab;
  background: transparent;
}
.batch-pair-empty-button:hover { color: #5969d9; background: rgba(234,239,255,.75); }
.batch-pair-empty-button svg { width: 18px; height: 18px; }
.batch-pair-empty-button span { font-size: 9px; font-weight: 700; }
.batch-pair-empty-button small { font-size: 7px; opacity: .75; }
.batch-pair-prompt {
  grid-column: 1 / -1;
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 5px 8px;
  resize: none;
  border: 1px solid #e1e6f3;
  border-radius: 9px;
  color: #35415e;
  background: #fbfcff;
  font-size: 9px;
  line-height: 1.4;
  outline: none;
}
.batch-pair-prompt:focus { border-color: #7188ed; background: #fff; box-shadow: 0 0 0 3px rgba(95,105,225,.10); }
.batch-pair-add-row { padding-bottom: 2px; }
.batch-pair-add-row .batch-reference-add {
  display: flex;
  grid-column: auto;
  min-height: 74px;
  padding: 8px 10px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-width: 1.5px;
  border-radius: 12px;
  background: linear-gradient(145deg,#f8faff,#f4f6ff);
}
.batch-pair-add-row .batch-reference-add:hover,
.batch-pair-add-row .batch-reference-add.drag-over {
  border-color: #7186ed;
  color: #5365d3;
  background: #f0f4ff;
  box-shadow: 0 0 0 4px rgba(92,110,225,.10);
}
.batch-pair-add-row .batch-reference-add svg { width: 20px; height: 20px; }
.batch-pair-add-row .batch-reference-add span { font-size: 10px; font-weight: 700; }
.batch-pair-add-row .batch-reference-add small { font-size: 8px; }
.batch-pair-add-row .batch-reference-add:disabled { cursor: not-allowed; opacity: .58; }

.batch-toolbar #smartArrangeButton {
  color: #4057b6;
  border: 1px solid #cbd8fb;
  background: linear-gradient(135deg,#edf5ff,#f1edff);
  box-shadow: 0 7px 18px rgba(71,92,181,.12);
}
.batch-toolbar #smartArrangeButton:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg,#5f9bf1,#7669e7); }
.batch-toolbar #deleteSelectionButton { color: #b84f63; border: 1px solid #efcad3; background: #fff5f7; }
.batch-toolbar #deleteSelectionButton:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg,#df7184,#c75268); }

/* 自由创作 / AI 换衣：服装图与模特图独立上传槽。 */
.fashion-reference-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  height: 142px;
}
.fashion-reference-slot {
  position: relative;
  min-width: 0;
  height: 142px;
  overflow: hidden;
  border: 1px dashed #cbd5e7;
  border-radius: 11px;
  background: linear-gradient(145deg,#fafcff,#f7f9fd);
}
.fashion-reference-slot.filled { border-style: solid; border-color: #d8e1f2; background: #f5f8fd; }
.fashion-reference-slot.drag-over,
.fashion-reference-slot.drop-target-active { border-color: #7185eb; box-shadow: 0 0 0 3px rgba(101,112,226,.13); }
.fashion-reference-label {
  position: absolute;
  z-index: 4;
  top: 7px;
  left: 8px;
  padding: 4px 7px;
  border-radius: 7px;
  color: #52658b;
  background: rgba(239,244,255,.94);
  font-size: 8px;
  letter-spacing: .02em;
}
.fashion-reference-add {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  color: #7d8ba7;
  background: transparent;
}
.fashion-reference-add:hover { color: #596bd5; background: rgba(238,242,255,.72); }
.fashion-reference-add svg { width: 21px; height: 21px; }
.fashion-reference-add span { font-size: 10px; font-weight: 700; }
.fashion-reference-add small { max-width: 92%; font-size: 7px; opacity: .74; }
.fashion-reference-slot .reference-card { width: 100%; height: 100%; border: 0; border-radius: 10px; }
.fashion-reference-slot .reference-card img { width: 100%; height: 100%; object-fit: contain; }
.fashion-reference-slot .reference-card .reference-remove { z-index: 5; }
.fashion-reference-slot .reference-card .local-badge,
.fashion-reference-slot .reference-card .remote-badge { left: 7px; bottom: 7px; }
.fashion-reference-slot .reference-card .reference-role { right: 7px; bottom: 7px; }

/* Local assets are resolved through the main process before being revealed. */
img.asset-pending { opacity: .18; transition: opacity .18s ease; }
img.asset-broken { opacity: 0; }
.asset-missing::after {
  content: "本地素材暂时无法读取";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: #8792a8;
  background: linear-gradient(145deg,#f8faff,#f1f5fb);
  font-size: 9px;
  text-align: center;
  pointer-events: none;
}

/* 强制启动门禁：授权码 -> 设备签名 -> 账号密码。 */
.auth-gate {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  min-width: 860px;
  color: #172642;
  background:
    radial-gradient(circle at 18% 18%,rgba(126,151,255,.18),transparent 32%),
    radial-gradient(circle at 82% 76%,rgba(128,101,236,.15),transparent 34%),
    linear-gradient(145deg,#f8fbff,#edf4ff 52%,#f5f2ff);
}
.auth-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .38;
  background-image: linear-gradient(rgba(91,119,181,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(91,119,181,.09) 1px,transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom,black,transparent 86%);
}
.auth-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px,1fr) 440px;
  width: min(1080px,calc(100vw - 96px));
  min-height: 570px;
  overflow: hidden;
  border: 1px solid rgba(170,190,227,.74);
  border-radius: 30px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 38px 90px rgba(57,79,128,.18);
  backdrop-filter: blur(26px);
}
.auth-brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px;
  border-right: 1px solid rgba(178,195,226,.64);
  background: linear-gradient(145deg,rgba(245,249,255,.86),rgba(235,242,255,.76));
}
.auth-logo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 28px;
  border-radius: 18px;
  color: white;
  background: linear-gradient(135deg,#568ff1,#775ee7);
  box-shadow: 0 16px 36px rgba(86,105,221,.30);
  font: 800 27px/1 system-ui;
}
.auth-brand-panel > small,.auth-step-number { color: #607fd1; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.auth-brand-panel h1 { margin: 12px 0 18px; font-size: 42px; letter-spacing: -.04em; }
.auth-brand-panel p { max-width: 490px; margin: 0; color: #71809b; font-size: 15px; line-height: 1.8; }
.auth-security-list { display: grid; gap: 13px; margin-top: 40px; color: #4c6084; font-size: 13px; }
.auth-security-list span { display: flex; align-items: center; gap: 10px; }
.auth-security-list i { width: 8px; height: 8px; border-radius: 50%; background: #30b784; box-shadow: 0 0 0 5px rgba(48,183,132,.10); }
.auth-card { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 52px; background: rgba(255,255,255,.70); }
.auth-step { display: grid; gap: 18px; animation: auth-in .28s ease both; }
.auth-step h2 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.auth-step > p { margin: -8px 0 4px; color: #7d899d; font-size: 13px; line-height: 1.65; }
.auth-step label { display: grid; gap: 8px; color: #4e5c77; font-size: 12px; font-weight: 700; }
.auth-step input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid #d9e2f2;
  border-radius: 13px;
  color: #203150;
  background: rgba(249,251,255,.92);
  outline: none;
  font-size: 14px;
}
.auth-step input:focus { border-color: #7289ed; box-shadow: 0 0 0 4px rgba(100,119,224,.12); background: white; }
.auth-primary {
  height: 50px;
  border-radius: 13px;
  color: white;
  background: linear-gradient(100deg,#558ff0,#785ee8);
  box-shadow: 0 12px 28px rgba(88,103,218,.24);
  font-size: 13px;
  font-weight: 800;
}
.auth-primary:hover { filter: brightness(1.04); transform: translateY(-1px); }
.auth-primary:disabled,.auth-code-row button:disabled { cursor: wait; opacity: .55; transform: none; }
.auth-secondary {
  height: 46px;
  border: 1px solid #d7e1f4;
  border-radius: 13px;
  color: #5a70c9;
  background: #f6f8ff;
  font-size: 13px;
  font-weight: 800;
}
.auth-secondary:hover { border-color: #aebfed; background: #eef3ff; }
.auth-step > .auth-recovery-notice {
  margin: -6px 0 0;
  padding: 11px 13px;
  border: 1px solid #cfdcf8;
  border-radius: 11px;
  color: #5269b8;
  background: #f1f5ff;
  font-size: 12px;
  line-height: 1.6;
}
.auth-code-row { display: grid; grid-template-columns: 1fr 118px; gap: 9px; }
.auth-code-row button { border: 1px solid #d4def2; border-radius: 13px; color: #5870c5; background: #f4f7ff; font-weight: 700; }
.auth-content-block { display: grid; gap: 18px; animation: auth-in .28s ease both; }
.auth-content-block h2 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.auth-content-block > p { margin: -8px 0 4px; color: #7d899d; font-size: 13px; line-height: 1.65; }
.auth-login-form { display: grid; gap: 14px; }
.auth-form-links { display: flex; align-items: center; justify-content: space-between; margin-top: -6px; }
.auth-text-button { color: #5b72d3; background: transparent; font-size: 12px; font-weight: 750; }
.auth-text-button:hover { color: #405aca; text-decoration: underline; }
.auth-form-message { margin: -6px 0 0 !important; padding: 9px 11px; border: 1px solid #cfe6dc; border-radius: 10px; color: #28795a !important; background: #f0faf5; }
.auth-form-message.error { color: #bd5261 !important; border-color: #f0cfd5; background: #fff6f7; }
.auth-step-number.danger { color: #ce6171; }
.auth-spinner { width: 42px; height: 42px; border: 3px solid #e5ebf8; border-top-color: #657fe8; border-radius: 50%; animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@keyframes auth-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 账户中心与首页能力标识。 */
.home-hero-copy { position: relative; }
.home-hero-capability {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: -3px 0 13px;
  padding: 0 12px;
  border: 1px solid rgba(105,123,219,.20);
  border-radius: 999px;
  color: #5d6fd4;
  background: linear-gradient(110deg,rgba(96,154,240,.10),rgba(118,105,231,.11));
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .06em;
}
.home-account-panel {
  left: auto;
  right: 22px;
  bottom: 82px;
  width: min(420px,calc(100vw - 44px));
  max-height: min(720px,calc(100vh - 116px));
  overflow: auto;
  transform: none;
}
.home-pricing-panel {
  position: fixed;
  z-index: 159;
  right: 454px;
  bottom: 82px;
  width: min(540px,calc(100vw - 500px));
  max-height: min(720px,calc(100vh - 116px));
  overflow: auto;
  padding: 17px;
  border: 1px solid #d9e4f2;
  border-radius: 17px;
  color: #263955;
  background: rgba(251,253,255,.98);
  box-shadow: 0 30px 80px rgba(51,72,107,.17);
  backdrop-filter: blur(18px);
}
.home-pricing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.home-pricing-head div { display: grid; gap: 4px; }
.home-pricing-head small { color: #6883bd; font-size: 7px; font-weight: 750; letter-spacing: .16em; }
.home-pricing-head strong { color: #2d4565; font-size: 13px; }
.home-pricing-head > span { padding: 5px 8px; border-radius: 999px; color: #687fa9; background: #edf3fc; font-size: 8px; }
.home-pricing-section + .home-pricing-section { margin-top: 14px; }
.home-pricing-section h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; color: #405675; font-size: 10px; }
.home-pricing-section h3 span { color: #8796ad; font-size: 8px; font-weight: 500; }
.home-image-pricing-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.home-image-pricing-grid article,.home-video-pricing-card { border: 1px solid #e0e8f4; border-radius: 11px; background: #fff; }
.home-image-pricing-grid article { padding: 10px; }
.home-image-pricing-grid article > strong,.home-video-pricing-card > strong { display: block; color: #425978; font-size: 9px; }
.home-image-pricing-grid article > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 8px; }
.home-image-pricing-grid span { display: grid; gap: 3px; padding: 6px; border-radius: 8px; color: #8090a8; background: #f3f7fc; text-align: center; font-size: 7px; }
.home-image-pricing-grid b { color: #5871d8; font-size: 11px; }
.home-video-pricing-card { overflow: hidden; }
.home-video-pricing-card + .home-video-pricing-card { margin-top: 7px; }
.home-video-pricing-card > strong { padding: 9px 10px 7px; }
.home-video-pricing-card table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.home-video-pricing-card th,.home-video-pricing-card td { height: 27px; padding: 4px; border-top: 1px solid #e9eef6; border-right: 1px solid #edf1f7; color: #526783; text-align: center; font-size: 8px; }
.home-video-pricing-card tr > :last-child { border-right: 0; }
.home-video-pricing-card thead th { color: #7889a3; background: #f3f7fc; font-weight: 600; }
.home-video-pricing-card tbody th { color: #687b99; background: #f8fafd; font-weight: 600; }
.home-video-pricing-card td { color: #526bd1; font-weight: 750; }
.home-account-button.active { color: #fff; border-color: transparent; background: linear-gradient(135deg,#68a4f5,#7e6ce9); box-shadow: 0 8px 22px rgba(90,119,229,.24); }
.home-account-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 13px 0; }
.home-account-metrics > div { min-width: 0; padding: 11px; border: 1px solid #e2e9f4; border-radius: 11px; background: #f5f8fd; }
.home-account-metrics span,.home-account-metrics strong { display: block; }
.home-account-metrics span { color: #8090aa; font-size: 8px; }
.home-account-metrics strong { margin-top: 6px; overflow: hidden; color: #28415f; font-size: 15px; text-overflow: ellipsis; }
.home-account-subhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 13px 0 8px; color: #405675; font-size: 10px; font-weight: 750; }
.home-account-subhead button,.home-account-subhead small { color: #7789a6; font-size: 8px; font-weight: 500; }
.home-account-subhead button { padding: 5px 8px; border-radius: 7px; background: #eef3fb; }
.home-credit-ledger { display: grid; gap: 6px; max-height: 180px; overflow: auto; }
.home-credit-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 8px; padding: 9px 10px; border: 1px solid #e4ebf5; border-radius: 10px; background: #fff; }
.home-credit-entry strong { overflow: hidden; color: #3e536f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.home-credit-entry b { color: #5671df; font-size: 10px; }
.home-credit-entry b.negative { color: #d65b6b; }
.home-credit-entry span { grid-column: 1 / -1; color: #94a0b2; font-size: 7px; }
.home-account-empty { display: block; padding: 18px 10px; border: 1px dashed #d9e3f1; border-radius: 10px; color: #8a99af; text-align: center; font-size: 9px; }
.home-recharge-packages { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.home-recharge-package { display: grid; gap: 3px; padding: 10px; border: 1px solid #dfe8f5; border-radius: 10px; color: #455c7b; background: #fff; text-align: left; }
.home-recharge-package strong { color: #344c70; font-size: 10px; }
.home-recharge-package span { color: #7789a5; font-size: 8px; }
.home-recharge-package:hover { border-color: #869af0; background: #f4f7ff; }
.home-update-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin-top: 12px; padding: 11px; overflow: hidden; border: 1px solid #dfe8f5; border-radius: 11px; background: linear-gradient(135deg,#f7faff,#f2f4ff); }
.home-update-card > div { display: grid; min-width: 0; gap: 3px; }
.home-update-card small { color: #7185bd; font-size: 7px; font-weight: 750; letter-spacing: .12em; }
.home-update-card strong { color: #344c70; font-size: 10px; }
.home-update-card span { overflow: hidden; color: #7789a5; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.home-update-card button { align-self: center; min-width: 92px; height: 31px; padding: 0 10px; border: 1px solid #788de9; border-radius: 8px; color: #fff; background: linear-gradient(110deg,#609af0,#7669e7); font-size: 8px; font-weight: 700; }
.home-update-card button:disabled { color: #8b98ad; border-color: #dce3ef; background: #edf1f7; }
.home-update-card > i { --update-progress: 0%; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg,#67a2f2 var(--update-progress),#e7edf7 var(--update-progress)); transition: background .2s ease; }
.home-account-session-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.home-account-action.danger { color: #cc586a; border-color: #f0d3d9; background: #fff8f9; }

/* 详情页制作：简版输入，平台与语言仅作用于详情页专用视觉策划。 */
.detail-generator-body .reference-strip { height: 122px; grid-auto-rows: 56px; }
.detail-generator-body .reference-card,
.detail-generator-body .reference-add,
.detail-generator-body .reference-limit { height: 56px; }
.detail-generator-body .reference-strip.empty { grid-auto-rows: 112px; height: 122px; }
.detail-generator-body .reference-strip.empty .reference-add { height: 112px; }
.detail-settings {
  display: grid;
  grid-template-columns: auto repeat(3,minmax(0,1fr));
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 6px;
  border: 1px solid #e3e9f4;
  border-radius: 10px;
  background: linear-gradient(110deg,#f7faff,#f7f6ff);
}
.detail-settings > span { padding: 0 5px; color: #7081a1; font-size: 8px; font-weight: 700; white-space: nowrap; }
.detail-settings .option-select { width: 100%; color: #50617e; background: #fff; }
.detail-master-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 35px;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px dashed #cdd8f2;
  border-radius: 9px;
  color: #667797;
  background: #fafcff;
}
.detail-master-row.ready { border-style: solid; border-color: #bddfcf; color: #3f755c; background: #f3fbf7; }
.detail-master-row > span { display: grid; min-width: 0; gap: 2px; }
.detail-master-row strong { font-size: 8px; }
.detail-master-row small { overflow: hidden; font-size: 7px; opacity: .78; text-overflow: ellipsis; white-space: nowrap; }
.detail-master-row button { flex: 0 0 auto; height: 23px; padding: 0 8px; border: 1px solid #c6d7cf; border-radius: 7px; color: #47755f; background: #fff; font-size: 7px; }
.detail-plan-hint {
  margin: 7px 2px 0;
  overflow: hidden;
  color: #667caa;
  font-size: 8px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-prompt-wrap { display: flex; flex-direction: column; margin-top: 2px; overflow: hidden; }
.detail-prompt-wrap .generator-prompt,
.detail-prompt-wrap.has-labeled-options .generator-prompt { flex: 0 0 112px; height: 112px; padding: 11px 11px 8px; overflow-y: auto; }
.detail-prompt-wrap .generator-prompt::placeholder { color: #9daabd; line-height: 1.62; }
.detail-prompt-wrap .generator-options {
  position: static;
  width: auto;
  margin: 0 7px 7px;
  padding-top: 7px;
  border-top: 1px solid #edf1f6;
}
.detail-prompt-wrap .generator-options.labeled-options-4 {
  grid-template-columns: minmax(190px,1.65fr) minmax(100px,.82fr) minmax(90px,.74fr) minmax(100px,.8fr);
}
.detail-prompt-wrap .generator-options.labeled-options-5 {
  grid-template-columns: minmax(180px,1.55fr) minmax(88px,.76fr) minmax(90px,.78fr) minmax(90px,.78fr) minmax(96px,.82fr);
}
.detail-prompt-wrap .generator-options .option-select:first-child { min-width: 126px; max-width: 150px; }
.detail-result-action { height: 22px; padding: 0 6px; border: 1px solid #d5dded; border-radius: 6px; color: #60729a; background: rgba(255,255,255,.94); font-size: 7px; font-weight: 700; white-space: nowrap; }
.detail-result-action:hover { color: #5369cf; border-color: #9aabe5; background: #f5f7ff; }

/* 无界精修：默认智能识别，手动模式仅保留最重要的分类入口。 */
.retouch-generator-body .reference-strip { height: 118px; grid-auto-rows: 52px; }
.retouch-generator-body .reference-card,
.retouch-generator-body .reference-add,
.retouch-generator-body .reference-limit { height: 52px; }
.retouch-generator-body .reference-strip.empty { height: 118px; grid-auto-rows: 108px; }
.retouch-generator-body .reference-strip.empty .reference-add { height: 108px; }
.retouch-settings-wrap { margin-top: 8px; padding: 7px 8px 6px; border: 1px solid #dce4f3; border-radius: 10px; background: linear-gradient(115deg,#f8fbff,#f8f7ff); }
.retouch-settings { display: flex; align-items: center; gap: 5px; min-width: 0; }
.retouch-settings > span:first-child { flex: 0 0 auto; padding: 0 3px; color: #65769a; font-size: 8px; font-weight: 700; white-space: nowrap; }
.retouch-settings .option-select { flex: 1 1 0; min-width: 92px; max-width: none; color: #50617e; background: #fff; }
.retouch-settings .option-select:first-of-type { min-width: 98px; }
.retouch-auto-note { flex: 1; overflow: hidden; padding: 0 5px; color: #8491ab; font-size: 7px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.retouch-summary { overflow: hidden; margin: 5px 3px 0; color: #8290aa; font-size: 7px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.retouch-prompt-wrap { margin-top: 7px; }
.retouch-prompt-wrap .generator-prompt { height: 88px; padding-top: 9px; padding-bottom: 41px; }
.retouch-prompt-wrap .generator-prompt::placeholder { color: #9daabd; }
.retouch-prompt-wrap .generator-options .option-select:first-child { min-width: 124px; max-width: 145px; }
.detail-result-action.active { color: #2d7958; border-color: #a9d7c2; background: #effaf4; }

@media (max-width: 980px) {
  .home-account-panel { right: 12px; bottom: 74px; }
  .home-pricing-panel { left: 12px; right: 444px; bottom: 74px; width: auto; }
}

@media (max-width: 760px) {
  .home-site-button { width: 34px; padding: 0; overflow: hidden; color: transparent; }
  .home-site-button::before { content: "⌂"; color: #526b91; font-size: 17px; }
  .home-account-panel { top: 12px; bottom: auto; max-height: calc(50vh - 24px); }
  .home-pricing-panel { left: 12px; right: 12px; bottom: 74px; width: auto; max-height: calc(50vh - 55px); }
}

/* 手机端：保留完整创作能力，并把主要操作放在拇指容易触达的位置。 */
@media (max-width: 760px) {
  .home-main { grid-template-rows: 60px minmax(0,1fr); }
  .home-header { grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 0 14px; }
  .home-heading small,.home-search { display: none; }
  .home-header-actions { gap: 5px; }
  .home-hero { display: block; min-height: auto; padding: 42px 18px 104px; }
  .home-hero::after { display: none; }
  .home-hero-copy h1 { font-size: 38px; }
  .home-hero-copy p { font-size: 12px; }
  .home-create-card { margin-top: 30px; padding: 18px; }
  .home-section,.home-section + .home-section { padding: 34px 16px 8px; }
  .home-section:last-child { padding-bottom: 104px; }
  .home-project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 10px; }
  .home-project-copy { padding-top: 8px; }
  .inspiration-head { display: block; }
  .inspiration-filters { flex-wrap: nowrap; max-width: 100%; margin-top: 14px; padding-bottom: 5px; overflow-x: auto; }
  .inspiration-filters button { flex: 0 0 auto; }
  .inspiration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .home-sidebar { bottom: max(10px,env(safe-area-inset-bottom)); max-width: calc(100vw - 16px); height: 56px; padding: 6px 8px; overflow-x: auto; border-radius: 18px; }
  .home-sidebar .home-brand { display: none; }
  .home-nav { gap: 2px; padding: 0 5px 0 0; border-left: 0; }
  .home-nav-button,.home-account-button { width: 39px; height: 39px; flex: 0 0 auto; }
  .home-account-panel { right: 10px; left: 10px; top: auto; bottom: 76px; width: auto; max-height: calc(100vh - 96px); transform: none; overflow-y: auto; }
  .home-pricing-panel { bottom: 76px; max-height: calc(100vh - 96px); }

  .canvas-app { grid-template-rows: 52px minmax(0,1fr); }
  .canvas-topbar { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 4px; height: 52px; padding: 0 8px; }
  .canvas-topbar .logo-button { width: 38px; min-width: 38px; padding: 0; }
  .canvas-topbar .logo-button span,.rename-project-button,#modelMenuButton,.topbar-format,#undoButton,#redoButton,.top-divider,#zoomOutButton,#zoomInButton,.save-status { display: none; }
  .project-menu-button { min-width: 0; max-width: 112px; padding: 0 7px; }
  .project-menu-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-center { position: static; gap: 1px; transform: none; }
  .topbar-right { gap: 1px; }
  .zoom-number { min-width: 48px; }
  .canvas-stage { touch-action: none; }
  #canvasApp .canvas-toolbar { bottom: max(12px,env(safe-area-inset-bottom)); gap: 2px; max-width: calc(100vw - 12px); padding: 7px; overflow-x: auto; }
  #canvasApp .canvas-toolbar .toolbar-item { width: 38px; height: 38px; }
  #canvasApp .toolbar-item::after { display: none; }
  .empty-canvas { top: 43%; width: calc(100% - 36px); text-align: center; }
  .empty-canvas p { max-width: 310px; line-height: 1.65; }
  .empty-actions { display: grid; width: min(100%,280px); grid-template-columns: 1fr 1fr; }
  .empty-help { display: none; }
  .batch-toolbar { top: 9px; width: calc(100% - 18px); max-width: 410px; padding: 6px; overflow-x: auto; }
  .batch-toolbar span { display: none; }
  .batch-toolbar button { flex: 0 0 auto; }
  .history-panel { width: min(100%,390px); }
  .project-popover,.model-popover { right: 8px; left: 8px !important; width: auto; max-height: calc(100vh - 72px); }
  .modal-backdrop { padding: 10px; }
  .modal-card { width: 100%; max-height: calc(100vh - 20px); overflow-y: auto; }
  .image-preview-modal { padding: 10px; }
  .image-preview-toolbar { width: 100%; }
  .toast-stack { right: 10px; bottom: 76px; left: 10px; }
}

@media (max-width: 390px) {
  .home-round-button:first-of-type { display: none; }
  .home-project-grid { grid-template-columns: 1fr; }
  #canvasApp .canvas-toolbar .toolbar-item { width: 36px; height: 36px; }
}

/* 功能面板可读性、高密度画布与模块落点优化。 */
.home-nav-button,.home-account-button,.home-round-button,.home-create-primary,.home-create-secondary,.home-project-card,.inspiration-filters button {
  transition: transform .11s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease,color .16s ease;
}
.home-nav-button:active,.home-account-button:active,.home-round-button:active,.home-create-primary:active,.home-create-secondary:active,.inspiration-filters button:active { transform: scale(.94); }
.home-project-card.pressing { transform: translateY(1px) scale(.985); }
.home-project-card.opening { border-color:#6f8fe6; box-shadow:0 0 0 3px rgba(101,136,232,.13),0 18px 42px rgba(55,76,118,.16); }
.home-project-card.opening .home-project-preview::after {
  content:""; position:absolute; z-index:10; left:50%; top:50%; width:28px; height:28px; margin:-14px;
  border:3px solid rgba(255,255,255,.8); border-top-color:#5e7fe0; border-radius:50%; background:rgba(255,255,255,.42); animation:spin .7s linear infinite;
}
.home-view.opening-project .home-project-card:not(.opening) { opacity:.72; }
.canvas-app.loading-project .canvas-stage::after {
  content:"正在同步云端画布"; position:absolute; z-index:32; left:50%; top:50%;
  min-width:150px; padding:48px 24px 18px; border:1px solid #dce5f2; border-radius:18px;
  color:#526986; background:rgba(255,255,255,.94); box-shadow:0 22px 62px rgba(43,68,108,.15);
  font-size:12px; font-weight:700; text-align:center; transform:translate(-50%,-50%);
}
.canvas-app.loading-project .canvas-stage::before {
  content:""; position:absolute; z-index:33; left:50%; top:calc(50% - 15px); width:22px; height:22px; margin:-11px;
  border:3px solid #d9e3f4; border-top-color:#6688ea; border-radius:50%; animation:spin .7s linear infinite;
}

.generator-card { border-color:#cbd7e8; box-shadow:0 20px 52px rgba(47,67,104,.15); }
.generator-head { min-height:48px; padding:0 12px 0 15px; border-bottom-color:#e3e9f2; }
.generator-title { gap:10px; color:#263a5a; font-size:13px; font-weight:750; }
.generator-title i { width:30px; height:30px; border-radius:9px; }
.generator-title i svg { width:17px; height:17px; }
.generator-title small { margin-left:5px; color:#7f8ea6; font-size:10px; font-weight:600; }
.generator-mini-button { width:32px; height:32px; color:#75849b; }
.generator-mini-button svg { width:16px; height:16px; }
.generator-mini-button:hover { color:#38547f; background:#edf3fb; }
.execute-column { width:60px; margin-top:74px; color:#63738c; }
.execute-button { width:52px; height:52px; }
.execute-column span { color:#53647f; font-size:10px; font-weight:650; }
.execute-button:disabled { color:#8d99aa; border:1px solid #cfd8e4; background:#e6ebf2; }
.canvas-toolbar .toolbar-item { color:#64738a; }
.canvas-toolbar .toolbar-item svg { width:18px; height:18px; stroke-width:1.8; }
.canvas-toolbar .toolbar-item.active { color:#fff; }

.retouch-generator-body { padding:13px 15px 15px; }
.retouch-generator-body .reference-head { margin:0 2px 9px; }
.retouch-generator-body .reference-head strong { color:#3f526f; font-size:14px; font-weight:750; }
.retouch-generator-body .reference-head span { color:#7f8da2; font-size:12px; font-weight:650; }
.retouch-generator-body .reference-strip { height:132px; grid-auto-rows:58px; padding:3px; border:1px solid #d7e1ef; background:#fbfdff; }
.retouch-generator-body .reference-card,
.retouch-generator-body .reference-add,
.retouch-generator-body .reference-limit { height:58px; }
.retouch-generator-body .reference-strip.empty { height:132px; grid-auto-rows:124px; border:1.5px dashed #b9c9df; background:#f9fbfe; }
.retouch-generator-body .reference-strip.empty .reference-add { height:124px; color:#627797; font-size:12px; font-weight:650; }
.retouch-generator-body .reference-add svg { width:21px; height:21px; }
.retouch-settings-wrap { margin-top:10px; padding:10px 11px 9px; border-color:#ccd9ec; border-radius:12px; background:linear-gradient(120deg,#f5f9ff,#f7f6ff); }
.retouch-settings-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.retouch-settings-head strong { color:#354b6e; font-size:13px; font-weight:780; }
.retouch-settings-head span { color:#8190a8; font-size:11px; }
.retouch-settings { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.18fr) minmax(0,1fr); align-items:end; gap:8px; }
.retouch-settings.is-auto { grid-template-columns:repeat(2,minmax(0,1fr)); }
.retouch-field { display:grid; min-width:0; gap:5px; }
.retouch-field > span { color:#667995; font-size:11px; font-weight:700; white-space:nowrap; }
.retouch-settings .retouch-field .option-select { width:100%; min-width:0; max-width:none; height:38px; padding:0 27px 0 10px; border:1px solid #d3deed; border-radius:9px; color:#344967; background:#fff; font-size:13px; font-weight:650; box-shadow:0 3px 10px rgba(60,83,122,.05); }
.retouch-settings .retouch-field .option-select:focus { border-color:#7898e8; box-shadow:0 0 0 3px rgba(102,137,231,.12); }
.retouch-auto-note { align-self:end; min-height:38px; display:flex; align-items:center; grid-column:span 2; padding:0 10px; border:1px solid #d8e2f1; border-radius:9px; color:#667a99; background:#fff; font-size:12px; line-height:1.4; white-space:normal; }
.retouch-summary { margin:8px 1px 0; overflow:visible; color:#526887; font-size:11px; font-weight:600; line-height:1.45; text-overflow:clip; white-space:normal; }
.retouch-prompt-wrap { margin-top:10px; border-color:#cfdbea; border-radius:12px; }
.retouch-prompt-wrap .generator-prompt { height:124px; padding:13px 13px 64px; color:#304561; font-size:13px; line-height:1.55; }
.retouch-prompt-wrap .generator-prompt::placeholder { color:#8493a8; opacity:1; }
.retouch-prompt-wrap .prompt-count { top:10px; right:10px; color:#7e8da2; font-size:10px; }
.retouch-output-options { left:9px; right:9px; bottom:8px; display:grid; grid-template-columns:1.65fr .72fr .72fr .82fr; align-items:end; gap:7px; }
.retouch-output-options.wasai-image-v2-options { grid-template-columns:1.55fr .82fr .72fr .72fr .82fr; }
.retouch-output-field { display:grid; min-width:0; gap:3px; }
.retouch-output-field > span { color:#637590; font-size:11px; font-weight:700; white-space:nowrap; }
.retouch-prompt-wrap .retouch-output-field .option-select,
.retouch-prompt-wrap .retouch-output-field:first-child .option-select { width:100%; min-width:0; max-width:none; height:35px; padding:0 24px 0 9px; border:1px solid #d7e0ec; color:#384b67; background:#f7f9fc; font-size:12px; font-weight:650; }
.retouch-prompt-wrap .retouch-output-field .option-select:disabled { color:#6f7f95; opacity:1; background:#edf1f6; cursor:help; }

@media (max-width:760px) {
  .retouch-settings { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .retouch-output-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .retouch-output-options.wasai-image-v2-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* 200 节点多选拖动改用合成层预览，释放指针时一次提交坐标。 */
.canvas-stage.dragging-node .canvas-node { cursor:grabbing; }
.canvas-stage.dragging-many .canvas-node.selected { outline:1px solid rgba(101,132,225,.5); outline-offset:1px; }
.canvas-stage.dragging-many .canvas-node.selected > .image-card,
.canvas-stage.dragging-many .canvas-node.selected > .note-card,
.canvas-stage.dragging-many .canvas-node.selected > .generation-card,
.canvas-stage.dragging-many .canvas-node.selected > .generator-shell .generator-card { box-shadow:none; }

/* 生成参数保持统一的信息层级：名称在上、当前选项在下，积分始终可见。 */
.generator-price-hint { max-width:130px; padding:5px 8px; color:#4965bc; background:#edf3ff; font-size:10px; line-height:1.1; }
.generator-options.labeled-options,
.video-options.labeled-options { align-items:end; gap:6px; }
.generator-option-field { display:grid; min-width:0; gap:3px; }
.generator-option-field > span { overflow:visible; color:#667995; font-size:9px; font-weight:700; line-height:1.2; white-space:nowrap; }
.generator-option-field .option-select,
.generator-options .generator-option-field:first-child .option-select { width:100%; min-width:0; max-width:none; height:31px; padding:0 25px 0 9px; border:1px solid #d9e1ed; color:#3e506c; background:#f7f9fc; font-size:10px; font-weight:650; }
.generator-options.labeled-options-3 { display:grid; grid-template-columns:minmax(168px,1.55fr) minmax(92px,.8fr) minmax(98px,.85fr); }
.generator-options.labeled-options-4 { display:grid; grid-template-columns:minmax(168px,1.55fr) minmax(78px,.72fr) minmax(78px,.72fr) minmax(88px,.82fr); }
.generator-options.labeled-options-5 { display:grid; grid-template-columns:minmax(170px,1.6fr) minmax(82px,.76fr) minmax(74px,.66fr) minmax(82px,.72fr) minmax(88px,.78fr); }
.prompt-wrap.has-labeled-options .generator-prompt { padding-bottom:59px; }
.video-options.labeled-options { grid-template-columns:minmax(142px,1.45fr) minmax(78px,.76fr) minmax(82px,.76fr) minmax(108px,1.08fr); margin-top:10px; }
.batch-generator-body > .generator-options.labeled-options-3 { grid-template-columns:minmax(150px,1.45fr) minmax(82px,.75fr) minmax(86px,.8fr) auto; }
.batch-generator-body > .generator-options.labeled-options-4 { grid-template-columns:minmax(146px,1.45fr) minmax(78px,.72fr) minmax(82px,.75fr) minmax(86px,.8fr) auto; }
.batch-generator-body > .generator-options .generator-option-field:first-child { min-width:0; max-width:none; }

@media (max-width:760px) {
  .generator-price-hint { max-width:112px; font-size:9px; }
}

/* 2026-09-07 预览：精简工作台、Adobe 式白蓝橙配色与可折叠侧栏。 */
body,
button,
input,
textarea,
select { font-family: "Noto Sans SC Variable", sans-serif; }

.home-view {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:10px;
  padding:10px;
  color:#17243a;
  background:#f5f7fa;
  transition:grid-template-columns .2s ease;
}
.home-view.sidebar-collapsed { grid-template-columns:72px minmax(0,1fr); }
.home-sidebar {
  position:relative;
  inset:auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  width:auto;
  height:100%;
  min-height:0;
  padding:13px 12px 14px;
  border:0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 3px 18px rgba(30,51,78,.045);
  backdrop-filter:none;
  max-width:none;
  transform:none;
  overflow:visible;
}
.home-sidebar-brand-row { display:flex; align-items:center; justify-content:space-between; min-height:42px; gap:6px; }
.home-brand {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  width:auto;
  min-width:0;
  height:38px;
  padding:0 7px;
  color:#fff;
  border-radius:10px;
  background:#1473e6;
  box-shadow:0 7px 18px rgba(20,115,230,.18);
}
.home-brand svg { flex:0 0 auto; width:24px; height:24px; }
.home-brand-word { overflow:hidden; color:#fff; font-size:13px; font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.home-sidebar:focus-visible { outline:2px solid #1473e6; outline-offset:-2px; }
.home-nav { display:flex; flex:0 0 auto; flex-direction:column; align-items:stretch; gap:5px; width:auto; padding:8px 0 13px; border:0; }
.home-nav-group { flex:0 0 auto; padding:4px 10px 2px; color:#9aa5b4; font-size:8px; font-weight:750; letter-spacing:.14em; line-height:12px; white-space:nowrap; }
.home-nav-button,
.home-sidebar-tools .home-nav-button,
.home-platform-menu > summary {
  display:flex;
  place-items:initial;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  height:40px;
  padding:0 11px;
  border:0;
  border-radius:9px;
  color:#526074;
  background:transparent;
  box-shadow:none;
  font-size:11px;
  font-weight:650;
  white-space:nowrap;
}
.home-nav-button svg,
.home-platform-menu > summary svg { flex:0 0 auto; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.home-nav-button:hover,
.home-nav-button.active,
.home-platform-menu > summary:hover { color:#0758c7; background:#edf5ff; }
.home-nav-button.primary { margin:0 0 4px; color:#fff; background:#1473e6; box-shadow:0 7px 18px rgba(20,115,230,.18); }
.home-nav-button.primary:hover { color:#fff; background:#0758c7; transform:none; filter:none; }
.home-canvas-tools { display:flex; flex:1 1 auto; min-height:0; flex-direction:column; gap:3px; width:100%; overflow-y:auto; scrollbar-width:none; }
.home-canvas-tools::-webkit-scrollbar { display:none; }
.home-canvas-tools .home-nav-group { padding-top:1px; }
.home-canvas-tools .home-nav-button { flex:0 0 36px; height:36px; }
.home-sidebar-tools { position:relative; display:flex; flex:0 0 auto; flex-direction:column; gap:4px; width:100%; margin-top:0; padding:7px 0; border:0; border-radius:12px; background:#f7f9fc; }
.home-platform-menu,.home-contact-menu { position:relative; width:100%; }
.home-platform-menu > summary,.home-contact-menu > summary { list-style:none; cursor:pointer; }
.home-platform-menu > summary::-webkit-details-marker { display:none; }
.home-contact-menu > summary::-webkit-details-marker { display:none; }
.home-platform-menu > nav { position:absolute; z-index:80; left:calc(100% + 10px); bottom:0; display:grid; width:222px; padding:8px; border:1px solid #dde3ec; border-radius:12px; background:#fff; box-shadow:0 18px 50px rgba(31,48,73,.18); }
.home-platform-menu > nav a,.home-platform-menu > nav button { display:block; width:100%; padding:10px 11px; border:0; border-left:2px solid transparent; border-radius:7px; color:#46566d; background:transparent; font-size:10px; text-align:left; text-decoration:none; }
.home-platform-menu > nav a:hover,.home-platform-menu > nav button:hover,
.home-platform-menu > nav a:focus-visible,.home-platform-menu > nav button:focus-visible { color:#0758c7; background:#edf5ff; border-left-color:#ff6b2c; }
.home-platform-menu > nav button { margin-top:4px; border-top:1px solid #e8edf4; border-radius:0 0 7px 7px; color:#0758c7; font-weight:750; }
.home-contact-menu > summary {
  display:flex; align-items:center; justify-content:flex-start; gap:10px; width:100%; height:40px; padding:0 11px;
  border:0; border-radius:9px; color:#526074; background:transparent; font-size:11px; font-weight:650; white-space:nowrap;
}
.home-contact-menu > summary svg { flex:0 0 auto; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.home-contact-menu > summary:hover { color:#0758c7; background:#edf5ff; }
.home-contact-card { position:absolute; z-index:80; left:calc(100% + 10px); bottom:0; display:grid; gap:8px; width:224px; padding:14px; border:1px solid #dde3ec; border-radius:12px; background:#fff; box-shadow:0 18px 50px rgba(31,48,73,.18); }
.home-platform-menu > nav::before,.home-contact-card::before { content:""; position:absolute; top:0; bottom:0; right:100%; width:12px; }
.home-contact-card small { color:#7a899e; font-size:9px; }
.home-contact-card strong { color:#243b5d; font-size:14px; user-select:text; }
.home-contact-card button { height:34px; border-radius:8px; color:#fff; background:#1473e6; font-size:10px; font-weight:700; }
.sidebar-collapsed .home-brand-word,
.sidebar-collapsed .home-nav-button span,
.sidebar-collapsed .home-platform-menu > summary span,
.sidebar-collapsed .home-contact-menu > summary span { display:none; }
.sidebar-collapsed .home-nav-group { visibility:hidden; }
.sidebar-collapsed .home-sidebar-brand-row { justify-content:center; flex-wrap:wrap; }
.sidebar-collapsed .home-brand { width:38px; padding:0; justify-content:center; }
.sidebar-collapsed .home-nav-button,
.sidebar-collapsed .home-platform-menu > summary,
.sidebar-collapsed .home-contact-menu > summary { justify-content:center; padding:0; }
.sidebar-collapsed .home-canvas-tools { align-items:center; }
.home-sidebar-tooltip {
  position:fixed; z-index:220; padding:7px 10px;
  border:1px solid #dce3ec; border-radius:7px; color:#33445c; background:#fff; box-shadow:0 9px 25px rgba(31,48,73,.16);
  font-size:10px; font-weight:650; line-height:1; white-space:nowrap; transform:translateY(-50%); pointer-events:none;
}

/* A quiet brand mark and consistent icon wells give the desktop rail its own hierarchy. */
@media (min-width:761px) {
  .home-sidebar { padding:16px 12px; border-radius:20px; box-shadow:0 8px 28px rgba(30,51,78,.045); }
  .home-sidebar-brand-row { flex:0 0 44px; min-height:44px; padding:0 5px; }
  .home-brand { height:40px; gap:10px; padding:0; background:transparent; box-shadow:none; }
  .home-brand svg { width:36px; height:36px; padding:6px; border-radius:11px; color:#fff; background:linear-gradient(145deg,#2589f5,#1165dc); box-shadow:0 5px 12px rgba(20,115,230,.17); }
  .home-brand-word { color:#233751; font-size:15px; font-weight:800; letter-spacing:.055em; }
  .home-brand:hover .home-brand-word { color:#1473e6; }
  .home-nav { gap:6px; padding:10px 0 12px; }
  .home-nav-group { padding:4px 11px 5px; color:#96a2b3; font-size:9px; font-weight:550; line-height:12px; letter-spacing:.08em; }
  .home-nav-button,.home-sidebar-tools .home-nav-button,
  .home-platform-menu > summary,.home-contact-menu > summary {
    gap:9px; padding:0 9px; border-radius:11px; color:#53627a; font-size:12px; font-weight:550;
    transition:background-color .15s ease,color .15s ease;
  }
  .home-nav-button svg,.home-platform-menu > summary svg,.home-contact-menu > summary svg {
    width:28px; height:28px; padding:5px; border-radius:8px; stroke-width:1.65; background:#f3f6fa;
  }
  .home-nav-button:hover,.home-nav-button.active,
  .home-platform-menu > summary:hover,.home-contact-menu > summary:hover { color:#1165d4; background:#f0f5fd; }
  .home-nav-button:hover svg,.home-nav-button.active svg,
  .home-platform-menu > summary:hover svg,.home-contact-menu > summary:hover svg { background:#e4efff; }
  .home-nav-button.primary { height:44px; margin-bottom:3px; color:#fff; background:#1473e6; box-shadow:0 5px 12px rgba(20,115,230,.16); font-weight:650; transform:none; filter:none; transition:background-color .15s ease; }
  .home-nav-button.primary svg { background:rgba(255,255,255,.14); stroke-width:1.8; }
  .home-nav-button.primary:hover { color:#fff; background:#1165d4; box-shadow:0 5px 12px rgba(20,115,230,.16); }
  .home-nav-button.primary:hover svg { background:rgba(255,255,255,.14); }
  .home-nav-button.primary:active { transform:none; filter:none; }
  .home-canvas-tools { gap:4px; }
  .home-canvas-tools .home-nav-group { padding-top:1px; margin-bottom:3px; }
  .home-canvas-tools .home-nav-button { flex:0 0 38px; height:38px; }
  .home-sidebar-tools { gap:2px; padding:6px 0; border-radius:14px; background:linear-gradient(150deg,#f8fafd,#f4f6fa); }
  .home-sidebar-tools .home-nav-button,.home-platform-menu > summary,.home-contact-menu > summary { height:38px; font-size:11px; }
  .home-sidebar-tools svg { background:transparent; }
  .sidebar-collapsed .home-sidebar-brand-row { padding:0; }
  .sidebar-collapsed .home-brand { width:40px; background:transparent; }
  .sidebar-collapsed .home-nav-button,.sidebar-collapsed .home-platform-menu > summary,
  .sidebar-collapsed .home-contact-menu > summary { padding:0; }
  .sidebar-collapsed .home-nav-button.primary svg { background:transparent; }
}

.home-main { min-width:0; width:100%; height:100%; grid-template-rows:64px minmax(0,1fr); overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 3px 18px rgba(30,51,78,.035); }
.home-header { grid-template-columns:minmax(0,1fr) auto; min-height:64px; padding:0 28px; border:0; background:#fff; box-shadow:none; backdrop-filter:none; }
.home-heading span { color:#26364e; }
.home-heading small { color:#8b96a7; }
.home-header-actions { gap:10px; }
.home-site-button { border-color:#dce3ec; color:#50627a; background:#fff; }
.home-site-button:hover { color:#0758c7; border-color:#b8d1ef; background:#edf5ff; }
.home-account-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:auto;
  min-width:104px;
  height:36px;
  padding:0 12px;
  border:1px solid #dce3ec;
  border-radius:10px;
  color:#41536a;
  background:#fff;
  font-size:10px;
  font-weight:700;
}
.home-account-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.home-account-button:hover { color:#0758c7; border-color:#b8d1ef; background:#edf5ff; }
.home-account-button.active { color:#fff; border-color:#1473e6; background:#1473e6; box-shadow:0 7px 18px rgba(20,115,230,.18); }
.home-scroll { background:#fff; scroll-behavior:auto; overscroll-behavior:contain; scrollbar-gutter:stable; contain:layout paint; }
.home-project-preview .project-node-count,.home-project-delete,.home-project-rename { backdrop-filter:none; }
.inspiration-card { background:#fff; box-shadow:0 3px 12px rgba(54,77,114,.04); transition:border-color .15s ease; }
.inspiration-card:hover { border-color:#a8c8ed; box-shadow:0 3px 12px rgba(54,77,114,.04); transform:none; }
.inspiration-image { contain:layout paint; transition:none; }
.inspiration-card:hover .inspiration-image { filter:none; }
.inspiration-case-number { background:#8393ab; backdrop-filter:none; box-shadow:none; }
.home-hero {
  position:relative;
  display:block;
  width:min(1060px,calc(100% - 48px));
  min-height:auto;
  margin:0 auto;
  padding:64px 28px 34px;
  border:0;
  background:#fff;
}
.home-hero::before,.home-hero::after { content:none; display:none; background:none; }
.home-hero-copy { position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; }
.home-hero-copy h1 { margin:0 0 12px; color:#17243a; background:none; -webkit-text-fill-color:currentColor; font-size:clamp(38px,4.6vw,62px); font-weight:760; line-height:1.08; letter-spacing:-.05em; }
.home-hero-copy p { max-width:660px; margin:0 auto; color:#6b788b; font-size:13px; line-height:1.8; }
.home-create-card { position:relative; z-index:2; width:min(820px,100%); margin:28px auto 0; padding:20px; border:1px solid #e2e7ee; border-radius:18px; background:#fff; box-shadow:0 8px 30px rgba(37,62,98,.06); backdrop-filter:none; }
.home-create-title span { color:#31445f; font-size:12px; }
.home-create-title span::before { content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#ff6b2c; box-shadow:0 0 0 4px rgba(255,107,44,.1); }
.home-create-title small { color:#8a96a7; }
.home-create-card > textarea { display:block; width:100%; min-height:112px; margin-top:12px; padding:13px 14px; resize:vertical; outline:0; border:1px solid #dfe5ed; border-radius:11px; color:#263a55; background:#fbfcfe; font-size:13px; line-height:1.7; user-select:text; }
.home-create-card > textarea::placeholder { color:#9ba6b5; }
.home-create-card > textarea:focus { border-color:#86b4ea; box-shadow:0 0 0 4px rgba(20,115,230,.08); background:#fff; }
.home-assistant-options { display:grid; grid-template-columns:1.35fr repeat(4,1fr); gap:8px; margin-top:10px; }
.home-assistant-options label { display:grid; gap:5px; min-width:0; color:#738197; font-size:8px; font-weight:650; }
.home-assistant-options select { width:100%; height:34px; padding:0 26px 0 9px; border:1px solid #dce4ee; border-radius:8px; outline:0; color:#354b68; background:#f8fafd; font-size:10px; }
.home-assistant-options select:focus { border-color:#87b4ea; box-shadow:0 0 0 3px rgba(20,115,230,.08); background:#fff; }
.home-create-actions { align-items:center; grid-template-columns:minmax(0,1fr); margin-top:14px; }
.home-create-primary { color:#fff; background:#1473e6; box-shadow:none; }
.home-create-primary:hover { background:#0758c7; box-shadow:0 4px 12px rgba(20,115,230,.12); }
.home-create-secondary { color:#596a80; border-color:#dce3ec; background:#fff; }
.home-create-secondary:hover { color:#0758c7; border-color:#b8d1ef; background:#edf5ff; }
.home-model-tags span { color:#5f7189; border-color:#dfe6ee; background:#f7f9fc; }
.home-model-tags span:first-child { color:#bd4d1d; border-color:#ffd7c4; background:#fff3ed; }
.home-section { width:min(1120px,calc(100% - 48px)); max-width:none; margin:0 auto; padding:38px 28px 78px; }
.home-section-head small { color:#1473e6; }
.home-section-head h2 { color:#1f3049; }
.home-project-count { color:#7c899a; }
.home-search { border-color:#dde4ed; background:#fff; box-shadow:none; }
.home-search:focus-within { border-color:#8db9ec; box-shadow:0 0 0 4px rgba(20,115,230,.08); }
.home-project-preview { border-color:#e0e5ec; background:#f7f9fc; }
.home-project-card:hover .home-project-preview { border-color:#a8c8ed; box-shadow:0 16px 36px rgba(37,61,97,.12); }
.home-new-project-card .home-project-preview::before { background:#1473e6; box-shadow:0 10px 24px rgba(20,115,230,.2); }
.home-project-grid.project-vertical-scroll::-webkit-scrollbar-thumb { background:#b5c9e1; }
.home-account-panel {
  display:flex; flex-direction:column; right:22px; bottom:auto; top:76px;
  width:min(380px,calc(100vw - 44px)); max-height:min(680px,calc(100dvh - 88px));
  padding:14px; overflow:hidden;
}
.home-account-panel .home-account-head { flex:0 0 auto; padding-bottom:6px; }
.home-account-body { flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#c5d1e1 transparent; }
.home-account-body .home-profile { gap:9px; padding:6px 0 10px; }
.home-account-body .home-profile i { flex:0 0 36px; width:36px; height:36px; }
.home-account-body .home-account-metrics { gap:6px; margin:10px 0; }
.home-account-body .home-account-metrics > div { padding:8px; }
.home-account-body .home-account-metrics strong { margin-top:4px; }
.home-account-body .home-account-subhead { margin:10px 0 6px; }
.home-account-body .home-account-empty { padding:12px 8px; }
.home-account-body .home-recharge-packages { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.home-account-body .home-recharge-package { padding:9px 8px; }
.home-account-panel .home-account-session-actions { flex:0 0 auto; margin-top:10px; padding-top:10px; border-top:1px solid #e4ebf4; }
.home-account-panel .home-account-session-actions .home-account-action { margin-top:0; }
.account-cancel-dialog { width:min(460px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); margin:auto; padding:0; color:#263955; border:1px solid #d9e4f2; }
.account-cancel-dialog::backdrop { background:rgba(26,40,61,.35); backdrop-filter:blur(4px); }
.account-cancel-dialog #accountCancelDescription { color:#62728a; font-size:12px; line-height:1.7; }
.account-cancel-dialog label { color:#405675; font-size:12px; }
.account-cancel-dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.account-cancel-dialog-actions button { margin-top:0; height:38px; font-size:12px; }
.home-pricing-panel { left:232px; right:auto; bottom:auto; top:76px; width:min(620px,calc(100vw - 260px)); }
.home-view.sidebar-collapsed .home-pricing-panel { left:84px; }
.home-pricing-head-actions { display:flex!important; grid-template-columns:none; flex-direction:row; align-items:center; gap:7px!important; }
.home-pricing-head-actions span { padding:5px 8px; border-radius:999px; color:#687fa9; background:#edf3fc; font-size:8px; }
.home-pricing-head-actions button { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; color:#6f7f95; background:#f1f5fa; font-size:18px; }
.canvas-toolbar .toolbar-item.active,
.execute-button:not(:disabled),
.orange-button { background:#1473e6; }

@media (max-width:760px) {
  .home-view,.home-view.sidebar-collapsed { display:block; padding:0; }
  .home-sidebar { position:fixed; inset:auto 8px max(8px,env(safe-area-inset-bottom)); z-index:80; flex-direction:row; align-items:center; width:auto; height:58px; padding:6px 8px; border:1px solid #dce3ec; border-radius:17px; box-shadow:0 16px 42px rgba(39,59,88,.17); overflow-x:auto; }
  .home-sidebar-brand-row { display:none; }
  .home-nav { flex-direction:row; gap:3px; padding:0; border:0; }
  .home-canvas-tools { flex:0 0 auto; flex-direction:row; gap:3px; width:auto; overflow:visible; }
  .home-canvas-tools .home-nav-button { flex:0 0 40px; width:40px; height:40px; padding:0; justify-content:center; }
  .home-nav-group,.home-nav-button span,.home-platform-menu > summary span,.home-contact-menu > summary span { display:none; }
  .home-sidebar-tools { flex-direction:row; gap:3px; width:auto; margin:0; padding:0 0 0 6px; border:0; background:transparent; }
  .home-nav-button,.home-sidebar-tools .home-nav-button,.home-platform-menu > summary,.home-contact-menu > summary { flex:0 0 auto; justify-content:center; width:40px; height:40px; padding:0; }
  .home-nav-button.primary { margin:0; }
  .home-platform-menu,.home-contact-menu { width:40px; }
  .home-platform-menu > nav,.home-contact-card { position:fixed; left:auto; right:14px; bottom:78px; max-width:calc(100vw - 28px); }
  .home-main { grid-template-rows:60px minmax(0,1fr); border-radius:0; }
  .home-header { min-height:60px; padding:0 14px; }
  .home-heading small,.home-site-button { display:none; }
  .home-account-button { min-width:38px; width:38px; padding:0; }
  .home-account-button span { display:none; }
  .home-hero { width:100%; padding:46px 16px 24px; }
  .home-hero-copy h1 { font-size:38px; }
  .home-create-card { margin-top:24px; padding:13px; }
  .home-create-card > textarea { min-height:120px; }
  .home-assistant-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-assistant-options label:first-child { grid-column:1/-1; }
  .home-create-actions { display:grid; grid-template-columns:1fr; }
  .home-section { width:100%; padding:32px 16px 104px; }
  .home-project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-account-panel { top:70px; right:10px; left:10px; bottom:auto; width:auto; max-height:calc(100dvh - 146px); overflow:hidden; }
  .home-pricing-panel { top:70px; right:10px; left:10px; bottom:76px; width:auto; }
}

@media (max-width:390px) {
  .home-project-grid { grid-template-columns:1fr; }
}


/* 2026-09-12 readability: GPT-style desktop typography. */
@media (min-width:761px) {
  .home-view { font-size:14px; }
  .home-brand-word { font-size:17px; }
  .home-nav-group { font-size:11px; line-height:14px; }
  .home-nav-button,
  .home-nav-button.primary,
  .home-sidebar-tools .home-nav-button,
  .home-platform-menu > summary,
  .home-contact-menu > summary {
    font-size:14px;
    line-height:1.35;
  }
  .home-sidebar-tools .home-nav-button,
  .home-platform-menu > summary,
  .home-contact-menu > summary { font-size:13px; }
  .home-heading span { font-size:16px; }
  .home-heading small { font-size:10px; }
  .home-account-button { font-size:12px; }
  .home-hero-copy p { font-size:15px; }
  .home-create-title span { font-size:14px; }
  .home-create-card > textarea { font-size:15px; }
  .home-assistant-options label { font-size:10px; }
  .home-assistant-options select { font-size:12px; }
  .home-section-head h2 { font-size:22px; }
  .home-section-head > button,
  .home-project-count,
  .inspiration-head p { font-size:11px; }
  .home-project-copy strong { font-size:13px; }
  .home-project-copy span { font-size:10px; }
}


/* 2026-09-12 readability: readable secondary text. */
@media (min-width:761px) {
  .home-sidebar-tooltip { font-size:13px; }
  .home-create-title small { font-size:11px; }
  .home-assistant-options label { font-size:12px; }
  .home-assistant-options select { font-size:13px; }
  .home-section-head small { font-size:11px; }
  .home-section-head > button,
  .home-project-count,
  .inspiration-head p { font-size:12px; }
  .home-project-copy strong { font-size:14px; }
  .home-project-copy span { font-size:12px; }
}