/* New states use the existing design tokens and components. Original styles.css is unchanged. */
.flow-form{display:grid;gap:16px}.flow-form label{display:grid;gap:7px;font-weight:600;font-size:13px}.flow-form input,.flow-form textarea,.flow-form select{width:100%;border:1px solid #dfe4ef;border-radius:9px;padding:11px 12px;background:#fff;color:#172754;font:inherit}.flow-form textarea{min-height:94px;resize:vertical}.flow-form .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.flow-tools{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:16px 0}.flow-note{padding:12px 15px;border:1px solid #dfe4ef;background:#f5f7ff;border-radius:10px;font-size:13px;line-height:1.6;margin:12px 0;color:#52607a}.flow-error{color:#a12c42;background:#fff1f2;padding:10px 13px;border-radius:8px;white-space:pre-wrap}.flow-code{display:block;width:100%;height:310px;background:#101a2f;border:0;color:#dce6fa;resize:vertical;padding:20px;font:13px/1.7 monospace;tab-size:2;box-sizing:border-box}.flow-block{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.7}.flow-empty{padding:28px;text-align:center;color:#687791}.flow-modal{max-height:80vh;overflow-y:auto}.modal{max-height:90vh;overflow-y:auto}.flow-details{margin:14px 0}.flow-details summary{cursor:pointer;font-weight:700;padding:10px 0}.flow-steps{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.flow-steps span{border:1px solid #dfe4ef;border-radius:8px;padding:8px 12px;font-size:12px}.flow-saved{color:#1a785b;font-size:12px}.flow-links{display:flex;gap:10px;flex-wrap:wrap}.flow-card-list{display:grid;gap:16px}.flow-toolbar{border-top:1px solid #e3e8f2;padding:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.flow-toolbar small{margin-right:auto;color:#687791}.flow-output{white-space:pre-wrap;background:#f3f6fb;border-radius:8px;padding:12px;max-height:240px;overflow:auto}.flow-table-actions{display:flex;gap:7px;flex-wrap:wrap}.flow-lesson{font-size:15px;line-height:1.85}.flow-lesson p{margin:12px 0}.flow-section{margin-top:20px}.flow-pager{display:flex;gap:12px;align-items:center;padding:12px 20px}.flow-meta{font-size:12px;color:#687791}.flow-guidance{padding:16px;border-left:3px solid #5877ea;background:#f5f7ff;border-radius:8px;margin:14px 0}.flow-form :focus-visible,.flow-code:focus-visible{outline:3px solid #8fa6fa;outline-offset:2px}.flow-notices{margin-top:18px}.flow-notices article{padding:15px;border-bottom:1px solid #e4e8f0}.flow-modal h3{margin:18px 0 10px}.flow-modal .btn{white-space:normal}.console .flow-output{background:#16223a;color:#dce6fa;margin:10px}.flow-form .flow-check{display:flex;align-items:center;gap:8px}.flow-check input{width:auto}.flow-failure{border-left:3px solid #c45c5c}.flow-form small{font-weight:400;color:#687791}.flow-simulation{font-size:11px;letter-spacing:.02em}.flow-role-accounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.flow-role-accounts button{text-align:left}.code-pane{min-width:0}.problem-pane{overflow-wrap:anywhere}.flow-form select{min-width:0}.flow-scroll{overflow-x:auto}.flow-toolbar button{font-size:12px}.auth-box .flow-meta{margin-top:12px}
@media(max-width:700px){.flow-form .field-grid{grid-template-columns:1fr}.flow-toolbar{padding:10px}.flow-table-actions{gap:4px}.flow-code{height:280px}.flow-form{gap:12px}.modal{max-width:calc(100vw - 24px)}.flow-card-list .card-body{padding:16px}}