/* vac_teach.css: styles for the classroom features (lesson panel, code helper, My apps, toasts, mode switch,
   emoji buttons, picture picker, pop-up cards). Loaded in <head> so nothing flashes. */
.vt-card{margin:8px 10px 4px;background:#16213f;border:1px solid #24325c;border-radius:14px;color:#e8edff;font-family:"Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif;font-size:14.5px;overflow:hidden}
.vt-card-h{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;user-select:none}
.vt-card-h b{font-size:14.5px;font-weight:900;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-card-h .vt-caret{color:#97a3c7;transition:transform .15s}.vt-card.closed .vt-caret{transform:rotate(-90deg)}
.vt-card.closed .vt-card-b{display:none}
.vt-card-b{padding:0 12px 12px;max-height:34vh;overflow-y:auto}
.vt-card-b::-webkit-scrollbar{width:7px}.vt-card-b::-webkit-scrollbar-thumb{background:#24325c;border-radius:7px}
.vt-prog{font-size:11px;font-weight:900;color:#06240f;background:#22c55e;border-radius:999px;padding:2px 8px}.vt-prog.part{background:#24325c;color:#c7d0f0}
.vt-card select{width:100%;margin:2px 0 8px;font:inherit;font-weight:700;color:#e8edff;background:#0d1530;border:1px solid #24325c;border-radius:9px;padding:6px 8px}
.vt-goal{color:#c7d0f0;margin:0 0 6px;line-height:1.35}
.vt-steps{margin:0 0 8px;padding-left:20px;line-height:1.45;color:#e8edff}.vt-steps li{margin:2px 0}
.vt-card code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:#0d1530;border:1px solid #24325c;border-radius:6px;padding:0 4px;color:#fbbf24;white-space:nowrap}
.vt-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.vt-btn{font:inherit;font-weight:700;font-size:13.5px;border-radius:9px;padding:6px 10px;border:1px solid #24325c;background:#1b2850;color:#e8edff;cursor:pointer}
.vt-btn:hover{border-color:#6d7cff}.vt-btn.go{background:#22c55e;border-color:#16a34a;color:#06240f}.vt-btn.sun{background:#fbbf24;border-color:#d97706;color:#3b2600}
.vt-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.vt-tag{font-size:13.5px;font-weight:800;background:#0d1530;border:1px solid #24325c;border-radius:999px;padding:4px 9px;cursor:pointer;color:#e8edff}
.vt-tag:hover{border-color:#fbbf24}
.vt-chk{list-style:none;margin:4px 0 0;padding:0}.vt-chk li{display:flex;gap:8px;align-items:flex-start;padding:3px 0;color:#c7d0f0}
.vt-chk li i{font-style:normal;width:18px;height:18px;flex:0 0 18px;border-radius:50%;border:2px solid #3b4a7a;display:inline-flex;align-items:center;justify-content:center;font-size:11px;margin-top:1px}
.vt-chk li.done{color:#e8edff}.vt-chk li.done i{background:#22c55e;border-color:#22c55e;color:#06240f}
.vt-bonus{margin-top:8px;padding:8px 10px;border-radius:10px;background:#3b2f0b;color:#fde68a;display:none}.vt-card.won .vt-bonus{display:block}
.vt-sec{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#97a3c7;margin:10px 0 2px}
.vt-help{margin:6px 10px 0;padding:9px 12px;border-radius:12px;background:#3b0d18;border:1px solid #7f1d1d;color:#fecdd3;font-family:"Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif;font-size:14.5px;line-height:1.45;display:none}
.vt-help.show{display:block}.vt-help b{color:#fff}.vt-help.ok{background:#0b2e1c;border-color:#166534;color:#bbf7d0}
.vt-help .vt-x{float:right;cursor:pointer;opacity:.7;margin-left:8px}
.ace_vt_err{position:absolute;background:rgba(244,63,94,.22);border-bottom:2px solid #f43f5e}
@keyframes vtpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.vt-pulse{animation:vtpulse 1.2s infinite}
.vt-auto{display:inline-flex;align-items:center;gap:4px;font:700 12px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif;color:#97a3c7;margin:3px 4px;cursor:pointer;user-select:none}
.vt-more{display:none;margin-top:4px;padding:6px 8px;border:1px dashed #24325c;border-radius:12px}.vt-more.open{display:block}
.vt-more .vt-grp{font:900 10px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif;letter-spacing:.08em;color:#97a3c7;text-transform:uppercase;margin:6px 2px 0}
#vt-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2147483000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:min(560px,92vw)}
.vt-toast{pointer-events:auto;background:#111a33;color:#fff;border:2px solid #6d7cff;border-radius:16px;padding:12px 18px;font:800 17px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.45);cursor:pointer;text-align:center;white-space:pre-wrap;animation:vtin .18s ease-out}
@keyframes vtin{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.vt-modal{position:fixed;inset:0;z-index:2147482000;background:rgba(5,10,25,.72);display:flex;align-items:center;justify-content:center;font-family:"Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif}
.vt-dlg{background:#111a33;color:#e8edff;border:1px solid #24325c;border-radius:20px;width:min(640px,94vw);max-height:88vh;overflow:auto;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.vt-dlg h2{margin:0 0 4px;font-size:24px;font-weight:900}.vt-dlg p.sub{margin:0 0 14px;color:#97a3c7}
.vt-dlg input{width:100%;box-sizing:border-box;font:700 18px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif;padding:12px 14px;border-radius:12px;border:2px solid #24325c;background:#0d1530;color:#fff;margin:4px 0 10px}
.vt-dlg input:focus{outline:none;border-color:#6d7cff}
.vt-list{display:flex;flex-direction:column;gap:6px;max-height:40vh;overflow:auto;margin-bottom:10px}
.vt-opt{text-align:left;font:700 15px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif;padding:10px 12px;border-radius:12px;border:1px solid #24325c;background:#16213f;color:#e8edff;cursor:pointer}
.vt-opt:hover,.vt-opt.sel{border-color:#6d7cff;background:#1b2850}.vt-opt small{display:block;color:#97a3c7;font-weight:600}
.vt-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:8px 0 14px}
.vt-app{border:1px solid #24325c;background:#16213f;border-radius:14px;overflow:hidden;cursor:pointer;text-align:left;color:#e8edff;padding:0;font:inherit}
.vt-app:hover{border-color:#6d7cff}.vt-app .th{height:84px;background:#0d1530 center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:34px}
.vt-app .tx{padding:8px 10px}.vt-app b{display:block;font-size:14px}.vt-app small{color:#97a3c7}
.vt-app.new .th{background:#22c55e;color:#06240f}
.vt-banner{margin:8px 10px 0;padding:9px 12px;border-radius:12px;background:#312e81;color:#e0e7ff;font:700 13px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif}
.vt-who{display:flex;align-items:center;gap:8px;margin:12px 14px 2px;color:#e8edff;font-family:"Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif}
.vt-who b{font-size:20px;font-weight:900;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes vtfall{to{transform:translateY(105vh) rotate(540deg);opacity:.9}}
#left_col .vt-card select{width:100% !important;max-width:none !important;min-width:0 !important;font-size:14px !important;padding:6px 8px !important;margin:2px 0 8px !important;border-radius:9px !important}
#left_col .vt-btn{font-size:13.5px !important;padding:6px 10px !important;margin:0 !important;border-radius:9px !important}
#left_col .vt-btn.sun{background:#fbbf24 !important;border-color:#d97706 !important;color:#3b2600 !important}
#left_col .vt-btn.go{background:#22c55e !important;border-color:#16a34a !important;color:#06240f !important}
#vt-more{margin:0 10px 6px}
#left_col h5.divider .vt-caret-t{font-size:14px !important;filter:none !important;min-width:26px;text-align:center;transition:transform .15s}
#left_col h5.divider .vt-caret-t.shut{transform:rotate(-90deg)}
#left_col h5.divider{cursor:pointer}
.vt-modes{display:flex;gap:4px;margin:10px 10px 2px;padding:4px;background:#0d1530;border:1px solid #24325c;border-radius:14px;font-family:"Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif}
.vt-modes button{flex:1;border:0 !important;background:transparent !important;color:#97a3c7 !important;font:800 13px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif !important;padding:8px 6px !important;margin:0 !important;border-radius:10px !important;cursor:pointer;box-shadow:none !important;line-height:1.2 !important}
.vt-modes button small{display:block;font-size:10px;font-weight:700;opacity:.8}
.vt-modes button:hover{color:#e8edff !important;background:#16213f !important}
#left_col #vt-modes button.on, #left_col #vt-modes button.on:hover{background:#6d7cff !important;color:#fff !important;border-color:#6d7cff !important}
#left_col button.vt-emo{font-size:20px !important;line-height:1 !important;padding:7px 10px !important;min-width:44px;position:relative}
#left_col button.vt-emo .vt-n{font:800 11px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif;margin-left:3px;vertical-align:middle}
#coding_controls_button_row > button.vt-emo::before{content:none !important}
#vt-tip{position:fixed;z-index:2147483002;background:#0d1530;color:#fff;border:1px solid #6d7cff;border-radius:8px;padding:4px 9px;font:800 12px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif;white-space:nowrap;pointer-events:none;display:none;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.vt-picker{background:rgba(5,10,25,.82) !important;display:none;align-items:flex-start;justify-content:center;padding:4vh 2vw;box-sizing:border-box;font-family:"Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif}
.vt-picker.vt-open{display:flex !important}
.vt-pic-card{background:#111a33;border:1px solid #24325c;border-radius:20px;width:min(980px,96vw);height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden;color:#e8edff}
.vt-pic-head{display:flex;align-items:center;gap:10px;padding:16px 18px 6px}
.vt-pic-head h3{margin:0;font-size:22px;font-weight:900;flex:1}
.vt-pic-search{display:flex;gap:8px;padding:6px 18px}
.vt-pic-search input{flex:1;font:700 17px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif !important;padding:11px 14px !important;border-radius:12px;border:2px solid #24325c;background:#0d1530;color:#fff;width:auto !important}
.vt-pic-search input:focus{outline:none;border-color:#6d7cff}
.vt-pic-btn{font:800 15px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif;border-radius:12px;border:0;padding:10px 16px;cursor:pointer;background:#6d7cff;color:#fff}
.vt-pic-btn.ghost{background:#16213f;border:1px solid #24325c;color:#e8edff}
.vt-pic-btn.go{background:#22c55e;color:#06240f}
.vt-pic-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 18px 10px}
.vt-pic-chips span{font:800 13px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif;background:#16213f;border:1px solid #24325c;border-radius:999px;padding:5px 11px;cursor:pointer}
.vt-pic-chips span:hover{border-color:#fbbf24}
.vt-pic-grid{flex:1;height:auto !important;width:auto !important;overflow:auto !important;padding:4px 18px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;align-content:start}
.vt-pic-grid > img{width:100% !important;height:120px !important;float:none !important;object-fit:contain;background:#0d1530;border:2px solid #24325c;border-radius:12px;cursor:pointer;transition:transform .1s,border-color .1s}
.vt-pic-grid > img:hover{border-color:#fbbf24;transform:scale(1.03)}
.vt-pic-pick{display:none;align-items:center;gap:12px;margin:0 18px 8px;padding:10px;border-radius:14px;background:#16213f;border:1px solid #6d7cff}
.vt-pic-pick.show{display:flex}
.vt-pic-pick img{width:72px;height:72px;object-fit:contain;background:#0d1530;border-radius:10px}
.vt-pic-pick .u{flex:1;min-width:0;font:600 12px ui-monospace,Menlo,monospace;color:#97a3c7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#share_page,#share_images,#instructions_page,#coding_instructions_page,#element_editor,#challenge_info{position:fixed !important;top:4vh !important;left:3vw !important;width:94vw !important;height:92vh !important;box-sizing:border-box;background:#111a33 !important;color:#e8edff !important;border:1px solid #24325c;border-radius:20px;box-shadow:0 0 0 100vmax rgba(5,10,25,.78),0 20px 60px rgba(0,0,0,.6) !important;padding:18px 22px !important;overflow:auto !important;font-family:"Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif !important;z-index:2147481000 !important}
#share_page h1,#share_images h1,#instructions_page h1,#coding_instructions_page h1,#element_editor h1,#challenge_info h1,#share_page h2,#share_images h2,#instructions_page h2,#coding_instructions_page h2,#element_editor h2,#challenge_info h2,#share_page h3,#share_images h3,#instructions_page h3,#coding_instructions_page h3,#element_editor h3,#challenge_info h3,#share_page h4,#share_images h4,#instructions_page h4,#coding_instructions_page h4,#element_editor h4,#challenge_info h4,#share_page h5,#share_images h5,#instructions_page h5,#coding_instructions_page h5,#element_editor h5,#challenge_info h5{color:#fff !important;font-family:"Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif !important;font-weight:900 !important}
#share_page h1,#share_images h1,#instructions_page h1,#coding_instructions_page h1,#element_editor h1,#challenge_info h1{font-size:24px !important}
#share_page p,#share_images p,#instructions_page p,#coding_instructions_page p,#element_editor p,#challenge_info p,#share_page li,#share_images li,#instructions_page li,#coding_instructions_page li,#element_editor li,#challenge_info li,#share_page span,#share_images span,#instructions_page span,#coding_instructions_page span,#element_editor span,#challenge_info span,#share_page label,#share_images label,#instructions_page label,#coding_instructions_page label,#element_editor label,#challenge_info label{color:#dbe2ff !important;font-family:"Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif !important}
#share_page a,#share_images a,#instructions_page a,#coding_instructions_page a,#element_editor a,#challenge_info a,#share_page p[onclick],#share_images p[onclick],#instructions_page p[onclick],#coding_instructions_page p[onclick],#element_editor p[onclick],#challenge_info p[onclick],#share_page span[onclick],#share_images span[onclick],#instructions_page span[onclick],#coding_instructions_page span[onclick],#element_editor span[onclick],#challenge_info span[onclick]{color:#a5b4fc !important;cursor:pointer}
#share_page .inset,#share_images .inset,#instructions_page .inset,#coding_instructions_page .inset,#element_editor .inset,#challenge_info .inset{background:#16213f !important;color:#dbe2ff !important;border:1px solid #24325c;border-radius:12px;padding:8px 12px;margin:6px 0 14px !important}
#share_page button,#share_images button,#instructions_page button,#coding_instructions_page button,#element_editor button,#challenge_info button{font:800 14px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif !important;color:#fff !important;background:#6d7cff !important;background-image:none !important;border:0 !important;border-radius:12px !important;padding:9px 16px !important;cursor:pointer;height:auto !important;box-shadow:0 3px 0 rgba(0,0,0,.25)}
#share_page button:hover,#share_images button:hover,#instructions_page button:hover,#coding_instructions_page button:hover,#element_editor button:hover,#challenge_info button:hover{filter:brightness(1.1)}
#share_page input,#share_images input,#instructions_page input,#coding_instructions_page input,#element_editor input,#challenge_info input,#share_page select,#share_images select,#instructions_page select,#coding_instructions_page select,#element_editor select,#challenge_info select,#share_page textarea,#share_images textarea,#instructions_page textarea,#coding_instructions_page textarea,#element_editor textarea,#challenge_info textarea{font:700 15px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif !important;color:#fff !important;background:#0d1530 !important;border:2px solid #24325c !important;border-radius:12px !important;padding:9px 12px !important;box-sizing:border-box}
#share_page img,#share_images img,#instructions_page img,#coding_instructions_page img,#element_editor img,#challenge_info img{border-radius:10px}
#share_page h1{font-size:20px !important;margin:18px 0 6px !important;text-align:center}
#share_page #app_link,#share_page #page_link{display:inline-block;margin-top:8px;font:700 16px ui-monospace,Menlo,monospace !important;color:#fbbf24 !important;background:#0d1530;border:1px solid #24325c;border-radius:10px;padding:8px 12px;word-break:break-all}
.vt-copy{margin-left:8px !important;background:#22c55e !important;color:#06240f !important;vertical-align:middle}
.swal2-container{background:rgba(5,10,25,.78) !important}
.swal2-popup{background:#111a33 !important;color:#e8edff !important;border:1px solid #24325c !important;border-radius:20px !important;font-family:"Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif !important;box-shadow:0 20px 60px rgba(0,0,0,.6) !important}
.swal2-title,.swal2-popup h1,.swal2-popup h2,.swal2-popup h3,.swal2-popup h4,.swal2-popup h5{color:#fff !important;font-family:"Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif !important;font-weight:900 !important}
.swal2-html-container,.swal2-popup p,.swal2-popup li,.swal2-popup td{color:#dbe2ff !important}
.swal2-popup button,.swal2-styled{font:800 14px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif !important;color:#fff !important;background:#6d7cff !important;background-image:none !important;border:0 !important;border-radius:12px !important;padding:9px 16px !important;box-shadow:0 3px 0 rgba(0,0,0,.25) !important}
.swal2-popup .swal2-cancel{background:#16213f !important;border:1px solid #24325c !important}
.swal2-popup input,.swal2-popup select,.swal2-popup textarea,.swal2-input{font:700 15px "Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif !important;color:#fff !important;background:#0d1530 !important;border:2px solid #24325c !important;border-radius:12px !important}
.swal2-icon{transform:scale(.7)}
.swal2-close{color:#97a3c7 !important}
.swal2-popup code,.swal2-popup pre{background:#0d1530 !important;color:#fbbf24 !important;border-radius:8px;padding:2px 6px}
.vt-confetti{position:fixed;top:-40px;z-index:2147483001;font-size:28px;pointer-events:none;animation:vtfall 2.6s ease-in forwards}
#vt-exit-fs{display:none;position:fixed;top:10px;right:14px;z-index:2147480000;font:700 15px "Atkinson Hyperlegible",-apple-system,Segoe UI,sans-serif;color:#fff;background:#f43f5e;border:0;border-radius:999px;padding:9px 16px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
#vt-exit-fs small{opacity:.8;font-weight:400}
#vt-exit-fs:hover{filter:brightness(1.08)}
#vt-kbd{display:flex;align-items:center;gap:8px;margin:6px 14px 2px;font:700 13.5px "Atkinson Hyperlegible",-apple-system,Segoe UI,sans-serif;color:#c7d0f0;cursor:pointer;user-select:none}
#vt-kbd input{width:34px;height:18px;appearance:none;-webkit-appearance:none;background:#24325c;border-radius:999px;position:relative;cursor:pointer;margin:0;transition:background .15s}
#vt-kbd input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
#vt-kbd input:checked{background:#6d7cff}#vt-kbd input:checked::after{left:18px}

/* kids pickers (Make picture / Make background / Little Learners tiles): a picture adds itself when tapped */
.vt-pic-grid > img, .vt-pic-grid > image{width:100% !important;height:120px !important;float:none !important;object-fit:contain;background:#0d1530;border:2px solid #24325c;border-radius:12px;cursor:pointer;transition:transform .1s,border-color .1s}
.vt-pic-grid > img:hover{border-color:#fbbf24;transform:scale(1.03)}
.vt-pic-hint{padding:0 18px 8px;color:#97a3c7;font:700 13.5px "Atkinson Hyperlegible",-apple-system,Segoe UI,sans-serif}

/* Blocks mode */
#left_col h5.vt-bhdr{margin-top:6px !important}
.vt-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;margin:2px 10px 6px;background:#0d1530;border:1px solid #24325c;border-radius:14px}
#left_col .vt-tools button{margin:0 !important;padding:7px 2px !important;background:transparent !important;border:0 !important;color:#97a3c7 !important;border-radius:10px !important;box-shadow:none !important;line-height:1.1 !important;display:flex;flex-direction:column;align-items:center;gap:2px}
#left_col .vt-tools button span{font-size:20px}
#left_col .vt-tools button small{font:700 12px "Atkinson Hyperlegible",-apple-system,Segoe UI,sans-serif}
#left_col .vt-tools button:hover{background:#16213f !important;color:#e8edff !important}
#left_col .vt-tools button.on,#left_col .vt-tools button.on:hover{background:#22c55e !important;color:#06240f !important}
#left_col #elems_row select{max-width:none !important;width:calc(100% - 20px) !important;margin:2px 10px 6px !important}
.vt-make{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 10px 6px}
#left_col .vt-make button{margin:0 !important;width:100% !important;height:auto !important;padding:12px 8px !important;font-size:15px !important;font-weight:700 !important;border:0 !important;border-radius:14px !important;color:#fff !important;box-shadow:0 3px 0 rgba(0,0,0,.28) !important;display:flex;align-items:center;justify-content:center;gap:8px}
#left_col .vt-make button span{font-size:20px}
#left_col .vt-make button:nth-child(1){background:#0ea5e9 !important}
#left_col .vt-make button:nth-child(2){background:#a855f7 !important}
#left_col .vt-make button:nth-child(3){background:#ec4899 !important}
#left_col .vt-make button:nth-child(4){background:#f97316 !important}
#left_col .vt-make button:nth-child(5){background:#14b8a6 !important}
#left_col .vt-make button:nth-child(6){background:#64748b !important}
#left_col .vt-make button:nth-child(7){background:#16a34a !important}
#left_col .vt-make button:hover{filter:brightness(1.08)}
.vt-bshare{margin:2px 10px 6px}
#elems_row #game_controls_button_row{height:auto !important;max-height:none !important}
#elems_row .vt-more{display:none}#elems_row .vt-more.open{display:block}
/* on-screen keyboard: the Variable Space box grows to fit the whole keyboard (it was clipped at 16vh) */
#vardeclarationeditorholder:has(.keyboard_div){height:auto !important;overflow:visible !important;border:0 !important}
#left_col .keyboard_div{height:auto !important;padding:4px 0}
/* Blocks: Start game is a normal-size button in its row */
#elems_row #game_controls_button_row > button{width:auto !important}

/* Blocks "make it" editor */
#element_editor.vt-ee{display:none;flex-direction:column;gap:10px}
#element_editor.vt-ee[style*="block"]{display:flex !important}
#element_editor.vt-ee > div:first-child{background:transparent !important;height:auto !important;display:flex;flex-direction:column;gap:10px}
#element_editor.vt-ee > div:first-child h3{background:transparent !important;text-align:left !important;font-size:22px !important;margin:0 !important}
#element_editor.vt-ee > div:first-child > div{display:flex;gap:4px;padding:4px;background:#0d1530;border:1px solid #24325c;border-radius:14px}
#element_editor.vt-ee .vt-ee-tab{flex:1;width:auto !important;float:none !important;height:auto !important;background:transparent !important;color:#97a3c7 !important;box-shadow:none !important;border-radius:10px !important;padding:8px !important}
#element_editor.vt-ee .vt-ee-tab.on{background:#6d7cff !important;color:#fff !important}
#element_editor.vt-ee #example_elem{height:auto !important;min-height:70px;background:#fff;border:0 !important;border-radius:14px;padding:12px !important;color:#111;display:flex;align-items:center;justify-content:center;position:relative;overflow:auto}
#element_editor.vt-ee #example_elem::before{content:"Preview";position:absolute;top:6px;left:10px;font:700 11px "Atkinson Hyperlegible",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
#element_editor.vt-ee #example_elem[data-empty]{font-size:0 !important}
#element_editor.vt-ee #example_elem[data-empty] *{font-size:0 !important}
#element_editor.vt-ee #example_elem[data-empty]::after{content:"Type some words below and they show up here";font:700 15px "Atkinson Hyperlegible",sans-serif;color:#94a3b8}
#element_editor.vt-ee #element_editor_options{height:auto !important;flex:1 1 auto;min-height:0;background:transparent !important;overflow:auto}
#element_editor.vt-ee #element_editor_options > div{height:auto !important;overflow:visible !important;gap:12px;width:100%}
#element_editor.vt-ee .col_1,#element_editor.vt-ee .col_2{background:#16213f !important;border:1px solid #24325c !important;border-radius:16px;padding:12px 14px !important;text-align:left !important}
#element_editor.vt-ee .col_1 > div,#element_editor.vt-ee .col_2 > div,#element_editor.vt-ee .col_2 > div > div{padding:6px 0 !important}
#element_editor.vt-ee label{display:block;font:700 14.5px "Atkinson Hyperlegible",sans-serif !important;color:#e8edff !important;margin:4px 0 6px}
#element_editor.vt-ee .col_1 button,#element_editor.vt-ee .col_2 button{width:auto !important;min-width:46px;padding:6px 10px !important;margin:2px !important;font-size:13px !important;background:#24325c !important;box-shadow:none !important}
#element_editor.vt-ee .col_1 button:hover,#element_editor.vt-ee .col_2 button:hover{background:#2f3f73 !important}
#element_editor.vt-ee button.vt-swatch{min-width:70px;border:2px solid transparent !important}
#element_editor.vt-ee .Highlight,#element_editor.vt-ee .Highlight2,#element_editor.vt-ee .Highlight3,#element_editor.vt-ee .Highlight4,#element_editor.vt-ee .Highlight5,#element_editor.vt-ee .Highlight6,#element_editor.vt-ee .Highlight7,#element_editor.vt-ee .Highlight8{outline:3px solid #fbbf24 !important;outline-offset:1px;border:0 !important}
#element_editor.vt-ee input{display:block;width:100% !important;margin-top:6px !important}
#element_editor.vt-ee .vt-ee-create,#element_editor.vt-ee .vt-ee-close{height:auto !important;min-height:0 !important;padding:12px 18px !important;font-size:16px !important}
#element_editor.vt-ee .vt-ee-create{background:#22c55e !important;color:#06240f !important}
#element_editor.vt-ee .vt-ee-close{background:#16213f !important;border:1px solid #24325c !important}
@media (max-width:900px){#element_editor.vt-ee #element_editor_options > div{grid-template-columns:1fr !important}}
#element_editor.vt-ee div:has(> .vt-ee-create){height:auto !important;margin:0 !important;gap:10px !important;flex:0 0 auto}

/* ── Lesson panel: "lesson notebook" look so it reads as instructions, not as builder controls (10/30/2026) ── */
#left_col #vt-lesson{
  background:#fffaf0 repeating-linear-gradient(#fffaf0 0 25px,#f3e7cf 25px 26px);
  border:0;border-left:8px solid #f59e0b;border-radius:6px 16px 16px 6px;
  color:#3b2f20;box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 0 0 1px #f1dfbd;
}
#left_col #vt-lesson .vt-card-h{background:#fde68a;border-radius:0 15px 0 0;padding:10px 12px}
#left_col #vt-lesson.closed .vt-card-h{border-radius:0 15px 15px 0}
#left_col #vt-lesson .vt-card-h b{color:#422006;font-size:15px}
#left_col #vt-lesson .vt-card-h .vt-caret{color:#92400e}
#left_col #vt-lesson .vt-prog.part{background:#fff7e0;color:#92400e;border:1px solid #f59e0b}
#left_col #vt-lesson .vt-card-b{padding:10px 14px 14px}
#left_col #vt-lesson .vt-card-b::-webkit-scrollbar-thumb{background:#e7c98f}
#left_col #vt-lesson select{background:#fff !important;color:#422006 !important;border:1px solid #e7c98f !important}
#left_col #vt-lesson .vt-goal{color:#422006;font-weight:700;font-size:15px;line-height:1.4;margin:2px 0 10px}
#left_col #vt-lesson .vt-steps{list-style:none;counter-reset:vtstep;padding-left:0;color:#3b2f20}
#left_col #vt-lesson .vt-steps li{counter-increment:vtstep;position:relative;padding-left:32px;margin:6px 0;line-height:1.45}
#left_col #vt-lesson .vt-steps li::before{content:counter(vtstep);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:#f59e0b;color:#fff;font:700 12.5px "Atkinson Hyperlegible",sans-serif;display:flex;align-items:center;justify-content:center}
#left_col #vt-lesson code{background:#fef3c7;border:1px solid #f5d77a;color:#92400e;font-weight:600}
#left_col #vt-lesson .vt-sec{color:#b45309;letter-spacing:.08em}
#left_col #vt-lesson .vt-tag{background:#fff;border:1px solid #e7c98f;color:#422006}
#left_col #vt-lesson .vt-tag:hover{border-color:#f59e0b;background:#fffbeb}
#left_col #vt-lesson .vt-btn{background:#fff !important;border:1px solid #e7c98f !important;color:#422006 !important}
#left_col #vt-lesson .vt-btn.sun{background:#f59e0b !important;border-color:#d97706 !important;color:#fff !important}
#left_col #vt-lesson .vt-chk li{color:#5b4a33}
#left_col #vt-lesson .vt-chk li i{border-color:#d6b98a;background:#fff}
#left_col #vt-lesson .vt-chk li.done{color:#14532d;font-weight:700}
#left_col #vt-lesson .vt-chk li.done i{background:#16a34a;border-color:#16a34a;color:#fff}
#left_col #vt-lesson .vt-bonus{background:#ecfccb;color:#365314;border:1px dashed #84cc16}
#left_col #vt-lesson.won{border-left-color:#16a34a}

/* Blocks editor, compact so all of "Edit look" fits without scrolling (10/30/2026) */
#element_editor.vt-ee{padding:14px 18px !important;gap:8px !important}
#element_editor.vt-ee > div:first-child{gap:8px !important}
#element_editor.vt-ee > div:first-child h3{font-size:19px !important}
#element_editor.vt-ee .vt-ee-tab{padding:6px !important}
#element_editor.vt-ee #example_elem{min-height:52px !important;padding:8px 12px !important}
#element_editor.vt-ee .col_1,#element_editor.vt-ee .col_2{padding:8px 12px !important}
#element_editor.vt-ee .col_1 > div,#element_editor.vt-ee .col_2 > div,#element_editor.vt-ee .col_2 > div > div{padding:3px 0 !important}
#element_editor.vt-ee label{font-size:13.5px !important;margin:2px 0 4px !important}
#element_editor.vt-ee .col_1 button,#element_editor.vt-ee .col_2 button{padding:4px 9px !important;margin:1px !important;font-size:12.5px !important;min-width:40px}
#element_editor.vt-ee button.vt-swatch{min-width:62px}
#element_editor.vt-ee input{padding:6px 10px !important;margin-top:4px !important;font-size:14px !important}
#element_editor.vt-ee .vt-ee-create,#element_editor.vt-ee .vt-ee-close{padding:10px 18px !important}

/* "Edit what happens when you click": power cards instead of the yellow/tan blocks */
#element_editor.vt-ee #kidscodeeditor[style*="block"]{display:flex !important;flex-direction:column;gap:8px;height:auto !important;flex:1 1 auto;min-height:0}
#element_editor.vt-ee #kidscodeeditor > h3{background:transparent !important;color:#97a3c7 !important;font:700 12.5px "Atkinson Hyperlegible",sans-serif !important;letter-spacing:.08em;text-transform:uppercase;margin:4px 0 0 !important;padding:0 !important}
#element_editor.vt-ee #kids_code_options{background:transparent !important;height:auto !important;flex:1 1 auto;min-height:120px;overflow:auto !important;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;align-content:start}
#element_editor.vt-ee #kids_code_options > div{display:flex !important;align-items:center;gap:10px;background:#16213f;border:1px solid #24325c;border-radius:12px;padding:6px 10px;width:auto !important;height:auto !important;float:none !important}
#element_editor.vt-ee #kids_code_options > div:hover{border-color:#fbbf24}
#element_editor.vt-ee #kids_code_options > div > div{width:auto !important;float:none !important;padding:0 !important}
#element_editor.vt-ee #kids_code_options .code_assign_button{min-width:52px;width:auto !important;height:auto !important;padding:8px 10px !important;margin:0 !important;font-size:18px !important;background:#24325c !important;box-shadow:none !important;white-space:nowrap}
#element_editor.vt-ee #kids_code_options .code_assign_button:hover{background:#6d7cff !important}
#element_editor.vt-ee #kids_code_options p{margin:0 !important;color:#dbe2ff !important;font:600 13.5px "Atkinson Hyperlegible",sans-serif !important;line-height:1.3}
#element_editor.vt-ee #kids_code_result{background:#0d1530 !important;border:1px dashed #3b4a7a;border-radius:12px;height:auto !important;min-height:70px;max-height:26vh;overflow:auto !important;padding:10px;color:#e8edff}
#element_editor.vt-ee #kids_code_result:empty::before{content:"Nothing yet. Tap a power above.";color:#7d89b0;font:600 13.5px "Atkinson Hyperlegible",sans-serif}
#element_editor.vt-ee .vt-ee-save{align-self:flex-start;background:#22c55e !important;color:#06240f !important;padding:8px 16px !important}
