.jm-studio.jc-studio .cg-group {min-width:0}
.jm-studio.jc-studio .jc-flow:has(>.cg-group) {row-gap:32px}
.jm-studio.jc-studio .cg-group>.ch-flow-day {margin:4px 0 13px;font-size:22px;line-height:1.4}
.jm-studio.jc-studio .cg-group>.jc-record-header {
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;
  max-width:100%;margin:0 0 7px;
}
.jm-studio.jc-studio .cg-group>.jc-record-header>p {
  min-width:0;max-width:100%;margin:0;color:#ebebef;
  font-size:15.5px;font-weight:550;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;
}
.jm-studio.jc-studio .cg-group .jc-record-meta {
  min-width:0;max-width:100%;margin:0;gap:2px 14px;color:#abb0bb;
  font-size:13.2px;line-height:1.5;font-variant-numeric:tabular-nums;
}
.cg-group .jc-record-meta>span,.cg-group .jc-record-meta>time {max-width:100%;overflow-wrap:anywhere}
.cg-group .jc-record-meta>:is(span,time,button):not(:first-child) {position:relative}
.cg-group .jc-record-meta>:is(span,time,button):not(:first-child,:empty)::before {
  content:"";position:absolute;top:50%;left:-7px;height:9px;border-left:1px solid #ffffff29;translate:0 -50%;
}
.jm-studio.jc-studio .cg-group .jc-record-meta :is(.cg-detail,.zr-button) {
  min-height:27px;padding-inline:3px;font-size:inherit;font-weight:500;color:#c3c6ce;white-space:nowrap;
}
.cg-group .jc-record-meta .zr-details svg {width:14px;height:14px}
.jm-studio.jc-studio .cg-group .jc-record-meta :is(.cg-detail,.zr-button):is(:hover,:focus-visible) {color:#f6f6fa}
@media(max-width:760px) {
  .jm-studio.jc-studio .jc-flow:has(>.cg-group) {row-gap:26px}
  .jm-studio.jc-studio .cg-group>.jc-record-header {gap:2px 10px}
  .jm-studio.jc-studio .cg-group>.jc-record-header>p {font-size:14.4px}
  .jm-studio.jc-studio .cg-group .jc-record-meta {column-gap:9px;font-size:12px}
  .cg-group .jc-record-meta>:is(span,time,button):not(:first-child,:empty)::before {content:none}
}
.cg-row {display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.cg-batch .cg-row {grid-template-columns:repeat(var(--cg-columns),minmax(0,1fr));gap:18px 3px}
.cg-group .cg-preview,.cg-group .cg-card {min-width:0;max-width:100%}
.cg-card {position:relative;isolation:isolate;overflow:hidden;aspect-ratio:var(--cg-aspect);width:min(100%,680px,calc(400px * var(--cg-aspect)));border-radius:9px;background:#1e2431;color:#f0f3f8}
.cg-batch .cg-card {width:100%;border-radius:5px}
.cg-batch .cg-row .jc-record {min-width:0}
.jm-studio.jc-studio .cg-batch .zr-surface {width:100%;min-width:0}
.jm-studio.jc-studio .cg-batch .jc-result-media {width:100%;max-width:100%}
.jm-studio.jc-studio .cg-batch .jc-result-media img {width:100%}
.cg-field {position:absolute;inset:0;overflow:hidden;isolation:isolate;contain:paint;pointer-events:none;background:#191b37}
.cg-field::after {
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle,#e4e2ff47 .8px,transparent 1.25px) center / 14px 14px;
  mask-image:radial-gradient(ellipse 70% 95% at 63% 40%, #000 5%, #000b 58%, #0004);
}
.cg-stream {
  position:absolute;inset:-28%;
  animation-name:cg-flow-horizontal,cg-flow-vertical;
  animation-duration:4.6s,3.7s;animation-direction:alternate,alternate-reverse;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  animation-delay:var(--cg-phase);animation-play-state:paused;
}
.cg-blue {
  background:radial-gradient(ellipse 53% 57% at 36% 63%,#546fcb 0%,#3b468d 37%,#30346599 63%,transparent 94%);
}
.cg-pearl {
  background:radial-gradient(ellipse 53% 66% at 67% 38%,#9881c8 0%,#6b5398 31%,#483369af 59%,transparent 87%);
  animation-duration:5.3s,4.1s;animation-direction:alternate-reverse,alternate;
  animation-delay:calc(var(--cg-phase) - 1.6s);
}
.cg-deep {
  background:radial-gradient(ellipse 48% 64% at 37% 20%,#18182ef5 8%,#222039be 40%,transparent 80%),
    radial-gradient(ellipse 36% 50% at 67% 88%,#222947 2%,#29274470 48%,transparent 84%);
  animation-duration:6.1s,5.1s;animation-delay:calc(var(--cg-phase) - 2.8s);
}
/* Independent horizontal and vertical cycles carry the light through each turn. */
@keyframes cg-flow-horizontal {
  from {transform:translateX(-13%)}
  to {transform:translateX(13%)}
}
@keyframes cg-flow-vertical {
  from {translate:0 -11%}
  to {translate:0 11%}
}
.cg-preview[data-animate]:not([data-sync-error]) .cg-stream {animation-play-state:running}
.cg-card:has(.cg-meter) {min-height:76px}
.cg-meter {
  position:absolute;z-index:1;top:50%;left:50%;translate:-50% -50%;box-sizing:border-box;
  width:min(202px,calc(100% - 24px));padding:10px 12px;border-radius:9px;
  border:1px solid #d5d4ff26;background:#17192ee3;color:#f4f2ff;
  box-shadow:0 2px 8px #10112226;font-size:13px;line-height:1.3;font-variant-numeric:tabular-nums;
}
.cg-meter-heading {display:flex;align-items:baseline;justify-content:space-between;gap:6px;white-space:nowrap}
.cg-meter-stage {font-weight:560;overflow:hidden;text-overflow:ellipsis}
.cg-meter-value {font-weight:560;color:#ded8ff}
.cg-meter-track {height:4px;margin-top:7px;border-radius:99px;overflow:hidden;background:#dcd8ff31}
.cg-meter-track i {
  display:block;width:var(--cg-width);height:100%;border-radius:inherit;background:linear-gradient(90deg,#86a8ff,#c2a4fa);
  transition:width 450ms ease-out;
}
.cg-meter-track:not([aria-valuenow]) i {animation:cg-waiting 2.6s ease-in-out infinite alternate;animation-play-state:paused}
.cg-preview[data-animate]:not([data-sync-error]) .cg-meter-track:not([aria-valuenow]) i {animation-play-state:running}
@keyframes cg-waiting {to {transform:translateX(190%)}}
.cg-batch .cg-meter {width:min(186px,calc(100% - 12px));padding:7px 8px}
.cg-status {position:absolute;z-index:1;inset:10px auto auto 10px;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:5px;background:#141c28d9;color:#f0f4fa;font-size:11px;line-height:1.4}
.cg-status i {width:5px;height:5px;border-radius:50%;background:#a3bdd9}
.cg-card:not(:has(.cg-field)) {aspect-ratio:auto;min-height:48px;background:#ffffff06;border:1px solid #ffffff0d}
.cg-card:not(:has(.cg-field)) .cg-status {position:static;margin:11px;background:transparent}
.cg-card[data-state="failed"] .cg-status i {background:#dbaaa1}
.cg-note,.cg-sync {margin:7px 1px 0;color:#b6b7bd;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.cg-preview[data-state="failed"]>.cg-card {
  display:flex;align-items:center;box-sizing:border-box;min-height:51px;padding:9px 20px;
  border:1px solid #ffffff16;border-radius:10px;
}
.cg-batch .cg-preview[data-state="failed"]>.cg-card {border-radius:5px}
.cg-preview[data-state="failed"] .cg-card>.cg-status {
  margin:0;padding:0;gap:6px;font-size:13.2px;line-height:1.5;font-weight:550;
}
.cg-preview[data-state="failed"] .cg-status i {width:5px;height:5px;flex:none}
.cg-preview[data-state="failed"]>.cg-note {
  margin:7px 1px 0;color:#c2c5cc;font-size:14.4px;line-height:1.55;
}
.cg-group:not(.cg-batch) .cg-preview[data-state="failed"] {
  width:min(100%,680px,calc(400px * var(--cg-aspect)));
}
.cg-sync button,.cg-detail {color:inherit;font:inherit;background:transparent;border:0;cursor:pointer}
.cg-sync button {margin-left:5px;text-decoration:underline}
.cg-detail {display:inline-flex;align-items:center;min-height:26px;padding:2px 3px}
.cg-detail:hover,.cg-detail:focus-visible,.cg-sync button:hover {color:#f3f4f6}
.cg-group .jc-record-header .jc-record-status {display:none}
@media(max-width:690px){.cg-batch .cg-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 3px}.cg-batch .cg-status {top:6px;left:6px;padding:3px 6px}}
@media(max-width:480px) {
  .cg-batch .cg-row:has(.cg-preview[data-state="failed"]):not(:has(.cg-preview:not([data-state="failed"]),.zr-surface)) {
    grid-template-columns:minmax(0,1fr);row-gap:18px;
  }
}
@media(prefers-reduced-motion:reduce){.cg-preview .cg-stream,.cg-preview .cg-meter-track i {animation:none!important;transition:none}}
.jm-studio.jc-studio .cg-group:not(.cg-batch) .zr-surface {width:min(100%,680px,calc(400px * var(--cg-media-aspect,var(--cg-aspect))));min-width:0}
.jm-studio.jc-studio .cg-group .zr-surface>.jc-result-media {width:100%;max-height:none;aspect-ratio:var(--cg-media-aspect,var(--cg-aspect))}
.jm-studio.jc-studio .cg-group .jc-result-media :is(img,video) {width:100%;height:100%;max-height:none;object-fit:contain}

.jc-studio .jc-resume-action,.jc-studio .jc-compose-feedback {
  color:#ededf2; border:1px solid #ffffff24; background:#28292e; border-radius:9px; font-size:14px; line-height:1.45;
}
.jc-studio .jc-resume-action {
  display:inline-flex; align-items:center; align-self:flex-start; min-height:33px; margin:7px 0 0; padding:5px 12px; cursor:pointer;
}
.jc-studio .jc-resume-action:hover:enabled { background:#35363c; border-color:#ffffff40; }
.jc-studio .jc-resume-action:disabled { opacity:.6; cursor:default; }
.jc-studio .jc-compose-feedback {
  position:absolute; z-index:2; bottom:calc(100% + 8px); right:0; max-width:100%;
  display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; padding:7px 10px; box-shadow:0 4px 16px #0003;
}
.jc-studio .jc-compose-feedback :is(a,button) { display:inline-flex; align-items:center; gap:4px; color:inherit; text-decoration:underline; text-underline-offset:3px; }
.jc-studio .jc-compose-feedback a svg { width:15px; height:15px; }
body:has(.studio-shell.jc-studio) .toast-message { top:max(16px,env(safe-area-inset-top)); bottom:auto; left:50%; }
