/* Free Workflows: 3 chained builder pages (Card, Character Creator, Full Studio).
   Built on PetAi's own theme tokens (theme.css), like Design and Customize, not the
   original reference files' own purple/dark styling - see guide.html G12. */
.fw-body{max-width:1280px}
.fw-lead{font-size:calc(var(--fs)*14/15);line-height:1.55;color:var(--muted);margin:6px 0 16px;max-width:86ch}
.fw-chain{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.fw-step{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card2);color:var(--muted);font-size:calc(var(--fs)*12.5/15);text-decoration:none}
.fw-step.on{background:color-mix(in srgb,var(--teal) 14%,transparent);border-color:var(--teal-line);color:var(--teal-ink);font-weight:600}
.fw-step .n{width:20px;height:20px;border-radius:50%;background:var(--teal);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:calc(var(--fs)*11/15);font-weight:700}
.fw-arrow{color:var(--muted)}
.fw-banner{background:color-mix(in srgb,var(--teal) 8%,transparent);border:1px solid var(--teal-line);border-radius:12px;padding:12px 16px;margin:0 0 16px;font-size:calc(var(--fs)*13/15);line-height:1.55}
.fw-banner b{color:var(--teal-ink)}
.fw-work{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:20px;align-items:start}
@media (max-width:900px){.fw-work{grid-template-columns:1fr}}
.fw-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.fw-card h2{margin:0 0 4px;font-size:calc(var(--fs)*18/15)}
.fw-card .sub{color:var(--muted);font-size:calc(var(--fs)*12.5/15);margin:0 0 14px}
.fw-right{position:sticky;top:12px}
.fw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.fw-grid{grid-template-columns:1fr}}
.fw-field{display:flex;flex-direction:column;gap:6px}
.fw-field.full{grid-column:1/-1}
.fw-field label{font-size:calc(var(--fs)*12.5/15);font-weight:600;color:var(--ink)}
.fw-field input,.fw-field select,.fw-field textarea{width:100%;font:inherit;color:var(--ink);background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:none}
.fw-field textarea{min-height:68px;resize:vertical}
.fw-field input:focus,.fw-field select:focus,.fw-field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 16%,transparent)}
.fw-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.fw-btn{font:inherit;font-weight:600;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--ink);padding:10px 14px;cursor:pointer}
.fw-btn.primary{background:var(--teal);border-color:var(--teal);color:var(--on-accent)}
.fw-btn:hover{filter:brightness(1.05)}
.fw-mcard{aspect-ratio:1.58/1;border-radius:16px;padding:20px;position:relative;overflow:hidden;background:linear-gradient(145deg,var(--card2),var(--card));border:1px solid var(--teal-line);box-shadow:0 10px 26px rgba(0,0,0,.12)}
.fw-mtop{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:calc(var(--fs)*13/15)}
.fw-mtop .fw-member{font-size:calc(var(--fs)*10/15);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.fw-mmain{position:absolute;left:20px;bottom:20px;right:20px}
.fw-mname{font-weight:800;font-size:calc(var(--fs)*26/15);letter-spacing:-.02em;margin-bottom:2px}
.fw-mrole{color:var(--teal-ink);font-size:calc(var(--fs)*13/15);font-weight:600}
.fw-mmeta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.fw-mmeta .l{font-size:calc(var(--fs)*9/15);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px}
.fw-mmeta .v{font-size:calc(var(--fs)*12/15);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-serial{position:absolute;right:20px;top:46px;font-size:calc(var(--fs)*10/15);color:var(--muted);letter-spacing:.08em}
.fw-tabs{display:flex;gap:4px;margin:16px 0 10px;padding:4px;background:var(--card2);border:1px solid var(--line);border-radius:10px;flex-wrap:wrap}
.fw-tab{flex:1;min-width:88px;background:transparent;border:0;color:var(--muted);padding:8px;border-radius:7px;font-weight:600;font-size:calc(var(--fs)*12/15);cursor:pointer}
.fw-tab.on{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.fw-output{background:var(--paper);border:1px solid var(--line);border-radius:12px;min-height:150px;max-height:320px;overflow:auto;padding:14px;color:var(--ink);font-size:calc(var(--fs)*12.5/15);line-height:1.6;white-space:pre-wrap}
.fw-toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);opacity:0;background:var(--teal);color:var(--on-accent);border-radius:10px;padding:10px 16px;font-weight:700;font-size:calc(var(--fs)*13/15);transition:.2s;z-index:50}
.fw-toast.show{transform:translate(-50%,0);opacity:1}
.fw-note{font-size:calc(var(--fs)*11.5/15);color:var(--muted);margin-top:8px}
.fw-upload{display:block;font-size:calc(var(--fs)*12.5/15);font-weight:600;margin-bottom:6px;color:var(--ink)}
.fw-status{font-size:calc(var(--fs)*11.5/15);color:var(--muted);margin:2px 0 12px}
/* card-grid: one card per category — add new fw-cat-card blocks in the HTML */
.fw-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.fw-cat-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.fw-cat-head{padding:16px 18px 14px;border-bottom:1px solid var(--line)}
.fw-cat-title{display:block;font-weight:700;font-size:calc(var(--fs)*15/15);margin-bottom:3px}
.fw-cat-desc{display:block;color:var(--muted);font-size:calc(var(--fs)*12.5/15);line-height:1.45}
.fw-cat-body{display:flex;flex-direction:column}
.fw-wf-item{display:flex;align-items:center;gap:12px;padding:13px 18px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line)}
.fw-wf-item:last-child{border-bottom:0}
.fw-wf-item:hover{background:color-mix(in srgb,var(--teal) 6%,transparent)}
.fw-wf-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--teal);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:calc(var(--fs)*11/15);font-weight:700}
.fw-wf-info{flex:1;display:flex;flex-direction:column;gap:2px}
.fw-wf-name{font-weight:600;font-size:calc(var(--fs)*13.5/15)}
.fw-wf-hint{color:var(--muted);font-size:calc(var(--fs)*12/15);line-height:1.4}
.fw-wf-launch{flex-shrink:0;font-size:calc(var(--fs)*12.5/15);font-weight:600;color:var(--teal-ink)}