/* Progress lives inside the drawing card; MISUMI's supplied asset is the header. */
.public-app .generation-progress { padding: 0; background: #F2F2F2; color: #333; }
.generation-progress::backdrop { background: #F2F2F2; }
.generation-shell { width: min(100%,560px); min-height: 100%; margin: 0 auto; padding: max(24px,env(safe-area-inset-top)) 28px max(20px,env(safe-area-inset-bottom)); display: flex; flex-direction: column; box-sizing: border-box; }
.generation-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 28px; }
.generation-brand { display: block; width: 105px; height: auto; mix-blend-mode: multiply; }
.generation-session { display: inline-flex; align-items: center; gap: 6px; color: #666; font-size: 11px; }
.generation-session i { width: 5px; height: 5px; border-radius: 50%; background: #0F218B; }
.generation-sheet { flex: 1; min-height: 0; width: 100%; max-width: 430px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: stretch; text-align: center; }
.generation-sheet .generation-accessible { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.generation-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: auto; min-height: 245px; margin: 8px 0 0; padding: 26px 24px; box-sizing: border-box; filter: none; background: white; border: 1px solid #bfc4df; border-radius: 4px; box-shadow: 0 12px 32px #0f218b06; overflow: hidden; }
.generation-art::before { content: ''; position: absolute; width: 48%; height: 3px; left: 26%; top: 0; background: #0F218B; }
.generation-paper-label { display: flex; justify-content: space-between; align-items: center; font: 9px/1.5 Arial,sans-serif; letter-spacing: .08em; color: #666; }
.generation-paper-label > :first-child { font-size: 12px; letter-spacing: .05em; color: #0F218B; }
.generation-status { margin: 30px 0; text-align: left; }
.generation-status-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; font-size: 13px; gap: 8px; color: #0F218B; }
.generation-elapsed { font-size: 10px; color: #666; white-space: nowrap; }
.generation-elapsed b { margin-left: 3px; font: 11px/1.5 ui-monospace,Consolas,monospace; font-variant-numeric: tabular-nums; }
.generation-track { width: 100%; border-radius: 3px; height: 8px; margin-top: 18px; background: #e7eaf4; overflow: hidden; }
.generation-track > span { position: relative; display: block; height: 100%; background: #0F218B; border-radius: inherit; transition: width 1s ease; }
.generation-track > span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,#ffffff70,transparent); animation: portrait-shimmer 2s ease-in-out infinite; }
.generation-steps { display: flex; justify-content: space-between; list-style: none; padding: 0; color: #777; margin: 12px 0 0; font-size: 10px; }
.generation-steps [data-state="active"] { color: #0F218B; font-weight: 600; }
.generation-steps [data-state="done"] { color: #0F218B; }
.generation-paper-footer { display: flex; align-items: center; gap: 6px; text-align: left; color: #666; font-size: 9px; }
.generation-pen-dot { width: 5px; height: 5px; border: 1px solid #0F218B; border-radius: 50%; }
.generation-paper-rule { flex: 1; height: 1px; margin-left: 8px; background: #e1e4ee; }
.generation-paper-corner { position: absolute; width: 8px; height: 8px; pointer-events: none; border-color: #bfc4df; border-style: solid; }
.corner-top { top: 12px; left: 12px; border-width: 1px 0 0 1px; }
.corner-bottom { bottom: 12px; right: 12px; border-width: 0 1px 1px 0; }
.generation-sheet > .generation-note { min-height: 18px; margin: 16px 0 0; font-size: 11px; line-height: 1.8; color: #666; }
.generation-footer { width: 100%; max-width: 430px; margin: 0 auto; padding-top: 32px; }
.generation-footer-actions { display: flex; align-items: center; justify-content: center; gap: 20px; }
#generation-cancel { width: 136px; min-height: 44px; border: 1px solid #bfc4df; border-radius: 4px; background: #fff; color: #0F218B; font-family: inherit; font-size: 12px; line-height: 1.5; cursor: pointer; transition: border-color .2s,background .2s; }
#generation-cancel:hover:not(:disabled) { background: #F0F1F8; border-color: #0F218B; }
#generation-cancel:disabled { opacity: .5; cursor: default; }
#generation-background { min-height: 44px; padding: 10px 0; margin: 0; border: 0; background: none; text-decoration: none; font-size: 11px; color: #666; cursor: pointer; }
#generation-background span { margin-left: 3px; }
.generation-footer > p { margin: 12px 0 0; text-align: center; font-size: 9px; line-height: 1.8; color: #666; }
.generation-progress.is-cancelling .generation-track > span::after { animation: none; }
@media (max-width:360px) { .generation-shell {padding-left:20px;padding-right:20px} .generation-art {padding:24px 18px} .generation-footer-actions {gap:14px} }
@media (max-height:650px) { .generation-shell {padding-top:16px;padding-bottom:14px} .generation-topline {padding-bottom:12px} .generation-art {min-height:220px} .generation-footer {padding-top:18px} }
@media (prefers-reduced-motion:reduce) { .generation-track>span::after {animation:none} .generation-track>span {transition:none} }