:root{--blue:#315efb;--blue-2:#eaf0ff;--ink:#17223b;--muted:#6f7b92;--line:#dfe5ef;--panel:#fff;--bg:#f5f7fb;--soft:#f9fafc;--shadow:0 12px 32px rgba(31,48,88,.09);font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-width:1120px;background:var(--bg)}button,input,textarea,select{font:inherit;color:inherit;letter-spacing:0}button{cursor:pointer}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;position:sticky;top:0;z-index:30}.brand{display:flex;align-items:center;gap:11px;width:310px;color:inherit;text-decoration:none}.brand>span:last-child{display:flex;flex-direction:column;gap:2px}.brand strong{font-size:17px}.brand small{font-size:11px;color:var(--muted)}.brand-mark{width:34px;height:34px;position:relative}.brand-mark i,.brand-mark b{position:absolute;width:28px;height:8px;border-radius:5px;transform:rotate(-25deg);left:3px}.brand-mark i{background:#ff3557;top:8px}.brand-mark b{background:#246cff;top:18px}.topnav{display:flex;align-items:stretch;height:100%;gap:4px}.topnav-item{border:0;background:transparent;padding:0 20px;font-weight:700;color:#59657b;position:relative}.topnav-item.active{color:var(--blue)}.topnav-item.active:after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:3px;background:var(--blue);border-radius:3px 3px 0 0}.runtime{margin-left:auto;display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}.runtime>span:first-child{width:8px;height:8px;border-radius:50%;background:#d9a441}.runtime.ready>span:first-child{background:#20b26b}.runtime.error>span:first-child{background:#e9564a}.app-shell{height:calc(100vh - 68px);display:grid;grid-template-columns:218px minmax(580px,1fr) 378px;overflow:hidden}.sidebar{background:#fff;border-right:1px solid var(--line);padding:22px 14px;overflow:auto}.sidebar-head{display:flex;justify-content:space-between;align-items:end;padding:0 10px 14px}.sidebar-head span{font-weight:800}.sidebar-head strong{font-size:24px;color:var(--blue)}.category{width:100%;border:0;background:transparent;border-radius:6px;display:flex;justify-content:space-between;padding:11px 12px;margin:2px 0;font-size:13px;color:#536078}.category b{font-size:11px;color:#9aa4b6}.category:hover{background:#f3f6fb}.category.active{background:var(--blue-2);color:var(--blue);font-weight:800}.category.active b{color:var(--blue)}.sidebar-note{border-top:1px solid var(--line);margin:20px 8px 0;padding-top:18px}.sidebar-note strong{font-size:12px}.sidebar-note p{font-size:11px;line-height:1.7;color:var(--muted);margin:6px 0}.workspace{overflow:auto;padding:24px 26px 60px}.page{display:none}.page.active{display:block}.workspace-head{display:flex;justify-content:space-between;gap:28px;align-items:center;margin-bottom:18px}.workspace-head h1,.planner-main h1{font-size:24px;margin:0 0 6px}.workspace-head p,.planner-main>p{margin:0;color:var(--muted);font-size:13px}.searchbox{width:min(420px,40%);height:42px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;gap:9px;padding:0 11px;border-radius:6px}.searchbox:focus-within{border-color:#91adff;box-shadow:0 0 0 3px rgba(49,94,251,.08)}.searchbox input{border:0;outline:0;flex:1;min-width:0}.searchbox kbd{font-size:11px;color:#9aa4b6;border:1px solid var(--line);padding:2px 5px;border-radius:4px}.filterbar{height:38px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}.view-tools{display:flex;gap:5px}.icon-btn{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:6px}.icon-btn.active{color:var(--blue);border-color:#9eb3ff;background:#f4f7ff}.prompt-grid{columns:5 180px;column-gap:12px}.prompt-grid.roomy{columns:4 220px;column-gap:16px}.prompt-card{break-inside:avoid;margin:0 0 12px;background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden;transition:transform .16s,border-color .16s,box-shadow .16s;position:relative}.prompt-card:hover{transform:translateY(-2px);border-color:#a9bbf7;box-shadow:0 8px 22px rgba(29,50,96,.10)}.prompt-card img{width:100%;display:block;background:#edf0f5;min-height:120px;object-fit:cover}.prompt-card-body{padding:10px}.prompt-card-body h3{font-size:13px;line-height:1.45;margin:0 0 7px}.card-meta{display:flex;justify-content:space-between;color:#8993a7;font-size:10px}.card-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(132px,1.2fr) 34px;gap:6px;align-items:center;margin-top:9px}.card-actions button{height:31px;border-radius:5px;border:1px solid var(--line);background:#fff;font-size:11px;white-space:nowrap;display:flex;align-items:center;justify-content:center;padding:0 10px}.card-actions .use-style{background:var(--blue);border-color:var(--blue);color:#fff}.load-more{display:block;margin:24px auto 0;min-width:180px;height:40px;border:1px solid var(--line);background:#fff;border-radius:6px;font-weight:700}.load-more[hidden]{display:none}.creator{background:#fff;border-left:1px solid var(--line);padding:18px;overflow:auto;transition:width .2s,padding .2s}.creator-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.creator-head>div{display:flex;flex-direction:column;gap:4px}.creator-head span{font-size:11px;color:var(--muted)}.creator-head strong{font-size:15px;max-width:275px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-style{border:1px solid var(--line);background:var(--soft);border-radius:7px;min-height:108px;margin-bottom:15px;overflow:hidden}.selected-empty{height:108px;display:flex;align-items:center;justify-content:center;gap:9px;color:#8c96a9;font-size:12px}.selected-empty>span{font-size:20px}.selected-filled{display:grid;grid-template-columns:104px 1fr;min-height:108px}.selected-filled img{width:104px;height:108px;object-fit:cover}.selected-info{padding:12px;min-width:0}.selected-info strong{font-size:13px;display:block;margin-bottom:6px}.selected-info p{font-size:11px;color:var(--muted);line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.field{display:block;margin-top:14px}.field>span,.field-title,.option-row label>span{font-size:12px;font-weight:800;display:block;margin-bottom:7px}.field textarea,.prompt-details textarea,.planner-main textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:11px;resize:vertical;outline:0;line-height:1.65}.field textarea:focus,.prompt-details textarea:focus,.planner-main textarea:focus{border-color:#8eabff;box-shadow:0 0 0 3px rgba(49,94,251,.07)}.upload-zone{display:flex;align-items:center;gap:10px;border:1px dashed #aebce0;background:#f8faff;border-radius:6px;margin-top:14px;padding:11px;cursor:pointer}.upload-zone:hover{border-color:var(--blue)}.upload-icon{width:30px;height:30px;border-radius:50%;background:var(--blue-2);color:var(--blue);display:grid;place-items:center;font-weight:800}.upload-zone>div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.upload-zone strong{font-size:12px}.upload-zone small{color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-btn{border:0;background:transparent;color:var(--blue);font-size:11px}.field-group{margin-top:15px}.ratio-row{display:flex;gap:5px}.ratio{width:59px;height:55px;border:1px solid var(--line);background:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:6px}.ratio b{font-size:10px}.ratio.active{border-color:var(--blue);background:var(--blue-2);color:var(--blue)}.shape{display:block;border:1.5px solid currentColor;border-radius:1px}.square{width:15px;height:15px}.portrait{width:12px;height:16px}.tall{width:9px;height:18px}.landscape{width:17px;height:13px}.wide{width:19px;height:10px}.option-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.option-row select{height:38px;width:100%;border:1px solid var(--line);background:#fff;border-radius:6px;padding:0 9px}.prompt-details{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.prompt-details summary{font-size:11px;color:#61708a;cursor:pointer}.prompt-details textarea{margin-top:9px;font-size:11px}.generate-btn,.primary-btn{border:0;background:var(--blue);color:#fff;font-weight:800;border-radius:6px}.generate-btn{width:100%;height:48px;margin-top:14px;display:flex;justify-content:center;align-items:center;gap:12px}.generate-btn small{font-weight:500;opacity:.75}.generate-btn:disabled,.primary-btn:disabled{opacity:.55;cursor:wait}.creator-foot{text-align:center;font-size:10px;color:#9aa3b3;line-height:1.5}.planner-shell{display:grid;grid-template-columns:minmax(400px,1fr) minmax(320px,.8fr);gap:18px}.planner-main,.planner-result{background:#fff;border:1px solid var(--line);padding:28px;border-radius:7px}.eyebrow{font-size:11px;color:var(--blue);font-weight:800}.planner-main textarea{margin-top:22px;min-height:220px}.planner-actions{display:flex;align-items:center;justify-content:space-between;margin-top:14px}.memory-switch{font-size:12px;color:var(--muted)}.primary-btn{height:42px;padding:0 18px}.planner-result{min-height:470px}.planner-result>.empty-icon{width:42px;height:42px;border-radius:6px;background:var(--blue-2);color:var(--blue);display:grid;place-items:center;font-weight:900}.planner-result h2{font-size:17px}.planner-result p{font-size:12px;color:var(--muted);line-height:1.7}.planner-output{font-size:13px;line-height:1.75;white-space:pre-wrap}.planner-output-actions{display:flex;gap:8px;margin-top:16px}.secondary-btn,.planner-output-actions button{border:1px solid var(--line);background:#fff;border-radius:6px;height:38px;padding:0 13px}.planner-output-actions .to-creator{background:var(--blue);border-color:var(--blue);color:#fff}.history-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.history-card{background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden}.history-images{display:grid;grid-template-columns:repeat(2,1fr);height:190px;background:#edf1f8}.history-images img{width:100%;height:100%;object-fit:cover}.history-body{padding:13px}.history-body h3{font-size:14px;margin:0 0 6px}.history-body p{font-size:11px;color:var(--muted);line-height:1.55;margin:0}.history-actions{display:flex;gap:7px;margin-top:12px}.history-actions button{height:31px;border:1px solid var(--line);background:#fff;border-radius:5px;font-size:11px}.empty-history{grid-column:1/-1;text-align:center;padding:80px;color:var(--muted)}.prompt-drawer{position:fixed;right:0;top:68px;bottom:0;width:min(560px,50vw);z-index:51;background:#fff;box-shadow:-12px 0 35px rgba(28,44,82,.18);transform:translateX(102%);transition:transform .22s;overflow:auto;padding:26px}.prompt-drawer.open{transform:translateX(0)}.drawer-backdrop{position:fixed;inset:68px 0 0;background:rgba(17,30,57,.28);z-index:50}.drawer-close{position:absolute;right:16px;top:14px;width:36px;height:36px;border:0;background:#f3f5f9;border-radius:6px;font-size:24px}.drawer-hero{display:grid;grid-template-columns:190px 1fr;gap:18px;padding-right:28px}.drawer-hero img{width:190px;max-height:260px;object-fit:cover;border-radius:6px;background:#eee}.drawer-hero h2{font-size:21px;margin:6px 0}.drawer-hero p{font-size:12px;color:var(--muted);line-height:1.65}.drawer-prompt{margin-top:22px;background:#f7f9fc;border:1px solid var(--line);border-radius:6px;padding:15px;font-size:12px;line-height:1.75;white-space:pre-wrap;max-height:340px;overflow:auto}.drawer-actions{display:flex;gap:8px;margin-top:14px}.drawer-actions button{height:40px;border:1px solid var(--line);background:#fff;border-radius:6px;padding:0 16px}.drawer-actions .use-style{background:var(--blue);color:#fff;border-color:var(--blue)}.lightbox{position:fixed;inset:0;z-index:80;background:rgba(8,14,26,.93);display:flex;align-items:center;justify-content:center}.lightbox[hidden],.drawer-backdrop[hidden]{display:none}.lightbox img{max-width:88vw;max-height:82vh;object-fit:contain}.lightbox-close{position:absolute;right:24px;top:20px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px}.lightbox-actions{position:absolute;bottom:22px;display:flex;gap:8px}.lightbox-actions a,.lightbox-actions button{height:40px;padding:0 16px;border-radius:6px;border:1px solid rgba(255,255,255,.25);background:#fff;color:#17223b;text-decoration:none;display:flex;align-items:center}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:#17223b;color:#fff;padding:10px 16px;border-radius:6px;z-index:100;font-size:12px;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:1320px){.prompt-grid{columns:4 180px}.prompt-grid.roomy{columns:3 220px}.app-shell{grid-template-columns:190px minmax(520px,1fr) 350px}.sidebar{padding-left:10px;padding-right:10px}}@media(max-width:900px){body{min-width:0}.topbar{height:58px;padding:0 12px}.brand{width:auto}.brand small,.runtime,.sidebar,.topnav{display:none}.app-shell{height:calc(100vh - 58px);display:block;overflow:auto}.workspace{padding:16px 12px 310px}.creator{position:fixed;left:0;right:0;bottom:0;height:292px;border:1px solid var(--line);border-radius:10px 10px 0 0;z-index:20;padding:12px;box-shadow:0 -10px 30px rgba(30,43,80,.12)}.creator .selected-style,.creator .upload-zone,.creator .field-group,.creator .option-row,.creator .prompt-details,.creator .creator-foot{display:none}.creator-head{margin-bottom:8px}.field{margin:0}.field textarea{height:66px}.generate-btn{height:42px;margin-top:8px}.workspace-head{display:block}.searchbox{width:100%;margin-top:14px}.prompt-grid,.prompt-grid.roomy{columns:2 145px}.planner-shell{display:block}.planner-result{margin-top:12px}.history-grid{grid-template-columns:1fr}.prompt-drawer{top:58px;width:100vw}.drawer-backdrop{inset:58px 0 0}.drawer-hero{grid-template-columns:120px 1fr}.drawer-hero img{width:120px}.ratio-row{overflow:auto}}
.drawer-hero img[data-drawer-preview],
.selected-filled img[data-selected-preview],
.history-images img {
  cursor: zoom-in;
}

.drawer-hero img[data-drawer-preview]:hover,
.selected-filled img[data-selected-preview]:hover {
  filter: brightness(.96);
}

.prompt-image-btn,
.history-image-btn {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: #edf0f5;
  display: block;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}

.prompt-image-btn img,
.history-image-btn img {
  pointer-events: none;
}

.prompt-image-btn span,
.history-image-btn span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  border-radius: 5px;
  background: rgba(15, 24, 44, .76);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 6px 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: .16s;
}

.prompt-image-btn:hover span,
.prompt-image-btn:focus-visible span,
.history-image-btn:hover span,
.history-image-btn:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.prompt-image-btn:hover img,
.history-image-btn:hover img {
  filter: brightness(.94);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.11);
  color: #fff;
  font-size: 38px;
  transform: translateY(-50%);
}

.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-nav:hover { background: rgba(255,255,255,.18); }

.prompt-grid.is-error {
  columns: auto;
  display: block;
}

.resource-error {
  width: min(520px, 100%);
  margin: 92px auto 0;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 10px 26px rgba(30, 43, 80, .07);
}

.resource-error b {
  display: block;
  font-size: 17px;
  margin-bottom: 8px;
}

.resource-error p {
  margin: 0 auto 18px;
  max-width: 360px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.resource-error button {
  height: 38px;
  min-width: 136px;
  padding: 0 16px;
  border: 1px solid var(--blue);
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}

.ratio-note {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.45;
  color: #7d879b;
}

.creator-head .creator-tools {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.new-project-btn {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.selected-style.is-revision {
  border-color: #b9c8ff;
  background: #f5f7ff;
}