/* Workshop Canvas Engine - shared styles for interactive build-along workshops */
*{box-sizing:border-box;margin:0}
body{background:#0d1117;color:#e8eaf2;font-family:'Inter',system-ui,sans-serif;min-height:100vh}

.cw-header{text-align:center;padding:20px 16px 8px}
.cw-header h1,.cw-header h2{font-family:'Fredoka',cursive;font-size:1.5rem;font-weight:700;margin:0;background:linear-gradient(135deg,#ff7700,#ffd166);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cw-header p{font-size:.88rem;color:rgba(232,234,242,.55);margin-top:6px}

.cw-layout{display:grid;grid-template-columns:1fr 420px;gap:28px;max-width:1240px;margin:0 auto;padding:0 24px 64px;align-items:start}
.cw-layout>*{min-width:0}
.cw-goal,.cw-explain li,.cw-step-head h3{overflow-wrap:break-word;min-width:0}

/* --- Canvas panel --- */
.cw-canvas-panel{position:sticky;top:16px}
.cw-progress{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-family:'Fredoka',cursive;font-size:.88rem;color:rgba(232,234,242,.7)}
.cw-progress-bar{flex:1;height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;position:relative}
.cw-progress-fill{height:100%;background:linear-gradient(90deg,#ff7700,#ffd166,#4ade80);border-radius:4px;transition:width .6s cubic-bezier(.34,1.56,.64,1);position:relative}
.cw-progress-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:cwShimmer 2s infinite}
@keyframes cwShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.cw-canvas-frame{border:2px solid #1e2733;border-radius:14px;overflow:hidden;background:#0a0e14;transition:border-color .4s,box-shadow .4s}
.cw-canvas-frame.cw-frame-glow{border-color:rgba(255,119,0,.5);box-shadow:0 0 30px rgba(255,119,0,.12),0 0 60px rgba(255,119,0,.05)}
.cw-canvas-frame iframe{display:block;width:416px;height:440px;border:none;background:#0a0e14}
.cw-canvas-hint{text-align:center;font-size:.75rem;color:rgba(232,234,242,.35);margin-top:8px;font-style:italic;transition:opacity .3s}
.cw-btn-dl{display:block;width:100%;margin-top:14px;padding:10px 0;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(232,234,242,.6);font-family:'Fredoka',cursive;font-size:.85rem;cursor:pointer;transition:all .25s;text-align:center;position:relative;overflow:hidden}
.cw-btn-dl:hover{background:rgba(255,119,0,.1);border-color:rgba(255,119,0,.3);color:#ffd166;transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,119,0,.1)}

/* --- Step cards --- */
.cw-step{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:22px 24px;margin-bottom:18px;transition:border-color .4s,box-shadow .4s,opacity .4s,transform .4s;animation:cwCardIn .5s ease both}
.cw-step.active{border-color:rgba(255,119,0,.45);box-shadow:0 0 40px rgba(255,119,0,.08),inset 0 1px 0 rgba(255,119,0,.06)}
.cw-step.completed{border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.02)}
.cw-step.completed.cw-just-done{animation:cwStepCelebrate .6s ease}
.cw-step.locked{opacity:.25;pointer-events:none;filter:grayscale(.5) blur(.4px);transform:scale(.985)}
@keyframes cwCardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes cwStepCelebrate{0%{transform:scale(1)}30%{transform:scale(1.015);box-shadow:0 0 50px rgba(74,222,128,.15)}100%{transform:scale(1)}}

.cw-step-head{display:flex;align-items:center;gap:10px}
.cw-step-num{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,119,0,.12);color:#ff7700;font-family:'Fredoka',cursive;font-weight:700;font-size:.88rem;flex-shrink:0;transition:all .3s}
.active .cw-step-num{animation:cwPulseNum 2s ease-in-out infinite;box-shadow:0 0 12px rgba(255,119,0,.2)}
.completed .cw-step-num{background:rgba(74,222,128,.15);color:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.15)}
@keyframes cwPulseNum{0%,100%{box-shadow:0 0 12px rgba(255,119,0,.2)}50%{box-shadow:0 0 20px rgba(255,119,0,.35)}}
.cw-step-head h3{font-family:'Fredoka',cursive;font-size:1.05rem;color:#e8eaf2}
.cw-activity{margin-left:auto;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;color:#7dd3fc;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.28);white-space:nowrap}
.completed .cw-step-head h3::after{content:' \2713';color:#4ade80;animation:cwCheckPop .3s ease}

.cw-goal{color:rgba(232,234,242,.5);font-size:.82rem;margin:6px 0 12px}
.cw-checkpoint{font-size:.8rem;line-height:1.5;margin:0 0 12px;padding:8px 12px;border-left:3px solid rgba(74,222,128,.5);background:rgba(74,222,128,.07);border-radius:6px;color:rgba(232,234,242,.8)}
.cw-checkpoint strong{color:#4ade80}

.cw-explain{list-style:none;padding:0;margin:0 0 14px}
.cw-explain li{padding:4px 0 4px 18px;position:relative;font-size:.85rem;color:rgba(232,234,242,.72);line-height:1.45}
.cw-explain li::before{content:'\25B8';position:absolute;left:0;color:#ff7700;font-size:.8rem}
.cw-explain code{background:rgba(255,119,0,.1);color:#ffc078;padding:1px 5px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.8rem;overflow-wrap:anywhere;word-break:break-word}

.cw-challenge{font-family:'Fredoka',cursive;font-size:.88rem;color:#ffd166;margin-bottom:8px}

.cw-editor{width:100%;min-height:90px;background:#161b22;color:#c9d1d9;border:1px solid #30363d;border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.55;padding:14px;resize:vertical;tab-size:2;outline:none;transition:border-color .3s,box-shadow .3s}
.cw-editor:focus{border-color:#ff7700;box-shadow:0 0 0 3px rgba(255,119,0,.1),0 0 20px rgba(255,119,0,.06)}
.cw-editor[readonly]{opacity:.65;cursor:default}

.cw-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.cw-btn{padding:8px 18px;border-radius:10px;border:none;font-family:'Fredoka',cursive;font-size:.82rem;cursor:pointer;transition:all .2s}
.cw-btn:hover{transform:translateY(-2px)}
.cw-btn:active{transform:translateY(0) scale(.97)}
.cw-btn-check{background:linear-gradient(135deg,#ff7700,#cc5500);color:#fff;box-shadow:0 3px 0 #993300,0 4px 12px rgba(255,119,0,.2);position:relative;overflow:hidden}
.cw-btn-check::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .4s}
.cw-btn-check:hover{box-shadow:0 4px 0 #993300,0 6px 20px rgba(255,119,0,.25);transform:translateY(-2px)}
.cw-btn-check:hover::before{left:100%}
.cw-btn-check.done{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 2px 0 #15803d;cursor:default;animation:cwDonePop .35s ease}
@keyframes cwDonePop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.cw-btn-show{background:rgba(255,255,255,.06);color:rgba(232,234,242,.65);border:1px solid rgba(255,255,255,.12)}
.cw-btn-show:hover{background:rgba(255,255,255,.1);color:#e8eaf2}
.cw-btn-reset{background:none;color:rgba(232,234,242,.4);border:1px solid rgba(255,255,255,.08);font-size:.78rem}

.cw-feedback{margin-top:10px;padding:9px 14px;border-radius:9px;font-size:.83rem;line-height:1.4;display:none}
.cw-feedback.success{display:block;background:rgba(74,222,128,.08);color:#4ade80;border:1px solid rgba(74,222,128,.18);animation:cwSuccessBounce .4s ease}
.cw-feedback.error{display:block;background:rgba(255,84,112,.08);color:#ff7b93;border:1px solid rgba(255,84,112,.15);animation:cwShake .4s ease}
@keyframes cwFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes cwSuccessBounce{0%{opacity:0;transform:translateY(-8px) scale(.95)}50%{transform:translateY(2px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cwShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-6px)}30%{transform:translateX(6px)}45%{transform:translateX(-4px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@keyframes cwCheckPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}

/* --- Fills --- */
.cw-fills{margin-top:16px;padding:16px;background:rgba(96,165,250,.04);border:1px solid rgba(96,165,250,.12);border-radius:12px}
.cw-fills-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-family:'Fredoka',cursive;font-size:.88rem;color:#bdd8ff}
.cw-fills-sentence{font-size:.88rem;line-height:1.8;color:rgba(232,234,242,.75)}
.cw-fill-blank{width:70px;background:#161b22;color:#ffc078;border:1px solid #30363d;border-radius:6px;padding:3px 8px;font-family:'JetBrains Mono',monospace;font-size:.8rem;text-align:center;outline:none;transition:border-color .2s}
.cw-fill-blank:focus{border-color:#60a5fa}
.cw-fill-blank.correct{border-color:#4ade80;background:rgba(74,222,128,.08);color:#4ade80}
.cw-fill-blank.wrong{border-color:#ff5470;background:rgba(255,84,112,.08)}
.cw-fills-actions{margin-top:10px;display:flex;gap:8px;align-items:center}
.cw-fills-fb{font-size:.82rem;margin-left:8px}

/* --- Quiz gate --- */
.cw-quiz{margin-top:16px;padding:16px;background:rgba(255,209,102,.03);border:1px solid rgba(255,209,102,.12);border-radius:12px}
.cw-quiz-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-family:'Fredoka',cursive;font-size:.88rem;color:#ffd166}
.cw-quiz-question{font-size:.88rem;line-height:1.45;color:rgba(232,234,242,.8);margin-bottom:10px}
.cw-quiz-question code{background:rgba(255,119,0,.1);color:#ffc078;padding:1px 5px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.8rem}
.cw-quiz-opts{display:flex;flex-direction:column;gap:6px}
.cw-quiz-opt{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);cursor:pointer;font-size:.85rem;color:rgba(232,234,242,.7);transition:all .2s;line-height:1.4}
.cw-quiz-opt:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);transform:translateX(4px)}
.cw-quiz-opt.selected{border-color:rgba(255,209,102,.4);background:rgba(255,209,102,.06);color:#e8eaf2;transform:translateX(4px)}
.cw-quiz-opt.correct{border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.1);color:#4ade80;animation:cwSuccessBounce .4s ease;box-shadow:0 0 16px rgba(74,222,128,.08)}
.cw-quiz-opt.wrong{border-color:rgba(255,84,112,.4);background:rgba(255,84,112,.06);color:#ff7b93;opacity:.5;animation:cwShake .4s ease}
.cw-quiz-letter{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08);font-family:'Fredoka',cursive;font-size:.75rem;flex-shrink:0;margin-top:1px}
.cw-quiz-actions{margin-top:12px;display:flex;gap:8px;align-items:center}
.cw-quiz-fb{font-size:.82rem;margin-top:8px}
.cw-quiz-fb.pass{color:#4ade80}
.cw-quiz-fb.fail{color:#ff7b93}

.cw-gate-msg{margin-top:12px;padding:10px 14px;border-radius:9px;font-size:.83rem;background:rgba(255,209,102,.06);color:#ffd166;border:1px solid rgba(255,209,102,.15);text-align:center;font-family:'Fredoka',cursive}

/* --- XP popup --- */
.cw-xp-popup{position:fixed;z-index:9999;pointer-events:none;font-family:'Fredoka',cursive;font-size:1.1rem;font-weight:700;color:#ffd166;text-shadow:0 2px 8px rgba(255,209,102,.4);animation:cwXpFloat 1.2s ease-out forwards}
@keyframes cwXpFloat{0%{opacity:1;transform:translateY(0) scale(1)}30%{transform:translateY(-20px) scale(1.15)}100%{opacity:0;transform:translateY(-60px) scale(.9)}}

/* --- Confetti --- */
.cw-confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998;overflow:hidden}
.cw-confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;animation:cwConfettiFall 1.4s cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes cwConfettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}100%{opacity:0;transform:translateY(100vh) rotate(720deg) scale(.3)}}

/* --- Milestone banner --- */
.cw-milestone{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:10000;background:rgba(13,17,23,.95);border:2px solid rgba(255,209,102,.4);border-radius:20px;padding:32px 48px;text-align:center;pointer-events:none;animation:cwMilestoneIn .6s .1s cubic-bezier(.34,1.56,.64,1) forwards}
.cw-milestone-icon{font-size:2.5rem;margin-bottom:8px}
.cw-milestone-text{font-family:'Fredoka',cursive;font-size:1.3rem;color:#ffd166}
.cw-milestone-sub{font-size:.85rem;color:rgba(232,234,242,.5);margin-top:4px}
@keyframes cwMilestoneIn{0%{transform:translate(-50%,-50%) scale(0);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes cwMilestoneOut{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(.8);opacity:0}}

/* --- Responsive --- */
@media(max-width:900px){
  .cw-layout{grid-template-columns:1fr;gap:16px;padding:0 16px 48px}
  .cw-canvas-panel{position:relative;top:auto;z-index:auto;background:#0d1117;padding:8px 0 10px;border-bottom:1px solid rgba(255,255,255,.06);order:-1}
  .cw-canvas-frame iframe{width:100%;height:220px}
  .cw-canvas-hint{font-size:.7rem;margin-top:4px}
  .cw-btn-dl{padding:6px 14px;font-size:.75rem}
}

/* A1363:canvas-back-link */
.cw-guide-link{display:inline-block;margin-top:10px;font-family:'Fredoka',cursive;font-size:.82rem;color:#7dd3fc;text-decoration:none;border:1px solid rgba(125,211,252,.3);background:rgba(56,189,248,.08);padding:7px 14px;border-radius:999px;transition:background .2s,transform .2s}
.cw-guide-link:hover{background:rgba(56,189,248,.16);transform:translateY(-1px)}

/* A1364:canvas-topbar - slim branded bar for every build-along */
.cw-topbar{display:flex;align-items:center;gap:14px;padding:10px 20px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.08)}
.cw-topbar-brand{display:inline-flex;align-items:center;gap:8px;color:#e8eaf2;text-decoration:none;font-family:'Fredoka',cursive;font-weight:700;font-size:.95rem}
.cw-topbar-brand img{height:26px;width:auto;border-radius:6px}
.cw-topbar-char{display:inline-flex;align-items:center;gap:6px;color:rgba(232,234,242,.7);font-size:.8rem;font-weight:700}
.cw-topbar-char img{width:20px;height:20px;border-radius:50%}
.cw-topbar-back{margin-left:10px;color:#7dd3fc;text-decoration:none;font-weight:700;font-size:.85rem;border:1px solid rgba(125,211,252,.3);background:rgba(56,189,248,.08);padding:6px 12px;border-radius:999px;transition:background .2s,transform .2s}
.cw-topbar-back:hover{background:rgba(56,189,248,.16);transform:translateY(-1px)}
.cw-topbar-prog{margin-left:auto;color:rgba(232,234,242,.75);text-decoration:none;font-weight:700;font-size:.85rem;padding:6px 4px;transition:color .2s}
.cw-topbar-prog:hover{color:#fff}
@media(max-width:640px){.cw-topbar{padding:8px 12px;gap:8px}.cw-topbar-brand span{display:none}.cw-topbar-char{font-size:.72rem}}

/* A1365:canvas-next */
.cw-next{margin-top:18px;padding:14px;border:1px solid rgba(125,211,252,.22);background:rgba(56,189,248,.06);border-radius:14px;display:flex;flex-direction:column;gap:8px}
.cw-next-head{margin:0 0 2px;font-family:'Fredoka',cursive;font-size:.82rem;color:#7dd3fc}
.cw-next-btn{display:block;text-align:center;text-decoration:none;font-weight:700;font-size:.82rem;color:#cdeafe;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);padding:9px 12px;border-radius:10px;transition:background .2s,transform .2s,color .2s}
.cw-next-btn:hover{background:rgba(56,189,248,.14);transform:translateY(-1px)}
.cw-next-btn--main{color:#ffd166;border-color:rgba(255,209,102,.3);background:rgba(255,119,0,.08)}
.cw-next-btn--main:hover{background:rgba(255,119,0,.16)}
.cw-next-btn--studio{color:#baf7cf;border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)}
.cw-next-btn--studio:hover{background:rgba(34,197,94,.18)}

/* A1382:project-passport - "continue from your earlier project" banner */
.cw-continue{margin:0 0 14px;padding:13px 14px;border:1px solid rgba(125,211,252,.28);background:rgba(56,189,248,.08);border-radius:14px}
.cw-continue-head{margin:0 0 3px;font-family:'Fredoka',cursive;font-size:.9rem;color:#7dd3fc}
.cw-continue-sub{margin:0 0 10px;font-size:.8rem;line-height:1.5;color:#cdeafe}
.cw-continue-sub b{color:#ffd166}
.cw-continue-actions{display:flex;flex-wrap:wrap;gap:8px}
.cw-continue button{font:inherit;font-weight:700;font-size:.78rem;padding:8px 12px;border-radius:9px;cursor:pointer;border:1px solid rgba(125,211,252,.35);background:rgba(56,189,248,.14);color:#cdeafe;transition:background .2s,transform .2s}
.cw-continue button:hover{background:rgba(56,189,248,.24);transform:translateY(-1px)}
.cw-continue .cw-continue-skip{background:transparent;border-color:rgba(255,255,255,.16);color:rgba(232,234,242,.7)}
.cw-continue.cw-continue-done .cw-continue-actions{display:none}

/* A1386:canvas-project-import - open a saved project onto any canvas */
.cw-import-note{margin:8px 0 0;font-size:.74rem;line-height:1.5;color:#9fd8ff;min-height:1em}
.cw-import-note:empty{display:none}
.cw-drop{outline:2px dashed rgba(125,211,252,.6);outline-offset:-6px;border-radius:14px}