:root{--bg: #f8fafc;--panel: #ffffff;--muted: #6b7280;--brand: #10b981;--btn-orange: #f59e0b;--btn-yellow: #fdc2007c}*,*:before,*:after{box-sizing:border-box}html,body,#app{height:100%;height:100dvh}body{margin:0;background:var(--bg);color:#0b1220;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";overscroll-behavior:none;background-attachment:fixed}html.no-scroll,body.no-scroll{height:100%;overflow:hidden}body.no-scroll #app{height:100vh;height:100dvh;overflow:hidden}.app-root{max-width:520px;margin:0 auto;padding:7px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}.screen{display:flex;flex-direction:column;gap:12px;height:100%;overflow-y:auto;touch-action:auto;position:relative}#system-messages{bottom:calc(16px + env(safe-area-inset-bottom,0px));top:auto!important;pointer-events:none}#system-messages>*{pointer-events:auto}*{-ms-overflow-style:none;scrollbar-width:none}*::-webkit-scrollbar{width:0;height:0}.screen--start{position:fixed;inset:0;height:100dvh;background-attachment:fixed;overflow:hidden;touch-action:none}.screen--lessons{overflow-y:auto;-webkit-overflow-scrolling:touch}.screen--game{touch-action:none;-webkit-user-select:none;user-select:none}.start-robot{width:300px;height:300px;margin:12dvh auto 4px;background:transparent!important;border-radius:0;animation:float 2.4s ease-in-out infinite}.gear-btn{position:absolute;top:6px;right:6px;width:112px;height:112px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:transparent;border:none;animation:gear-float 4s ease-in-out infinite}.gear-btn,.search-btn,.close-btn{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;outline:none}.gear-btn:active,.search-btn:active,.close-btn:active,.gear-btn:focus,.search-btn:focus,.close-btn:focus{background:transparent;box-shadow:none;border-color:transparent}.search-btn{position:absolute;top:100px;right:6px;width:112px;height:112px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:transparent;border:none;cursor:pointer;animation:gear-float-2 4.6s ease-in-out infinite;animation-delay:.6s;color:var(--btn-yellow)}.search-btn svg{width:64px;height:64px;stroke:var(--btn-yellow);fill:none;transform:scaleX(1);transform-origin:center}.search-btn svg path,.search-btn svg circle{stroke:var(--btn-yellow)}.search-btn svg circle{fill:none}@keyframes gear-float{0%{transform:translate(0) rotate(0)}20%{transform:translate(-2px,3px) rotate(-1deg)}40%{transform:translate(3px,-1px) rotate(1deg)}60%{transform:translate(-1px,2px) rotate(.6deg)}80%{transform:translate(2px,-3px) rotate(-.6deg)}to{transform:translate(0) rotate(0)}}@keyframes gear-float-2{0%{transform:translate(0) rotate(0)}15%{transform:translate(-3px,2px) rotate(-.8deg)}35%{transform:translate(2px,-2px) rotate(.9deg)}55%{transform:translate(-2px,1px) rotate(.4deg)}75%{transform:translate(1px,-2px) rotate(-.5deg)}to{transform:translate(0) rotate(0)}}button{background:#0b1220;color:#fff;border:none;border-radius:10px;padding:10px 12px}.btn{background:var(--btn-orange);color:#fff;border:none;border-radius:8px;padding:12px;font-size:.9em;cursor:pointer;transition:background .2s ease}.btn:hover{background:#d97706}.app-input{padding:10px 12px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;color:#0b1220;font-family:inherit;font-size:1em}.editor-host .app-input::placeholder{color:#9ca3af}.app-input:focus{outline:none;border-color:var(--btn-orange);box-shadow:0 0 0 2px #f59e0b33}.close-btn{position:absolute;top:6px;right:6px;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:transparent;border:none;cursor:pointer}.close-btn svg{stroke:var(--muted)}.close-btn:hover svg{stroke:#0b1220}.settings-description{text-align:center;font-weight:700;margin-bottom:8px}.settings-title{font-size:2.2em;font-weight:800;text-align:center;margin-bottom:20px}.welcome-text-container{text-align:center;font-size:1.4em;font-weight:700;min-height:1.5em;opacity:0;transition:opacity .5s ease-in-out;color:#6079ab97;margin-top:12px}.welcome-text-container.fade-in{opacity:1}.welcome-text-container.fade-out{opacity:0}.screen--search{padding-top:env(safe-area-inset-top,16px);padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}.course-list-container{display:flex;flex-direction:column;gap:10px;padding-bottom:20px}.course-tile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px;min-height:80px;border-radius:14px;border:1px solid #e5e7eb;background:#fff;box-shadow:0 6px 18px #0000000f;text-align:left;width:100%;cursor:pointer;transition:all .2s ease}.course-tile:hover{box-shadow:0 8px 24px #0000001a;transform:translateY(-2px)}.course-icon{width:50px;height:50px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#e0f2fe;color:#111;font-weight:700}.course-icon img{width:100%;height:100%;object-fit:contain}.launch-icon{margin-left:auto;width:48px;height:48px;border-radius:50%;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.launch-icon svg{stroke:currentColor}.launch-icon:hover svg{opacity:.9;transform:scale(1.02)}.course-tile--more{border:1px solid #e5e7eb;box-shadow:none;background:#fff;color:var(--btn-orange);font-size:1.1em;font-weight:600;transition:all .2s ease}.course-tile--more:hover{box-shadow:0 4px 12px #00000014;transform:translateY(-2px) scale(1.02)}.search-icon-creative svg{stroke:var(--btn-orange);transition:stroke .2s ease}.robot-search-icon{transform-box:fill-box;transform-origin:center;animation:sway 2.6s ease-in-out infinite}.robot-search-icon .eye{transform-box:fill-box;transform-origin:center;animation:look 2.6s ease-in-out infinite}@keyframes sway{0%,to{transform:translate(0)}50%{transform:translate(6px)}}@keyframes look{0%{transform:translate(-3px)}50%{transform:translate(3px)}to{transform:translate(-3px)}}.robot-search-icon .hand{transform-box:fill-box;transform-origin:center}.robot-search-icon .left-hand,.robot-search-icon .right-hand{opacity:.95}.robot-search-icon .hand circle{transform-origin:center}.robot-search-icon .hand.left-hand circle{animation:handPulseLeft 3.2s cubic-bezier(.22,.9,.29,1) infinite}.robot-search-icon .hand.right-hand circle{animation:handPulseRight 3.6s cubic-bezier(.22,.9,.29,1) infinite}@keyframes handPulseLeft{0%{transform:translate(-1px) scale(1) rotate(-1deg)}20%{transform:translate(-3px,-2px) scale(1.08) rotate(-8deg)}45%{transform:translate(0) scale(1.02) rotate(0)}70%{transform:translate(-2px,2px) scale(1.06) rotate(6deg)}to{transform:translate(-1px) scale(1) rotate(-1deg)}}@keyframes handPulseRight{0%{transform:translate(1px) scale(1) rotate(1deg)}20%{transform:translate(3px,-2px) scale(1.06) rotate(8deg)}45%{transform:translate(0) scale(1.02) rotate(0)}70%{transform:translate(2px,2px) scale(1.09) rotate(-6deg)}to{transform:translate(1px) scale(1) rotate(1deg)}}.robot-search-icon .wifi-wave{opacity:0;will-change:opacity;animation-fill-mode:both}.robot-search-icon .wifi-wave.w1{animation:wifi1 1.2s cubic-bezier(.22,.9,.29,1) infinite;animation-fill-mode:both}.robot-search-icon .wifi-wave.w2{animation:wifi2 1.2s cubic-bezier(.22,.9,.29,1) infinite;animation-fill-mode:both}.robot-search-icon .wifi-wave.w3{animation:wifi3 1.2s cubic-bezier(.22,.9,.29,1) infinite;animation-fill-mode:both}@keyframes wifi1{0%{opacity:0}8%{opacity:.12}18%{opacity:.28}30%{opacity:.56}44%{opacity:.86}64%{opacity:.86}82%{opacity:.36}to{opacity:0}}@keyframes wifi2{0%{opacity:0}22%{opacity:0}30%{opacity:.12}40%{opacity:.36}52%{opacity:.66}68%{opacity:.9}86%{opacity:.34}to{opacity:0}}@keyframes wifi3{0%{opacity:0}48%{opacity:0}56%{opacity:.12}66%{opacity:.4}78%{opacity:.74}92%{opacity:.9}to{opacity:0}}button:focus-visible{outline:3px solid #10b981;outline-offset:2px}@media (prefers-reduced-motion: reduce){.start-robot{animation:none}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.start-robot svg .robot-head{transform-box:fill-box;transform-origin:center;animation:head-sway 1.8s ease-in-out infinite alternate}.start-robot svg .robot-root{transform-box:fill-box;transform-origin:50% 35%}@keyframes head-sway{0%{transform:rotate(-6deg) translateY(0)}to{transform:rotate(6deg) translateY(1px)}}.start-robot svg .robot-eye{transform-box:fill-box;transform-origin:center;animation:blink 3s infinite}@keyframes blink{0%,6%,to{transform:scaleY(1)}3%{transform:scaleY(.08)}}.start-robot svg .robot-arm.left{transform-box:fill-box;transform-origin:right center;animation:arm-left 1.6s ease-in-out infinite alternate}.start-robot svg .robot-arm.right{transform-box:fill-box;transform-origin:left center;animation:arm-right 1.6s ease-in-out infinite alternate}@keyframes arm-left{0%{transform:rotate(-14deg)}to{transform:rotate(8deg)}}@keyframes arm-right{0%{transform:rotate(14deg)}to{transform:rotate(-8deg)}}.start-robot svg .robot-leg.left,.start-robot svg .robot-leg.right{transform-box:fill-box;transform-origin:center;animation:step 1.8s ease-in-out infinite}@keyframes step{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.start-robot svg .robot-antenna-tip{transform-box:fill-box;transform-origin:center;animation:tip-pulse 1.2s ease-in-out infinite}@keyframes tip-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.game-robot svg .robot-head{transform-box:fill-box;transform-origin:center;animation:head-sway 1.8s ease-in-out infinite alternate}.game-robot svg .robot-root{transform-box:fill-box;transform-origin:50% 35%}.game-robot svg .robot-eye{transform-box:fill-box;transform-origin:center;animation:blink 3s infinite}.game-robot svg .robot-arm.left{transform-box:fill-box;transform-origin:right center;animation:arm-left 1.6s ease-in-out infinite alternate}.game-robot svg .robot-arm.right{transform-box:fill-box;transform-origin:left center;animation:arm-right 1.6s ease-in-out infinite alternate}.game-robot svg .robot-leg.left,.game-robot svg .robot-leg.right{transform-box:fill-box;transform-origin:center;animation:step 1.8s ease-in-out infinite}.game-robot svg .robot-antenna-tip{transform-box:fill-box;transform-origin:center;animation:tip-pulse 1.2s ease-in-out infinite}.editor-host{padding:12px}.editor-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:980px;margin:0 auto 12px}.editor-robot{width:88px;height:88px}.editor-robot svg{width:100%;height:100%}.settings-editor-robot{width:56px;height:56px}.settings-editor-robot svg{width:100%;height:100%}.editor-columns{display:flex;gap:12px;width:100%;max-width:none;margin:0}.editor-column{flex:1 1 0;min-width:0;background:var(--panel);padding:12px;border-radius:12px;border:1px solid #e5e7eb;box-shadow:none}@media (max-width: 720px){.editor-columns{flex-direction:column}.editor-toolbar{padding:8px}}.editor-host{box-sizing:border-box;padding:18px;background:var(--bg);display:flex;flex-direction:column;height:100dvh}.drag-over{outline:2px dashed rgba(59,130,246,.6)}.dragging{opacity:.6}.editor-column .drag-over{outline-offset:4px}.drag-handle{width:18px;height:18px;background:repeating-linear-gradient(45deg,#cbd5e1 0 2px,transparent 2px 4px);border-radius:50%;margin-right:8px;flex:0 0 auto;cursor:grab}.drag-handle:active{cursor:grabbing}.editor-column .drag-handle{display:inline-block}.topic-wrap{padding:16px 12px}.task-row{padding:12px 8px}.topic-wrap .drag-handle,.task-row .drag-handle{width:36px;height:36px}.task-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}.task-actions .icon-btn{align-self:flex-end}.icon-btn{background:transparent;border:none;padding:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#ef4444;cursor:pointer}.icon-btn svg{display:block}.element-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:#fff;border:1px solid #e6eef9}.element-chip.small{padding:4px 6px;border-radius:6px}.element-icon{width:28px;height:28px;object-fit:contain;border-radius:6px}.element-placeholder{width:28px;height:28px;background:#e5e7eb;border-radius:6px}.element-placeholder.small{width:18px;height:18px}.chip-remove{background:transparent;border:0;color:#c43;font-weight:700;margin-left:8px;cursor:pointer;padding:2px 6px;border-radius:4px}.chip-remove:hover{background:#c4434314}.element-chip .chip-remove{margin-left:auto}.task-elements-dropzone{min-height:38px;padding:6px;border-radius:8px;background:transparent;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.task-elements-dropzone.drag-over{outline:2px dashed rgba(59,130,246,.6)}.insert-indicator{height:4px;background:#3b82f6e6;border-radius:2px;margin:4px 0}.task-elements-dropzone{background:#9cb2d0ae;border:1px solid rgba(15,23,42,.04)}.task-elements-dropzone .element-chip{background:#fff;border:1px solid #96a3b5;box-shadow:0 1px #10182805;padding:6px 8px;flex:0 0 auto}.task-elements-dropzone .element-chip.small{background:#fff;padding:4px 6px;flex:0 0 auto}.task-elements-dropzone .element-chip{margin-bottom:6px}.pool-zone{background:#f4f4ff99;border:1px dashed rgba(59,130,246,.3)}.editor-hint{font-size:12px;color:var(--muted);margin-bottom:8px}.topic-title-input{font-size:18px;font-weight:700;padding:10px}.robot-blue-btn{background:linear-gradient(180deg,#3b82f6,#2563eb);border:none;color:#fff}.topic-title-input{border:1px solid #064dc0af;border-radius:8px;background:linear-gradient(180deg,#3b82f605,#fff0)}.topic-title-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 6px #2563eb14}.elements-inputs{display:flex;flex-direction:column;gap:6px}.screen--login{display:flex;justify-content:center;align-items:center;padding:16px}.login-form{width:100%;max-width:380px;padding:24px;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:16px;box-shadow:0 8px 24px #0000001a;display:flex;flex-direction:column;gap:16px}.login-form h2{text-align:center;margin:0 0 8px;color:var(--color-text)}.login-form label{font-size:14px;font-weight:500;color:var(--color-text-secondary)}.login-form .app-input{width:100%;margin-top:4px}.login-form .btn{margin-top:8px;width:100%;justify-content:center}.form-link{text-align:center;font-size:14px;margin-top:16px;color:var(--color-text-secondary)}.form-link a{color:var(--color-primary);text-decoration:none;font-weight:500}.form-link a:hover{text-decoration:underline}.screen--profile{display:flex;justify-content:center;align-items:center;padding:16px}.profile-container{width:100%;max-width:420px;padding:24px;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:16px;box-shadow:0 8px 24px #0000001a;display:flex;flex-direction:column;gap:16px;text-align:center}.profile-container h2{margin:0 0 8px;color:var(--color-text)}.profile-name{font-size:20px;font-weight:600;color:var(--color-text);margin:0}.profile-email{color:var(--color-text-secondary);font-size:16px;word-break:break-all;margin:0}.profile-container p{color:var(--color-text-secondary);font-size:16px}.btn--danger{background-color:#ef4444;color:#fff;border:1px solid #dc2626}.btn--danger:hover{background-color:#dc2626}.top-right-controls{position:absolute;top:6px;right:6px;display:flex;gap:8px;z-index:10}.profile-btn{padding:8px;border-radius:50%;background-color:var(--color-button-bg);border:1px solid var(--color-border);box-shadow:0 4px 12px #00000014;cursor:pointer;transition:all .2s ease-in-out;width:48px;height:48px;display:flex;justify-content:center;align-items:center}.profile-btn svg{width:24px;height:24px;color:var(--color-primary)}.screen--settings{display:flex;justify-content:center;align-items:center;padding:16px}.settings-container{width:100%;max-width:420px;padding:24px;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:16px;box-shadow:0 8px 24px #0000001a;display:flex;flex-direction:column;gap:16px;text-align:center}.settings-container h2{margin:0 0 8px;color:var(--color-text)}.btn--secondary{background-color:var(--color-button-bg);color:var(--color-text);border:1px solid var(--color-border)}.btn--secondary:hover{background-color:var(--color-bg-hover)}.screen--settings-revamped{padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.settings-title{font-size:24px;font-weight:700;margin-bottom:4px}.settings-description{font-size:16px;color:var(--color-text-secondary);margin-bottom:16px}.settings-content{width:100%;max-width:520px;display:flex;flex-direction:column;gap:20px}.settings-url-row{display:flex;flex-direction:column;gap:8px}.settings-editor-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px}.settings-editor-robot{width:56px;height:56px;margin:0}.close-btn{position:fixed;right:8px;top:8px;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid #e5e7eb;box-shadow:0 2px 8px #0000001a;z-index:10;display:flex;align-items:center;justify-content:center;cursor:pointer}